/* HIN BIO AESTHETICS — public site v2. Font basic dễ đọc (Be Vietnam Pro), thêm chiều sâu thị giác */
:root{
  --kem:#F7F3EE; --trang:#FFFFFF; --xanh-dam:#0a2e3d; --xanh:#1a5066;
  --vang:#C08A2E; --vang-nhat:#F3E7D3; --xam:#6b8a96; --nhat:#e9e2d8;
  --bong:0 10px 30px rgba(10,46,61,.08);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Be Vietnam Pro',-apple-system,sans-serif;background:var(--kem);color:var(--xanh-dam);line-height:1.75;font-size:16.5px;overflow-x:hidden}
h1,h2,h3{font-family:'Be Vietnam Pro',sans-serif;font-weight:700;line-height:1.3;letter-spacing:-.3px}
a{color:var(--xanh);text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}

/* Header */
header{background:rgba(247,243,238,.94);backdrop-filter:blur(10px);position:sticky;top:0;z-index:50;border-bottom:1px solid var(--nhat)}
.nav{display:flex;align-items:center;gap:26px;padding:14px 0}
.logo{font-size:18px;letter-spacing:1px;color:var(--xanh-dam);font-weight:800;white-space:nowrap;display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo b{color:var(--vang);font-weight:800}
.logo img{height:36px;width:auto}
.nav-links{display:flex;gap:22px;margin-left:auto;align-items:center;flex-wrap:wrap}
.nav-links a{font-size:14.5px;color:var(--xanh-dam);font-weight:500}
.nav-links a:hover{color:var(--vang)}
.btn{display:inline-block;background:var(--xanh-dam);color:#fff;padding:12px 28px;border-radius:100px;font-size:15px;font-weight:600;letter-spacing:.2px;transition:.25s;box-shadow:0 6px 18px rgba(10,46,61,.22)}
.btn:hover{background:var(--vang);color:#fff;transform:translateY(-2px);box-shadow:0 10px 24px rgba(192,138,46,.35)}
.btn.vang{background:linear-gradient(135deg,#d09a3e,var(--vang));box-shadow:0 6px 18px rgba(192,138,46,.35)}
.btn.vien{background:transparent;border:1.5px solid var(--xanh-dam);color:var(--xanh-dam);box-shadow:none}

/* Hero */
.hero{padding:70px 22px 34px;text-align:center;position:relative;overflow:hidden}
.hero:before{content:"";position:absolute;top:-180px;left:50%;transform:translateX(-50%);width:900px;height:520px;background:radial-gradient(ellipse at center,rgba(192,138,46,.14),transparent 65%);pointer-events:none}
.hero .kicker{letter-spacing:4px;font-size:12.5px;color:var(--vang);text-transform:uppercase;margin-bottom:18px;font-weight:600}
.hero h1{font-size:clamp(32px,5vw,52px);max-width:840px;margin:0 auto 20px;font-weight:800}
.hero h1 em{font-style:normal;color:var(--vang)}
.hero p.sub{max-width:620px;margin:0 auto 32px;color:var(--xanh);font-size:17.5px}
.cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hero .cta{gap:14px;justify-content:center;position:relative}

/* Dải số liệu */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;max-width:860px;margin:44px auto 0;position:relative}
.stat{background:var(--trang);border:1px solid var(--nhat);border-radius:14px;padding:18px 12px;box-shadow:var(--bong)}
.stat b{display:block;font-size:26px;font-weight:800;color:var(--vang)}
.stat span{font-size:13px;color:var(--xanh)}

/* Sections */
section{padding:64px 0}
.sec-kicker{letter-spacing:3px;font-size:12px;color:var(--vang);text-transform:uppercase;margin-bottom:10px;font-weight:600}
h2{font-size:clamp(24px,3.4vw,34px);margin-bottom:14px}
.sec-sub{color:var(--xanh);max-width:660px;margin-bottom:36px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.card{background:var(--trang);border:1px solid var(--nhat);border-radius:16px;padding:28px 26px;box-shadow:var(--bong);transition:.25s;position:relative;overflow:hidden}
.card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--vang),#e2c07a);opacity:0;transition:.25s}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(10,46,61,.13)}
.card:hover:before{opacity:1}
.card h3{font-size:19px;margin-bottom:8px}
.card p{font-size:15px;color:var(--xanh)}
.card .tag{display:inline-block;font-size:11px;letter-spacing:2px;color:var(--vang);text-transform:uppercase;margin-bottom:10px;font-weight:700}
.card a.more{font-size:14px;color:var(--vang);display:inline-block;margin-top:12px;font-weight:600}

/* Face Map band */
.band{background:linear-gradient(135deg,var(--xanh-dam) 0%,#123c4e 60%,#17506a 100%);color:#fff;border-radius:22px;padding:56px 46px;box-shadow:0 22px 50px rgba(10,46,61,.28);position:relative;overflow:hidden}
.band:after{content:"";position:absolute;right:-120px;top:-120px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(192,138,46,.25),transparent 70%)}
.band h2{color:#fff}
.band p{color:#cfdde4;max-width:700px}
.band ul{list-style:none;margin:22px 0 30px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;position:relative}
.band li{padding-left:26px;position:relative;font-size:15px;color:#e7eef2}
.band li:before{content:"✓";color:var(--vang);position:absolute;left:0;font-weight:800}

/* Ảnh kết quả */
.ketqua img{border-radius:16px;box-shadow:var(--bong);border:1px solid var(--nhat)}
.ketqua figcaption{font-size:13px;color:var(--xam);margin-top:10px}
/* khung kết quả đồng bộ: ảnh mọi khổ nằm gọn trong thẻ vuông trắng */
.kq-deu figure{margin:0;display:flex;flex-direction:column}
.kq-deu figure img{width:100%;aspect-ratio:1/1;object-fit:contain;background:#fff;padding:8px;box-sizing:border-box}
.kq-deu figcaption{flex:1}

/* Story */
.story{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:40px;align-items:center}
.story blockquote{font-size:21px;font-weight:600;font-style:italic;color:var(--xanh);border-left:3px solid var(--vang);padding-left:22px;line-height:1.6}

/* Ưu đãi */
.uudai{background:linear-gradient(135deg,var(--vang-nhat),#fdf8ef);border:1.5px solid #e5cd9e;border-radius:18px;padding:36px;display:flex;gap:24px;align-items:center;flex-wrap:wrap;justify-content:space-between;box-shadow:var(--bong)}
.uudai h3{font-size:22px}
.uudai p{color:var(--xanh);font-size:15px}

/* Article (trang dịch vụ) */
article.noidung{background:var(--trang);border:1px solid var(--nhat);border-radius:18px;padding:46px;max-width:860px;margin:0 auto;box-shadow:var(--bong)}
article.noidung h1{font-size:clamp(26px,3.8vw,36px);margin-bottom:16px;font-weight:800}
article.noidung h2{font-size:22px;margin:34px 0 12px;padding-top:6px}
article.noidung p{margin-bottom:16px}
article.noidung ul{margin:0 0 16px 22px}
article.noidung li{margin-bottom:8px}
article.noidung img{border-radius:14px;box-shadow:var(--bong)}
.breadcrumb{font-size:13.5px;color:var(--xam);margin:22px 0}
.luuy{background:var(--kem);border-left:3px solid var(--vang);padding:16px 20px;border-radius:0 10px 10px 0;font-size:14.5px;margin:20px 0}

/* FAQ */
.faq details{background:var(--kem);border:1px solid var(--nhat);border-radius:12px;padding:18px 22px;margin-bottom:12px}
.faq summary{cursor:pointer;font-weight:600;font-size:15.5px}
.faq details p{margin-top:10px;font-size:15px;color:var(--xanh)}

/* CTA cuối */
.cta-cuoi{text-align:center;background:var(--trang);border:1px solid var(--nhat);border-radius:22px;padding:54px 30px;box-shadow:var(--bong)}

/* Footer */
footer{background:var(--xanh-dam);color:#b9cbd4;margin-top:70px;padding:46px 0 26px;font-size:14px}
footer .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px;margin-bottom:26px}
footer h4{color:#e0b25c;font-size:12.5px;margin-bottom:10px;letter-spacing:2px;text-transform:uppercase}
footer p{line-height:1.95;margin:0}
footer a{color:#b9cbd4}
footer a:hover{color:var(--vang)}
footer .cuoi{border-top:1px solid #1d4356;padding-top:16px;font-size:12px;color:#7d97a3}
@media (max-width:640px){
  footer{margin-top:48px;padding:30px 0 20px;font-size:12.5px}
  footer .cols{grid-template-columns:1fr 1fr;gap:18px 14px;margin-bottom:20px}
  footer .cols>div:first-child{grid-column:1/-1;padding-bottom:2px;border-bottom:1px solid #1d4356}
  footer h4{font-size:11px;letter-spacing:1.5px;margin-bottom:6px}
  footer p{line-height:1.85}
  footer .cuoi{font-size:11px;text-align:center;padding-top:13px}
}

@media (max-width:1024px){
  .logo{font-size:16px}
  .nav{gap:16px}
  .nav-links{gap:14px}
  .nav-links a{font-size:13.5px}
  header .btn{padding:10px 18px;font-size:14px}
}
@media (max-width:640px){
  .nav{flex-wrap:wrap;gap:8px;padding:10px 0 8px}
  .logo{font-size:14.5px;letter-spacing:.3px;margin-right:auto}
  .logo img{height:30px}
  .nav-links{order:3;width:100%;justify-content:center;margin:0;gap:22px;border-top:1px solid var(--nhat);padding-top:8px}
  .nav-links a{font-size:13.5px}
  .nav-links a.an-mobile{display:none}
  .btn.dat-lich{padding:9px 15px;font-size:13px;white-space:nowrap}
  .hero .cta .btn{padding:12px 24px;font-size:14.5px}
  section{padding:44px 0}
  article.noidung{padding:28px 20px}
  .band{padding:38px 24px}
  .hero{padding:52px 20px 26px}
  .hero .kicker{font-size:10px;letter-spacing:1.8px}
  .hero h1{font-size:27px}
  .hero p.sub{font-size:16px}
  .stats{grid-template-columns:1fr 1fr;gap:10px}
  .stat b{font-size:22px}
  .stat span{font-size:12px}
}

.uu-dai-bar{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:8px 12px;flex-wrap:wrap;background:linear-gradient(100deg,#8f6218,#C08A2E 32%,#e3b258 50%,#C08A2E 68%,#8f6218);color:#fff;text-align:center;padding:9px 16px;font-size:14.5px;font-weight:600;text-shadow:0 1px 2px rgba(90,58,10,.35)}
.uu-dai-bar b{background:var(--xanh-dam);color:#ffd98a;padding:4px 14px;border-radius:100px;font-weight:800;font-size:13.5px;text-shadow:none;box-shadow:0 2px 8px rgba(10,46,61,.3)}
.uu-dai-bar .ud-nut{background:#fff;color:var(--xanh-dam);padding:4px 14px;border-radius:100px;font-weight:700;font-size:13px;text-shadow:none;transition:.2s}
.uu-dai-bar:hover .ud-nut{transform:scale(1.05)}
.uu-dai-bar:after{content:"";position:absolute;top:0;left:-25%;width:18%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);animation:udshine 3.6s ease-in-out infinite}
@keyframes udshine{0%{left:-25%}55%{left:125%}100%{left:125%}}
@media (max-width:640px){
  .uu-dai-bar{font-size:12px;padding:8px 12px;gap:6px 10px}
  .uu-dai-bar b{font-size:12.5px;padding:3px 12px}
  .uu-dai-bar .ud-nut{display:none}
}

/* Hero banner hè */
.hero2{position:relative;overflow:hidden;background:#f3ecdf}
.hero2-anh{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center;display:block}
.hero2:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(247,243,238,.95) 20%,rgba(247,243,238,.6) 45%,rgba(247,243,238,0) 68%);z-index:1}
.hero2-chu{position:relative;z-index:2;padding-top:92px;padding-bottom:92px}
.hero2 .kicker{letter-spacing:4px;font-size:12.5px;color:var(--vang);text-transform:uppercase;margin-bottom:16px;font-weight:600}
.hero2 h1{font-size:clamp(30px,4.2vw,50px);max-width:600px;margin:0 0 18px;font-weight:800}
.hero2 .sub{max-width:500px;color:var(--xanh);font-size:17px;margin:0 0 30px}
.hero2 .cta{display:flex;gap:14px;flex-wrap:wrap}
.stats{margin-top:26px}
@media (max-width:640px){
  .hero2-anh{position:static;height:auto;aspect-ratio:16/9}
  .hero2:after{display:none}
  .hero2-chu{padding:26px 20px 6px;text-align:center}
  .hero2 h1{font-size:26px;max-width:none;margin:0 auto 14px}
  .hero2 .sub{margin:0 auto 24px;font-size:15.5px;max-width:none}
  .hero2 .cta{justify-content:center}
  .hero2 .kicker{font-size:10px;letter-spacing:1.8px}
  .stats{margin-top:20px}
}

/* Dịch vụ nổi bật */
#dich-vu-noi-bat .grid3{grid-template-columns:repeat(auto-fit,minmax(232px,1fr))}
.dv-nb{display:flex;flex-direction:column;padding:18px 18px 22px}
.dv-nb img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:12px;margin-bottom:16px}
.dv-nb h3{margin-bottom:8px}
.dv-nb p{flex:1;font-size:14.5px}
.dv-cta{margin-top:16px;gap:10px}
.dv-cta .btn{padding:10px 18px;font-size:13.5px}
.dv-badge{position:absolute;top:28px;left:28px;z-index:2;background:linear-gradient(100deg,#C08A2E,#e3b258);color:#fff;font-size:12px;font-weight:700;padding:5px 13px;border-radius:100px;box-shadow:0 3px 10px rgba(140,95,20,.35)}
@media (max-width:640px){
  .dv-cta .btn{padding:9px 15px;font-size:12.5px}
  .dv-badge{top:26px;left:26px}
}

/* Bong bóng chat Na */
#na-bong{position:fixed;right:18px;bottom:18px;z-index:999;display:flex;align-items:center;gap:8px;background:linear-gradient(120deg,#a9761f,#C08A2E 45%,#e3b258);color:#fff;border:none;border-radius:100px;padding:13px 18px;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;box-shadow:0 8px 24px rgba(140,95,20,.4);transition:.25s}
#na-bong:hover{transform:translateY(-2px)}
#na-bong.an{opacity:0;pointer-events:none}
#na-khung{position:fixed;right:18px;bottom:18px;z-index:1000;width:min(380px,calc(100vw - 24px));height:min(560px,calc(100vh - 110px));background:#fff;border-radius:16px;box-shadow:0 16px 48px rgba(10,46,61,.35);display:flex;flex-direction:column;overflow:hidden;opacity:0;pointer-events:none;transform:translateY(14px);transition:opacity .22s,transform .22s;will-change:opacity,transform}
@media (max-width:640px){
  #na-khung{inset:0;width:100%;height:100%;border-radius:0;transform:translateY(100%)}
  #na-khung.mo{transform:none}
  #na-dau{padding:14px 16px;font-size:15px}
}
#na-khung.mo{opacity:1;pointer-events:auto;transform:none}
#na-dau{display:flex;align-items:center;justify-content:space-between;background:var(--xanh-dam);color:#fff;padding:11px 14px;font-size:14px}
#na-dong{background:none;border:none;color:#fff;font-size:24px;line-height:1;cursor:pointer;padding:0 4px}
#na-iframe{flex:1;width:100%;border:none}
/* Form đặt lịch trang chủ */
.form-dl{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:760px;margin:0 auto}
.form-dl input,.form-dl select{flex:1 1 200px;padding:13px 16px;border:1px solid var(--nhat);border-radius:12px;font-family:inherit;font-size:14.5px;background:#fff;color:var(--xanh-dam)}
.form-dl button{flex:1 1 160px;cursor:pointer;border:none;font-family:inherit}
.form-dl .loi{flex-basis:100%;color:#b3403a;font-size:13.5px}
.form-dl .xong{flex-basis:100%;font-size:16px;color:var(--xanh-dam);font-weight:600}
@media (max-width:640px){
  #na-bong{padding:12px 15px;font-size:13px}
  .form-dl input,.form-dl select,.form-dl button{flex-basis:100%}
}

/* Cửa sổ đặt lịch nhanh */
#dl-phu{position:fixed;inset:0;z-index:1100;background:rgba(10,46,61,.55);display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;pointer-events:none;transition:.22s}
#dl-phu.mo{opacity:1;pointer-events:auto}
#dl-hop{position:relative;background:#fff;border-radius:18px;padding:30px 26px 26px;width:min(430px,100%);max-height:calc(100vh - 40px);overflow:auto;box-shadow:0 20px 60px rgba(10,46,61,.4);transform:translateY(12px);transition:.22s}
#dl-phu.mo #dl-hop{transform:none}
#dl-hop h3{font-size:21px;margin-bottom:6px;color:var(--xanh-dam)}
#dl-hop>p{font-size:14px;color:var(--xam);margin-bottom:18px}
#dl-dong{position:absolute;top:10px;right:14px;background:none;border:none;font-size:26px;color:var(--xam);cursor:pointer;line-height:1}
.form-dl.doc{flex-direction:column}
.form-dl.doc input,.form-dl.doc select,.form-dl.doc button{flex-basis:auto;width:100%}
.form-bao.loi{flex-basis:100%;color:#b3403a;font-size:13.5px}