/* ============================================================
   Trẻ hóa da - Y Khoa Kỳ Hòa (web Da liễu bản 3)
   Hướng mẫu A "Kính soi", anh Hiệp chọn 30/9/2026, yêu cầu "thật nhiều hiệu ứng".

   Nhận diện: xanh da trời nhạt #9AC8E8 làm chủ đạo, Be Vietnam Pro duy nhất.
   Logo chỉ dùng MÀU GỐC vàng đồng hoặc TRẮNG toàn phần, không tô màu khác.

   Bẫy đã trả giá ở bản 1, 2 và bản mẫu, đừng lặp lại:
   - overflow-x:hidden trên body giết window.scrollTo và position:sticky -> overflow-x:clip trên html
   - scroll-behavior:smooth đánh nhau với Lenis
   - backdrop-filter trên thanh cố định đè ảnh lớn làm tụt khung hình -> nền đục rgba
   - dòng ẩn trong .ln phải đẩy 150%, 118% làm dấu tiếng Việt lòi lên mép dưới
   ============================================================ */
/* fonts.css nạp bằng <link> riêng có ?v= trong <head> (build.py), KHÔNG @import ở đây: @import không có số phiên
   bản nên lần chuyển trang nào cũng phải hỏi lại máy chủ, trễ ~60ms là chuyển cảnh giữa các trang bị huỷ (2/10) */

:root{
  --sky-25:#F7FBFE; --sky-50:#EEF7FC; --sky-100:#DEEEF9; --sky-200:#C2E1F4; --sky-300:#9AC8E8;
  --sky-400:#7CB4DE; --sky-500:#5A9CCC; --sky-600:#35729F;
  --ink:#22405A; --ink-strong:#12324A; --ink-soft:#4E6E88; --muted:#6F889C; --line:#DCEBF6; --deep:#1B4360;
  --white:#FFFFFF;
  --font:"Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --gutter:clamp(20px, 4vw, 48px);
  --maxw:1240px;
  --vt-x:50%; --vt-y:50%;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{overflow-x:clip;-webkit-text-size-adjust:100%;}
html.lenis, html.lenis body{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto !important;}
.lenis.lenis-stopped{overflow:clip;}
body{font-family:var(--font);font-weight:400;font-size:17px;line-height:1.65;background:var(--white);color:var(--ink);-webkit-font-smoothing:antialiased;}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
::selection{background:var(--sky-200);color:var(--ink-strong);}
:focus-visible{outline:2px solid var(--sky-600);outline-offset:3px;border-radius:6px;}
p, li, dd, figcaption, .glue{text-wrap:pretty;}
.wrap{width:min(var(--maxw), calc(100% - 2*var(--gutter)));margin:0 auto;}
.an-doc{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ---------- chữ ---------- */
h1,h2,h3{font-weight:300;letter-spacing:-.03em;line-height:1.08;color:var(--ink-strong);}
h2{font-size:clamp(36px, 5vw, 72px);}
.kicker{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--sky-600);}
.kicker::before{content:"";width:28px;height:1px;background:currentColor;}
.dim{color:#4A90C4;} /* chữ nhấn trong tiêu đề lớn: sky-500 chỉ 2,97:1 trên trắng, màu này 3,45:1 (chuẩn chữ lớn 3:1), 1/10 */
.lead{font-size:clamp(17px, 1.35vw, 20px);color:var(--ink-soft);max-width:36em;}
/* tiêu đề TÁCH DÒNG BẰNG TAY: mỗi dòng một .ln; đệm trên dưới để dấu tiếng Việt không bị xén */
.ln{display:block;white-space:nowrap;overflow:hidden;padding:.18em .06em .2em;margin:-.18em -.06em -.2em;}
.ln > span{display:inline-block;}
.js .rv{opacity:0;transform:translateY(28px);}
.js [data-lines] .ln > span{transform:translateY(150%);}
.js .rv-trai{opacity:0;transform:translateX(-36px);}
.js .rv-phong{opacity:0;transform:scale(.86);}

/* ---------- nút ---------- */
.nut{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border-radius:999px;
  background:var(--deep);color:#fff;font-weight:600;font-size:15px;white-space:nowrap;position:relative;overflow:hidden;isolation:isolate;
  transition:color .4s var(--ease);}
.nut::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--sky-600);border-radius:inherit;transform:translateY(101%);transition:transform .5s var(--ease);}
.nut:hover::before{transform:translateY(0);}
.nut.rong{background:transparent;color:var(--ink-strong);box-shadow:inset 0 0 0 1px var(--sky-300);}
.nut.rong::before{background:var(--sky-50);}
.nut.sang{background:#fff;color:var(--ink-strong);}
.nut.sang::before{background:var(--sky-100);}
.mui{display:inline-block;transition:transform .4s var(--ease);}
.nut:hover .mui, .lien-ket:hover .mui{transform:translateX(5px);}
.lien-ket{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;color:var(--sky-600);}
.lien-ket span:first-child{background:linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;transition:background-size .5s var(--ease);}
.lien-ket:hover span:first-child{background-size:100% 1px;}

/* ---------- thanh tiến độ đọc trang ---------- */
.tien-do{position:fixed;left:0;top:0;height:3px;width:100%;z-index:80;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg, var(--sky-300), var(--sky-600));pointer-events:none;}

/* ---------- thanh điều hướng ---------- */
.nav{position:fixed;z-index:50;top:12px;left:50%;transform:translateX(-50%);width:min(1200px, calc(100% - 24px));height:62px;
  padding:0 8px 0 18px;display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.93);border:1px solid var(--line);border-radius:999px;
  box-shadow:0 8px 30px rgba(18,50,74,.08);transition:transform .55s var(--ease);}
.nav.an{transform:translate(-50%, -96px);}
.hieu{display:flex;align-items:center;gap:10px;min-height:44px;font-weight:600;font-size:15px;color:var(--ink-strong);white-space:nowrap;}
.hieu img{height:24px;width:auto;}
.hieu .phu{color:var(--sky-600);font-weight:500;}
.menu{display:flex;align-items:center;gap:2px;margin-left:auto;list-style:none;}
.menu > li{position:relative;}
.menu a, .menu button{display:flex;align-items:center;gap:6px;min-height:44px;padding:0 15px;border-radius:999px;font-size:15px;color:var(--ink-soft);transition:background .25s, color .25s;}
.menu a:hover, .menu button:hover, .menu .dang > a, .menu .dang > button{background:var(--sky-50);color:var(--ink-strong);}
.menu .mui-xuong{display:inline-block;width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .35s var(--ease);}
.menu .mo .mui-xuong{transform:translateY(1px) rotate(225deg);}
.xo{position:absolute;left:0;top:calc(100% + 10px);min-width:284px;padding:8px;list-style:none;background:#fff;border:1px solid var(--line);border-radius:22px;
  box-shadow:0 22px 50px rgba(18,50,74,.14);opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);transform-origin:20% 0;
  transition:opacity .3s, transform .45s var(--ease), visibility 0s .45s;}
.xo::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px;}
.menu .mo .xo{opacity:1;visibility:visible;transform:none;transition:opacity .3s, transform .45s var(--ease);}
.xo a{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px 16px;border-radius:16px;}
.xo a small{font-size:13px;color:var(--muted);font-weight:400;white-space:nowrap;} /* "Trung tâm và chuyên / khoa Da liễu" ngắt giữa từ ghép (1/10) */
.xo li{opacity:0;transform:translateY(6px);transition:opacity .3s, transform .45s var(--ease);}
.menu .mo .xo li{opacity:1;transform:none;}
.menu .mo .xo li:nth-child(2){transition-delay:.06s;}
.nav .goi-nav{min-height:46px;margin-left:6px;}
.nut-menu{display:none;margin-left:auto;min-height:46px;padding:0 18px;border-radius:999px;background:var(--sky-50);font-weight:600;font-size:15px;color:var(--ink-strong);}
@media (max-width:980px){
  .menu, .nav .goi-nav{display:none;}
  .nut-menu{display:inline-flex;align-items:center;}
  .nav{height:58px;}
  .hieu{font-size:14px;}
}
@media (max-width:380px){ .hieu .phu{display:none;} }

