/* ===== Font Be Vietnam Pro – tự host (OFL-1.1, xem fonts/OFL.txt) ===== */
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/be-vietnam-pro-vietnamese-400-normal.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/be-vietnam-pro-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/be-vietnam-pro-vietnamese-600-normal.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/be-vietnam-pro-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/be-vietnam-pro-vietnamese-700-normal.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/be-vietnam-pro-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ===== Design tokens =====
   Bộ nhận diện Đông Đô: chỉ 5 màu (đã chốt 19/10/2026) + đỏ cảnh báo y tế (đã chốt 22/10/2026).
   60% nền (trắng, ice) – 30% deep – 10% teal/mint. */
:root{
  --brand-deep:#084B55;   /* chữ, tiêu đề, nút chính – 9,0:1 trên trắng */
  --brand-teal:#35B4C2;   /* điểm nhấn trang trí: viền, gạch, số bước */
  --brand-mint:#8DE0E2;   /* nền nhấn nhạt */
  --brand-ice:#E7F8F9;    /* nền trang */
  --white:#FFFFFF;
  --alert:#A3262A;        /* chỉ dùng cho cảnh báo y tế */

  --bg:var(--brand-ice);
  --surface:var(--white);
  --text:var(--brand-deep);
  --btn-bg:var(--brand-deep);
  --btn-fg:var(--white);
  --focus:var(--brand-deep);

  /* Màn hình test: cố định, không phối màu */
  --test-bg:#FFFFFF;
  --test-ink:#000000;

  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:40px;--s6:48px;
  --r:16px;--r-sm:8px;
  --tap:48px;
  --font:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-size:1.0625rem;line-height:1.6;color:var(--text);background:var(--bg);overflow-x:hidden}
img,svg{display:block;max-width:100%}
[hidden]{display:none!important}
h1,h2,h3{line-height:1.25;margin:0 0 var(--s1);font-weight:700;letter-spacing:-.01em}
h1{font-size:clamp(1.75rem,1.3rem + 2vw,2.5rem)}
h2{font-size:1.25rem;margin-top:var(--s4)}
h3{font-size:1.0625rem}
p{margin:0 0 var(--s2)}
a{color:var(--text);text-underline-offset:3px}
strong{font-weight:700}
:focus{outline:none}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
h1:focus-visible{outline:none}

.skip{position:absolute;left:var(--s2);top:-100px;z-index:10;background:var(--btn-bg);color:var(--btn-fg);padding:var(--s1) var(--s2);border-radius:var(--r-sm);font-weight:600}
.skip:focus{top:var(--s1)}

.wrap{width:100%;max-width:760px;margin:0 auto;padding:0 var(--s2)}

/* ===== Đầu trang ===== */
.site-head{background:var(--white);border-bottom:4px solid var(--brand-teal)}
.head-in{padding-top:var(--s2);padding-bottom:var(--s2)}
.logo{width:auto;height:40px}
@media (min-width:768px){.logo{height:52px}}

main{padding-top:var(--s4);padding-bottom:var(--s6)}

/* ===== Trang chủ ===== */
.hero{background:var(--surface);border-radius:var(--r);padding:var(--s4) var(--s3);border-top:6px solid var(--brand-teal);margin-bottom:var(--s2)}
.lead{font-size:1.125rem;max-width:60ch}
.eyebrow{margin:0 0 var(--s1);font-weight:600;font-size:.9375rem;letter-spacing:.04em;text-transform:uppercase}

.steps{list-style:none;margin:0 0 var(--s2);padding:0;display:grid;gap:var(--s2)}
.steps li{display:flex;gap:var(--s2);align-items:flex-start;background:var(--surface);border-radius:var(--r);padding:var(--s2) var(--s3)}
.steps p{margin:0}
.num{flex:none;width:var(--s5);height:var(--s5);border-radius:50%;background:var(--brand-mint);color:var(--brand-deep);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.125rem}
@media (min-width:768px){.steps{grid-template-columns:repeat(3,1fr)}.steps li{flex-direction:column}}

