/* ==========================================================================
   NOVACARE Việt Nam - giao diện demo
   Theo chuẩn giao diện ClaudeZone (he-thiet-ke/chuan-giao-dien-claudezone.md)
   Tỉ lệ tương phản ghi trong chú thích là số ĐO bằng công thức WCAG.
   ========================================================================== */

/* ---------- Tầng 1: bảng màu thương hiệu (theo file "Thông tin website.xlsx") ---------- */
:root{
  --nova-blue:#06338A;        /* Primary Blue  */
  --nova-blue-light:#064CA6;  /* Light Blue    */
  --nova-green:#0D9436;       /* Primary Green - trắng trên nó chỉ 3,96:1 → chỉ dùng trang trí / chữ lớn */
  --nova-green-light:#1AA31E; /* Light Green   - 3,33:1 → chỉ dùng trang trí */
}

/* ---------- Tầng 2: token ngữ nghĩa - component chỉ chạm tầng này ---------- */
:root{
  --brand:var(--nova-blue);
  --brand-soft:var(--nova-blue-light);
  --brand-deep:#042462;
  --accent:#0B7F2E;           /* NỀN nút - chữ trắng 5,14:1 */
  --accent-strong:#0A6B27;    /* CHỮ trên nền sáng - 5,97 → 6,68:1 */
  --on-accent:#FFFFFF;
  --deco:var(--nova-green);   /* xanh lá đúng thương hiệu cho hình trang trí, icon (≥ 3:1) */
  --deco-2:var(--nova-green-light);

  --bg:#F6F9F7;
  --surface:#FFFFFF;
  --surface-2:#EDF4EF;
  --text:#14213A;             /* 14,36 → 16,05:1 */
  --muted:#4A5874;            /* 6,39 → 7,14:1 */
  --muted-2:#5D6A82;          /* 4,88 → 5,46:1 */
  --line:#DCE5EA;             /* kẻ trang trí */
  --line-strong:#7F8DA3;      /* viền ô nhập và nút - 3,01 → 3,36:1 */
  --shadow:6 51 138;

  --r-sm:6px; --r:8px; --r-md:9px; --r-lg:12px; --r-xl:16px; --r-tron:999px;

  --font-than:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-tieu-de:"Montserrat","Be Vietnam Pro",system-ui,sans-serif;
}

/* Khối tối trên trang sáng: định nghĩa lại token tầng 2, con cháu tự lấy đúng màu */
.khoi-toi{
  --text:#F2F6FB;             /* 10,47:1 trên --brand */
  --muted:#C3D0E6;            /* 7,30:1 */
  --muted-2:#AEBEDB;          /* 6,05:1 */
  --surface:var(--brand);
  --surface-2:var(--brand-soft);
  --line:var(--brand-soft);
  --line-strong:#8FA6D4;      /* 4,64:1 */
  --accent-strong:#7FE39A;    /* 7,23:1 */
  color:var(--text);
}

/* ---------- Nền tảng ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font-than);font-size:1rem;line-height:1.65;
  -webkit-text-size-adjust:100%;
}
img,svg{max-width:100%}
img{height:auto;display:block}
a{color:var(--accent-strong)}
a:hover{text-decoration-thickness:2px}
h1,h2,h3,h4{font-family:var(--font-tieu-de);line-height:1.25;margin:0;color:var(--brand)}
.khoi-toi h1,.khoi-toi h2,.khoi-toi h3,.khoi-toi h4{color:var(--text)}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.khoi-toi :focus-visible{outline-color:var(--accent-strong)}

.khung{width:100%;max-width:1180px;margin-inline:auto;padding-inline:24px}
.an-thi-giac{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bo-qua{position:absolute;left:12px;top:-60px;z-index:100;background:var(--surface);color:var(--brand);padding:10px 14px;border-radius:var(--r);font-weight:700}
.bo-qua:focus{top:12px}
.icon{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Hộp text nội dung: căn đều (chỉ cho chữ chạy nhiều dòng) */
.hop-text{text-align:justify;text-justify:inter-word;hyphens:auto;color:var(--muted)}