/* menu điện thoại: phủ màn hình, mục chạy vào so le */
.menu-dt{position:fixed;inset:0;z-index:70;background:var(--sky-25);padding:96px var(--gutter) 32px;display:flex;flex-direction:column;
  clip-path:circle(0 at calc(100% - 50px) 42px);visibility:hidden;transition:clip-path .7s var(--ease), visibility 0s .7s;overflow:auto;}
.menu-dt.mo{clip-path:circle(150% at calc(100% - 50px) 42px);visibility:visible;transition:clip-path .7s var(--ease);}
.menu-dt ul{list-style:none;}
.menu-dt > ul > li{border-bottom:1px solid var(--line);opacity:0;transform:translateY(24px);transition:opacity .4s, transform .6s var(--ease);}
.menu-dt.mo > ul > li{opacity:1;transform:none;}
.menu-dt.mo > ul > li:nth-child(2){transition-delay:.05s;} .menu-dt.mo > ul > li:nth-child(3){transition-delay:.1s;}
.menu-dt.mo > ul > li:nth-child(4){transition-delay:.15s;} .menu-dt.mo > ul > li:nth-child(5){transition-delay:.2s;}
.menu-dt > ul > li > a, .menu-dt .nhom-ten{display:flex;align-items:center;min-height:64px;font-size:30px;font-weight:300;letter-spacing:-.02em;color:var(--ink-strong);}
.menu-dt .con a{display:flex;align-items:center;min-height:48px;padding-left:18px;font-size:18px;color:var(--ink-soft);}
.menu-dt .dong{position:absolute;right:var(--gutter);top:22px;min-height:46px;padding:0 18px;border-radius:999px;background:#fff;font-weight:600;box-shadow:0 0 0 1px var(--line);}
.menu-dt .chan-menu{margin-top:auto;padding-top:28px;display:grid;gap:10px;}

/* ---------- cụm nút góc phải dưới: gọi, Messenger, Zalo + trợ lý Tư vấn (giống ykhoakyhoa.vn, đổi thiết kế;
   biểu tượng Messenger và Zalo giữ y như web chính - anh Hiệp dặn 1/10/2026) ---------- */
.lien-he-nhanh{position:fixed;z-index:46;right:18px;bottom:86px;display:grid;gap:12px;transition:opacity .3s, visibility .3s;}
.lhn{position:relative;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;color:#fff;
  box-shadow:0 0 0 3px #fff, 0 10px 24px rgba(18,50,74,.22);transition:transform .35s var(--ease);}
.lhn svg{width:24px;height:24px;}
.lhn:hover, .lhn:focus-visible{transform:translateY(-3px) scale(1.05);}
.lhn-goi{background:radial-gradient(circle at 30% 25%, var(--sky-500), var(--deep) 72%);}
.lhn-mess{background:linear-gradient(135deg, #0099ff, #a033ff 60%, #ff5280);}
.lhn-zalo{background:#0068ff;}
.lhn-zalo svg{width:38px;height:38px;}
/* nhãn hiện bên trái khi rê chuột */
.lhn::after{content:attr(data-nhan);position:absolute;right:calc(100% + 12px);top:50%;transform:translate(6px, -50%);white-space:nowrap;padding:8px 14px;
  border-radius:999px;background:var(--deep);color:#fff;font-size:13px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .25s, transform .35s var(--ease);}
@media (hover:hover){ .lhn:hover::after{opacity:1;transform:translate(0, -50%);} }
/* sóng lan quanh nút gọi: 3 nhịp lúc vào trang rồi thôi, không chạy mãi */
.lhn-goi::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--sky-400);opacity:0;animation:song-goi 1.8s ease-out .8s 3;}
@keyframes song-goi{0%{transform:scale(1);opacity:.8;}100%{transform:scale(1.75);opacity:0;}}
html.tro-ly-dang-mo .lien-he-nhanh{opacity:0;visibility:hidden;}

.tro-ly{position:fixed;z-index:47;right:18px;bottom:18px;}
.tro-ly-mo{display:inline-flex;align-items:center;gap:8px;height:52px;padding:0 20px 0 16px;border-radius:999px;color:#fff;font-size:15px;font-weight:600;
  background:linear-gradient(135deg, var(--sky-500), var(--deep));box-shadow:0 0 0 3px #fff, 0 12px 28px rgba(18,50,74,.28);transition:transform .35s var(--ease);}
.tro-ly-mo svg{width:22px;height:22px;}
.tro-ly-mo:hover{transform:translateY(-2px);}
.tro-ly[data-mo-khung] .tro-ly-mo{display:none;}
.tro-ly-khung{position:absolute;right:0;bottom:0;width:min(380px, calc(100vw - 28px));height:min(580px, calc(100vh - 110px));display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:0 24px 60px rgba(18,50,74,.28);transform-origin:100% 100%;animation:tro-ly-vao .35s var(--ease);}
.tro-ly-khung[hidden]{display:none;}
@keyframes tro-ly-vao{from{opacity:0;transform:translateY(12px) scale(.96);}}
.tro-ly-dau{display:flex;align-items:center;gap:12px;padding:12px 12px 12px 18px;color:#fff;background:linear-gradient(135deg, var(--sky-600), var(--deep));}
.tro-ly-dau > div{flex:1;}
.tro-ly-dau strong{display:block;font-size:16px;line-height:1.25;}
.tro-ly-dau small{display:block;font-size:12px;opacity:.85;}
.tro-ly-cham{width:10px;height:10px;border-radius:50%;background:#7CE0A5;box-shadow:0 0 0 4px rgba(124,224,165,.25);}
.tro-ly-dong{width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.14);}
.tro-ly-dong svg{width:18px;height:18px;}
.tro-ly-tin{flex:1;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:10px;padding:16px;background:var(--sky-25);}
.tro-ly-tn{max-width:86%;padding:10px 14px;border-radius:18px;font-size:15px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;}
.tro-ly-tn.bot{align-self:flex-start;background:#fff;border:1px solid var(--line);color:var(--ink);border-bottom-left-radius:6px;}
.tro-ly-tn.khach{align-self:flex-end;background:var(--deep);color:#fff;border-bottom-right-radius:6px;}
.tro-ly-tn.loi{align-self:flex-start;background:#FFF4F2;border:1px solid #F3D2CB;color:#8A2A16;}
.tro-ly-go{display:inline-flex;gap:4px;padding:4px 0;}
.tro-ly-go i{width:6px;height:6px;border-radius:50%;background:var(--sky-400);animation:tro-ly-nhay 1.2s infinite ease-in-out;}
.tro-ly-go i:nth-child(2){animation-delay:.2s;} .tro-ly-go i:nth-child(3){animation-delay:.4s;}
@keyframes tro-ly-nhay{0%, 60%, 100%{opacity:.3;}30%{opacity:1;}}
.tro-ly-nut{display:flex;flex-wrap:wrap;gap:8px;}
.tro-ly-nut a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;font-size:14px;font-weight:600;color:#fff;background:var(--deep);}
.tro-ly-nut a.zalo{background:#0068ff;}
.tro-ly-nut a.fb{background:#1877F2;}
.tro-ly-nut a.web{background:#fff;color:var(--deep);border:1px solid var(--sky-300);}
.tro-ly-goi-y{display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px 0;background:var(--sky-25);}
.tro-ly-goi-y[hidden]{display:none;}
.tro-ly-goi-y button{min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:13px;color:var(--ink);transition:border-color .25s, color .25s;}
.tro-ly-goi-y button:hover{border-color:var(--sky-400);color:var(--deep);}
.tro-ly-form{display:flex;align-items:flex-end;gap:8px;padding:12px 14px 4px;border-top:1px solid var(--line);}
.tro-ly-form textarea{flex:1;resize:none;min-height:44px;max-height:120px;padding:11px 16px;border:1px solid var(--line);border-radius:22px;font:inherit;font-size:15px;color:var(--ink);outline:none;}
.tro-ly-form textarea:focus{border-color:var(--sky-400);}
.tro-ly-form button{width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--deep);}
.tro-ly-form button:disabled{opacity:.45;cursor:default;}
.tro-ly-form button svg{width:20px;height:20px;}
.tro-ly-phu{padding:0 18px;font-size:12px;color:var(--muted);text-align:right;}
.tro-ly-phu [data-het]{color:#A12B12;font-weight:600;}
.tro-ly-chan{padding:2px 18px 14px;font-size:13px;color:var(--muted);}
.tro-ly-chan a{color:var(--sky-600);font-weight:600;}
@media (max-width:620px){
  /* 3 nút tròn xếp hàng ngang dưới đáy, bên trái nút "Tư vấn" (rộng ~116px): cột dọc cũ cao 164px đè lên chữ
     bên phải suốt khi cuộn (1/10). 44px x 3 + 2 khe 8px = 148px; ở 360px còn cách nút về đầu trang 6px. */
  .lien-he-nhanh{right:140px;bottom:16px;display:flex;gap:8px;}
  .lhn{width:44px;height:44px;}
  .lhn svg{width:21px;height:21px;}
  .lhn-zalo svg{width:32px;height:32px;}
  .lhn::after{display:none;}
  .tro-ly{right:14px;bottom:14px;}
  .tro-ly-mo{height:48px;}
  .tro-ly-khung{position:fixed;left:10px;right:10px;bottom:10px;width:auto;height:min(78vh, 620px);}
}
@media (prefers-reduced-motion:reduce){ .lhn-goi::before, .tro-ly-khung{animation:none;} .tro-ly-go i{animation:none;opacity:.7;} }

/* ---------- con trỏ tuỳ biến (chỉ máy có chuột) ---------- */
.con-tro{position:fixed;left:0;top:0;z-index:90;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;pointer-events:none;
  border:1.5px solid var(--sky-600);display:grid;place-items:center;opacity:0;transition:width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background .3s, opacity .3s;}
.con-tro span{font-size:12px;font-weight:600;color:#fff;opacity:0;transition:opacity .2s;}
.con-tro.hien{opacity:1;}
.con-tro.to{width:78px;height:78px;margin:-39px 0 0 -39px;background:rgba(27,67,96,.88);border-color:transparent;}
.con-tro.to span{opacity:1;}
.con-tro.an{opacity:0;}

/* ---------- nút về đầu trang có vòng tiến độ (góc TRÁI: góc phải dành cho cụm nút liên hệ) ---------- */
.ve-dau{position:fixed;z-index:44;left:18px;bottom:18px;width:52px;height:52px;border-radius:50%;background:#fff;box-shadow:0 10px 26px rgba(18,50,74,.16);
  display:grid;place-items:center;opacity:0;transform:scale(.6);transition:opacity .4s, transform .5s var(--ease);pointer-events:none;}
.ve-dau.hien{opacity:1;transform:none;pointer-events:auto;}
.ve-dau svg{position:absolute;inset:0;transform:rotate(-90deg);}
.ve-dau circle{fill:none;stroke-width:2;}
.ve-dau .nen{stroke:var(--line);} .ve-dau .chay{stroke:var(--sky-600);stroke-dasharray:151;stroke-dashoffset:151;}
.ve-dau i{width:10px;height:10px;border-left:1.8px solid var(--ink-strong);border-top:1.8px solid var(--ink-strong);transform:translateY(3px) rotate(45deg);}
@media (max-width:980px){ .ve-dau{bottom:14px;left:14px;} }

/* ---------- bong bóng (dùng chung: kính soi + lưới bệnh lý) ---------- */
.bong{border-radius:50%;display:grid;place-items:center;align-content:center;text-align:center;color:var(--ink-strong);font-weight:600;line-height:1.2;
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.95) 0 5%, rgba(255,255,255,0) 16%),
    radial-gradient(circle at 50% 54%, rgba(255,255,255,.8) 0 34%, rgba(255,255,255,.42) 58%, rgba(238,247,252,.18) 76%, rgba(154,200,232,.45) 100%);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.85), inset -8px -12px 22px rgba(255,255,255,.35), inset 6px 8px 18px rgba(63,128,176,.12), 0 12px 26px rgba(18,50,74,.2);}
.bong b{display:block;font-weight:600;}
.bong small{display:block;font-size:.72em;font-weight:500;color:var(--sky-600);margin-top:4px;}

/* ---------- trang con: đầu trang ---------- */
.dau-trang{position:relative;padding:clamp(130px, 18vh, 190px) 0 clamp(50px, 7vw, 90px);background:linear-gradient(180deg, var(--sky-50), #fff);overflow:hidden;isolation:isolate;}
.dau-trang h1{font-size:clamp(44px, 7vw, 104px);margin:18px 0 22px;}
.duong-dan{display:flex;flex-wrap:wrap;gap:8px;font-size:14px;color:var(--muted);list-style:none;}
.duong-dan a{color:var(--sky-600);display:inline-block;padding:13px 0;margin:-13px 0;}
.duong-dan li + li::before{content:"/";margin-right:8px;color:var(--sky-300);}
/* bong bóng trang trí trôi theo cuộn (thị sai), không tự chạy */
.bong-nen{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;}
.bong-nen i{position:absolute;border-radius:50%;background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.95), rgba(222,238,249,.5) 60%, rgba(154,200,232,.35));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.9);}

/* ---------- khối chung ---------- */
.khoi{padding:clamp(80px, 11vw, 150px) 0;position:relative;}
.khoi.nhat{background:var(--sky-25);}
.khoi-dau{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px 64px;align-items:end;margin-bottom:clamp(40px, 5vw, 64px);}
.khoi-dau .kicker{grid-column:1 / -1;}
@media (max-width:860px){ .khoi-dau{grid-template-columns:1fr;} }

/* câu chữ sáng dần theo cuộn */
.cau-sang{font-size:clamp(28px, 3.6vw, 52px);font-weight:300;line-height:1.3;letter-spacing:-.02em;color:var(--ink-strong);max-width:24em;}
.cau-sang .t{opacity:.16;transition:opacity .2s;}
.cau-sang .t.sang{opacity:1;}
.cau-sang .dinh{white-space:nowrap;}

/* số liệu đếm lên */
.so-lieu{display:grid;grid-template-columns:repeat(4, minmax(0,1fr));border-top:1px solid var(--ink-strong);}
.so-lieu > div{padding:28px 24px 8px 0;border-right:1px solid var(--line);}
.so-lieu > div + div{padding-left:24px;}
.so-lieu > div:last-child{border-right:0;}
.so-lieu .so{display:block;font-weight:200;font-size:clamp(56px, 7vw, 104px);line-height:1;letter-spacing:-.04em;color:var(--ink-strong);font-variant-numeric:tabular-nums;}
.so-lieu .so small{display:block;margin-top:12px;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--sky-600);white-space:nowrap;}
.so-lieu p{font-size:15px;color:var(--ink-soft);margin-top:12px;max-width:16em;}
@media (max-width:860px){ .so-lieu{grid-template-columns:1fr 1fr;} .so-lieu > div{padding:22px 12px 16px 0;} .so-lieu > div:nth-child(2n){border-right:0;} .so-lieu > div:nth-child(n+3){border-top:1px solid var(--line);} .so-lieu > div + div{padding-left:0;} .so-lieu > div:nth-child(2n){padding-left:14px;} }

/* thẻ ảnh có nghiêng 3D + vệt sáng khi rê chuột */
.luoi-the{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:22px;}
.the-anh{position:relative;display:block;border-radius:26px;overflow:hidden;background:var(--sky-100);transform-style:preserve-3d;will-change:transform;isolation:isolate;
  box-shadow:0 18px 44px rgba(18,50,74,.1);}
.the-anh .khung{aspect-ratio:4/5;overflow:hidden;}
.the-anh img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);transition:transform 1.2s var(--ease);}
.the-anh:hover img{transform:scale(1.02);}
.the-anh .chu{position:absolute;left:0;right:0;bottom:0;padding:26px 24px 24px;color:#fff;
  background:linear-gradient(180deg, rgba(18,50,74,0), rgba(18,50,74,.82) 46%);}
.the-anh h3{color:#fff;font-size:clamp(24px, 2.2vw, 32px);font-weight:300;margin-bottom:8px;}
.the-anh p{font-size:15px;color:rgba(255,255,255,.88);}
.the-anh .loang{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.26), transparent 45%);}
.the-anh:hover .loang{opacity:1;}
@media (max-width:980px){ .luoi-the{grid-template-columns:1fr 1fr;} }
@media (max-width:620px){ .luoi-the{grid-template-columns:1fr;} .the-anh .khung{aspect-ratio:4/3;} }
/* thẻ cuối đứng lẻ một mình trên hàng (7 nhóm = 3 + 3 + 1) thì đặt vào GIỮA hàng, giữ nguyên cỡ thẻ.
   Không kéo thành băng ngang: ảnh máy phân tích da cắt rộng sẽ lộ máy in và hộp có chữ nhãn hàng (12/10/2026). */
@media (min-width:981px){ .luoi-the > .rv:last-child:nth-child(3n+1){grid-column:2;} }
@media (min-width:621px) and (max-width:980px){ .luoi-the > .rv:last-child:nth-child(2n+1){grid-column:1 / -1;justify-self:center;width:calc(50% - 11px);} }

/* ảnh lộ ra qua vòng tròn (motif kính soi) và ảnh thị sai trong khung */
.anh-tron{overflow:hidden;border-radius:28px;background:var(--sky-50);}
.js .anh-tron{clip-path:circle(14% at 50% 50%);}
.anh-tron img{width:100%;height:100%;object-fit:cover;}
.khung-thi-sai{overflow:hidden;}
.khung-thi-sai img{width:100%;height:118%;object-fit:cover;will-change:transform;}

/* chữ chạy theo cuộn */
.bang-chay{overflow:hidden;padding:10px 0;display:grid;gap:14px;}
.hang{display:flex;gap:14px;width:max-content;will-change:transform;}
.hang span{white-space:nowrap;padding:14px 28px;border-radius:999px;font-size:clamp(18px, 2vw, 28px);font-weight:300;color:var(--ink-strong);background:#fff;border:1px solid var(--line);}
/* trắng và xanh xen kẽ trong từng hàng (anh Hiệp dặn 1/10); hàng .dam bắt đầu bằng viên xanh để hai hàng so le */
.hang span:nth-child(even), .hang.dam span:nth-child(odd){background:var(--deep);color:#fff;border-color:var(--deep);}
.hang.dam span:nth-child(even){background:#fff;color:var(--ink-strong);border-color:var(--line);}

/* các bước: đường nối vẽ dần */
.cac-buoc{list-style:none;display:grid;grid-template-columns:repeat(var(--n, 4), minmax(0,1fr));gap:28px;position:relative;--ve:1;}
.js .cac-buoc{--ve:0;}
.cac-buoc::before, .cac-buoc::after{content:"";position:absolute;left:24px;right:24px;top:24px;height:2px;background:var(--line);}
.cac-buoc::after{background:var(--sky-500);transform-origin:0 50%;transform:scaleX(var(--ve));}
.cac-buoc li{position:relative;z-index:1;}
.cac-buoc .nut-so{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid var(--sky-300);
  color:var(--sky-600);font-weight:600;margin-bottom:22px;transition:background .5s, color .5s, border-color .5s, transform .5s var(--ease);}
.cac-buoc li.bat .nut-so{background:var(--deep);border-color:var(--deep);color:#fff;transform:scale(1.08);}
.cac-buoc h3{font-size:21px;font-weight:500;letter-spacing:-.01em;line-height:1.3;margin-bottom:8px;}
.cac-buoc p{font-size:16px;color:var(--ink-soft);}
@media (max-width:860px){
  .cac-buoc{grid-template-columns:1fr;gap:26px;}
  .cac-buoc::before, .cac-buoc::after{left:24px;right:auto;top:24px;bottom:24px;width:2px;height:auto;}
  .cac-buoc::after{transform-origin:50% 0;transform:scaleY(var(--ve));}
  .cac-buoc li{display:grid;grid-template-columns:50px minmax(0,1fr);gap:18px;}
  .cac-buoc .nut-so{margin-bottom:0;}
}

/* giấy tờ pháp lý: nghiêng 3D khi rê */
.giay-to{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:26px;}
.giay{display:block;padding:18px;border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:0 18px 40px rgba(18,50,74,.08);transform-style:preserve-3d;will-change:transform;position:relative;overflow:hidden;}
.giay .trang{aspect-ratio:1/1.35;border-radius:10px;overflow:hidden;background:var(--sky-50);border:1px solid var(--line);}
.giay .trang img{width:100%;height:100%;object-fit:cover;object-position:top;}
.giay h3{font-size:19px;font-weight:500;margin:16px 0 4px;line-height:1.35;}
.giay p{font-size:14px;color:var(--muted);}
.giay .loang{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(154,200,232,.22), transparent 50%);}
.giay:hover .loang{opacity:1;}
@media (max-width:860px){ .giay-to{grid-template-columns:1fr;} .giay{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;align-items:center;} .giay h3{margin-top:0;} }

/* tin tức */
.ds-bai{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:26px;}
.bai{display:block;}
.bai .khung{aspect-ratio:16/10;border-radius:22px;overflow:hidden;background:var(--sky-50);}
.bai img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease);}
.bai:hover img{transform:scale(1.07);}
.bai .loai{display:block;margin-top:18px;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--sky-600);}
.cum{white-space:nowrap;} /* cụm từ trong tiêu đề bài: chỉ xuống dòng GIỮA các cụm */
.bai h3{font-size:clamp(21px, 1.8vw, 26px);font-weight:400;line-height:1.3;margin:8px 0 8px;transition:color .3s;}
.bai:hover h3{color:var(--sky-600);}
.bai p{font-size:15px;color:var(--ink-soft);}
@media (max-width:980px){ .ds-bai{grid-template-columns:1fr 1fr;} }
@media (max-width:620px){ .ds-bai{grid-template-columns:1fr;} }

/* hỏi đáp: mở ra có hoạt ảnh chiều cao */
.hoi-dap{border-top:1px solid var(--ink-strong);}
.hoi-dap details{border-bottom:1px solid var(--line);}
.hoi-dap summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:74px;padding:14px 0;
  font-size:clamp(18px, 1.6vw, 22px);font-weight:400;color:var(--ink-strong);}
.hoi-dap summary::-webkit-details-marker{display:none;}
.hoi-dap summary i{flex:0 0 38px;height:38px;border-radius:50%;position:relative;box-shadow:inset 0 0 0 1px var(--sky-300);transition:background .3s, transform .5s var(--ease);}
.hoi-dap summary i::before, .hoi-dap summary i::after{content:"";position:absolute;left:12px;right:12px;top:18px;height:1.5px;background:var(--ink-strong);transition:transform .5s var(--ease);}
.hoi-dap summary i::after{transform:rotate(90deg);}
.hoi-dap details[open] summary i{background:var(--sky-100);transform:rotate(180deg);}
.hoi-dap details[open] summary i::after{transform:rotate(0);}
.hoi-dap .tra-loi{overflow:hidden;}
.hoi-dap .tra-loi > div{padding:0 64px 26px 0;color:var(--ink-soft);}

/* khối kêu gọi + chân trang */
.goi-lon{padding:clamp(90px, 12vw, 160px) 0 40px;background:var(--sky-25);border-top:1px solid var(--line);position:relative;overflow:hidden;isolation:isolate;}
.goi-lon .so-dt{display:table;margin-top:18px;font-weight:200;letter-spacing:-.04em;line-height:1;color:var(--ink-strong);font-size:clamp(46px, 11vw, 150px);
  font-variant-numeric:tabular-nums;white-space:nowrap;transition:color .3s;}
.goi-lon .so-dt:hover{color:var(--sky-600);}
.goi-lon .hang-nut{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px;}
.chan-luoi{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:34px 44px;margin-top:70px;padding-top:34px;border-top:1px solid var(--line);}
.chan-luoi h4{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--sky-600);margin-bottom:12px;}
.chan-luoi p, .chan-luoi li{font-size:15px;color:var(--ink-soft);}
.chan-luoi ul{list-style:none;display:grid;gap:4px;}
.chan-luoi b{white-space:nowrap;color:var(--ink-strong);}
.chan-luoi a{display:inline-flex;align-items:center;min-height:44px;transition:color .25s;}
/* Zalo hai số: nhãn bên trái, hai số xếp chồng bên phải. Bản "Zalo 082... - 083..." ở máy tính rớt lẻ số thứ hai (1/10) */
.chan-zalo{display:grid;grid-template-columns:auto 1fr;column-gap:.35em;align-items:start;}
.chan-zalo > span:first-child{display:flex;align-items:center;min-height:44px;}
.chan-zalo > span:last-child{display:grid;justify-items:start;}
.chan-luoi a:hover{color:var(--sky-600);}
.chan-luoi .logo{height:74px;width:auto;margin-bottom:14px;}
.trang-thai{display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:6px 12px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px var(--line);font-size:14px;font-weight:500;color:var(--ink-strong);}
.trang-thai i{width:9px;height:9px;border-radius:50%;background:var(--muted);position:relative;}
.trang-thai.mo i{background:#2E9E6B;}
.trang-thai.mo i::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid #2E9E6B;opacity:0;animation:nhip 1.8s var(--ease) 3;}
@keyframes nhip{0%{transform:scale(.5);opacity:.8;}100%{transform:scale(1.6);opacity:0;}}
.phap-ly{margin-top:34px;padding-top:20px;border-top:1px solid var(--line);font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:8px 26px;}
@media (max-width:980px){ .chan-luoi{grid-template-columns:1fr 1fr;} .goi-lon{padding-bottom:110px;} }
@media (max-width:620px){ .chan-luoi{grid-template-columns:1fr;} }

/* ============================================================
   BÌA TRANG CHỦ: KÍNH SOI
   ============================================================ */
.soi{position:relative;}
/* Anh dặn 2/10: sau "Soi kỹ mới thấy rõ" GIỮ KHUNG DA làm nền, chỉ chữ chạy, bong bóng bệnh tràn vào từ bên phải.
   Khối "Những nỗi lo" (#benh-ly) nằm TRONG .soi, sau khoảng cuộn .soi-khoang, nên khung da (.soi-dinh, ghim) đứng yên
   làm nền suốt khối đó rồi mới cuộn đi cùng mép dưới khối. Khoảng cuộn 120svh = nhịp kính soi cũ (220svh - 100svh).
   kinh-soi.js: "Soi kỹ" bay lên, tiêu đề + đoạn dẫn bay từ dưới lên theo thanh cuộn; site.js mục 12: bóng tràn vào.
   Không JS / không WebGL / giảm chuyển động: không ghim, không khoảng cuộn, bố cục thường. */
.soi-khoang{display:none;}
html.js:not(.khong-gl) .soi-khoang{display:block;height:120svh;}
html.js:not(.khong-gl) #benh-ly{z-index:2;overflow-x:clip;}
html.js:not(.khong-gl) #benh-ly > .bong-nen{display:none;} /* chấm tròn trang trí của nền trắng, lạc lõng trên nền da */
/* quầng sáng mềm sau tiêu đề + đoạn dẫn cho dễ đọc trên nền da (như quầng sau "Soi kỹ"); hiện cùng nhịp chữ:
   --sang do kinh-soi.js đặt, quầng của đoạn dẫn nằm trong đoạn dẫn nên mờ theo đoạn dẫn */
html.js:not(.khong-gl) #benh-ly .khoi-dau h2, html.js:not(.khong-gl) #benh-ly .khoi-dau .lead{position:relative;}
html.js:not(.khong-gl) #benh-ly .khoi-dau h2::before, html.js:not(.khong-gl) #benh-ly .khoi-dau .lead::before{content:"";position:absolute;
  inset:-34% -12%;z-index:-1;pointer-events:none;opacity:var(--sang, 1);
  background:radial-gradient(closest-side, rgba(247,251,254,.94) 52%, rgba(247,251,254,0));}
html.js:not(.khong-gl) #benh-ly .khoi-dau h2::before{top:-62%;}
/* điện thoại: đoạn dẫn gần kín bề ngang nên mép chữ rơi vào chỗ hai quầng nhỏ đã nhạt -> MỘT quầng tròn rộng cho cả cụm,
   mờ dần nhiều nấc như quầng sau "Soi kỹ". ⛔ Tấm sáng bo góc + filter:blur bị anh chê "viền không chuyển mượt" (2/10):
   vẫn thấy hình tấm nền. Đã thử 3 kiểu cạnh khung "Soi kỹ": chép y quầng "Soi kỹ" thì hẹp, đầu dòng đoạn dẫn nằm trên vân da. */
@media (max-width:860px){
  html.js:not(.khong-gl) #benh-ly .khoi-dau h2::before, html.js:not(.khong-gl) #benh-ly .khoi-dau .lead::before{display:none;}
  html.js:not(.khong-gl) #benh-ly .khoi-dau{position:relative;}
  /* ⛔ top không vượt 72px (lề trên khối 80px): Safari iPhone cắt cả chiều dọc ở mép khối #benh-ly (do overflow-x:clip),
     đo trên ảnh anh gửi 2/10: đường cắt ở 120px = mép trên khối 118,7px. Quầng phải nằm trọn trong khối. */
  html.js:not(.khong-gl) #benh-ly .khoi-dau::before{content:"";position:absolute;top:max(-42%, -72px);bottom:-42%;left:-16%;right:-16%;z-index:-1;
    pointer-events:none;opacity:var(--sang, 1);
    background:radial-gradient(closest-side, rgba(247,251,254,.95) 50%, rgba(247,251,254,.75) 66%, rgba(247,251,254,.35) 84%, rgba(247,251,254,0));}
}
.soi-dinh{position:relative;top:0;height:100svh;overflow:hidden;
  background:radial-gradient(ellipse at 70% 45%, #F6E4DA, #EBD2C4 60%, #E2C4B4);} /* nền màu da khi không có WebGL */
/* chỉ ghim khi kính soi chạy: không JS mà vẫn sticky thì khung da (cả chữ bìa) nằm sau khối "Những nỗi lo" */
html.js:not(.khong-gl) .soi-dinh{position:sticky;}
.soi-canvas{position:absolute;inset:0;width:100%;height:100%;}
.soi-canvas{opacity:0;transition:opacity .9s var(--ease);}
.soi-canvas.san-sang{opacity:1;}
.soi-man{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg, rgba(247,251,254,.96) 0%, rgba(247,251,254,.88) 30%, rgba(247,251,254,0) 58%);}
.soi-chu{position:absolute;left:0;right:0;top:50%;transform:translateY(-46%);z-index:2;}
.soi-chu h1{font-size:clamp(48px, 7.4vw, 124px);margin:20px 0 22px;letter-spacing:-.04em;}
/* "Y Khoa" + "Kỳ Hòa": máy tính ghép một dòng, điện thoại tách hai dòng để tiêu đề nằm gọn bên trái kính */
.soi-chu h1 .ln.ghep{display:inline-block;}
.soi-chu h1 .ln.ghep + .ln.ghep{margin-left:.2em;}
.soi-chu .lead{max-width:30em;}
.hang-nut{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px;}
/* lớp phủ kín bìa: phải bỏ qua chuột, chỉ từng bong bóng nhận bấm. Thiếu dòng này thì kính (luôn nằm dưới con trỏ)
   nuốt cú bấm, hai nút "Cách đến khám" / "Xem dịch vụ" không bấm được trên máy tính (phát hiện 1/10) */
.kinh-bong{position:absolute;inset:0;z-index:3;visibility:hidden;pointer-events:none;}
.kinh-bong .bong{pointer-events:auto;}
/* chữ bìa phóng trong kính (máy tính): bản sao do kinh-soi.js tạo, nằm dưới lớp bong bóng */
.kinh-chu{position:absolute;inset:0;z-index:3;pointer-events:none;visibility:hidden;}
.kinh-chu-phong{position:absolute;inset:0;transform-origin:0 0;will-change:transform;}
.kinh-chu .nut.gia-hover::before{transform:translateY(0);}
.kinh-chu .nut.gia-hover .mui{transform:translateX(5px);}
.kinh-bong.san-sang{visibility:visible;}
.kinh-bong .bong{position:absolute;left:0;top:0;width:var(--d);height:var(--d);padding:calc(var(--d) * .12);font-size:max(13px, calc(var(--d) * .1));}
.bong .dong{display:block;white-space:nowrap;}
.kinh-kinh{position:absolute;left:0;top:0;z-index:4;border-radius:50%;pointer-events:none;opacity:0;
  box-shadow:0 0 0 2px rgba(255,255,255,.95), 0 0 0 3.5px rgba(18,50,74,.16), inset 0 0 24px rgba(18,50,74,.22), inset 0 -12px 30px rgba(255,255,255,.2);
  background:radial-gradient(circle at 30% 24%, rgba(255,255,255,.34), rgba(255,255,255,.06) 30%, transparent 46%);}
.soi-chu2{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);z-index:5;pointer-events:none;}
.soi-chu2::before{content:"";position:absolute;left:-12%;top:-40%;width:80%;height:180%;z-index:-1;opacity:0;transition:opacity .7s var(--ease);
  background:radial-gradient(closest-side, rgba(247,251,254,.95) 45%, rgba(247,251,254,0));}
.soi-chu2.bat::before{opacity:1;}
.soi-chu2 h2{font-size:clamp(40px, 6vw, 92px);}
.soi-chu2 p{max-width:30em;margin-top:22px;color:var(--ink);font-size:clamp(16px, 1.3vw, 19px);}
.js .soi-chu2 p{opacity:0;transform:translateY(16px);}
.soi-tay{position:absolute;left:0;top:0;z-index:6;border-radius:50%;touch-action:none;display:none;}
.soi-goi-y{position:absolute;left:0;top:0;z-index:7;pointer-events:none;white-space:nowrap;padding:9px 15px;border-radius:999px;
  background:rgba(255,255,255,.95);color:var(--ink-strong);font-size:13px;font-weight:500;box-shadow:0 6px 20px rgba(18,50,74,.14);opacity:0;transition:opacity .5s;}
.soi-goi-y.hien{opacity:1;}
.soi-goi-y .cham{display:none;}
@media (hover:none), (pointer:coarse){ .soi-goi-y .chuot{display:none;} .soi-goi-y .cham{display:inline;} .soi-tay{display:block;} }
.khong-gl .soi{height:auto;}
.khong-gl .soi-dinh{position:relative;}
.khong-gl .soi-canvas, .khong-gl .kinh-chu, .khong-gl .kinh-bong, .khong-gl .kinh-kinh, .khong-gl .soi-chu2, .khong-gl .soi-goi-y, .khong-gl .soi-tay{display:none;}
/* Điện thoại (anh Hiệp chốt 1/10): kính lúp ĐỨNG CỐ ĐỊNH ở góc phải trên, trong kính thấy da có chấm, KHÔNG có
   bong bóng bệnh, không kéo được; lướt xuống thì kính nở phủ màn hình rồi hiện "Soi kỹ, mới thấy rõ." như máy tính.
   Lớp mờ trắng chỉ đậm ở nửa dưới (sau chữ), nửa trên để thấy rõ làn da lúc chưa soi.
   Cao theo lvh: thanh địa chỉ thu vào không lòi dải trắng, cỡ khung không đổi nên không phải vẽ lại da;
   chữ cách đáy thêm (lvh - svh) để không nằm dưới thanh địa chỉ. Không WebGL / giảm chuyển động (.khong-gl): không ghim. */
@media (max-width:860px){
  html.js:not(.khong-gl) .soi-khoang{height:100vh;height:100lvh;} /* nhịp kính soi điện thoại cũ: 200lvh - 100lvh */
  .soi-dinh{height:100vh;height:100lvh;}
  /* kính nằm NGANG TẦM tiêu đề lớn (anh chê kính cao quá, 1/10): khối chữ về giữa màn hình, kính sát mép phải,
     tâm kính = tâm h1 (JS đặt), tiêu đề vẽ đè lên kính. Không che bằng lớp mờ toàn màn: tiêu đề và kính nằm
     trên da thật, chỉ đoạn dẫn + nút có nền mềm phía sau (.soi-phu::before) */
  .soi-man{display:none;}
  .soi-chu{top:calc(50% - 24px);transform:translateY(-50%);}
  /* tiêu đề 3 dòng, cỡ chữ để dòng dài nhất "Trẻ hóa da" vẫn cách kính (bên phải, rộng 36% màn) ít nhất 8px */
  .soi-chu h1{margin:14px 0 16px;font-size:clamp(38px, 10.8vw, 44px);}
  .soi-chu h1 .ln.ghep{display:block;margin-left:-.06em;}
  .soi-chu h1 .ln.ghep + .ln.ghep{margin-left:-.06em;} /* không thì "Kỳ Hòa" thụt vào .2em so với "Y Khoa" (lỗi 1/10) */
  .soi-phu{position:relative;}
  /* nền mềm: một mảng sáng làm mờ mép bằng filter blur, không còn tấm chữ nhật bo góc lộ mép (anh chê 1/10) */
  .soi-phu::before{content:"";position:absolute;inset:-6px -16px -18px;z-index:-1;border-radius:40px;
    background:rgba(247,251,254,.86);filter:blur(22px);}
  .hang-nut{margin-top:22px;}
  .soi-chu2::before{left:-10%;width:120%;}
  .kinh-bong, .kinh-chu, .soi-tay, .soi-goi-y{display:none !important;}
}

/* lưới bệnh lý: bong bóng xếp so le. Đây là dạng đứng yên (chưa chạy JS, máy bật giảm chuyển động);
   JS bật .dang-troi thì bóng trôi tự do khắp vùng (mục 12 trong site.js) */
.cum-bong{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:14px 20px;max-width:1120px;margin:0 auto;position:relative;}
.cum-bong .bong{width:var(--d);height:var(--d);padding:calc(var(--d) * .12);font-size:clamp(15px, calc(var(--d) * .1), 18px);position:relative;
  transition:box-shadow .5s var(--ease), background .5s;}
.cum-bong .bong:nth-child(3n+2){margin-top:36px;}
.cum-bong .bong:nth-child(5n+4){margin-top:-10px;}
.cum-bong .bong:hover{box-shadow:inset 0 0 0 1.5px #fff, inset -10px -14px 26px rgba(63,128,176,.26), 0 22px 40px rgba(18,50,74,.26);
  background:radial-gradient(circle at 32% 26%, #fff, rgba(255,255,255,.8) 34%, rgba(222,238,249,.8) 62%, rgba(124,180,222,.7) 100%);}
.cum-bong .bong > *{transition:transform .5s var(--ease);}
.cum-bong .bong:hover > *{transform:scale(1.06);}
/* thở nhẹ: phồng xẹp rất ít bằng thuộc tính scale riêng (vị trí trôi JS ghi vào translate riêng, nảy vào Web Animations ghi vào transform).
   Bóng đang được rê chuột/Tab tới thì thôi thở; máy bật "giảm chuyển động" thì đứng yên. */
@keyframes tho{0%,100%{scale:1;}50%{scale:1.03;}}
.cum-bong .bong{animation:tho var(--t, 6s) ease-in-out var(--tre, 0s) infinite;}
.cum-bong .bong:hover, .cum-bong .bong:focus-visible{animation-play-state:paused;}
@media (prefers-reduced-motion:reduce){ .cum-bong .bong{animation:none;} }
@media (max-width:620px){
  .cum-bong{gap:10px 12px;}
  .cum-bong .bong{width:calc(var(--d) * .78);height:calc(var(--d) * .78);padding:calc(var(--d) * .09);font-size:14px;}
  .cum-bong .bong:nth-child(3n+2){margin-top:20px;}
}
/* trôi tự do: JS đặt bề cao vùng trôi theo tổng diện tích bóng, mỗi bóng đặt tuyệt đối và dời bằng thuộc tính translate */
.cum-bong.dang-troi{display:block;max-width:none;}
.cum-bong.dang-troi .bong{position:absolute;left:0;top:0;margin:0;will-change:translate, transform;}

/* giấy tờ pháp lý dạng chữ */
.giay-so{display:block;white-space:nowrap;font-weight:200;font-size:clamp(28px, 2.6vw, 38px);letter-spacing:-.02em;line-height:1.1;color:var(--ink-strong);
  padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--line);}
.giay h3{font-size:14px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--sky-600);margin:0 0 8px;}
.giay p{font-size:15px;color:var(--ink-soft);}
.giay .lien-ket{margin-top:10px;}
.giay{padding:30px 28px 24px;}
/* 3 thẻ cùng kích thước (anh dặn 1/10): ô lưới kéo giãn cao bằng nhau, thẻ chiếm trọn ô, "Xem văn bản" dồn xuống đáy */
.giay-to > .rv{display:flex;}
.giay-to .giay{flex:1 1 auto;display:flex;flex-direction:column;}
.giay-to .giay .lien-ket{margin-top:auto;padding-top:10px;}
@media (max-width:860px){ .giay{display:block;} }

/* giới thiệu */
.gt-luoi{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px, 6vw, 90px);align-items:center;}
.gt-luoi p{margin-top:18px;color:var(--ink-soft);max-width:34em;}
.gt-luoi h2{margin-top:16px;}
.gt-anh{aspect-ratio:4/5;}
.gt-bang{aspect-ratio:2240/1040;margin-bottom:clamp(40px, 6vw, 80px);}
@media (max-width:860px){ .gt-luoi{grid-template-columns:1fr;} .gt-luoi.dao > :first-child{order:2;} .gt-anh{aspect-ratio:4/3;} }

/* quy trình: chuẩn bị + dấu hiệu */
.qt-luoi{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px, 6vw, 90px);align-items:start;}
.qt-luoi h2{margin-top:16px;}
.qt-luoi .lead{margin-top:20px;}
.ds-chuan-bi{list-style:none;counter-reset:cb;border-top:1px solid var(--ink-strong);}
.ds-chuan-bi li{counter-increment:cb;display:grid;grid-template-columns:64px minmax(0,1fr);gap:4px 16px;padding:22px 0;border-bottom:1px solid var(--line);}
.ds-chuan-bi li::before{content:counter(cb, decimal-leading-zero);grid-row:span 2;font-weight:200;font-size:36px;line-height:1;color:var(--sky-500);}
.ds-chuan-bi h3{font-size:20px;font-weight:500;line-height:1.3;}
.ds-chuan-bi p{color:var(--ink-soft);font-size:16px;}
.ds-dau-hieu{list-style:none;display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:14px;}
.ds-dau-hieu li{position:relative;padding:22px 22px 22px 58px;border-radius:22px;background:var(--sky-50);color:var(--ink-strong);font-size:17px;}
.ds-dau-hieu li::before{content:"";position:absolute;left:22px;top:26px;width:18px;height:18px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff, var(--sky-300));box-shadow:0 0 0 4px rgba(154,200,232,.25);}
@media (max-width:860px){ .qt-luoi{grid-template-columns:1fr;} .ds-dau-hieu{grid-template-columns:1fr;} }