.card{background:var(--surface);border-radius:var(--r);padding:var(--s3);margin:var(--s2) 0}
.card > h2:first-child{margin-top:0}
.list{margin:0;padding-left:1.25rem}
.list li{margin:var(--s1) 0}
.note{font-size:.9375rem}
.center{text-align:center}

/* Cảnh báo: màu + biểu tượng + chữ (không dùng màu làm tín hiệu duy nhất) */
.alert{display:flex;gap:var(--s2);background:var(--white);border:2px solid var(--alert);border-left-width:8px;border-radius:var(--r);padding:var(--s3);margin:var(--s3) 0}
.alert h2{margin-top:0;color:var(--alert);font-size:1.125rem}
.alert-ic{flex:0 0 32px;width:32px;height:32px;fill:var(--alert)}
.alert-contact{margin:var(--s2) 0 0;font-weight:600}

.faq details{background:var(--surface);border-radius:var(--r-sm);margin:var(--s1) 0}
.faq summary{cursor:pointer;min-height:var(--tap);padding:var(--s2) var(--s5) var(--s2) var(--s2);font-weight:600;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:var(--s2);top:50%;transform:translateY(-50%);font-size:1.5rem;font-weight:400;line-height:1}
.faq details[open] summary::after{content:"−"}
.faq details p{padding:0 var(--s2) var(--s2);margin:0}

/* ===== Nút ===== */
.btn{font:inherit;font-weight:600;font-size:1.0625rem;line-height:1.2;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:var(--s1);min-height:var(--tap);min-width:var(--tap);padding:var(--s1) var(--s3);border-radius:var(--r-sm);border:2px solid var(--btn-bg);text-decoration:none;text-align:center;-webkit-tap-highlight-color:transparent}
.btn-pri{background:var(--btn-bg);color:var(--btn-fg)}
.btn-pri:hover{background:var(--white);color:var(--btn-bg)}
.btn-sec{background:var(--white);color:var(--btn-bg)}
.btn-sec:hover{background:var(--brand-ice)}
.btn-lg{min-height:56px;padding:var(--s2) var(--s4);font-size:1.125rem}
.btn-sm{min-height:44px;padding:var(--s1) var(--s2);font-size:1rem}
.btn-sq{padding:0;width:var(--tap);font-size:1.5rem}
.hero .btn-lg{width:100%}
@media (min-width:480px){.hero .btn-lg{width:auto}}

.actions{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}
.actions .btn-pri{flex:1 1 auto}
@media (min-width:600px){.actions{justify-content:flex-end}.actions .btn-pri{flex:0 0 auto}}
.actions-col{flex-direction:column}
.actions-col .btn{width:100%}
@media (min-width:600px){.actions-col{flex-direction:row;justify-content:flex-start}.actions-col .btn{width:auto}}

/* ===== Hiệu chuẩn ===== */
/* Kéo vùng khung ra sát mép thẻ trắng để điện thoại 360 px đủ chỗ cho cạnh ngắn 53,98 mm (~300 px) */
.cardbox-area{overflow:hidden;margin:var(--s3) calc(-1 * var(--s3))}
.cardbox{display:flex;align-items:center;justify-content:center;background:var(--brand-mint);border:2px solid var(--brand-deep);border-radius:8px;font-weight:700}
.cal-ctl{display:flex;align-items:center;gap:var(--s2)}
.cal-ctl input{flex:1;min-width:0;height:var(--tap);accent-color:var(--brand-deep);cursor:pointer}

/* ===== Thiết lập ===== */
fieldset{border:0;margin:0 0 var(--s3);padding:0}
fieldset:last-child{margin-bottom:0}
legend{font-weight:700;margin-bottom:var(--s1);padding:0}
.opt{display:flex;align-items:center;gap:var(--s2);min-height:var(--tap);padding:var(--s1) var(--s2);border:2px solid var(--brand-deep);border-radius:var(--r-sm);margin:var(--s1) 0;cursor:pointer}
.opt input{width:22px;height:22px;margin:0;accent-color:var(--brand-deep);flex:0 0 auto}
.opt em{font-style:normal;font-weight:400}
.opt:has(input:checked){background:var(--brand-ice);font-weight:600}