/* ---------- Nút ---------- */
.nut{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 20px;border-radius:var(--r-md);border:1px solid transparent;
  font:700 .9rem var(--font-than);text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.nut--nhan{background:var(--accent);color:var(--on-accent)}
.nut--nhan:hover{background:var(--accent-strong)}
.nut--chinh{background:var(--brand);color:#fff}
.nut--chinh:hover{background:var(--brand-soft)}
.nut--vien{background:var(--surface);color:var(--text);border-color:var(--line-strong)}
.nut--vien:hover{background:var(--surface-2)}

/* ---------- Đầu trang ---------- */
.dau{background:var(--surface);border-bottom:1px solid var(--line)}
.dau__hang{display:flex;align-items:center;gap:20px;padding-block:10px}
.dau__logo{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;margin-right:auto}
.dau__logo img{width:84px;height:84px;object-fit:contain}
.dau__ten{font:800 1.12rem var(--font-tieu-de);color:var(--brand);text-transform:uppercase;letter-spacing:.01em}
.dau__khau-hieu{font:600 .72rem var(--font-tieu-de);letter-spacing:.22em;color:var(--accent-strong);text-transform:uppercase}
.dau__lien-he{display:flex;align-items:center;gap:22px}
.lh-nhanh{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.lh-nhanh__icon{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r-tron);background:var(--surface-2);color:var(--accent-strong)}
.lh-nhanh small{display:block;font-size:.69rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--muted-2);line-height:1.3}
.lh-nhanh b{font-weight:700;font-size:.95rem}
.lh-nhanh:hover b{color:var(--accent-strong)}

.menu{position:sticky;top:0;z-index:50;background:var(--brand);box-shadow:0 6px 18px rgb(var(--shadow)/.18)}
.menu__hang{display:flex;align-items:center}
.menu__ds{display:flex;flex-wrap:wrap;flex:1}
.menu__ds a{
  display:block;padding:15px 13px;color:var(--text);text-decoration:none;
  font:600 .86rem var(--font-than);white-space:nowrap;border-bottom:3px solid transparent;
  transition:background .15s ease,border-color .15s ease;
}
.menu__ds a:hover,.menu__ds a[aria-current="page"]{background:var(--brand-soft);border-bottom-color:var(--deco-2)}
.menu__nut{display:none;align-items:center;gap:8px;background:none;border:0;color:var(--text);font:700 .9rem var(--font-than);padding:14px 0;cursor:pointer}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#DCEBFA 0%,#EEF7F1 62%,var(--bg) 100%)}
.hero__nen{position:absolute;inset:auto 0 0 0;width:100%;height:58%;pointer-events:none}
.hero__hang{position:relative;display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:center;padding-block:64px 96px}
.hero__nhan{font:700 .95rem var(--font-tieu-de);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-strong)}
.hero h1{font-size:clamp(2.3rem,5.4vw,4.2rem);font-weight:800;letter-spacing:-.01em;margin-block:8px 6px}
.hero h1 span{color:var(--deco)}            /* chữ lớn ≥ 24px đậm: 3,54 → 3,96:1 đạt ngưỡng 3:1 */
.hero__vn{font:700 1.5rem var(--font-tieu-de);color:var(--brand);letter-spacing:.3em;text-transform:uppercase}
.hero__khau{display:inline-block;margin-top:22px;padding:10px 22px;border-radius:var(--r-tron);background:var(--accent);color:var(--on-accent);font:700 1rem var(--font-tieu-de);letter-spacing:.06em;text-transform:uppercase}
.hero__mo-ta{margin-top:20px;font-size:1.05rem;color:var(--text)}
.hero__nut{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.hero__the{background:var(--surface);border:2px solid var(--deco);border-radius:var(--r-xl);padding:14px;box-shadow:0 18px 40px rgb(var(--shadow)/.16)}
.hero__the img{width:100%;aspect-ratio:1/1;object-fit:contain}

/* ---------- Dải cam kết ---------- */
.cam-ket{margin-top:-48px;position:relative;z-index:2}
.cam-ket__luoi{display:grid;grid-template-columns:repeat(4,1fr);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:0 12px 30px rgb(var(--shadow)/.1)}
.cam-ket__o{padding:26px 20px;text-align:center;border-right:1px solid var(--line)}
.cam-ket__o:last-child{border-right:0}
.vong-icon{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 12px;border-radius:var(--r-tron);background:var(--deco);color:#fff}
.vong-icon--lam{background:var(--brand)}
.vong-icon .icon{width:30px;height:30px}
.cam-ket__o h2{font-size:1rem;text-transform:uppercase;letter-spacing:.04em}
.cam-ket__o p{margin-top:6px;font-size:.9rem;color:var(--muted)}

/* ---------- Khối nội dung chung ---------- */
.khoi{padding-block:72px}
.khoi--nen{background:var(--surface)}
.khoi__dau{margin-bottom:32px}
.khoi__nhan{font-size:.69rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--muted-2)}
.khoi__dau h2{font-size:clamp(1.5rem,3vw,2rem);font-weight:800;text-transform:uppercase;margin-top:4px}
.khoi__dau h2::after{content:"";display:block;width:64px;height:4px;margin-top:12px;border-radius:var(--r-tron);background:linear-gradient(90deg,var(--brand),var(--deco))}
.khoi__dau p{margin-top:14px}
.khoi__dau--hang{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.nhan-mau{display:inline-block;margin-left:8px;padding:2px 10px;border-radius:var(--r-tron);border:1px dashed var(--line-strong);font:600 .69rem var(--font-than);letter-spacing:.04em;color:var(--muted);text-transform:none;vertical-align:middle}

.the{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px}
.khoi--nen .the{background:var(--bg)}

/* Giới thiệu */
.gt{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:start}
.gt__chu p+p{margin-top:14px}
.gt__chu .nut{margin-top:22px}
.gt__cot{display:grid;gap:18px}
.the--vach{border-left:4px solid var(--deco)}
.the--vach.the--lam{border-left-color:var(--brand)}
.the__dau{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.o-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:var(--r-sm);background:var(--surface-2);color:var(--accent-strong)}
.the h3{font-size:1.08rem}

/* Giá trị cốt lõi */
.luoi-5{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
.gia-tri{text-align:center}
.gia-tri__so{font:800 .8rem var(--font-tieu-de);letter-spacing:.12em;color:var(--muted-2)}
.gia-tri h3{margin-block:6px 8px;font-size:1.05rem}
.gia-tri p{font-size:.92rem;color:var(--muted)}

/* Lĩnh vực */
.linh-vuc{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;text-decoration:none;color:inherit;transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}
.linh-vuc:hover{border-color:var(--deco);box-shadow:0 12px 26px rgb(var(--shadow)/.12);transform:translateY(-3px)}
.linh-vuc .vong-icon{margin:0}
.linh-vuc h3{font-size:.98rem;text-transform:uppercase;letter-spacing:.03em}

/* Sản phẩm · tin tức */
.luoi-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.luoi-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.sp,.tin{padding:0;overflow:hidden;display:flex;flex-direction:column}
.khung-anh{display:grid;place-items:center;aspect-ratio:4/3;background:repeating-linear-gradient(135deg,var(--surface-2) 0 14px,var(--surface) 14px 28px);color:var(--muted-2);font-size:.8rem;font-weight:600}
.tin .khung-anh{aspect-ratio:16/9}
.sp__than,.tin__than{padding:18px;display:flex;flex-direction:column;gap:6px;flex:1}
.sp__nhom,.tin__ngay{font-size:.69rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--accent-strong)}
.sp h3,.tin h3,.tin h2{font-size:1rem;color:var(--text)}
.sp p,.tin p{font-size:.9rem;color:var(--muted)}
.lien-ket{margin-top:auto;padding-top:8px;font-weight:700;font-size:.88rem;text-decoration:none}
.lien-ket:hover{text-decoration:underline}

/* Đối tác */
.doi-tac{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.doi-tac li{display:grid;place-items:center;height:92px;border:1px dashed var(--line-strong);border-radius:var(--r-lg);background:var(--surface);color:var(--muted-2);font-size:.8rem;font-weight:600}

/* Lối tắt: tài liệu · phân phối · tuyển dụng */
.loi-tat{display:flex;flex-direction:column;gap:10px}
.loi-tat p{color:var(--muted);font-size:.93rem}

/* ---------- Liên hệ ---------- */
.lh{display:grid;grid-template-columns:.9fr 1.1fr;gap:28px;align-items:start}
.lh__thong-tin{border-radius:var(--r-lg);padding:28px;background:var(--brand)}
.lh__thong-tin h3{font-size:1.15rem;margin-bottom:18px}
.lh__ds{display:grid;gap:16px}
.lh__ds li{display:flex;gap:12px;align-items:flex-start}
.lh__ds .icon{margin-top:3px;color:var(--accent-strong)}
.lh__ds small{display:block;font-size:.69rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--muted-2)}
.lh__ds a{color:var(--text);font-weight:600;text-decoration:none;overflow-wrap:anywhere}
.lh__ds a:hover{text-decoration:underline}
.ban-do{display:grid;place-items:center;margin-top:22px;height:150px;border:1px dashed var(--line-strong);border-radius:var(--r-lg);color:var(--muted);font-size:.85rem;font-weight:600;text-align:center;padding:12px}

.bieu-mau{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.truong{display:flex;flex-direction:column;gap:5px}
.truong--rong{grid-column:1/-1}
.nhan{font-size:.69rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--muted-2)}
.nhan i{font-style:normal;color:#B42318}        /* dấu * bắt buộc - 6,57:1 trên trắng */
.o-nhap{
  width:100%;padding:11px 12px;border-radius:var(--r-md);border:1px solid var(--line-strong);
  background:var(--surface);color:var(--text);font:400 .92rem var(--font-than);
}
textarea.o-nhap{min-height:120px;resize:vertical}
.o-nhap:hover{border-color:var(--text)}
.bieu-mau__chan{grid-column:1/-1;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.thong-bao{font-size:.9rem;font-weight:600;color:var(--accent-strong)}

/* Combo box tự dựng (chuẩn ClaudeZone mục 4) */
.combo{position:relative}
.combo__nut{display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;cursor:pointer}
.combo__nut .icon{color:var(--muted-2);transition:transform .15s ease}
.combo__nut[aria-expanded="true"] .icon{transform:rotate(180deg)}
.combo__ds{
  position:absolute;z-index:20;inset:calc(100% + 6px) 0 auto 0;max-height:320px;overflow:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:6px;
  box-shadow:0 16px 36px rgb(var(--shadow)/.18);
}
.combo__ds[hidden]{display:none}
.combo__muc{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:var(--r);border-left:3px solid transparent;cursor:pointer}
.combo__muc.dang-tro{background:var(--surface-2);border-left-color:var(--accent)}
.combo__muc b{display:block;font-weight:600;font-size:.92rem;line-height:1.35}
.combo__muc small{display:block;font-size:.78rem;color:var(--muted-2);line-height:1.35}
.combo__muc .o-icon{width:36px;height:36px}
.combo__tich{margin-left:auto;color:var(--accent);visibility:hidden}
.combo__muc[aria-selected="true"] .combo__tich{visibility:visible}

/* ---------- Dải giá trị + chân trang ---------- */
.dai{background:linear-gradient(90deg,var(--brand) 0%,var(--brand-soft) 45%,var(--accent) 100%);color:#fff}
.dai__luoi{display:grid;grid-template-columns:repeat(4,1fr)}
.dai__o{display:flex;align-items:center;gap:14px;padding:22px 18px;font:700 .86rem var(--font-tieu-de);text-transform:uppercase;letter-spacing:.03em;line-height:1.5}
.dai__o .icon{width:34px;height:34px}

.chan{background:var(--brand-deep);--surface:var(--brand-deep)}
.chan__luoi{display:grid;grid-template-columns:1.5fr .8fr 1.1fr;gap:36px;padding-block:52px 36px}
.chan__logo{display:inline-block;background:#fff;border-radius:var(--r-lg);padding:4px;margin-bottom:14px}
.chan__logo img{width:104px;height:104px;object-fit:contain}
.chan h2{font-size:.95rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px}
.chan p,.chan li{color:var(--muted);font-size:.92rem}
.chan__ds{display:grid;gap:8px}
.chan a{color:var(--muted);text-decoration:none}
.chan a:hover{color:var(--text);text-decoration:underline}
.chan__mxh{display:flex;gap:10px;margin-top:16px}
.chan__mxh a{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r-tron);border:1px solid var(--line-strong);color:var(--text)}
.chan__mxh a:hover{background:var(--brand-soft)}
.chan__day{border-top:1px solid var(--line);padding-block:16px;font-size:.84rem;color:var(--muted-2)}

.noi{position:fixed;right:18px;bottom:18px;z-index:60;display:grid;gap:10px}
.noi a{display:grid;place-items:center;width:52px;height:52px;border-radius:var(--r-tron);background:var(--accent);color:var(--on-accent);box-shadow:0 10px 24px rgb(var(--shadow)/.28);text-decoration:none;font:800 .8rem var(--font-tieu-de)}
.noi a:hover{background:var(--accent-strong)}
.noi .noi__zalo{background:var(--brand)}
.noi .noi__zalo:hover{background:var(--brand-soft)}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .luoi-4{grid-template-columns:repeat(2,1fr)}
  .doi-tac{grid-template-columns:repeat(3,1fr)}
  .dai__luoi{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .dau__lien-he .lh-nhanh--thu{display:none}
  .menu__nut{display:inline-flex}
  .menu__hang{flex-wrap:wrap}
  .menu__ds{display:none;flex-direction:column;flex-basis:100%;padding-bottom:10px}
  .menu__ds.mo{display:flex}
  .menu__ds a{padding:12px 10px;border-bottom:1px solid var(--line)}
  .hero__hang{grid-template-columns:1fr;padding-block:40px 84px}
  .hero__the{width:min(280px,100%);margin-inline:auto;grid-row:1}
  .cam-ket__luoi{grid-template-columns:repeat(2,1fr)}
  .cam-ket__o:nth-child(2){border-right:0}
  .cam-ket__o:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .gt,.lh,.luoi-3,.chan__luoi{grid-template-columns:1fr}
  .khoi{padding-block:52px}
}
@media (max-width:560px){
  .khung{padding-inline:16px}
  .dau__logo img{width:64px;height:64px}
  .dau__ten{font-size:.9rem}
  .dau__khau-hieu{font-size:.6rem;letter-spacing:.14em}
  .dau__lien-he{display:none}
  .hero__vn{font-size:1.1rem}
  .hero__khau{font-size:.82rem;padding:9px 16px}
  .luoi-4,.bieu-mau,.dai__luoi{grid-template-columns:1fr}
  .doi-tac{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important}
}

/* ==========================================================================
   Phần riêng của bản WordPress (bản demo tĩnh không có)
   ========================================================================== */
.khoi__dau h1{font-size:clamp(1.6rem,3.2vw,2.2rem);font-weight:800;margin-top:4px}
.khoi__dau h1::after{content:"";display:block;width:64px;height:4px;margin-top:12px;border-radius:var(--r-tron);background:linear-gradient(90deg,var(--brand),var(--deco))}

/* Nội dung soạn trong trình soạn thảo */
.bai{color:var(--text)}
.bai>*+*{margin-top:1em}
.bai h2,.bai h3,.bai h4{text-align:left;margin-top:1.6em}
.bai ul,.bai ol{padding-left:1.4em;list-style:revert}
.bai img{border-radius:var(--r-lg)}
.bai table{width:100%;border-collapse:collapse;text-align:left}
.bai th,.bai td{padding:10px 12px;border:1px solid var(--line)}
.bai blockquote{margin-inline:0;padding:14px 18px;border-left:4px solid var(--deco);background:var(--surface-2);border-radius:var(--r)}
.alignleft{float:left;margin:0 1.2em 1em 0}
.alignright{float:right;margin:0 0 1em 1.2em}
.aligncenter{margin-inline:auto}
.wp-caption-text{font-size:.85rem;color:var(--muted-2);text-align:center}

/* Thẻ tin có ảnh đại diện · phân trang */
.tin a.khung-anh{display:block}
.tin .khung-anh img{width:100%;height:100%;object-fit:cover}
.tin{background:var(--surface)}
.pagination{margin-top:32px}
.pagination .nav-links{display:flex;flex-wrap:wrap;gap:8px}
.pagination .page-numbers{display:grid;place-items:center;min-width:42px;height:42px;padding-inline:10px;border:1px solid var(--line-strong);border-radius:var(--r-md);background:var(--surface);color:var(--text);font-weight:700;text-decoration:none}
.pagination .page-numbers.current{background:var(--brand);border-color:var(--brand);color:#fff}
.pagination a.page-numbers:hover{background:var(--surface-2)}

/* Thanh quản trị của WordPress che menu dính */
.admin-bar .menu{top:32px}
@media (max-width:782px){.admin-bar .menu{top:46px}}
@media (max-width:600px){.admin-bar .menu{top:0}}

/* Dòng bản quyền + "Thiết kế bởi TTC Design" */
.chan__day-hang{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px}
.chan__day a{color:var(--muted);text-decoration:underline}

/* Biểu mẫu liên hệ: ô bẫy chống bot, mã bảo vệ, báo lỗi */
.bay{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ma-bao-ve{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.ma-bao-ve .o-nhap{width:120px;letter-spacing:.3em;font-weight:700}
.ma-bao-ve__anh{width:112px;height:40px;border-radius:var(--r-sm);background:#333}
.thong-bao.loi{color:#B42318}
.o-nhap[aria-invalid="true"]{border-color:#B42318;box-shadow:0 0 0 1px #B42318}

/* Trang sản phẩm */
.bai__anh{margin-bottom:24px}
.bai__anh img{border-radius:var(--r-lg);max-height:520px;width:auto}
.single-post .bai__anh img{width:100%;max-height:none}
.bai__nut{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.tin--sp .khung-anh{aspect-ratio:4/3}
.tin--sp .khung-anh img{object-fit:contain;background:var(--surface)}

/* Tên công ty + slogan cạnh logo: co khoảng cách dòng (thân trang 1.65 quá thưa khi tên rớt 2 dòng trên điện thoại) */
.dau__logo>span{line-height:1.25}
.dau__khau-hieu{display:inline-block;margin-top:3px}
@media (max-width:560px){
  .dau__hang{gap:12px;padding-block:8px}
  .dau__logo{gap:10px}
  .dau__logo>span{line-height:1.2}
  .dau__khau-hieu{margin-top:2px}
}

/* ==========================================================================
   Hiệu ứng khi MỞ TRANG – chỉ phần đầu trang hiện ra lần lượt, một lần, bằng CSS thuần.
   Chỉ dùng transform + opacity (rẻ, không gây dựng lại bố cục). Không gắn hiệu ứng theo cuộn.
   Trình duyệt không chạy được animation thì nội dung vẫn hiện bình thường (không phụ thuộc JS).
   ========================================================================== */
@keyframes vao-len{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes vao-phong{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes vao-mo{from{opacity:0}to{opacity:1}}

.hero__hang>div:first-child>*,
.cam-ket__o,
main>.khung>.khoi__dau,
main>.khung>article>.khoi__dau{animation:vao-len .42s cubic-bezier(.22,.61,.36,1) both}
.hero__hang>div:first-child>:nth-child(1){animation-delay:.05s}
.hero__hang>div:first-child>:nth-child(2){animation-delay:.11s}
.hero__hang>div:first-child>:nth-child(3){animation-delay:.17s}
.hero__hang>div:first-child>:nth-child(4){animation-delay:.23s}
.hero__hang>div:first-child>:nth-child(5){animation-delay:.29s}
.hero__hang>div:first-child>:nth-child(6){animation-delay:.35s}
.hero__the{animation:vao-phong .5s cubic-bezier(.22,.61,.36,1) .12s both}
.hero__nen{animation:vao-mo .6s ease-out both}
.cam-ket__o:nth-child(1){animation-delay:.34s}
.cam-ket__o:nth-child(2){animation-delay:.41s}
.cam-ket__o:nth-child(3){animation-delay:.48s}
.cam-ket__o:nth-child(4){animation-delay:.55s}
/* Trang trong: tiêu đề trang, rồi tới nội dung / lưới bài */
main>.khung>.khoi__dau~*,
main>.khung>article>.khoi__dau~*{animation:vao-len .42s cubic-bezier(.22,.61,.36,1) .12s both}

@media (prefers-reduced-motion:reduce){
  .hero__hang>div:first-child>*,.hero__the,.hero__nen,.cam-ket__o,
  main>.khung>.khoi__dau,main>.khung>article>.khoi__dau,
  main>.khung>.khoi__dau~*,main>.khung>article>.khoi__dau~*{animation:none}
}