/* Bien thiet ke - do tu ban dung. Bang day du: muc 2 cua docs/ke-hoach/Mo-ta-cong-viec-FE-*.docx.
   Moi file CSS khac dung bien, khong viet lai ma mau. Co chu dung rem de chuc nang "Chu to" phong duoc. */
:root {
  /* Mau thuong hieu */
  --c-brand: #5C0F0B;
  --c-brand-600: #8E1D16;
  --c-brand-900: #3F0806;
  --c-danger: #C62828;
  --c-danger-600: #A31F1F;
  --c-accent: #E53935;
  /* Chu tren nen do */
  --c-on-brand: #FBE3E0;
  --c-on-brand-accent: #FFB4AC;
  --c-on-brand-muted: #F5C9C4;
  --c-on-brand-soft: #F5C2BC;
  /* Nen hong nhat */
  --c-tint: #FDECEA;
  --c-tint-border: #F3C5C0;
  /* Bang mau ban dung v2 (Portal v2, app.css cua docs/ban-dung-v2). Cac trang v2 dung nhom --v2-*. */
  --v2-surface: #FFFFFF;
  --v2-on-strong: #FFFFFF; /* chu tren nen dam (navy, blue, stop) */
  --v2-sunk: #EBEFF5;
  --v2-line: #D6DEE8;
  --v2-line-2: #AEBACB;
  --v2-ink: #0E1E30;
  --v2-ink-2: #4A5A6E;
  --v2-navy: #123B63;
  --v2-navy-soft: #E3ECF5;
  --v2-blue: #0B6BCB;
  --v2-blue-soft: #E2EEFB;
  --v2-stop: #B8431A;
  --v2-stop-soft: #FCEBE3;
  --v2-hold: #7A5300;
  --v2-hold-soft: #FFF1CC;
  --v2-neutral: #4A586B;
  --v2-neutral-soft: #E7ECF2;
  --v2-yellow: #FFC94D;
  --v2-yellow-soft: #FFF4D6;
  --v2-fig-bg: #0B1B30;
  --v2-on-yellow: #3D2E00;
  --v2-orange: #D9531E;
  --v2-green: #1E7B4D;
  --v2-green-soft: #E3F3EA;
  --v2-stop-line: rgba(184, 67, 26, .25);
  --v2-stop-line-soft: rgba(184, 67, 26, .22);
  --v2-shadow: 0 1px 2px rgba(18, 59, 99, .06), 0 6px 18px rgba(18, 59, 99, .07);
  --v2-bg: #F5F7FA;
  --v2-on-hold: #3D2E00;
  --v2-f-ui: "Roboto", Arial, Helvetica, sans-serif;
  --v2-r: 0.875rem;
  --v2-blue-line: rgba(11, 107, 203, .18);
  --v2-shadow-sm: 0 1px 3px rgba(18, 59, 99, .06);
  --v2-shadow-blue: 0 2px 8px rgba(11, 107, 203, .08);
  --v2-shadow-btn: 0 2px 4px rgba(11, 107, 203, .15);
  --v2-shadow-hero: 0 9px 26px rgba(11, 27, 48, .12);
  --v2-backdrop: rgba(14, 30, 48, .5);

  /* Chu */
  --c-text: #1E1E1E;
  --c-text-2: #3A3A3A;
  --c-text-3: #5C5C5C;
  --c-text-4: #6B6B6B;
  /* Vien va nen */
  --c-border: #DDE4ED;
  --c-border-input: #C9CFD8;
  --c-bg: #FFFFFF;
  --c-bg-soft: #F7F7F7;
  --c-bg-soft-2: #F3F3F3;
  /* Trang thai dung */
  --c-ok: #1B7F3B;
  --c-ok-bg: #EEF8F0;
  --c-ok-border: #BFE0C8;
  --c-disabled: #E7DCDB;
  --c-track: #F1E4E2; /* nen thanh tien do */
  --c-lock-bg: #FAFAFA; /* hang chuyen de bi khoa */
  --c-lock-n: #EFEFEF;
  --c-lock-text: #8A8A8A;

  /* Chu */
  --font: "Roboto", Arial, Helvetica, sans-serif;
  --fs-hero: 3.5rem;      /* 56px */
  --fs-h2: 2.25rem;       /* 36px */
  --fs-h2-card: 2rem;     /* 32px */
  --fs-question: 1.4375rem; /* 23px */
  --fs-h3: 1.375rem;      /* 22px */
  --fs-lead: 1.125rem;    /* 18px */
  --fs-body: 1rem;        /* 16px */
  --fs-small: 0.875rem;   /* 14px */
  --fs-eyebrow: 0.8125rem; /* 13px */

  /* Bo cuc */
  --container: 1200px;
  --gutter: 24px;
  --section-y: 96px;
  --header-h: 72px;
  /* Responsive contract: mobile <=600px, tablet 601-1100px. */
  --fs-page-title: var(--fs-hero);
  --fs-section-title: var(--fs-h2);
  --fs-card-title: var(--fs-h3);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --layout-gap: 32px;
  --card-padding: 24px;
  --control-height: 48px;
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 14px;
  --shadow-card: 0 2px 12px rgba(30, 30, 30, .06);
  --shadow-float: 0 8px 28px rgba(30, 30, 30, .12);
  --shadow-hover: 0 18px 36px rgba(30, 30, 30, .15);
  --ease: .25s ease;
}

@media (max-width: 1100px) {
  :root {
    --gutter: 32px;
    --section-y: 56px;
    --fs-hero: 2.75rem;
    --fs-h2: 2rem;
    --fs-h3: 1.375rem;
    --fs-lead: 1.125rem;
    --header-h: 66px;
  }
}
@media (max-width: 600px) {
  :root {
    --gutter: 20px;
    --section-y: 40px;
    --layout-gap: 24px;
    --card-padding: 20px;
    --fs-hero: 2rem;
    --fs-h2: 1.625rem;
    --fs-h3: 1.25rem;
    --fs-lead: 1rem;
    --fs-eyebrow: .6875rem;
  }
}