/* ================================================================
   BL LUXE — giao diện sang trọng: nền kem, xanh sage dịu, vàng champagne,
   lớp ảnh mờ (frosted) và kính mờ. Tham khảo Ouronyx, Lanserhof, Aman,
   Cadogan Clinic, Self London, SkinSpirit, Westlake Dermatology.
   Nạp SAU style.css — chỉ ghi đè, không xoá hiệu ứng cũ.
   ================================================================ */
:root{
  --ivory:#FAF8F3; --sand:#F2EDE4; --linen:#E8E1D5; --paper:#FFFFFF;
  --sage-50:#F3F4EF; --sage-100:#E8ECE5; --sage-200:#D5DDD3; --sage-300:#B9C6BB;
  --sage-500:#7E9384; --sage-700:#50655A; --sage-900:#2C3731;
  --night:#222925; --night-2:#2C3530;
  --ink:#2A302C; --muted:#6B716C;
  --hair:rgba(184,149,90,.34);
  --champ:linear-gradient(100deg,#8E6D3B 0%,#B08F57 24%,#D8BE8A 42%,#EAD8AE 48%,#C9AB72 56%,#9E7D46 78%,#8E6D3B 100%);
  --mist:#F1F1EA; --line:rgba(68,87,76,.12);
  --shadow-sm:0 1px 2px rgba(42,48,44,.04),0 18px 40px -26px rgba(42,48,44,.30);
  --shadow-lg:0 2px 8px rgba(42,48,44,.04),0 46px 90px -50px rgba(42,48,44,.45);
}
html{background:var(--ivory)}
body{background:var(--ivory);color:var(--ink)}
::selection{background:#CDAF78;color:#fff}
::-webkit-scrollbar-track{background:var(--sand)}
::-webkit-scrollbar-thumb{background:linear-gradient(#C7A86F,#9C7B45);border:2px solid var(--sand)}

/* hạt nhiễu mịn phủ toàn trang — cảm giác giấy in cao cấp */
body::after{content:"";position:fixed;inset:0;z-index:9980;pointer-events:none;opacity:.045;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- chữ ---------- */
h1,h2,h3,h4{font-weight:500;letter-spacing:-.005em}
.h-sec{font-size:clamp(38px,5.2vw,76px);line-height:1.04;font-weight:500;color:var(--ink)}
.h-sec em,.phero h1 em,.lux-gold{font-style:italic;font-weight:500;color:#B8955A;
  background:var(--champ);background-size:230% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:luxSheen 9s linear infinite;padding-right:.06em}
@keyframes luxSheen{to{background-position:-230% 0}}
.eyebrow{font-size:11.5px;font-weight:600;letter-spacing:.4em;color:#977543}
.eyebrow::before,.eyebrow::after{width:42px;background:linear-gradient(90deg,transparent,#B8955A)}
.eyebrow::after{background:linear-gradient(90deg,#B8955A,transparent)}
.lede{color:var(--muted);font-size:17.5px;line-height:1.85}
.sec{padding:clamp(76px,9vw,140px) 0}

/* ---------- nút ---------- */
.btn{background:linear-gradient(120deg,#A3824B 0%,#CDB07C 42%,#EEDFBC 54%,#BE9E66 72%,#9C7B45 100%);background-size:180% 100%;
  color:#2B2318;font-weight:600;font-size:12px;letter-spacing:.2em;padding:16px 34px;border-radius:999px;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 16px 36px -18px rgba(156,123,69,.85);transition:transform .45s var(--ease),box-shadow .45s,background-position .9s var(--ease)}
.btn:hover{background-position:100% 0;box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 24px 46px -18px rgba(156,123,69,.95)}
.btn.ghost{background:rgba(255,255,255,.35);border:1px solid rgba(42,48,44,.28);color:var(--ink);box-shadow:none;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.btn.ghost:hover{background:var(--ink);border-color:var(--ink);color:#F2E4C0}
.btn.dark{background:var(--ink);color:#EADBB9;border:1px solid rgba(205,175,120,.45);box-shadow:0 18px 38px -22px rgba(42,48,44,.9)}
.btn.dark:hover{background:var(--sage-700)}
.lux-dark .btn.ghost,.ctaband .btn.ghost,.eqx .btn.ghost{background:rgba(255,255,255,.06);border-color:rgba(226,203,156,.55);color:#EADBB9}
.lux-dark .btn.ghost:hover,.ctaband .btn.ghost:hover{background:#EADBB9;color:var(--ink)}

/* ---------- thanh trên + header kính mờ ---------- */
.topbar{background:var(--sand);color:rgba(42,48,44,.72);border-bottom:1px solid rgba(184,149,90,.18)}
.topbar a:hover{color:#977543}
.tb-hot{color:#977543}
.langsw{border-color:rgba(42,48,44,.22)}
.langsw button{color:rgba(42,48,44,.6)}
.langsw button.on{background:var(--ink);color:#F2E4C0}
header{background:rgba(250,248,243,.72);-webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);
  border-bottom:1px solid rgba(184,149,90,.16);box-shadow:none}
header.solid{background:rgba(250,248,243,.9);box-shadow:0 18px 40px -30px rgba(42,48,44,.35)}
.brand .bt b{background:var(--champ);background-size:230% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:luxSheen 12s linear infinite;font-weight:700}
.menu>li>a{font-size:12.5px;font-weight:500;letter-spacing:.17em;color:var(--ink)}
.menu>li:hover>a{color:#977543}
.mega{background:rgba(250,248,243,.94);-webkit-backdrop-filter:blur(24px) saturate(1.4);backdrop-filter:blur(24px) saturate(1.4);
  border:1px solid rgba(184,149,90,.22);border-radius:4px;box-shadow:0 40px 80px -40px rgba(42,48,44,.45)}
.mega a:hover{background:rgba(232,236,229,.7);color:var(--ink)}
.svc-mega h6{color:#977543;letter-spacing:.24em}
.svc-mega a:hover{background:none;color:#977543}
#drawer{background:rgba(250,248,243,.96);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}
#drawer a{color:var(--ink);border-bottom-color:rgba(184,149,90,.2);font-size:25px}
#drawer a:hover{color:#977543}
.burger{border-color:rgba(42,48,44,.2)}
.burger span{background:var(--ink)}

/* ---------- màn chờ: nền kem, vòng vàng ---------- */
#preload{background:radial-gradient(80% 60% at 50% 42%,#FFFFFF,#F2EDE4 75%)}
#preload::after{background:radial-gradient(38% 28% at 26% 68%,rgba(213,221,211,.7),transparent 70%),radial-gradient(34% 26% at 74% 30%,rgba(226,203,156,.5),transparent 70%)}
.pl-name{color:#977543}
.pl-bar{background:rgba(184,149,90,.18)}

/* ================================================================
   HERO trang chủ — ảnh nền nhoè mờ + khung vòm ảnh thật + kính mờ
   ================================================================ */
.hero.lux-hero{background:var(--ivory);min-height:min(100svh,980px);align-items:stretch}
.lh-bg{position:absolute;inset:-40px;z-index:0;overflow:hidden}
.lh-bg img{width:100%;height:100%;object-fit:cover;filter:blur(26px) saturate(.75) brightness(1.08);transform:scale(1.12);
  animation:kb 30s ease-in-out infinite alternate}
.lh-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(250,248,243,.97) 0%,rgba(250,248,243,.9) 38%,rgba(250,248,243,.55) 64%,rgba(250,248,243,.35) 100%),
             radial-gradient(60% 70% at 78% 40%,rgba(226,203,156,.28),transparent 70%),
             linear-gradient(180deg,rgba(250,248,243,.2) 0%,transparent 40%,rgba(250,248,243,.95) 100%)}
.lux-hero .grain{z-index:1;opacity:.18;mix-blend-mode:multiply}
.lux-hero #stars{z-index:2}
.lh-in{position:relative;z-index:3;display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(30px,5vw,80px);align-items:center;
  padding:clamp(56px,7vw,96px) 0 clamp(70px,8vw,110px)}
.lux-hero .hero-badge{color:#977543;border-color:rgba(184,149,90,.4);background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.lux-hero .hero-badge i{background:#B8955A}
.lux-hero h1 .ln{white-space:nowrap}
.lux-hero h1{color:var(--ink);font-weight:400;font-size:clamp(44px,6.3vw,98px);line-height:.98;letter-spacing:-.015em;margin:26px 0 10px}
.lux-hero h1 .goldtext .ch{color:#B8955A;font-style:italic;text-shadow:0 10px 40px rgba(184,149,90,.25)}
.lux-hero .sub{color:#977543;font-weight:400;letter-spacing:.06em}
.lux-hero p.desc{color:var(--muted);font-size:17.5px;max-width:50ch}
.lux-hero .hero-stats{border-top:1px solid rgba(184,149,90,.3);gap:clamp(26px,4vw,54px)}
.lux-hero .hero-stats div b{color:var(--ink);font-weight:500;font-size:clamp(34px,3.4vw,46px)}
.lux-hero .hero-stats div span{color:var(--muted)}
.lux-hero .scroll-cue{color:var(--muted)}
.lux-hero .side-social{right:auto;left:22px}
.lux-hero .side-social a{color:#977543;border-color:rgba(184,149,90,.4);background:rgba(255,255,255,.4)}

/* khung vòm */
.lh-art{position:relative;justify-self:center;width:min(100%,470px);aspect-ratio:4/5.4;opacity:0;animation:luxArch 1.6s var(--xo,cubic-bezier(.16,1,.3,1)) .5s forwards}
@keyframes luxArch{from{opacity:0;transform:translateY(40px) scale(.96)}to{opacity:1;transform:none}}
.lh-arch{position:absolute;inset:0;border-radius:999px 999px 6px 6px;overflow:hidden;background:var(--sand);
  box-shadow:0 60px 110px -60px rgba(42,48,44,.6),0 0 0 1px rgba(255,255,255,.6) inset}
.lh-arch::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(180deg,rgba(250,248,243,0) 55%,rgba(42,48,44,.28) 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.lh-slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%;opacity:0;transform:scale(1.12);
  transition:opacity 1.6s var(--ease),transform 7s linear}
.lh-slides img.on{opacity:1;transform:scale(1)}
.lh-line{position:absolute;inset:-18px 18px 18px -18px;border:1px solid rgba(184,149,90,.55);border-radius:999px 999px 6px 6px;pointer-events:none;z-index:-1}
.lh-seal{position:absolute;left:-58px;bottom:15%;width:132px;height:132px;z-index:4;border-radius:50%;
  background:rgba(250,248,243,.62);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 24px 50px -24px rgba(42,48,44,.5),inset 0 0 0 1px rgba(255,255,255,.7);display:grid;place-items:center}
.lh-seal svg{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);animation:spin 26s linear infinite}
.lh-seal svg text{font-family:var(--sans);font-size:9px;fill:#977543;font-weight:600}
.lh-seal img{width:46px;height:46px;object-fit:contain}
.lh-card{position:absolute;right:-40px;top:5%;z-index:4;max-width:230px;padding:16px 20px 16px 18px;border-radius:14px;
  background:rgba(250,248,243,.6);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid rgba(255,255,255,.75);box-shadow:0 26px 60px -30px rgba(42,48,44,.55);animation:float 6s ease-in-out infinite}
.lh-card b{display:block;font-family:var(--serif);font-size:21px;font-weight:600;color:var(--ink);line-height:1.15}
.lh-card span{display:block;margin-top:4px;font-size:12.5px;line-height:1.5;color:var(--muted)}
.lh-card i{display:block;width:26px;height:1px;background:#B8955A;margin-bottom:10px}
.lh-dots{position:absolute;left:50%;bottom:22px;translate:-50% 0;z-index:3;display:flex;gap:7px}
.lh-dots i{width:6px;height:6px;border-radius:9px;background:rgba(255,255,255,.55);transition:width .6s var(--ease),background .4s}
.lh-dots i.on{width:26px;background:#fff}
@media(max-width:900px){
  .lh-in{grid-template-columns:1fr;padding:44px 0 70px;gap:44px}
  .lh-art{width:min(80vw,380px);order:2}
  .lh-veil{background:linear-gradient(180deg,rgba(250,248,243,.95) 0%,rgba(250,248,243,.82) 55%,rgba(250,248,243,.95) 100%)}
  .lh-seal{left:-24px;width:104px;height:104px}.lh-seal img{width:36px;height:36px}
  .lh-card{right:-10px;max-width:190px;padding:12px 14px}
  .lh-card b{font-size:18px}
}
@media(max-width:560px){.lh-art{width:74vw}.lh-card{top:3%;right:-14px}.lux-hero h1{font-size:clamp(40px,11.6vw,58px)}}

/* ---------- dải thương hiệu ---------- */
.marq{background:transparent;border-block:1px solid rgba(184,149,90,.22);padding:24px 0;position:relative;z-index:3}
.marq-t span{font-family:var(--serif);font-style:italic;font-weight:500;font-size:25px;letter-spacing:.14em;color:var(--ink);opacity:.62}
.marq-t span::after{content:"✦";font-style:normal;color:#B8955A;opacity:.9;font-size:11px}

/* ================================================================
   LỚP ẢNH MỜ dùng chung (banner trang con, CTA, kết quả)
   ================================================================ */
.lux-photo{position:absolute;inset:-40px;z-index:-2;overflow:hidden;pointer-events:none}
.lux-photo img{width:100%;height:100%;object-fit:cover;filter:blur(24px) saturate(.7) brightness(1.06);transform:scale(1.1);animation:kb 34s ease-in-out infinite alternate}
.lux-photo.soft img{filter:blur(34px) saturate(.6) brightness(1.12);opacity:.75}

/* banner đầu trang con */
.phero{position:relative;overflow:hidden;isolation:isolate;background:var(--ivory)!important;border-bottom:1px solid rgba(184,149,90,.2);
  padding:clamp(80px,9vw,140px) 0 clamp(80px,9vw,130px);min-height:clamp(380px,46vw,560px);display:grid;align-items:center}
.phero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(250,248,243,.97) 0%,rgba(250,248,243,.88) 46%,rgba(250,248,243,.5) 100%),
             radial-gradient(50% 70% at 80% 30%,rgba(226,203,156,.25),transparent 70%)}
.phero .crumb{color:var(--muted);letter-spacing:.24em;font-size:11.5px}
.phero h1{color:var(--ink);font-weight:400;font-size:clamp(42px,5.4vw,84px);line-height:1.02;letter-spacing:-.015em}
.phero p{color:var(--muted);font-size:18px;max-width:52ch}
.phero:has(.ph-art) .wrap>*{max-width:min(660px,58%)}
.ph-art{position:absolute;right:max(24px,calc((100vw - var(--maxw))/2 + 10px));top:50%;translate:0 -50%;z-index:2;
  width:clamp(240px,24vw,340px);aspect-ratio:3/4;animation:luxArch 1.5s var(--xo,cubic-bezier(.16,1,.3,1)) .35s both}
.ph-art .arch{position:absolute;inset:0;border-radius:999px 999px 4px 4px;overflow:hidden;box-shadow:0 50px 90px -50px rgba(42,48,44,.6)}
.ph-art .arch img{width:100%;height:100%;object-fit:cover;object-position:center 26%}
.ph-art::before{content:"";position:absolute;inset:-14px 14px 14px -14px;border:1px solid rgba(184,149,90,.5);border-radius:999px 999px 4px 4px}
@media(max-width:900px){
  .ph-art{display:none}.phero:has(.ph-art) .wrap>*{max-width:none}
  .phero{min-height:0}
  .phero::before{background:linear-gradient(180deg,rgba(250,248,243,.93),rgba(250,248,243,.86))}
}
.dark-sec:not(.ctaband).phero .orb{opacity:.18}

/* ---------- CTA cuối trang: ảnh thật nhoè + phủ tối ấm ---------- */
.dark-sec.ctaband{background:var(--night)!important;color:#F2EEE6;padding:clamp(96px,11vw,170px) 0!important}
.ctaband .lux-photo img{filter:blur(18px) saturate(.6) brightness(.9);opacity:.55}
.ctaband::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 90% at 50% 50%,rgba(34,41,37,.55),rgba(34,41,37,.92) 100%)}
.ctaband .h-sec{color:#F7F3EA}
.ctaband .eyebrow{color:#E2CB9C}
.ctaband .lede,.ctaband p{color:rgba(247,243,234,.78)!important}
.ctaband .mist,.ctaband .rays{opacity:.25}
.wave{display:none!important}
.sec:has(> .wave.top),footer:has(> .wave.top){padding-top:clamp(76px,9vw,140px)}
.pz + .ctaband,.eqx + .ctaband{padding-top:clamp(96px,11vw,170px)!important}

/* ánh sáng theo con trỏ trên nền tối */
[data-spot]{--mx:50%;--my:40%}
[data-spot]>.spot{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .6s;
  background:radial-gradient(520px circle at var(--mx) var(--my),rgba(226,203,156,.16),transparent 62%)}
[data-spot]:hover>.spot{opacity:1}

/* ---------- footer ---------- */
footer{background:var(--night)!important;color:rgba(242,238,230,.78);padding-top:clamp(80px,9vw,120px)}
footer::before{background:linear-gradient(90deg,transparent,rgba(205,175,120,.7),transparent)}
footer h5{color:#E2CB9C;font-weight:500;letter-spacing:.08em}
footer .mist{opacity:.12!important}
.fbot{border-top-color:rgba(205,175,120,.18);color:rgba(242,238,230,.5)}
.branch{border-bottom-color:rgba(205,175,120,.16)}
.f-mark{position:relative;z-index:2;margin-top:clamp(30px,5vw,60px);text-align:center;line-height:.8;user-select:none;pointer-events:none;
  font-family:var(--serif);font-weight:500;font-size:min(13.6vw,226px);letter-spacing:.05em;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1px rgba(226,203,156,.26);
  background:linear-gradient(180deg,rgba(226,203,156,.22),rgba(226,203,156,0) 85%);-webkit-background-clip:text;background-clip:text}
footer .flogo b{background:var(--champ);background-size:230% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ---------- nút nổi ---------- */
.fab a,.fab button{background:var(--ink);color:#EADBB9}
.fab .call{background:linear-gradient(140deg,#7A2B22,#9A3A2C)}

/* ================================================================
   DỊCH VỤ NỔI BẬT (trang chủ)
   ================================================================ */
.fsv-sec{background:linear-gradient(180deg,var(--ivory),#F4F1EA 60%,var(--ivory))}
.fsv-sec::before{opacity:.3}
.fsv::before{background:radial-gradient(closest-side,rgba(255,255,255,.9),rgba(255,255,255,0))}
.fsv-card{border-radius:999px 999px 14px 14px;border:0;box-shadow:0 44px 70px -44px rgba(42,48,44,.6)}
.fsv-card.is-c{box-shadow:0 60px 90px -50px rgba(42,48,44,.75),0 0 0 1px rgba(205,175,120,.5)}
.fsv-cap{background:linear-gradient(180deg,rgba(34,41,37,0) 0,rgba(34,41,37,.5) 24%,rgba(34,41,37,.86) 52%,rgba(30,36,33,.96) 100%)}
.fsv-cap h3{color:#EADBB9;font-weight:500}
.fsv-nav{border-color:rgba(184,149,90,.6);color:#977543;background:rgba(250,248,243,.6)}
.fsv-nav:hover{background:var(--ink);color:#EADBB9;border-color:var(--ink)}

/* ================================================================
   KẾT QUẢ THỰC TẾ (trang chủ) — thanh kéo so sánh trước / sau
   ================================================================ */
.lux-res{position:relative;overflow:hidden;isolation:isolate;background:var(--ivory)}
.lux-res::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(250,248,243,.9),rgba(250,248,243,.76) 50%,rgba(250,248,243,.92)),
             radial-gradient(50% 60% at 85% 40%,rgba(213,221,211,.55),transparent 70%)}
.lr-in{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(36px,6vw,100px);align-items:center}
.lr-list{list-style:none;margin:34px 0 30px;padding:0;border-top:1px solid rgba(184,149,90,.28)}
.lr-list button{width:100%;display:grid;grid-template-columns:48px 1fr auto;align-items:baseline;gap:14px;text-align:left;
  padding:17px 4px;background:none;border:0;border-bottom:1px solid rgba(184,149,90,.22);color:var(--ink);cursor:pointer;position:relative}
.lr-list button::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:#B8955A;transform:scaleX(0);transform-origin:left;transition:transform .7s var(--xo,cubic-bezier(.16,1,.3,1))}
.lr-list button.on::after{transform:scaleX(1)}
.lr-list i{font-family:var(--serif);font-style:italic;font-size:22px;color:#B8955A}
.lr-list b{font-family:var(--serif);font-weight:500;font-size:clamp(20px,1.8vw,24px);line-height:1.2;transition:color .3s}
.lr-list span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.lr-list button:hover b,.lr-list button.on b{color:#977543}
.lr-list button:not(.on){opacity:.66}.lr-list button:hover{opacity:1}
.lr-go{display:inline-flex;align-items:center;gap:12px;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);
  border-bottom:1px solid #B8955A;padding-bottom:6px}
.lr-go:hover{color:#977543}
.lr-stage{position:relative;justify-self:center;width:min(100%,560px)}
.lr-stage::before{content:"";position:absolute;inset:-18px -18px 18px 18px;border:1px solid rgba(184,149,90,.45);border-radius:6px;pointer-events:none}
.lr-note{margin:16px 0 0;font-size:13px;color:var(--muted);font-style:italic;text-align:right}
@media(max-width:900px){.lr-in{grid-template-columns:1fr}.lr-stage{width:min(100%,460px)}.lr-stage::before{inset:-10px -10px 10px 10px}}
@media(max-width:480px){.lr-list span{display:none}.lr-list button{grid-template-columns:38px 1fr}}

.about .h-sec,.lr-txt .h-sec,.svp-txt .h-sec,.svp-faq .h-sec,.regf-body .h-sec{font-size:clamp(36px,4.3vw,62px)}
/* khung so sánh dùng chung */
.cmp{--x:50%;position:relative;aspect-ratio:3/4;border-radius:6px;overflow:hidden;background:var(--sand);user-select:none;-webkit-user-select:none;
  touch-action:pan-y;cursor:ew-resize;box-shadow:var(--shadow-lg)}
.cmp.l{aspect-ratio:4/3}
.cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 38%;pointer-events:none;transition:opacity .6s var(--ease)}
.cmp .cmp-a{position:absolute;inset:0;clip-path:inset(0 0 0 var(--x));transition:clip-path .08s linear}
.cmp.swap img{opacity:0}
.cmp-h{position:absolute;top:0;bottom:0;left:var(--x);width:0;z-index:3;transition:left .08s linear}
.cmp-h::before{content:"";position:absolute;top:0;bottom:0;left:-.5px;width:1px;background:rgba(255,255,255,.9);box-shadow:0 0 18px rgba(255,255,255,.7)}
.cmp-h i{position:absolute;top:50%;left:0;translate:-50% -50%;width:58px;height:58px;border-radius:50%;
  background:rgba(250,248,243,.42);-webkit-backdrop-filter:blur(10px) saturate(1.4);backdrop-filter:blur(10px) saturate(1.4);
  border:1px solid rgba(255,255,255,.85);box-shadow:0 14px 34px -12px rgba(0,0,0,.45);display:grid;place-items:center}
.cmp-h i::before,.cmp-h i::after{content:"";position:absolute;top:50%;width:8px;height:8px;border:solid #fff;border-width:0 0 1.5px 1.5px;translate:0 -50%}
.cmp-h i::before{left:15px;rotate:45deg}.cmp-h i::after{right:15px;rotate:-135deg}
.cmp-l{position:absolute;top:16px;z-index:4;font-size:10.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:#fff;
  padding:7px 13px;border-radius:999px;background:rgba(34,41,37,.4);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.35)}
.cmp-l.b{left:16px}.cmp-l.a{right:16px}
.cmp:focus-visible{outline:2px solid #B8955A;outline-offset:6px}

/* ================================================================
   GIỚI THIỆU / BÁC SĨ / DÀN MÁY / SẢN PHẨM / FORM
   ================================================================ */
.dark-sec:not(.ctaband){background:radial-gradient(60% 70% at 85% 10%,rgba(213,221,211,.5),transparent 70%),
  radial-gradient(50% 60% at 8% 90%,rgba(226,203,156,.18),transparent 70%),linear-gradient(180deg,var(--ivory) 0%,#F6F4EE 50%,var(--mist) 100%)}
.light-sec{background:linear-gradient(180deg,var(--ivory) 0%,#F6F4EE 40%,var(--mist) 75%,var(--ivory) 100%)}
.about-media .fr{border-radius:999px 999px 6px 6px}
.about-media .fr img{aspect-ratio:4/4.6}
.about-media::before{inset:-18px 18px 18px -18px;border-color:rgba(184,149,90,.55);border-radius:999px 999px 6px 6px}
.about-media .fr.fx-img{--fxr:6px}
.badge-float{background:rgba(250,248,243,.6);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);border:1px solid rgba(255,255,255,.8);box-shadow:0 26px 60px -30px rgba(42,48,44,.55)}
.badge-float b{color:var(--ink)}.badge-float span{color:var(--muted)}
.about .vals{border-top-color:rgba(184,149,90,.3)}
.about .vals .val{border-bottom-color:rgba(184,149,90,.22)}

/* thẻ bác sĩ: ảnh vòm, tên trên lớp kính mờ */
.docs{gap:clamp(18px,2.4vw,30px)}
.dark-sec:not(.ctaband) .doc.big,.doc.big{display:grid;grid-template-rows:1fr auto auto auto;padding:0;border:0;border-radius:999px 999px 8px 8px;overflow:hidden;
  background:var(--sand);box-shadow:0 40px 80px -48px rgba(42,48,44,.65);text-align:left;aspect-ratio:3/4.3}
.doc.big>.ph{grid-row:1/-1;grid-column:1;margin:0;border-radius:0;aspect-ratio:auto;height:100%;position:relative;z-index:0}
.doc.big>.ph.fx-img{--fxr:0px}
.doc.big::after{content:"";grid-row:2/5;grid-column:1;z-index:1;margin:0 12px 12px;border-radius:10px;
  background:rgba(250,248,243,.66);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid rgba(255,255,255,.8)}
.doc.big>h4,.doc.big>small,.doc.big>p{grid-column:1;z-index:2;margin-left:30px;margin-right:30px}
.doc.big>h4{grid-row:2;padding-top:20px;font-size:23px;color:var(--ink)!important;font-weight:600}
.doc.big>small{grid-row:3;margin-top:4px;color:#977543!important}
.doc.big>p{grid-row:4;margin-top:6px;padding-bottom:28px;font-size:13.8px!important;color:var(--muted)!important;line-height:1.55}
.dark-sec:not(.ctaband) .doc.big:hover,.doc.big:hover{transform:translateY(-8px);box-shadow:0 56px 90px -50px rgba(42,48,44,.8);background:var(--sand)}
@media(max-width:640px){.docs .doc.big{aspect-ratio:3/4.5}}

/* dàn máy: nền tối ấm, máy nổi bật */
.eqx{background:radial-gradient(60% 80% at 50% 42%,#3D4A42 0%,#2C3530 52%,#212824 100%)}
.eqx::before{opacity:.8;background:radial-gradient(40% 30% at 18% 92%,rgba(255,255,255,.1),transparent 70%),
  radial-gradient(40% 30% at 82% 92%,rgba(255,255,255,.1),transparent 70%),radial-gradient(34% 40% at 50% 0%,rgba(226,203,156,.2),transparent 70%)}
.eqx .h-sec{color:#F7F3EA}
.eqx .h-sec em{display:block}
.eqx .eyebrow{color:#E2CB9C}
.eqx .lede{color:rgba(247,243,234,.8)}
.eqx-tags li{border-color:rgba(226,203,156,.4);color:#EADBB9;background:rgba(255,255,255,.05)}
.eqx-stats b{color:#F7F3EA;font-family:var(--serif);font-size:clamp(36px,3.6vw,50px)}
.eqx-stats span{color:#CDAF78}

/* sản phẩm */
.pills-head .h-sec em{color:#B8955A}
.pill h3{color:var(--ink)}
.pill .meta,.pill-more{color:var(--ink)}
.pill-1{background:radial-gradient(120% 90% at 20% 30%,#fff 0%,var(--ivory) 45%,var(--sage-100) 100%)}
.pill-3{background:radial-gradient(80% 90% at 45% 50%,#fff 0%,#F2F0E9 48%,#DCD9CC 100%)}

/* form đăng ký */
.regf-sec{background:linear-gradient(180deg,var(--mist),var(--ivory) 45%,var(--ivory))}
.regf{border-radius:8px;border:1px solid rgba(184,149,90,.25)}
.regf-body .h-sec{color:var(--ink)}
.rf-l{color:var(--ink)}
.rf-in input,.rf-in textarea{border-bottom-color:rgba(42,48,44,.22)}
.rf-in svg{color:#977543}
.regf-note span{color:#EADBB9}

/* ---------- trang Dịch vụ: thẻ ---------- */
#catalog .svc-tabs button.on{color:var(--ink)}
#catalog .svc-tabs .tabs-ink{background:#B8955A}
#catalog .svc-card{border-radius:6px;border-color:rgba(184,149,90,.2);background:#fff}
#catalog .svc-card:hover{border-color:rgba(184,149,90,.6);box-shadow:0 34px 70px -40px rgba(42,48,44,.55)}
#catalog .svc-ph{aspect-ratio:4/3}
#catalog .svc-tag{background:rgba(250,248,243,.7);color:var(--ink);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.8)}
#catalog .svc-chips span{background:var(--sage-100);color:var(--sage-700)}
#catalog .svc-btn{color:var(--ink)}
#catalog .svc-card:hover .svc-btn,#catalog .svc-btn:hover{border-color:#B8955A;background:var(--ink);color:#EADBB9}
.tabs.has-ink button.on{color:#EADBB9}
.tabs-ink{background:var(--ink)}

/* ---------- trang chi tiết dịch vụ ---------- */
.svp-ind{background:rgba(255,255,255,.6);border-left-color:#B8955A;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.svp-ind b{color:#977543}
.svp-media{border-radius:999px 999px 6px 6px;background:linear-gradient(160deg,#E8ECE5,#CBD5CB 60%,#B9C6BB)}
.svp-media .ph{color:var(--ink)}
.svp-media .ph b{color:var(--ink)}
.svp-media .ph small{color:var(--muted)}
.svp-media.has-cmp{border-radius:6px;background:none;box-shadow:none;aspect-ratio:auto;overflow:visible}
.svp-media.has-cmp .cmp{box-shadow:var(--shadow-lg)}
.svp-media.has-cmp figcaption{margin-top:12px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);text-align:center}
.svp-txt .svc-chips span{background:var(--sage-100);color:var(--sage-700)}
.svp-res{background:linear-gradient(180deg,var(--ivory),#F4F1EA)}
.ba-tile{border-radius:4px;box-shadow:0 30px 60px -40px rgba(42,48,44,.55);background:var(--sand)}
.ba-i span{background:rgba(250,248,243,.7);color:var(--ink);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.8)}
.svp-step-list{border-top-color:rgba(184,149,90,.3)}
.svp-step-list i{color:#B8955A}
.svp-rel a{border-color:rgba(184,149,90,.3);color:var(--ink);background:rgba(255,255,255,.6)}
.svp-rel a:hover{border-color:#B8955A;background:var(--ink);color:#EADBB9}
.svp-rel a.all{border-color:#B8955A;color:#977543}
.svp-call{color:var(--ink)}
.svp-empty{border-color:rgba(184,149,90,.4);background:rgba(255,255,255,.5)}
.svp-empty b{color:var(--ink)}
.balb{background:rgba(28,33,30,.94)}

/* thư viện, hỏi đáp, liên hệ */
.qa{border-color:rgba(184,149,90,.22)}
.qa.open{border-color:#B8955A}
.qa button i{border-color:#B8955A;color:#977543}
.qa.open button i{background:#B8955A}
.masonry figure{border-radius:6px}
.cbox .vals .val b{color:#977543}

/* hero: các lớp trôi nhẹ theo con trỏ (chiều sâu) */
.lh-art>*{transition:translate .9s cubic-bezier(.16,1,.3,1)}
@media(prefers-reduced-motion:reduce){
  .lh-art,.ph-art{animation:none;opacity:1}
  .h-sec em,.phero h1 em,.lux-gold,.brand .bt b{animation:none}
}

/* ---------- footer: mã QR fanpage ---------- */
@media(min-width:1101px){.fgrid{grid-template-columns:1.4fr 1.3fr 1fr auto}}
.f-qr a{display:block;width:140px;border-radius:14px;overflow:hidden;background:#fff;border:0!important;
  box-shadow:0 0 0 1px rgba(226,203,156,.45),0 20px 44px -22px rgba(0,0,0,.7);transition:transform .45s var(--ease),box-shadow .45s}
.f-qr a:hover{transform:translateY(-4px);box-shadow:0 0 0 1px rgba(226,203,156,.8),0 26px 50px -22px rgba(0,0,0,.75)}
.f-qr img{display:block;width:100%;height:auto;image-rendering:pixelated}

/* ---------- hộp hotline: máy tính không gọi trực tiếp được, bấm số thì hiện số để xem / sao chép ---------- */
.hl-pop{position:fixed;inset:0;z-index:9990;display:grid;place-items:center;padding:20px;
  background:rgba(22,27,24,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s}
.hl-pop.on{opacity:1;visibility:visible;transition:opacity .35s ease}
.hl-card{position:relative;width:min(100%,430px);padding:40px 34px 32px;border-radius:22px;text-align:center;
  background:linear-gradient(180deg,#FFFFFF,var(--ivory));border:1px solid rgba(184,149,90,.35);box-shadow:var(--shadow-lg);
  transform:translateY(18px) scale(.97);transition:transform .55s cubic-bezier(.16,1,.3,1)}
.hl-pop.on .hl-card{transform:none}
.hl-x{position:absolute;top:12px;right:12px;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;
  border:1px solid rgba(42,48,44,.15);background:none;color:var(--ink);font-size:16px;cursor:pointer;transition:background .3s,color .3s}
.hl-x:hover{background:var(--ink);color:#F2E4C0}
.hl-ic{width:60px;height:60px;margin:0 auto 16px;display:grid;place-items:center;border-radius:50%;color:#2B2318;
  background:linear-gradient(120deg,#A3824B 0%,#CDB07C 42%,#EEDFBC 54%,#BE9E66 72%,#9C7B45 100%);box-shadow:0 16px 36px -18px rgba(156,123,69,.9)}
.hl-ic svg{width:26px;height:26px}
.hl-eye{display:block;font-size:11px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:#977543}
.hl-num{display:block;margin:10px 0 8px;font-family:var(--serif);font-size:clamp(38px,9vw,48px);font-weight:600;line-height:1.1;
  letter-spacing:.02em;color:var(--ink);user-select:all}
.hl-sub{margin:0;font-size:14px;line-height:1.7;color:var(--muted)}
.hl-act{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:24px}
.hl-act .btn{padding:14px 24px}
.hl-act .btn.ghost{background:transparent}

/* ---------- menu Dịch vụ: cột "Máy công nghệ cao" chia theo chức năng, rộng gấp đôi ---------- */
.svc-mega{grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,2.15fr) minmax(0,1fr);width:min(1240px,calc(100vw - 40px))}
.svc-mega .mfn{columns:2;column-gap:26px}
.svc-mega .mfn-g{break-inside:avoid;padding-bottom:10px}
.svc-mega .msub{display:block;padding:10px 0 2px;font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#B8955A;opacity:.85}
.svc-mega .mfn-g:first-child .msub{padding-top:2px}
/* ---------- trang máy: dòng thiết bị + ưu điểm công nghệ ---------- */
.svp-dev{display:inline-flex;align-items:center;gap:12px;margin-top:20px;padding:7px 18px 7px 7px;border-radius:999px;
  background:rgba(255,255,255,.62);border:1px solid rgba(184,149,90,.38);box-shadow:var(--shadow-sm);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.svp-dev span{font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:#2A302C;background:var(--champ);background-size:230% 100%;padding:6px 12px;border-radius:999px}
.svp-dev b{font-weight:600;font-size:14px;letter-spacing:.03em;color:var(--ink)}
.svp-pro-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.svp-pro-list li{position:relative;padding:34px 30px 32px;border-radius:22px;background:rgba(255,255,255,.62);border:1px solid rgba(184,149,90,.28);box-shadow:var(--shadow-sm)}
.svp-pro-list i{font-family:var(--serif);font-style:italic;font-size:44px;line-height:1;color:#B8955A;display:block}
.svp-pro-list p{margin:16px 0 0;font-size:16.5px;line-height:1.7;color:var(--ink)}
.svp-pros .svp-note{margin-top:22px}
@media (max-width:860px){.svp-pro-list{grid-template-columns:1fr}}