/* kỹ thuật: mục lục (trôi theo trang, anh Hiệp dặn 30/9 không dính) + nhóm */
.kt-muc{position:relative;z-index:30;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);}
.kt-muc ul{display:flex;gap:6px;list-style:none;overflow-x:auto;scrollbar-width:none;padding:12px 0;position:relative;}
.kt-muc ul::-webkit-scrollbar{display:none;}
.kt-muc a{display:flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;white-space:nowrap;font-size:15px;color:var(--ink-soft);transition:color .3s;position:relative;z-index:1;}
.kt-muc a.dang{color:#fff;}
.kt-vach{position:absolute;left:0;top:12px;height:44px;border-radius:999px;background:var(--deep);z-index:0;transition:transform .5s var(--ease), width .5s var(--ease);width:0;}
.kt-danh-sach{padding:clamp(20px, 3vw, 40px) 0 clamp(60px, 8vw, 110px);}
.kt-nhom{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px, 5vw, 80px);padding:clamp(50px, 7vw, 100px) 0;border-bottom:1px solid var(--line);scroll-margin-top:84px;}
.kt-anh{position:sticky;top:110px;aspect-ratio:4/5;border-radius:28px;overflow:hidden;background:var(--sky-50);align-self:start;}
.kt-so{display:block;font-weight:200;font-size:64px;line-height:1;color:var(--sky-400);margin-bottom:10px;}
.kt-chu h2{font-size:clamp(34px, 4vw, 58px);}
.kt-chu .lead{margin-top:18px;}
.kt-ds{list-style:none;margin-top:30px;border-top:1px solid var(--ink-strong);}
.kt-ds li{padding:20px 0;border-bottom:1px solid var(--line);}
.kt-ds h3{font-size:clamp(18px, 1.5vw, 21px);font-weight:500;color:var(--ink-strong);line-height:1.35;margin-bottom:6px;}
.kt-ds p{font-size:16px;color:var(--ink-soft);}
.kt-ds b{font-weight:600;color:var(--ink);}
.kt-ds .luu-y{margin-top:6px;font-size:15px;color:var(--sky-600);}
.kt-nguon{margin-top:40px;font-size:14px;color:var(--muted);max-width:46em;}
@media (max-width:860px){ .kt-nhom{grid-template-columns:1fr;} .kt-anh{position:relative;top:0;aspect-ratio:16/10;} }