/* ===== Màn hình kiểm tra: nền trắng, chữ E đen tuyền ===== */
body.testing{background:var(--test-bg)}
body.testing .site-head,body.testing .site-foot{display:none}
body.testing main{max-width:none;padding-top:var(--s2);padding-bottom:var(--s2)}
.screen-test{background:var(--test-bg);min-height:calc(100vh - var(--s4));min-height:calc(100dvh - var(--s4));display:flex;flex-direction:column}
.test-bar{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s2);max-width:760px;width:100%;margin:0 auto}
.test-bar h1{font-size:1.5rem;margin:0}
.test-meta{margin:0;font-size:1rem}
.stage{flex:1;display:flex;align-items:center;justify-content:center;background:var(--test-bg);min-height:120px;margin:var(--s2) 0}
.stage svg{display:block;max-width:none}
.ask{text-align:center;margin:0 0 var(--s1);font-size:1.125rem}
.pad{display:grid;grid-template-columns:repeat(3,80px);grid-template-rows:repeat(3,80px);gap:var(--s1);justify-content:center;margin:var(--s1) 0}
.pb{font:inherit;font-weight:600;cursor:pointer;border:2px solid var(--btn-bg);border-radius:var(--r);background:var(--btn-bg);color:var(--btn-fg);display:flex;align-items:center;justify-content:center;padding:0;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.pb svg{width:40px;height:40px;fill:currentColor}
.pb:active{transform:scale(.96)}
.pb.up{grid-column:2;grid-row:1}.pb.left{grid-column:1;grid-row:2}.pb.right{grid-column:3;grid-row:2}.pb.down{grid-column:2;grid-row:3}
.pb.dk{grid-column:2;grid-row:2;background:var(--white);color:var(--btn-bg);font-size:.9375rem;line-height:1.2}
@media (max-width:359px){.pad{grid-template-columns:repeat(3,72px);grid-template-rows:repeat(3,72px)}}

/* ===== Kết quả ===== */
.res{display:grid;grid-template-columns:1fr;gap:var(--s2);margin:var(--s2) 0}
@media (min-width:480px){.res{grid-template-columns:1fr 1fr}}
.box{background:var(--surface);border-radius:var(--r);padding:var(--s3);text-align:center;border-top:6px solid var(--brand-teal)}
.box .eye{font-weight:600;margin:0}
.box .big{font-size:2.5rem;font-weight:700;line-height:1.2;margin:var(--s1) 0}
.tag{display:inline-flex;align-items:center;gap:var(--s1);padding:4px var(--s2);border-radius:999px;font-weight:600;font-size:.9375rem;border:2px solid currentColor}
.tag svg{width:18px;height:18px;fill:currentColor}
.tag-ok{background:var(--brand-deep);color:var(--white);border-color:var(--brand-deep)}
.tag-warn{background:var(--brand-mint);color:var(--brand-deep)}
.tag-bad{background:var(--white);color:var(--alert)}
#advice p:last-child{margin-bottom:0}
.contact{margin-top:var(--s2);padding-top:var(--s2);border-top:2px solid var(--brand-ice)}
.contact p{margin:0 0 var(--s1)}

/* ===== Chân trang ===== */
.site-foot{background:var(--white);border-top:4px solid var(--brand-teal);padding:var(--s4) 0;font-size:.9375rem}
.site-foot p{margin:0 0 var(--s1)}

.toast{position:fixed;left:50%;bottom:var(--s3);transform:translateX(-50%);max-width:calc(100% - var(--s4));background:var(--brand-deep);color:var(--white);padding:var(--s2) var(--s3);border-radius:var(--r-sm);font-weight:600;z-index:20}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.pb:active{transform:none}}
@media print{.site-head,.actions,.skip{display:none}}