/* 9well — theme "Care" (31/10/2026) — lớp trình bày sáng kiểu y tế cao cấp.
   Nguồn thiết kế: brief ChatGPT (art direction) 31/10 — teal chuyên môn #126970, CTA đỏ đất #B9381D,
   nền trắng/xanh nhạt, tiêu đề Plus Jakarta Sans, thân Be Vietnam Pro.
   Nạp SAU style.css; chỉ ghi đè trình bày. Nội dung, URL, canonical, JS giữ nguyên.
   Mặc định LUÔN SÁNG; chế độ tối chỉ khi người dùng bấm nút (data-theme="dark"). */
:root,
:root:not([data-theme="dark"]){
  --ink:#172B3A; --indigo:#126970; --violet:#126970; --ember:#B9381D;
  --bg:#F7FAF9; --bg-2:#FFFFFF; --bg-3:#EAF2F0; --bg-4:#DCEFEA;
  --line:#DCE6E5; --line-strong:#C3D3D1;
  --fg:#172B3A; --fg-2:#3D5363; --fg-3:#506575;
  --accent:#B9381D; --accent-soft:#FBECE7; --cta:#B9381D; --cta-hover:#982C17;
  --teal:#126970; --teal-hover:#0B5158; --teal-soft:#DCEFEA;
  --violet-fg:#126970; --violet-soft:#DCEFEA;
  --ok:#246C52; --ok-soft:#E8F5EE; --warn:#9B4C15; --warn-soft:#FFF3E3; --amber:#9B4C15;
  --shadow:0 1px 2px rgba(23,43,58,.04), 0 6px 24px rgba(23,43,58,.06);
  --shadow-hover:0 12px 32px rgba(23,43,58,.10);
  --f-display:"Plus Jakarta Sans","Be Vietnam Pro","Segoe UI",system-ui,-apple-system,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="dark"]){
    --bg:#F7FAF9; --bg-2:#FFFFFF; --bg-3:#EAF2F0; --bg-4:#DCEFEA; --line:#DCE6E5; --line-strong:#C3D3D1;
    --fg:#172B3A; --fg-2:#3D5363; --fg-3:#506575;
    --accent:#B9381D; --accent-soft:#FBECE7; --violet-fg:#126970; --violet-soft:#DCEFEA;
    --ok:#246C52; --ok-soft:#E8F5EE; --warn:#9B4C15; --warn-soft:#FFF3E3; --amber:#9B4C15;
    --shadow:0 1px 2px rgba(23,43,58,.04), 0 6px 24px rgba(23,43,58,.06);
    color-scheme:light;
  }
}
:root[data-theme="dark"]{
  --ink:#0B1A22; --indigo:#0E4F55; --violet:#126970;
  --bg:#0F1D24; --bg-2:#15262E; --bg-3:#1C313A; --bg-4:#233B45; --line:#26404A; --line-strong:#355662;
  --fg:#ECF3F2; --fg-2:#B9CBCB; --fg-3:#93AAAC;
  --accent:#FF8A6B; --accent-soft:#2B1E1A; --violet-fg:#6FD0C6; --violet-soft:#163A3D;
  --teal:#2A9AA0; --teal-hover:#33AEB4; --teal-soft:#163A3D;
  --ok:#6FCBB2; --ok-soft:#142A26; --warn:#E0B060; --warn-soft:#2A2113; --amber:#E0B060;
  color-scheme:dark;
}

/* ---------- chữ ---------- */
h1,h2,h3,h4{font-family:var(--f-display); font-weight:700; letter-spacing:-.02em}
.hero h1{font-weight:800; letter-spacing:-.03em; line-height:1.1}
.hero h1 em,.sechead h1 em,.sechead h2 em{color:var(--teal)}
.eyebrow{color:var(--teal); letter-spacing:.1em}
:root[data-theme="dark"] .eyebrow{color:var(--violet-fg)}
a{color:inherit}
.post a:not(.btn):not(.card){color:var(--teal)}
:root[data-theme="dark"] .post a:not(.btn):not(.card){color:var(--violet-fg)}
:focus-visible{outline:3px solid rgba(18,105,112,.45); outline-offset:2px}