/* bài viết */
.hep{width:min(760px, calc(100% - 2*var(--gutter)));margin:0 auto;}
.bv-dau{padding-bottom:40px;}
/* phải kèm .dau-trang: luật ".dau-trang h1" (44-104px) mạnh hơn và đè lên, tiêu đề bài phình 100px ở 1440 (1/10).
   Cỡ nhỏ nhất 30px để cụm dài nhất "và cách chăm sóc da" vừa khung 320px ở máy 360px. */
.dau-trang .bv-tieu-de{font-size:clamp(30px, 8vw, 62px);margin:18px 0 14px;text-wrap:balance;}
.bv-meta{font-size:14px;color:var(--muted);}
.bv-anh-dau{aspect-ratio:16/9;margin-top:10px;}
.bv-than{padding:48px 0 90px;font-size:18px;line-height:1.75;color:var(--ink);}
.bv-than > * + *{margin-top:1.1em;}
.bv-than > :first-child{margin-top:0;} /* bài ẩn ảnh mở đầu bằng h2: lề 1,8em cộng đệm 48px thành khoảng trống ~140px (1/10) */
.bv-than h2{font-size:clamp(26px, 2.6vw, 34px);font-weight:400;margin-top:1.8em;line-height:1.25;text-wrap:balance;}
.bv-than h3{font-size:22px;font-weight:500;margin-top:1.5em;line-height:1.3;}
.bv-than ul, .bv-than ol{padding-left:1.3em;}
.bv-than li + li{margin-top:.4em;}
.bv-than img{border-radius:18px;margin:1.4em 0;width:100%;height:auto;}
.bv-than a{color:var(--sky-600);text-decoration:underline;text-underline-offset:3px;}
.bv-than strong{font-weight:600;color:var(--ink-strong);}
.bv-than table{width:100%;border-collapse:collapse;font-size:16px;}
.bv-than th, .bv-than td{border-bottom:1px solid var(--line);padding:10px 8px;text-align:left;vertical-align:top;}

