/* BloodLab Da Nang v3.3: experience-led, responsive, progressively enhanced. */
:root{--premium-navy:#0c2441;--premium-mid:#173e65;--premium-gold:#cba66a;--premium-ice:#eef8fc}
html{scroll-padding-top:108px}
body{overflow-x:clip}
.container{min-width:0}
.section{overflow:clip}
header,nav,.hero,.hero-inner,.hero-copy,.hero-media,.heading-row,.service-grid,.pricing-layout,.why-layout,.collection-layout,.footer-inner{min-width:0}
.site-header,.mobile-nav,.mobile-toggle,.lang-switch{isolation:isolate}
.brand,.header-actions,.lang-switch{min-width:0}
.brand-word{white-space:nowrap}
header .brand:focus-visible{outline-offset:5px}
/* Hero: hierarchy, whitespace, and clarity about early-access status */
.hero{background:radial-gradient(ellipse at 87% 17%,#dcecf7 0,transparent 45%),linear-gradient(116deg,#fff 5%,#f4fafd 76%)}
.hero-copy{min-width:0}
.hero h1{font-size:clamp(2.55rem,4.6vw,4.35rem);letter-spacing:-.057em;line-height:1.075;text-wrap:balance;overflow-wrap:break-word}
.hero h1 em{color:#166eab}
.hero .lead{font-size:clamp(.96rem,1.12vw,1.08rem);line-height:1.68;max-width:57ch}
.hero-badges{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px}
.hero-badges span{display:inline-flex;gap:7px;align-items:center;border-radius:999px;padding:8px 11px;border:1px solid #d7e7ee;background:#fff;color:#2c5872;font-weight:720;font-size:.75rem;line-height:1.25;max-width:100%}
.hero-badges .ico{width:16px;height:16px;color:#087baa}
.hero .notice-inline{font-size:.78rem;background:rgba(237,249,251,.8)}
.hero .hero-ctas{margin-top:0}
.hero-portrait{box-shadow:0 34px 84px rgba(12,43,73,.15)}
.hero-media .float-card{max-width:260px}
/* USP clear and honest about future rollout */
.trust-grid{padding-block:26px 15px}
.trust-item{align-items:flex-start;min-width:0}
.trust-item .ico{width:24px;height:24px;margin-top:1px}
.trust-item strong{font-size:.84rem}
.trust-item span{font-size:.71rem}
.trust-note{font-size:.72rem;color:#718496;line-height:1.55;text-align:center;margin:0 auto;padding:0 0 17px;max-width:980px}
/* Curated price list: editorial layout with meaningful price selection reasoning */
.pricing{background:linear-gradient(180deg,#fff 0,#f9fcfe 74%,#fff 100%)}
.catalog-explainer{position:relative;gap:clamp(1.5rem,3.5vw,4.2rem);padding:clamp(1.35rem,3.5vw,3.4rem);margin-bottom:clamp(2.2rem,4vw,4rem);border-radius:29px;background:linear-gradient(137deg,#edf8fc,#f6fafd 59%,#fff);border:1px solid #dfeef4;box-shadow:0 22px 70px rgba(25,66,94,.06);grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr)}
.catalog-explainer::before{content:"";position:absolute;right:5%;top:4%;width:120px;height:120px;background:radial-gradient(circle,#bddfed 0,transparent 68%);opacity:.3;pointer-events:none}
.catalog-story,.catalog-points{position:relative;min-width:0;z-index:1}
.catalog-explainer h2{max-width:19ch;font-size:clamp(1.9rem,3vw,3rem);line-height:1.12;margin:18px 0 14px;text-wrap:balance;color:#102d49}
.catalog-explainer p{font-size:.93rem;line-height:1.75}
.catalog-stat{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:9px;color:#176992;background:#fff;border:1px solid #dbeaf2;border-radius:16px;padding:8px 14px;box-shadow:0 4px 13px rgba(15,47,84,.04)}
.catalog-stat strong{font-size:2.35rem;line-height:1;font-weight:820;letter-spacing:-.07em}
.catalog-stat span{font-size:.75rem;font-weight:790;color:#234f6c}
.catalog-stat i{width:1px;height:18px;background:#d9e5ef;margin:0 2px}
.catalog-stat small{font-size:.72rem;color:#6a8091;font-weight:650}
.catalog-points{display:grid;gap:12px}
.catalog-point{padding:17px 18px;background:rgba(255,255,255,.94);border:1px solid #e1ebf1;border-radius:16px;box-shadow:0 10px 28px rgba(16,60,90,.045);display:flex;align-items:flex-start;gap:13px;min-width:0}
.catalog-point .catalog-point-icon{width:36px;height:36px;flex:0 0 36px;display:flex;align-items:center;justify-content:center;border-radius:11px;background:#e7f5fb;color:#0d7ca7}
.catalog-point .catalog-point-icon svg{margin:0;color:inherit}
.catalog-point strong{color:#14334c;font-size:.91rem}
.catalog-point p{font-size:.78rem;line-height:1.65;margin:6px 0 0}
.catalog-shortcuts{display:flex;align-items:center;flex-wrap:wrap;gap:15px;margin-top:23px}
.catalog-shortcuts .btn{min-height:45px;padding:10px 17px;font-size:.81rem}
.catalog-ask{font-weight:780;color:#17688b;display:inline-flex;align-items:center;gap:6px;font-size:.85rem;line-height:1.4}
.catalog-ask:hover{text-decoration:underline;text-underline-offset:4px}
.catalog-ask .ico{width:15px;height:15px}
.price-table td{overflow-wrap:anywhere}
/* Business-class-style customer attention section */
.premium-experience{background:#fff;padding-top:20px;padding-bottom:92px}
.premium-shell{display:grid;grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr);background:linear-gradient(132deg,#0a2644 0%,#10375d 50%,#205482 100%);border-radius:28px;overflow:hidden;position:relative;min-height:515px;box-shadow:0 34px 80px rgba(11,41,75,.16)}
.premium-shell::after{content:"";position:absolute;bottom:-180px;left:28%;width:460px;height:460px;border-radius:50%;border:1px solid rgba(180,216,234,.13);pointer-events:none}
.premium-info{padding:clamp(29px,4.4vw,61px) clamp(24px,4vw,58px);position:relative;z-index:2}
.premium-experience h2{color:#fff;font-size:clamp(2rem,3.1vw,3.2rem);line-height:1.12;text-wrap:balance;max-width:20ch;margin-bottom:16px;overflow-wrap:anywhere}
.premium-experience .premium-lead{color:#bfd5e5;font-size:.95rem;line-height:1.75;max-width:62ch;margin-bottom:26px}
.premium-features{display:grid;gap:15px}
.premium-feature{display:flex;gap:12px;align-items:flex-start;color:#fff;max-width:580px}
.premium-feature-icon{width:40px;height:40px;display:grid;place-items:center;flex:0 0 40px;background:rgba(151,213,232,.12);border:1px solid rgba(182,228,237,.18);border-radius:12px;color:#b2ebea}
.premium-feature strong{color:#fff;display:block;font-size:.87rem;line-height:1.3}
.premium-feature p{color:#bcd1e3;font-size:.78rem;line-height:1.55;margin:5px 0 0}
.premium-link{color:#94e9da;font-size:.87rem;font-weight:770;display:inline-flex;gap:9px;align-items:center;margin-top:28px;text-decoration:underline;text-decoration-color:rgba(148,233,218,.4);text-underline-offset:5px}
.premium-art{display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;min-height:450px;isolation:isolate}
.premium-halo{position:absolute;border-radius:50%;border:1px solid rgba(225,242,249,.17);width:600px;height:600px;left:10%;top:-17%}
.premium-halo-two{width:430px;height:430px;left:26%;top:12%;border-color:rgba(232,215,176,.26)}
.premium-appointment{position:relative;z-index:1;width:min(330px,calc(100% - 46px));min-height:350px;display:flex;flex-direction:column;justify-content:center;padding:29px;background:linear-gradient(155deg,rgba(255,255,255,.99),rgba(239,247,250,.94));border:1px solid #fff;border-radius:21px;transform:rotate(-5deg);box-shadow:0 32px 60px rgba(0,18,37,.22);text-align:left;color:#173451}
.premium-appointment-kicker{font-size:.62rem;font-weight:810;letter-spacing:.13em;color:#677f95;text-transform:uppercase;line-height:1.55}
.premium-appointment-mark{margin:19px 0 24px;display:flex;align-items:center;justify-content:space-between;color:#176a94}
.premium-appointment-mark .ico{height:46px;width:46px;color:#be9961}
.premium-appointment-mark span{font-size:1.7rem;font-weight:700;letter-spacing:-.07em;color:#bb9c6c}
.premium-appointment>strong{font-size:1.7rem;letter-spacing:-.05em;line-height:1.13;max-width:11ch}
.premium-appointment-divider{height:1px;background:#dae6ef;margin:23px 0 18px}
.premium-appointment-state{display:flex;align-items:center;gap:8px;font-size:.8rem;font-weight:760;color:#176487}
.premium-appointment small{font-size:.66rem;color:#6c8295;line-height:1.5;margin-top:10px}
/* Family: one standout benefit, four specifics, accountable program conditions */
.family-section{background:linear-gradient(180deg,#fff 0,#f3f8fd 100%);padding-top:8px;padding-bottom:100px}
.family-shell{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);overflow:hidden;border-radius:29px;box-shadow:0 24px 65px rgba(15,48,84,.08);border:1px solid #dce8f0;background:#fff}
.family-feature{background:linear-gradient(145deg,#e6f3fc,#f2f9fc 72%,#fff);padding:clamp(27px,3.5vw,52px);min-width:0;position:relative;isolation:isolate;overflow:hidden}
.family-feature::after{content:"";position:absolute;top:-90px;right:-130px;width:260px;height:260px;border:1px solid #c5e4f0;border-radius:50%;pointer-events:none}
.family-eyebrow{display:inline-flex;align-items:center;gap:9px;color:#1b6b8c;letter-spacing:.1em;font-weight:820;font-size:.71rem;text-transform:uppercase;line-height:1.45}
.family-eyebrow .ico{color:#2284a7}
.family-section h2{color:#123556;font-size:clamp(2rem,3.15vw,3.2rem);line-height:1.14;letter-spacing:-.05em;margin:20px 0 16px;text-wrap:balance;overflow-wrap:anywhere}
.family-intro{font-size:.93rem;line-height:1.78;color:#5a7489;max-width:55ch}
.family-offer{display:inline-flex;align-items:center;gap:18px;background:#fff;padding:13px 23px 13px 17px;border-radius:18px;border:1px solid #dceaf2;box-shadow:0 11px 24px rgba(20,75,100,.07);margin-top:10px}
.family-offer-number{font-size:3.3rem;color:#146b9a;font-weight:860;letter-spacing:-.09em;line-height:1}
.family-offer-subtitle{color:#315c78;font-size:.83rem;font-weight:800;max-width:145px;line-height:1.4}
.family-art{position:relative;min-height:145px;margin-top:14px}
.family-orbit{position:absolute;bottom:-80px;left:21%;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle at 35% 25%,rgba(150,208,228,.33),rgba(119,174,209,.05) 70%);z-index:-1;border:1px solid #d7eaf3}
.family-person{display:grid;place-items:center;position:absolute;bottom:10px;width:69px;height:69px;background:#fff;color:#20749c;border:1px solid #d6e9f1;border-radius:20px;box-shadow:0 14px 30px rgba(18,54,89,.12)}
.family-person-a{left:22%;transform:rotate(-8deg)}.family-person-b{left:40%;bottom:34px;transform:rotate(5deg)}.family-person-c{left:58%;transform:rotate(9deg)}
.family-person .ico{width:35px;height:35px}
.family-content{padding:clamp(27px,3.5vw,52px);display:flex;flex-direction:column;gap:16px;min-width:0}
.family-benefits{display:grid;gap:15px}
.family-benefit{display:flex;gap:13px;align-items:flex-start;padding-bottom:14px;border-bottom:1px solid #e6edf3;min-width:0}
.family-benefit:last-child{border-bottom:0;padding-bottom:0}
.family-benefit-icon{flex:0 0 43px;width:43px;height:43px;display:grid;place-items:center;border-radius:13px;background:#eaf5fb;color:#13779c}
.family-benefit h3{font-size:1.04rem;letter-spacing:-.025em;margin:0 0 6px;color:#1a3c56}
.family-benefit p{font-size:.83rem;line-height:1.65;margin:0;color:#6b7f90}
.family-mini{font-size:.75rem;font-weight:750;color:#2c758f;background:#f4fafc;padding:12px 14px;border-radius:11px;display:flex;align-items:flex-start;gap:8px;line-height:1.55}
.family-mini .ico{flex:none;margin-top:2px}
.family-cta{width:fit-content;min-height:50px;white-space:normal;line-height:1.35}
.family-disclaimer{display:flex;align-items:flex-start;gap:9px;color:#748696;font-size:.7rem;line-height:1.65;margin:0}
.family-disclaimer .ico{flex:none;margin-top:2px}
/* improve card, type and click/touch ergonomics */
.service-grid>*,.service-card,.service-card-body,.service-details,.price-toolbar,.filter-btn,.pricing-box{min-width:0}
.service-card h3,.service-card p{overflow-wrap:break-word}
.service-card h3{text-wrap:balance}
.service-details .package-test-list li{min-width:0}
.service-details .package-test-list li strong{min-width:max-content}
.price-toolbar{gap:9px}
.btn,.catalog-toggle,.filter-btn,.copy-btn{touch-action:manipulation}
:where(.btn,.catalog-toggle,.copy-btn,.filter-btn,.mobile-toggle,.lang-switch a){min-height:42px}
:where(.lang-switch a){min-height:32px;display:inline-flex;align-items:center;justify-content:center}
@media(min-width:701px) and (max-width:1170px){
 .hero h1{font-size:clamp(2.55rem,4.3vw,3.55rem)}
 .hero-inner{gap:22px}
 .hero-portrait img{height:auto;aspect-ratio:1.12/1}
 .trust-item{padding-inline:12px}
 .trust-grid{gap:0}
}
@media(max-width:1050px){
 .premium-shell{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
 .premium-info{padding:35px 30px}
 .family-feature,.family-content{padding:31px}
 .family-section h2{font-size:clamp(1.9rem,3.5vw,2.8rem)}
 .family-benefit{gap:10px}
}
@media(max-width:850px){
 .catalog-explainer{grid-template-columns:minmax(0,1fr);gap:22px}
 .catalog-explainer h2{max-width:25ch}
 .catalog-points{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
 .catalog-point{flex-direction:column;padding:14px}
 .catalog-point p{font-size:.76rem}
 .premium-shell,.family-shell{grid-template-columns:minmax(0,1fr)}
 .premium-art{min-height:265px;padding:12px 12px 34px}
 .premium-appointment{min-height:245px;width:min(380px,88%);transform:rotate(-3deg);padding:24px}
 .premium-appointment>strong{max-width:none}
 .premium-halo{top:-65%;left:18%}
 .premium-halo-two{top:-30%;left:35%}
 .family-art{min-height:95px}
 .family-benefits{grid-template-columns:repeat(2,minmax(0,1fr))}
 .family-benefit{border-bottom:0;padding-bottom:0}
}
@media(max-width:700px){
 html{scroll-padding-top:78px}
 .container{width:min(calc(100% - 32px),var(--max))}
 .header-inner{gap:6px}
 .hero{padding-top:27px;padding-bottom:35px}
 .hero h1{font-size:clamp(2.35rem,8.3vw,3.4rem);letter-spacing:-.052em;overflow-wrap:anywhere}
 .hero .lead{font-size:.93rem;line-height:1.6}
 .hero-badges{gap:6px;margin-bottom:13px}
 .hero-badges span{font-size:.67rem;padding:6px 9px;gap:5px}
 .hero-portrait img{height:235px;object-fit:cover;object-position:center 38%}
 .hero .notice-inline{margin-bottom:13px}
 .trust-grid{padding-block:20px 12px;gap:16px 8px}
 .trust-item{padding-inline:7px}
 .trust-item:first-child,.trust-item:nth-child(3){padding-left:0}
 .trust-item strong{font-size:.77rem}
 .trust-item span{font-size:.68rem;line-height:1.45}
 .trust-note{font-size:.68rem;text-align:left;line-height:1.65;padding-bottom:15px}
 .catalog-explainer{padding:23px 20px;border-radius:21px;gap:19px;margin-bottom:25px}
 .catalog-explainer h2{font-size:clamp(1.72rem,6.8vw,2.5rem);margin:15px 0 12px}
 .catalog-explainer p{font-size:.87rem;line-height:1.65}
 .catalog-stat{padding:7px 11px;gap:7px}
 .catalog-stat strong{font-size:1.85rem}
 .catalog-stat span{font-size:.7rem}
 .catalog-stat small{font-size:.65rem}
 .catalog-points{grid-template-columns:1fr;gap:8px}
 .catalog-point{flex-direction:row;padding:12px}
 .catalog-point p{font-size:.75rem}
 .catalog-shortcuts{gap:10px}
 .catalog-shortcuts .btn{width:100%}
 .catalog-ask{min-height:40px}
 .premium-experience{padding-top:8px;padding-bottom:62px}
 .premium-shell{border-radius:22px}
 .premium-info{padding:29px 23px}
 .premium-experience h2{font-size:clamp(1.85rem,7.3vw,2.6rem)}
 .premium-experience .premium-lead{font-size:.86rem}
 .premium-feature strong{font-size:.81rem}
 .premium-feature p{font-size:.74rem}
 .premium-art{min-height:255px}
 .premium-appointment{width:min(310px,86%);min-height:240px}
 .premium-appointment-mark{margin:14px 0}
 .premium-appointment>strong{font-size:1.45rem}
 .family-section{padding-bottom:65px}
 .family-shell{border-radius:22px}
 .family-feature,.family-content{padding:25px 21px}
 .family-section h2{font-size:clamp(1.85rem,7.4vw,2.65rem)}
 .family-intro{font-size:.85rem}
 .family-offer-number{font-size:2.8rem}
 .family-art{min-height:90px}
 .family-content{gap:17px}
 .family-benefits{grid-template-columns:minmax(0,1fr);gap:17px}
 .family-benefit{gap:10px}
 .family-benefit h3{font-size:.94rem}
 .family-benefit p{font-size:.79rem}
 .family-cta{width:100%}
 .family-disclaimer{font-size:.7rem}
 .mobile-cta{width:100%;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
 .service-details .package-test-list li strong{white-space:nowrap}
}
@media(max-width:390px){
 .hero h1{font-size:clamp(2.12rem,9vw,2.45rem)}
 .hero-badges span{font-size:.63rem;padding:6px 7px}
 .catalog-stat i{display:none}
 .catalog-stat{gap:4px 9px}
 .catalog-stat small{flex-basis:100%}
 .catalog-explainer{padding:19px 16px}
 .family-feature,.family-content{padding:21px 16px}
 .family-offer{gap:11px;padding:10px 12px}
 .family-offer-number{font-size:2.65rem}
 .family-offer-subtitle{font-size:.74rem}
 .family-person{width:56px;height:56px}
 .family-person .ico{width:29px;height:29px}
 .premium-info{padding:25px 18px}
 .premium-appointment{padding:20px}
 .brand-word{font-size:1.09rem}
}
@media(max-width:340px){
 .brand-meta{display:none}
 .hero-badges span{font-size:.59rem}
 .hero h1{font-size:2.07rem}
 .premium-appointment{transform:none}
 .lang-switch a{min-width:23px;font-size:.62rem}
}
@media(prefers-reduced-motion:reduce){.premium-appointment{transform:none}}


.hero-portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}


.why-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}