/* Responsive hardening, loaded last. Phones, tablets (portrait and landscape), short landscape phones, laptops and very wide screens.
   Breakpoints: 400, 600, 760, 900, 1024, 1920. Touch is detected with pointer:coarse, not width. */

/* ---- all devices: anchors clear the fixed nav, no tap delay ---- */
[id]{scroll-margin-top:0}
a,button,input,select,label,summary{touch-action:manipulation}

/* ---- notches and home bars ---- */
.hdr{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
.ftr{padding-bottom:calc(30px + env(safe-area-inset-bottom))}
.totop{right:max(28px,calc(env(safe-area-inset-right) + 16px));bottom:max(28px,calc(env(safe-area-inset-bottom) + 16px))}
.wrap{padding-left:max(var(--g),env(safe-area-inset-left));padding-right:max(var(--g),env(safe-area-inset-right))}

/* ---- 1. form fields at 16px on touch so iPhones do not zoom in ---- */
@media(pointer:coarse),(max-width:1024px){
 .formwrap .f:not(.chk) input,.formwrap .f:not(.chk) select,.news-s input,#svc-q,.sv-search input,input[type=search],input[type=text],input[type=email],input[type=tel]{font-size:16px}
}

/* ---- 2. comfortable tap targets on touch (padding is invisible) ---- */
@media(pointer:coarse){
 .tab,.svchip,.ntab,.rs-tabs button{min-height:44px}
 .rs-sub button{min-height:44px;padding-top:10px;padding-bottom:10px}
 .ar-back{position:relative}.ar-back::before{content:"";position:absolute;inset:-14px -10px}
 .lang button{min-height:44px}
 .nav a{position:relative}
 .ftr li a{padding:12px 0}
}

/* ---- 4. small phones: shorter hero so the headline and both buttons show on the first screen ---- */
@media(max-width:900px){
 .o1hero .wrap{padding-bottom:clamp(250px,64vw,340px)}
 .o1hero{background-size:auto clamp(260px,62vw,380px)}
}
@media(max-width:400px){
 .o1hero .wrap{padding-top:112px;padding-bottom:250px}
 .o1hero{background:linear-gradient(180deg,#05112B 0,#05112B 52%,rgba(5,17,43,0) 82%),url(../assets/img/hero-banner.jpg) 90% 100%/auto 270px no-repeat,#05112B}
 .o1p{font-size:13px;letter-spacing:.03em;margin-top:16px}
 .o1cta{margin-top:20px;gap:10px}
 .o1btn{padding:12px 22px}
 .o1txt h1{font-size:32px}
}
@media(max-width:900px) and (max-height:700px) and (orientation:portrait){
 .o1hero .wrap{padding-top:108px}
}

/* ---- 3. landscape phones: hero uses the desktop composition so the buttons are on the first screen ---- */
@media(orientation:landscape) and (max-height:520px) and (min-width:560px){
 .o1hero{min-height:0;align-items:center;background:linear-gradient(90deg,#05112B 0,rgba(5,17,43,.96) 34%,rgba(5,17,43,.7) 56%,rgba(5,17,43,0) 80%),url(../assets/img/hero-banner.jpg) 70% center/cover no-repeat,#05112B}
 .o1hero .wrap{padding-top:96px;padding-bottom:30px}
 .o1txt{max-width:min(500px,58vw)}
 .o1eye{display:none}
 .o1txt h1{font-size:30px}
 .o1p{font-size:13px;margin-top:12px;max-width:100%}
 .o1cta{margin-top:16px}
 .o1btn{padding:11px 22px}
}

/* ---- 7. tablet landscape: hero fills more of the screen, strip still visible under it ---- */
@media(min-width:901px) and (max-width:1180px) and (min-aspect-ratio:4/3){
 .o1hero{min-height:clamp(560px,calc(100svh - 150px),760px)}
}

/* ---- 5. wide screens: more content width and a slightly larger reading size ---- */
@media(min-width:1920px){
 :root{--wrap:1480px}
 .o1hero .wrap{max-width:1280px}
 .o1txt{max-width:620px}
 .o1p{font-size:15px;max-width:540px}
}
@media(min-width:2400px){
 :root{--wrap:1560px}
 .o1hero .wrap{max-width:1360px}
}

/* ---- 8. partner carousel: swipe on touch ---- */
.pt-vp{touch-action:pan-y}

/* ---- 12. booking form on tablets: one field per row, narrower column ---- */
@media(min-width:600px) and (max-width:1024px){
 .bk-col{max-width:680px;margin-left:auto;margin-right:auto}
}
}
@media(orientation:landscape) and (max-height:520px) and (min-width:560px){
 .book{padding:92px 0 36px}
 .bk-photo{display:none}
 .bk-col{max-width:720px}
 .book h2{margin:6px 0 18px;font-size:30px}
 .formwrap .f:not(.chk) input,.formwrap .f:not(.chk) select{height:52px}
 .formwrap .f:not(.chk)>label{top:26px}
}

/* ===== Phone refinements ===== */

/* logo keeps its proportions (the width/height attributes were squashing it when the width was set in CSS) */
.hdr .logo,.ftr .logo{height:auto}

/* picker: one button and a short list instead of rows of chips (phones only; desktop and tablets keep the chips) */
.pick{display:none}
@media(max-width:640px){
 .tabs>.tab,.rs-tabs>button,.news-c>.ntab{display:none}
 .tabs,.rs-tabs,.news-c{display:block}
 .pick{display:block;position:relative;width:100%}
 .pick .pick-b{width:100%;min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 20px;border:1px solid rgba(10,26,50,.22);border-radius:999px;background:var(--ivory);color:var(--ink);font:500 14px/1.3 var(--sans);letter-spacing:0;text-align:left;cursor:pointer;transition:border-color .3s,background .3s}
 .pick-b svg{flex:none;transition:transform .35s var(--ease)}
 .pick.open .pick-b{border-color:var(--ink)}.pick.open .pick-b svg{transform:rotate(180deg)}
 .pick-b:focus-visible,.pick-o:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
 .pick-list{list-style:none;margin:8px 0 0;padding:6px;border:1px solid rgba(10,26,50,.16);border-radius:var(--r-card);background:#FAFCFD;box-shadow:0 22px 40px -28px rgba(10,26,50,.45)}
 .pick-list[hidden]{display:none}
 .pick .pick-o{width:100%;min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--ink);font:400 14px/1.35 var(--sans);letter-spacing:0;text-align:left;cursor:pointer}
 .pick .pick-o:active{background:rgba(10,26,50,.06)}
 .pick .pick-list [aria-selected=true] .pick-o{background:rgba(10,26,50,.06);font-weight:500}
 .tabs{margin-bottom:28px}.rs-tabs{margin-bottom:18px}
}

/* results: the case chips (Trẻ hoá ...) come first, then the photo, then the text, so changing a case changes what is right below it */
@media(max-width:980px){
 .rs-grid{display:flex;flex-direction:column;gap:0}
 .rs-body{display:contents}
 .rs-sub{order:-1;margin:0 0 18px}
 .rs-media{order:1}
 .rs-panel{order:2;margin-top:24px}
}

/* Điểm khác biệt: tighter number column, left-aligned text so lines do not stretch on narrow widths */
@media(max-width:640px){
 .ab-list li,.hm-diff .ab-list li{grid-template-columns:30px minmax(0,1fr);gap:0 12px;padding:18px 0}
 .ab-list b{line-height:1.7}
 .ab-list h3{font-size:18px;margin-bottom:6px}
 .ab-diff-h{margin:30px 0 18px}
 .ab-diff-h .big{font-size:clamp(28px,8vw,34px)}
 /* narrow columns: no justified text */
 .o1p,.statement .sub,.panel p,.rs-panel dd,.bq blockquote,.rs-q blockquote,.doc .doc-p,.ar-lede,.ar-body p,.ar-body li,.sv p,.dt-c p,.dt-opts li p,.dt-note,.bas-d,.dt-desc,.ab-p,.ab-two p,.ab-list p,.ab-teamp{text-align:left;hyphens:none}
}

/* desktop nav pill: the logo and the booking button sit the same distance from the rounded ends */
@media(min-width:901px){.pill{padding:10px 18px}}

/* ===== Phone and tablet navigation: thin flat bar + full-screen overlay menu =====
   Bar: logo left, three-line button right (language lives inside the overlay). After scrolling the bar disappears and only
   the round three-line button stays, so the page keeps its height. */
@media(max-width:900px){
 .hdr{top:0;padding:env(safe-area-inset-top) 0 0}
 .pill{width:100%;height:56px;padding:0 max(18px,env(safe-area-inset-right)) 0 max(18px,env(safe-area-inset-left));gap:12px;border-radius:0;border:0;background:var(--ink);-webkit-backdrop-filter:none;backdrop-filter:none;transition:background .3s}
 .hdr.scrolled .pill{background:var(--ink)}
 .hdr .logo{width:84px;height:auto;transition:opacity .25s,visibility .25s}
 .hr .lang{display:none}
 .menu{display:block;width:44px;height:44px;margin-right:-8px;border-radius:50%;border:1px solid transparent;background:transparent;transition:background .3s,border-color .3s}
 .menu span{width:20px;margin:4px auto;transition:transform .35s var(--ease),opacity .2s}
 body.lock .menu span:nth-child(1){transform:translateY(5px) rotate(45deg)}
 body.lock .menu span:nth-child(2){opacity:0}
 body.lock .menu span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

 /* scrolled: no bar, no logo, just the round button */
 .hdr.compact .pill{background:transparent;pointer-events:none}
 .hdr.compact .logo{opacity:0;visibility:hidden}
 .hdr.compact .menu{pointer-events:auto;background:rgba(10,26,50,.88);border-color:rgba(243,248,250,.24);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);margin-top:8px;margin-right:0}
 body.lock .hdr .logo{opacity:1;visibility:visible}
 body.lock .hdr.compact .pill{background:var(--ink)}
 body.lock .hdr.compact .menu{background:transparent;border-color:transparent;margin-top:0;margin-right:-8px;-webkit-backdrop-filter:none;backdrop-filter:none}

 /* overlay */
 .nav{display:none;position:fixed;inset:0;z-index:-1;flex-direction:column;gap:0;border-radius:0;background:#06101E;padding:calc(env(safe-area-inset-top) + 84px) max(26px,env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + 26px) max(26px,env(safe-area-inset-left));overflow:auto;max-height:none}
 .nav.open{display:flex}
 .nav>a{font:300 clamp(28px,8vw,36px)/1.2 var(--serif);letter-spacing:-.01em;padding:16px 0;border-bottom:1px solid rgba(243,248,250,.12);opacity:1}
 .nav>a:last-of-type{border-bottom:0}
 .nav>a[aria-current=page]{color:var(--rose);box-shadow:none;padding-bottom:16px}
 .nav-m{margin-top:auto;display:flex;flex-direction:column;gap:20px;padding-top:28px}
 .nav-m .lang{display:flex;gap:8px;font-size:12px}
 .nav-m .lang button{min-height:44px;min-width:56px;padding:10px 16px;border:1px solid rgba(243,248,250,.22);border-radius:999px;color:rgba(243,248,250,.6);letter-spacing:.12em}
 .nav-m .lang button[aria-pressed=true]{background:var(--ivory);color:var(--ink);border-color:var(--ivory)}
 .nav .nav-cta{opacity:1;display:block;width:100%;text-align:center;padding:17px 28px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;border-radius:999px;min-height:52px}
 body.lock{overflow:hidden}
 [id]{scroll-margin-top:0}
}
@media(min-width:901px){.nav-m{display:none}}
@media(prefers-reduced-motion:reduce){.menu span{transition:none}}

/* ===== Dịch vụ sub-menu (901px and up) ===== */
.mega{display:none}
@media(min-width:901px){
 .hdr .mega{display:block;position:absolute;top:calc(100% + 10px);left:50%;width:min(1100px,calc(100% - 32px));transform:translate(-50%,-6px);opacity:0;visibility:hidden;transition:opacity .22s var(--ease),transform .28s var(--ease),visibility 0s linear .22s;z-index:5}
 .hdr .mega[hidden]{display:block;visibility:hidden}
 .hdr .mega.open{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .22s var(--ease),transform .28s var(--ease)}
 .hdr .mega::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
 .hdr .nav a[aria-expanded=true]{opacity:1}
 .mg-in{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.5fr) minmax(0,.86fr);height:400px;border-radius:var(--r-card);overflow:hidden;color:var(--ivory);background:rgba(8,22,44,.76);-webkit-backdrop-filter:blur(24px) saturate(150%);backdrop-filter:blur(22px) saturate(150%);border:1px solid rgba(243,248,250,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 36px 60px -34px rgba(5,17,43,.7)}
 .mg-l{padding:18px 10px 18px 18px;display:flex;flex-direction:column}
 .mg-l a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 14px;border-radius:var(--r-sm);font:500 11px/1.4 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ivory);opacity:.82;transition:background .25s,opacity .25s}
 .mg-l a svg{flex:none;opacity:.55;transition:transform .3s var(--ease),opacity .3s}
 .mg-l a.on{background:rgba(243,248,250,.14);opacity:1}
 .mg-l a:hover{opacity:1}
 .mg-l a:hover svg,.mg-l a.on svg{opacity:1;transform:translate(2px,-2px)}
 .mg-l a:focus-visible{outline:2px solid var(--rose);outline-offset:-2px}
 .mg-sep{height:1px;background:rgba(243,248,250,.2);margin:10px 14px}
 .mg-m{padding:14px 6px 14px 4px;min-width:0}
 .mg-box{position:relative;height:100%;border-radius:var(--r-card);overflow:hidden;background:rgba(10,26,50,.5);box-shadow:0 0 0 1px rgba(243,248,250,.18)}
 .mg-ph,.mg-ph img{position:absolute;inset:0;width:100%;height:100%}
 .mg-ph img{object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .45s var(--ease),transform 1.1s var(--ease)}
 .mg-ph img.on{opacity:1;transform:none}
 .mg-box::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,17,43,0) 40%,rgba(5,17,43,.55) 68%,rgba(5,17,43,.9) 100%);pointer-events:none}
 .mg-txt{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 24px 22px}
 .mg-txt p{display:none;margin:0;font:300 14.5px/1.65 var(--sans);color:#F3F8FA;text-align:left;max-width:46ch}
 .mg-txt p.on{display:block;animation:mgin .45s var(--ease)}
 .mg-rr{padding:22px 24px 22px 22px;min-width:0}
 .mg-r{display:none}.mg-r.on{display:block;animation:mgin .4s var(--ease)}
 .mg-h{font:400 11px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:rgba(243,248,250,.62);margin:0 0 10px}
 .mg-r ul{list-style:none;margin:0;padding:0}
 .mg-r li+li{border-top:1px solid rgba(243,248,250,.16)}
 .mg-r a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 0;font:400 15px/1.35 var(--sans);color:var(--ivory);transition:color .25s,padding .3s var(--ease)}
 .mg-r a svg{flex:none;opacity:0;transform:translate(-4px,4px);transition:opacity .25s,transform .3s var(--ease);color:var(--rose)}
 .mg-r a:hover,.mg-r a:focus-visible{color:var(--rose);padding-left:4px}
 .mg-r a:hover svg,.mg-r a:focus-visible svg{opacity:1;transform:none}
 .mg-r a:focus-visible{outline:2px solid var(--rose);outline-offset:2px;border-radius:4px}
 @keyframes mgin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
}
@media(min-width:901px) and (max-width:1100px){.mg-in{grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr) minmax(0,.9fr)}.mg-l a{font-size:10.5px;letter-spacing:.08em;padding:12px}.mg-txt{padding:0 22px 22px}.mg-txt p{font-size:14px}}
@media(prefers-reduced-motion:reduce){.hdr .mega,.hdr .mega.open{transition:none;transform:translate(-50%,0)}.mg-ph img{transition:none;transform:none}.mg-txt p.on,.mg-r.on{animation:none}}

/* nav bar glass (desktop): frosted navy with a light top edge; solid fallback when transparency is off */
@media(min-width:901px){
 .pill{background:linear-gradient(135deg,rgba(255,255,255,.14) 0,rgba(255,255,255,0) 44%),rgba(10,26,50,.6);-webkit-backdrop-filter:blur(20px) saturate(145%);backdrop-filter:blur(20px) saturate(145%);border-color:rgba(243,248,250,.26);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(255,255,255,.05),0 24px 48px -28px rgba(3,10,24,.65)}
 .hdr.scrolled .pill{background:linear-gradient(135deg,rgba(255,255,255,.12) 0,rgba(255,255,255,0) 44%),rgba(10,26,50,.84)}
}
@media(min-width:901px) and (prefers-reduced-transparency:reduce){.pill,.hdr.scrolled .pill{background:var(--ink);-webkit-backdrop-filter:none;backdrop-filter:none}}