/* liên hệ */
.lh-luoi{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:22px;}
.lh-the{padding:30px 30px 28px;border-radius:28px;background:#fff;border:1px solid var(--line);box-shadow:0 18px 40px rgba(18,50,74,.06);}
.lh-the .kicker{margin-bottom:14px;}
.lh-so{display:table;padding:4px 0;font-weight:200;font-size:clamp(40px, 5vw, 68px);letter-spacing:-.03em;line-height:1.05;color:var(--ink-strong);white-space:nowrap;font-variant-numeric:tabular-nums;}
.lh-so:hover{color:var(--sky-600);}
.lh-the .hang-nut{margin-top:18px;}
.lh-phu{margin-top:16px;color:var(--ink-soft);}
.lh-phu a{color:var(--sky-600);display:inline-block;padding:11px 0;margin:-11px 0;}
.lh-dc{font-size:clamp(20px, 2vw, 26px);font-weight:300;color:var(--ink-strong);margin-bottom:20px;line-height:1.35;}
.lh-gio{width:100%;border-collapse:collapse;margin-bottom:14px;}
.lh-gio th, .lh-gio td{text-align:left;padding:10px 0;border-bottom:1px solid var(--line);font-size:16px;}
.lh-gio th{font-weight:400;color:var(--ink-soft);}
.lh-gio td{font-weight:600;color:var(--ink-strong);text-align:right;font-variant-numeric:tabular-nums;}
.lh-ban-do{margin-top:22px;aspect-ratio:21/9;}
.lh-ban-do iframe{width:100%;height:100%;border:0;display:block;}
@media (max-width:860px){ .lh-luoi{grid-template-columns:1fr;} .lh-ban-do{aspect-ratio:4/3;} }

/* chuyển trang: trang mới lộ ra từ một vòng tròn nở tại chỗ vừa bấm (motif kính soi) */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto;}
  ::view-transition-old(root){animation:vt-cu .6s var(--ease) both;}
  ::view-transition-new(root){animation:vt-moi .85s var(--ease) both;}
}
@keyframes vt-moi{from{clip-path:circle(0% at var(--vt-x) var(--vt-y));}to{clip-path:circle(150% at var(--vt-x) var(--vt-y));}}
@keyframes vt-cu{to{opacity:.55;transform:scale(.97);}}