/* ---------- thanh riêng tư + Thoát nhanh ---------- */
#exitbar,
:root:not([data-theme="dark"]) #exitbar{background:var(--bg-3); color:var(--fg-2); border-bottom:1px solid var(--line)}
@media (prefers-color-scheme: dark){:root:not([data-theme="dark"]) #exitbar{background:var(--bg-3)}}
:root[data-theme="dark"] #exitbar{background:#0B1A22; color:var(--fg-2)}
#exitbar .privnote,#exitbar .privnote span{color:var(--fg-2)}
.exitbtn{background:var(--teal); color:#fff}
.exitbtn:hover{background:var(--teal-hover); filter:none}

/* ---------- header ---------- */
header.site{background:color-mix(in srgb, var(--bg-2) 92%, transparent); box-shadow:0 2px 16px rgba(23,43,58,.04)}
.brand span{color:var(--teal)}
nav.main a{color:var(--fg-2)}
nav.main a:hover{color:var(--teal); background:var(--bg-3)}
nav.main a[aria-current="page"]{color:var(--teal); background:var(--teal-soft); font-weight:600}
.icobtn{border-color:var(--line-strong); color:var(--fg-2)}

/* ---------- nút ---------- */
.btn{background:var(--cta); color:#fff; box-shadow:0 1px 2px rgba(185,56,29,.18)}
.btn:hover{background:var(--cta-hover); filter:none}
.btn.dark{background:var(--teal); color:#fff}
.btn.dark:hover{background:var(--teal-hover)}
.btn.ghost{background:var(--bg-2); border:1.5px solid var(--teal); color:var(--teal)}
.btn.ghost:hover{background:var(--teal-soft)}
:root[data-theme="dark"] .btn.ghost{color:var(--violet-fg); border-color:var(--violet-fg)}

/* ---------- hero ---------- */
.hero{background:linear-gradient(180deg,var(--bg-2) 0%,var(--bg) 100%)}
.trust li::before{background-color:var(--ok-soft); border-color:var(--ok)}

/* ---------- 3 nhánh her/us/him: ảnh sáng, chữ tối trên nền trắng mờ ---------- */
.tile{background:var(--bg-3); color:var(--fg); box-shadow:var(--shadow); border:1px solid var(--line)}
.tile::after{background:linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.80) 38%, rgba(255,255,255,0) 68%)}
.tile img{object-position:right center}
@media (max-width:700px){.tile::after{background:linear-gradient(90deg, rgba(255,255,255,.93) 0%, rgba(255,255,255,.78) 55%, rgba(255,255,255,.15) 100%)}}
.tile .k{color:var(--teal); opacity:1; background:rgba(255,255,255,.92); border-radius:999px; padding:5px 11px; width:max-content; font-size:12px}
:root[data-theme="dark"] .tile .k{background:rgba(15,29,36,.85); color:var(--violet-fg)}
.tile h2{color:var(--fg)}
.tile h2 em{color:var(--teal)}
.tile p{color:var(--fg-2)}
.tile .go{background:var(--teal); color:#fff}
.tile:hover{box-shadow:var(--shadow-hover)}
:root[data-theme="dark"] .tile::after{background:linear-gradient(90deg, rgba(15,29,36,.94) 0%, rgba(15,29,36,.8) 45%, rgba(15,29,36,.1) 100%)}

/* ---------- thẻ triệu chứng / thẻ bài / thẻ giá ---------- */
.symp{border-radius:14px; box-shadow:0 1px 2px rgba(23,43,58,.03)}
.symp:hover{background:#F2F8F7; border-color:var(--teal); box-shadow:var(--shadow)}
.symp::after{color:var(--teal)}
.card{box-shadow:0 1px 2px rgba(23,43,58,.03)}
a.card:hover{border-color:var(--teal); box-shadow:var(--shadow-hover)}
.chip[aria-pressed="true"]{background:var(--teal); border-color:var(--teal); color:#fff}
.chip:hover{border-color:var(--teal)}
.tier{box-shadow:0 1px 2px rgba(23,43,58,.03)}
.tier.feature{border:2px solid var(--teal); box-shadow:var(--shadow-hover)}
.tier .price{color:var(--fg)}
.opt:hover{border-color:var(--teal); background:#F2F8F7}
.takeaway{border-left-color:var(--teal)}
.person .av{background:linear-gradient(135deg,var(--teal),#3BA39C)}
.band{background:var(--bg-2)}
.stat b{color:var(--teal)}
:root[data-theme="dark"] .stat b{color:var(--violet-fg)}

/* ---------- khối kêu gọi ---------- */
.cta{background:linear-gradient(135deg,#126970 0%,#0E5A60 100%); color:#fff}
.cta p{color:#D6ECEA}
.toc-cta{background:var(--teal)}
.toc-cta p{color:#D6ECEA}
.statement img{object-position:right center}
.statement::after{background:linear-gradient(90deg, rgba(12,72,78,.94) 0%, rgba(12,72,78,.80) 42%, rgba(12,72,78,.10) 78%)}
@media (max-width:700px){.statement::after{background:linear-gradient(180deg, rgba(12,72,78,.25) 0%, rgba(12,72,78,.88) 55%, rgba(12,72,78,.95) 100%)}}
.statement p{color:#E3F2F0}

/* ---------- footer ---------- */
footer.site{background:var(--bg-3); border-top:1px solid var(--line)}
:root[data-theme="dark"] footer.site{background:#0B1A22}
footer.site a:hover{color:var(--teal)}

/* ---------- thanh CTA dính đáy mobile ---------- */
@media (max-width:700px){
  .stickycta{background:rgba(255,255,255,.96); color:var(--fg); border:1px solid var(--line); box-shadow:0 10px 30px -12px rgba(23,43,58,.30); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
  .stickycta span{color:var(--fg-2)}
  :root[data-theme="dark"] .stickycta{background:rgba(21,38,46,.96)}
}