@media (prefers-reduced-motion:reduce){
  .js .rv, .js .rv-trai, .js .rv-phong{opacity:1;transform:none;}
  .js [data-lines] .ln > span{transform:none;}
  .js .anh-tron{clip-path:none;}
  .js .cac-buoc{--ve:1;}
  .cau-sang .t{opacity:1;}
  .con-tro{display:none;}
}

/* thẻ bài không có ảnh: khung màu có tên bài và bong bóng trang trí */
.bai .khung.trong{display:grid;place-items:center;position:relative;overflow:hidden;
  background:radial-gradient(circle at 78% 22%, rgba(255,255,255,.9) 0 9%, transparent 10%),
             radial-gradient(circle at 20% 80%, rgba(255,255,255,.55) 0 14%, transparent 15%),
             linear-gradient(135deg, var(--sky-100), var(--sky-300));}
.khung-chu{font-size:clamp(26px, 2.6vw, 36px);font-weight:300;letter-spacing:-.02em;color:var(--ink-strong);padding:0 24px;text-align:center;}

/* ---------- Xin đồng ý cookie (assets/js/analytics.js): thanh sát mép dưới khung hình, không che giữa màn hình ---------- */
.cookie-bang{position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(255,255,255,.97);border-top:1px solid var(--line);
  box-shadow:0 -12px 32px rgba(18,50,74,.10);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:cookie-len .5s var(--ease) both;}
@keyframes cookie-len{from{transform:translateY(100%);}}
.cookie-trong{max-width:var(--maxw);margin:0 auto;padding:16px var(--gutter);display:flex;align-items:center;gap:14px 32px;}
.cookie-chu{flex:1;margin:0;font-size:14px;line-height:1.6;color:var(--ink-soft);text-wrap:pretty;}
.cookie-chu b{color:var(--ink-strong);font-weight:600;}
.cookie-nut{display:flex;gap:10px;flex-shrink:0;}
.cookie-nut .nut{min-height:42px;padding:0 24px;font-size:14px;}
.cookie-nut .nut:focus-visible,.tuy-chon-cookie:focus-visible,.ban-do-cho .nut:focus-visible{outline:2px solid var(--sky-500);outline-offset:3px;}
.tro-ly{transition:bottom .5s var(--ease);}
.co-cookie .tro-ly{bottom:calc(var(--cookie-cao, 0px) + 14px);}
.tuy-chon-cookie{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px;}
.tuy-chon-cookie:hover{color:var(--ink-strong);}
@media (max-width:640px){
  .cookie-trong{flex-direction:column;align-items:stretch;gap:12px;padding:14px 16px calc(14px + env(safe-area-inset-bottom));}
  .cookie-chu{font-size:13.5px;}
  .cookie-nut .nut{flex:1;}
}
@media (prefers-reduced-motion:reduce){ .cookie-bang{animation:none;} .tro-ly{transition:none;} }

/* Bản đồ Google ở trang Liên hệ: chỉ tải khi khách đồng ý cookie hoặc tự bấm "Xem bản đồ" */
.lh-ban-do{position:relative;}
.ban-do-cho{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;
  text-align:center;background:var(--sky-50);color:var(--ink-soft);font-size:14px;line-height:1.6;}
.ban-do-cho p{margin:0;max-width:34ch;text-wrap:balance;}
.lh-ban-do.da-tai .ban-do-cho{display:none;}