/* ---- p_13_sv-hotel-transport.css ---- */
/* =====================================================================
   HOTEL & TRANSPORTATION (.sk-ht) - cảnh đêm: đen than, lưới cửa sổ, kính mờ, góc cắt, vạch kẻ đường.
   Hệ màu chung: cam #ff6a13 / đen / trắng (+ cam nhạt #ffc59a). Một font Be Vietnam Pro, Anton chỉ cho HOTEL và số lớn.
   ===================================================================== */
.sk-ht{--bg:#09090b;--bg2:#0e0e12;--card:#14141a;--ln:rgba(255,255,255,.12);--edge:rgba(255,255,255,.17);--r:6px;--hfw:800;--hls:-.035em;--warm:#ffc59a;--cut:16px;font-variant-numeric:tabular-nums;
  --win:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='44'%3E%3Crect x='9' y='9' width='30' height='24' rx='2' fill='%23fff' fill-opacity='.045'/%3E%3C/svg%3E")}
.sk-ht h2,.sk-ht h3{margin:0;text-wrap:balance}
.sk-ht .s-h{font-size:clamp(28px,7vw,58px);line-height:1.12}
.sk-ht .s-lead{max-width:60ch}

/* biển số phòng: nhãn tầng ở đầu mỗi mục */
.ht-plate{display:inline-flex;margin-bottom:16px;border:1px solid var(--edge);border-radius:3px;overflow:hidden;font:700 12px/1 var(--fb);letter-spacing:.14em;text-transform:uppercase}
.ht-plate b{padding:9px 11px;background:var(--ac);color:#0a0a0c;font-weight:800}
.ht-plate span{padding:9px 12px;color:var(--mut)}
.s-lt .ht-plate b{color:#0a0a0c}

/* góc cắt (clip-path) + đường chéo viền */
.ht-cut{position:relative;clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)))}
.ht-cut::before,.ht-cut::after{content:"";position:absolute;width:var(--cut);height:var(--cut);pointer-events:none;z-index:3;background:linear-gradient(to bottom left,transparent calc(50% - .8px),var(--edge) calc(50% - .8px) calc(50% + .8px),transparent calc(50% + .8px))}
.ht-cut::before{top:0;right:0}
.ht-cut::after{bottom:0;left:0}
.ht-cut.s-card{border-radius:0;border-color:var(--edge)}
/* khối reveal của kit đặt clip-path:inset(0) khi hiện; giữ lại góc cắt */
.kx-js [data-r].kx-in.ht-cut{clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)))}
.s-lt .ht-cut{--edge:rgba(10,10,12,.22)}

/* vạch kẻ đường (ngăn cách / trang trí) */
.ht-lane{position:relative;height:14px;margin-top:clamp(36px,6vw,64px);background:#0b0b0e;border-block:1px solid var(--edge)}
.ht-lane::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:linear-gradient(90deg,rgba(255,255,255,.6) 0 22px,transparent 22px 38px) 0 0/38px 2px repeat-x}
@media(prefers-reduced-motion:no-preference){.kx-js .ht-lane::after{animation:htLane 1.4s linear infinite}}
@keyframes htLane{to{background-position:38px 0}}

/* lưới cửa sổ mờ làm nền mục */
.ht-gridbg{position:relative}
.ht-gridbg::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:var(--win);-webkit-mask-image:linear-gradient(180deg,#000,transparent 70%);mask-image:linear-gradient(180deg,#000,transparent 70%)}
.ht-gridbg>*{position:relative;z-index:1}

.ht-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* tiêu đề mục từ 1025px: tiêu đề bên trái, lời dẫn bên phải, không bỏ trống nửa màn hình */
@media(min-width:1025px){
  :is(.ht-plan-sec,.ht-seats-sec,.ht-flip-sec,.ht-room-sec,.ht-route-sec) .s-head{max-width:none;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:auto 1fr;column-gap:clamp(40px,6vw,96px);align-items:end}
  :is(.ht-plan-sec,.ht-seats-sec,.ht-flip-sec,.ht-room-sec,.ht-route-sec) .s-head>.ht-plate{grid-column:1;justify-self:start}
  :is(.ht-plan-sec,.ht-seats-sec,.ht-flip-sec,.ht-room-sec,.ht-route-sec) .s-head>.s-h{grid-column:1}
  :is(.ht-plan-sec,.ht-seats-sec,.ht-flip-sec,.ht-room-sec,.ht-route-sec) .s-head>.s-lead{grid-column:2;grid-row:1/3;margin:0 0 .45em}
}

/* =====================  HERO  ===================== */
.ht-hero{background:var(--bg);padding-bottom:0}
.ht-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 55% at 72% 44%,rgba(255,106,19,.17),transparent 70%),var(--win);-webkit-mask-image:linear-gradient(180deg,#000 12%,transparent 88%);mask-image:linear-gradient(180deg,#000 12%,transparent 88%)}
.ht-hg{display:grid;gap:18px;grid-template-columns:minmax(0,1fr);grid-template-areas:"c" "s" "k"}
.ht-hc{grid-area:c;min-width:0}
.ht-sw{grid-area:s;min-width:0;position:relative}
.ht-kp{grid-area:k}
.sk-ht .ht-sub{font-size:clamp(15.5px,1.5vw,19px);max-width:44ch;margin-top:clamp(14px,1.8vw,22px)}
.ht-btns{margin-top:clamp(18px,2.4vw,30px);gap:10px}
.ht-btns .btn{flex:1 1 0;white-space:nowrap;padding-inline:14px}
@media(min-width:700px){.ht-btns .btn{flex:0 0 auto;padding-inline:26px}}

/* tiêu đề: HOTEL là biển đèn, "& Transportation" là bảng điểm đến trên đầu xe */
.sk-ht .ht-title{font-size:16px;line-height:1;letter-spacing:0;display:flex;flex-direction:column;align-items:flex-start;gap:clamp(10px,1.6vw,18px)}
.ht-t1{display:flex;font-family:var(--fd);font-weight:400;text-transform:uppercase;font-size:clamp(104px,33vw,226px);line-height:.94;letter-spacing:.012em;color:#fff;text-shadow:0 0 34px rgba(255,106,19,.38)}
.ht-t1 i{font-style:normal;display:block;padding:0 .015em}
.ht-t2{position:relative;display:inline-flex;align-items:center;gap:.5em;padding:.36em .72em .36em .62em;background:#050507;border:1px solid var(--edge);border-radius:6px;font:800 clamp(17px,5.7vw,35px)/1 var(--fb);letter-spacing:.06em;text-transform:uppercase;color:var(--ac2);overflow:hidden;white-space:nowrap}
.ht-t2 b{color:#fff;font-weight:800}
.ht-t2::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 50%,transparent 0 .8px,rgba(0,0,0,.62) 1.25px) 0 0/3px 3px}
@media(prefers-reduced-motion:no-preference){
  .kx-js .ht-t1 i{animation:htNeon 1.9s steps(1,end) calc(var(--k)*.22s + .25s) backwards}
  .kx-js .ht-t2{animation:htBoard .9s steps(18,end) 1s backwards}
}
@keyframes htNeon{0%{opacity:.07}8%{opacity:1}14%{opacity:.1}22%{opacity:1}30%{opacity:.18}38%,100%{opacity:1}}
@keyframes htBoard{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* cảnh đêm (SVG) */
.ht-scene{display:block;width:100%;height:auto;overflow:visible;--lit:1}
.ht-glow{opacity:calc(.22 + var(--lit)*.78);transition:opacity .7s}
.ht-st{fill:#fff;opacity:.55}
.ht-w{fill:#1b1b22;stroke:rgba(255,255,255,.07);stroke-width:1;transition:fill .55s}
html:not(.kx-js) .ht-w.c1:not(.nx),.ht-w.c1.is-on{fill:#ff6a13}
html:not(.kx-js) .ht-w.c2:not(.nx),.ht-w.c2.is-on{fill:#ffc59a}
html:not(.kx-js) .ht-w.c3:not(.nx),.ht-w.c3.is-on{fill:#fff}
.ht-mu{stroke:#0a0a0c;stroke-opacity:.55;stroke-width:1.4;fill:none}
.ht-sign{filter:drop-shadow(0 0 7px rgba(255,106,19,.55))}
.ht-sign text{font-family:var(--fd);font-size:35px;letter-spacing:5px;fill:#ff6a13}
.ht-vac text{font-family:var(--fb)}
.ht-v1{font-size:11px;font-weight:700;letter-spacing:1.8px;fill:#fff}
.ht-v2{font-size:15px;font-weight:800;letter-spacing:3px;fill:#ff6a13;opacity:0}
.ht-vac.is-full .ht-v1{opacity:0}
.ht-vac.is-full .ht-v2{opacity:1}
.ht-lobby{opacity:.3;transition:opacity .8s}
.ht-can{opacity:.5;transition:opacity .8s}
.ht-d1,.ht-d2{transition:transform .9s cubic-bezier(.4,0,.2,1)}
.ht-d1{transform-box:fill-box;transform-origin:0 50%}
.ht-d2{transform-box:fill-box;transform-origin:100% 50%}
.is-open .ht-lobby,.is-open .ht-can{opacity:1}
.is-open .ht-d1,.is-open .ht-d2{transform:scaleX(.1)}
.ht-pax circle{opacity:0}
.ht-bus{transform:translateX(var(--bx,171px));transition:transform 3.4s cubic-bezier(.2,.75,.25,1)}
.ht-bus.is-out{transition-duration:3.1s;transition-timing-function:cubic-bezier(.55,0,.8,.45)}
.ht-bus.is-snap{transition:none}
.ht-beam{opacity:0;transition:opacity .6s}
.is-lights .ht-beam{opacity:.95}
.ht-bd{transition:fill .5s}
.is-open .ht-bd{fill:#ffc59a}
@media(prefers-reduced-motion:no-preference){
  .kx-js .ht-st{animation:htTw 3.4s ease-in-out infinite;animation-delay:calc(var(--k)*-.7s)}
  .kx-js .ht-ant{animation:htTw 1.5s ease-in-out infinite}
  .kx-js .ht-vac:not(.is-full) .ht-v1{animation:htBlink 1.5s steps(1,end) infinite}
  .kx-js .ht-vac.is-full .ht-v2{animation:htBlink .5s steps(1,end) 6}
  .is-move .ht-dash{animation:htDash .42s linear infinite}
  .is-move .ht-bus{animation:htBob .5s ease-in-out infinite}
  .is-walk .ht-pax circle{animation:htPax 1.7s ease-in both;animation-delay:calc(var(--j,0)*.3s)}
  .ht-pax circle:nth-child(1){--j:0;--dx:-2px}.ht-pax circle:nth-child(2){--j:1;--dx:3px}.ht-pax circle:nth-child(3){--j:2;--dx:-6px}.ht-pax circle:nth-child(4){--j:3;--dx:7px}
  .is-pulse .ht-sign{animation:htPulse 1.2s ease-in-out 2}
}
@keyframes htTw{50%{opacity:.15}}
@keyframes htBlink{50%{opacity:.12}}
@keyframes htDash{to{stroke-dashoffset:-38}}
@keyframes htBob{50%{translate:0 -1.2px}}
@keyframes htPax{0%{opacity:0;transform:translate(0,2px)}18%{opacity:1}100%{opacity:0;transform:translate(var(--dx,0),-48px)}}
@keyframes htPulse{50%{filter:drop-shadow(0 0 16px rgba(255,106,19,.95))}}

/* số liệu kính mờ */
.ht-kp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ht-k{position:relative;padding:12px 12px 13px;background:rgba(22,22,28,.62);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border:1px solid var(--edge);clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px))}
.ht-k b{display:block;font:800 clamp(25px,7.6vw,40px)/1 var(--ff);letter-spacing:-.04em}
.ht-k span{display:block;margin-top:7px;font-size:12.5px;line-height:1.3;color:var(--mut)}
.ht-kn{grid-column:1/-1;font-size:12.5px;line-height:1.45;color:var(--mut);margin-top:2px}

@media(min-width:700px){.ht-sw{max-width:680px;margin-inline:auto;width:100%}.ht-k{padding:16px 18px 18px}}
@media(min-width:1025px),(min-width:900px) and (orientation:landscape){
  .ht-hg{grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-areas:"c s" "k s";column-gap:clamp(28px,4vw,64px);row-gap:30px;align-items:center}
  .ht-sw{max-width:none;margin:0}
  .ht-hc{align-self:end}
  .ht-kp{align-self:start}
}
/* iPad ngang (900-1024): hai cột như máy tính, chữ tiêu đề thu lại cho vừa cột trái */
@media(min-width:900px) and (max-width:1024px) and (orientation:landscape){
  .ht-t1{font-size:clamp(104px,18.4vw,200px)}
  .ht-t2{font-size:clamp(17px,2.9vw,35px)}
  .ht-hg{column-gap:28px;row-gap:22px}
}

/* =====================  TÍNH PHÒNG & XE  ===================== */
.ht-plan-sec{background:var(--bg)}
.ht-calc .s-card{padding:clamp(18px,2.4vw,30px)}
.ht-calc .s-ctl,.ht-calc .s-out{--bw:1px;background:var(--card)}
.ht-stp{display:inline-flex;align-items:center;border:1px solid var(--edge);border-radius:var(--r);overflow:hidden;background:rgba(255,255,255,.04)}
.ht-stp button{width:44px;height:44px;border:0;background:transparent;color:var(--ink);font:600 22px/1 var(--fb);cursor:pointer;transition:background .2s,color .2s}
.ht-stp button:active{background:var(--ac);color:#0a0a0c}
.ht-stp button:focus-visible{outline:2px solid var(--ac);outline-offset:-3px}
.ht-num{width:74px;height:44px;border:0;border-inline:1px solid var(--edge);background:transparent;color:var(--ac);font:800 18px var(--ff);text-align:center;-moz-appearance:textfield;appearance:textfield;outline:0;border-radius:0}
.ht-num::-webkit-outer-spin-button,.ht-num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ht-num:focus{background:rgba(255,106,19,.12)}
.ht-num:focus-visible{box-shadow:inset 0 0 0 2px var(--ac)}
.ht-quick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.ht-quick button{min-height:44px;border:1px solid var(--edge);background:transparent;color:var(--ink);border-radius:var(--r);font:700 14px var(--fb);cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .2s}
.ht-quick button.on{background:var(--ac);border-color:var(--ac);color:#0a0a0c}
.ht-quick button:active{transform:scale(.96)}
.ht-calc .s-seg button{font-size:13.5px;padding:0 6px}
.ht-calc .s-seg button.on{color:#0a0a0c}
.ht-out-n{margin:0}
.ht-oh{display:flex;align-items:center;gap:12px}
.ht-oh i{flex:1;height:1px;background:var(--ln)}
.ht-tag{padding:6px 9px;border-radius:3px;background:var(--ac);color:#0a0a0c;font:800 12px/1 var(--fb);letter-spacing:.14em}
.ht-calc .s-out>.ht-oh:not(:first-of-type){margin-top:6px}
.ht-calc .s-big b{display:flex;align-items:baseline;gap:.1em}
.sk-ht .ht-combo{font-size:clamp(22px,5.6vw,34px);line-height:1.15;letter-spacing:-.03em}

/* mặt tiền: mỗi ô vuông là một phòng */
.ht-fac{--sq:17px;display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--sq),1fr));gap:3px;padding:12px;border:1px solid var(--edge);border-radius:var(--r);background:#08080a;min-height:64px;align-content:start}
.ht-fac i{display:block;aspect-ratio:1;border-radius:2px;background:#ff6a13;position:relative;transition:background .3s}
.ht-fac i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 47%,rgba(10,10,12,.55) 47% 53%,transparent 53%)}
.ht-fac i.o2{background:#fff}
.ht-fac i.o3{background:#ffc59a}
.ht-fac i.rs{background:transparent;border:1.5px dashed rgba(255,255,255,.6)}
.ht-fac i.rs::after{display:none}
@media(prefers-reduced-motion:no-preference){
  .kx-js .ht-fac i.is-new{animation:htWin .5s cubic-bezier(.34,1.56,.64,1) backwards}
  .kx-js .ht-fac.is-in i{animation:htWin .55s cubic-bezier(.34,1.56,.64,1) backwards;animation-delay:calc(var(--k,0)*14ms)}
}
@keyframes htWin{from{opacity:0;transform:scale(.2)}}
.ht-leg{display:flex;flex-wrap:wrap;gap:6px 16px;margin:-4px 0 0;font-size:12.5px;line-height:1.3;color:var(--mut)}
.ht-leg li{display:inline-flex;align-items:center;gap:7px}
.ht-leg li::before{content:"";width:11px;height:11px;border-radius:2px;background:#ff6a13}
.ht-leg .o2::before{background:#fff}
.ht-leg .o3::before{background:#ffc59a}
.ht-leg .rs::before{background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}

/* đội xe */
.ht-fleet{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 14px;padding:16px 14px 6px;border:1px solid var(--edge);border-radius:var(--r);background:#08080a linear-gradient(90deg,rgba(255,255,255,.45) 0 18px,transparent 18px 32px) 0 calc(100% - 9px)/32px 2px repeat-x}
.ht-mb{display:inline-flex;flex-direction:column;align-items:center;gap:2px;width:var(--w,70px);margin-bottom:14px;color:#fff;font:700 12.5px/1 var(--fb)}
.ht-mb svg{display:block;width:100%;height:auto}
@media(prefers-reduced-motion:no-preference){.kx-js .ht-mb{animation:htDrive .7s cubic-bezier(.16,1,.3,1) backwards;animation-delay:calc(var(--k,0)*70ms)}}
@keyframes htDrive{from{opacity:0;transform:translateX(-46px)}}

/* cách tính */
.ht-how{border-top:1px solid var(--ln)}
.ht-how summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:50px;cursor:pointer;font:700 14px var(--fb);list-style:none}
.ht-how summary::-webkit-details-marker{display:none}
.ht-how summary::after{content:"";flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--edge);background:linear-gradient(var(--ac),var(--ac)) center/10px 2px no-repeat,linear-gradient(var(--ac),var(--ac)) center/2px 10px no-repeat;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.ht-how[open] summary::after{transform:rotate(135deg)}
.ht-how summary:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.ht-how .s-list{padding:4px 0 6px;font-size:15px}
.ht-how .s-list li{font-size:15px}
.ht-how .s-list b{color:var(--ink)}
@media(min-width:1025px){
  .ht-calc{gap:26px}
  .ht-calc .s-kpis.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* =====================  SƠ ĐỒ GHẾ  ===================== */
.ht-seats-sec{background:var(--bg2)}
.ht-tabs{margin-bottom:clamp(18px,3vw,30px)}
.ht-tabs .s-chip{display:inline-flex;align-items:center;gap:8px}
.ht-tabs .s-chip small{font:600 12px var(--fb);opacity:.7}
.ht-tabs .s-chip.on small{opacity:.85}
.ht-tabs .s-chip.on{color:#0a0a0c}
.ht-sd{display:grid;gap:22px}
.ht-sd-i{display:grid;gap:14px;align-content:start;min-width:0}
.ht-sd-h{display:flex;align-items:center;justify-content:space-between;gap:10px 14px;flex-wrap:wrap}
.ht-sd-h h3{font-size:clamp(22px,4.4vw,32px);line-height:1.15}
.ht-plt{display:inline-flex;align-items:center;padding:6px 11px;border-radius:5px;background:#f5f5f6;color:#0a0a0c;box-shadow:0 0 0 2px #0a0a0c,0 0 0 3px rgba(255,255,255,.55);font:800 14px/1 var(--fb);letter-spacing:.05em}
.ht-lg2{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:12.5px;line-height:1.3;color:var(--mut)}
.ht-lg2 li{display:inline-flex;align-items:center;gap:8px}
.ht-lg2 li::before{content:"";width:18px;height:13px;border-radius:3px;border:1.5px solid rgba(255,255,255,.55)}
.ht-lg2 .a::before{background:var(--ac);border-color:var(--ac)}
.ht-lg2 .h::before{background:repeating-linear-gradient(-45deg,rgba(255,255,255,.55) 0 2px,transparent 2px 5px)}
.ht-lg2 .v::before{background:#fff;border-color:#fff}
.ht-sd-m{min-width:0}

/* thân xe nhìn từ trên xuống: đầu xe ở phía trên */
.ht-coach{--sw:clamp(46px,14vw,56px);position:relative;width:fit-content;margin-inline:auto;padding:118px 22px 28px;border:2px solid var(--edge);border-radius:84px 84px 26px 26px/104px 104px 26px 26px;background:linear-gradient(180deg,#101015,#0a0a0d)}
.ht-coach::before{content:"";position:absolute;top:14px;left:24px;right:24px;height:40px;border-radius:56px 56px 8px 8px/44px 44px 8px 8px;border:2px solid var(--edge);background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.02))}
.ht-whl{position:absolute;width:9px;height:46px;border-radius:3px;background:#2d2d35;box-shadow:0 0 0 1px rgba(255,255,255,.18)}
.ht-whl.a{left:-8px;top:104px}.ht-whl.b{right:-8px;top:104px}
.ht-whl.c{left:-8px;bottom:42px}.ht-whl.d{right:-8px;bottom:42px}
.ht-cab{position:absolute;top:64px;left:24px;right:24px;display:flex;justify-content:space-between;align-items:center}
.ht-stw{position:relative;width:42px;height:42px;border-radius:50%;border:3px solid rgba(255,255,255,.55);margin-left:6px}
.ht-stw::before{content:"";position:absolute;left:4px;right:4px;top:50%;height:3px;margin-top:-1.5px;background:rgba(255,255,255,.55)}
.ht-stw::after{content:"";position:absolute;left:50%;top:50%;bottom:4px;width:3px;margin-left:-1.5px;background:rgba(255,255,255,.55)}
.ht-sg{display:grid;grid-template-columns:repeat(2,var(--sw)) 24px repeat(2,var(--sw));gap:8px 6px}
.ht-seat{position:relative;display:grid;place-items:center;width:var(--sw);height:44px;padding:0;border-radius:10px 10px 6px 6px;border:1.5px solid rgba(255,255,255,.5);background:transparent;color:var(--ink);font:700 12.5px var(--fb);cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .25s}
.ht-seat::before{content:"";position:absolute;left:20%;right:20%;top:3px;height:4px;border-radius:3px;background:currentColor;opacity:.25}
.ht-seat.is-pax{background:var(--ac);border-color:var(--ac);color:#0a0a0c}
.ht-seat.is-hdv,.ht-seat.is-bag{cursor:default;color:rgba(255,255,255,.9);border-color:rgba(255,255,255,.4);background:repeating-linear-gradient(-45deg,rgba(255,255,255,.3) 0 2px,transparent 2px 6px)}
.ht-cab .ht-seat.is-hdv{width:var(--sw)}
.ht-seat[aria-pressed=true]{background:#fff;border-color:#fff;color:#0a0a0c}
.ht-seat[aria-pressed=true]::after{content:"";position:absolute;top:4px;right:4px;width:12px;height:12px;background:var(--ac);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.ht-seat:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media(hover:hover){.ht-seat:not(.is-hdv):not(.is-bag):hover{transform:translateY(-2px);border-color:#fff}}
@media(prefers-reduced-motion:no-preference){
  .kx-js .ht-seat.is-pax{animation:htSeat .5s cubic-bezier(.34,1.56,.64,1) backwards;animation-delay:calc(var(--k,0)*26ms)}
  .kx-js .ht-coach.is-swap{animation:htSwap .6s cubic-bezier(.16,1,.3,1) backwards}
}
@keyframes htSeat{from{opacity:0;transform:scale(.4)}}
@keyframes htSwap{from{opacity:0;transform:translateY(26px)}}
@media(min-width:700px){.ht-coach{--sw:56px}}
@media(min-width:1025px){
  .ht-sd{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,5vw,72px);align-items:start}
  .ht-sd-i{position:sticky;top:110px}
}

/* =====================  6 TIÊU CHÍ CHỌN KHÁCH SẠN (ht_crit)  ===================== */
.ht-crit-sec{background:var(--bg)}
.ht-crit{display:grid;gap:clamp(26px,4vw,48px)}
.ht-crit-h{display:grid;gap:clamp(18px,2vw,26px);align-content:start;min-width:0}
.ht-crit-h .s-head{margin-bottom:0}
.ht-crit-c{display:grid;gap:12px}
.ht-crit .ht-seg4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:6px;border-color:var(--edge);background:rgba(255,255,255,.04)}
.ht-crit .ht-seg4 button{min-height:52px;padding:6px 10px;border:1px solid transparent;border-radius:calc(var(--r) - 1px);background:rgba(255,255,255,.05);color:var(--ink);font-size:14px;line-height:1.25;transition:background .3s,color .3s,border-color .3s,transform .2s}
.ht-crit .ht-seg4 button:active{transform:scale(.97)}
@media(hover:hover){.ht-crit .ht-seg4 button:hover{border-color:var(--edge)}}
.ht-crit .ht-seg4 button.on{background:var(--ac);color:#0a0a0c}
.ht-crit .ht-seg4 button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.ht-tip{margin:0;padding:14px 16px 14px 18px;border-left:3px solid var(--ac);background:linear-gradient(90deg,rgba(255,106,19,.15),rgba(255,106,19,.03));font-size:15px;line-height:1.55;color:var(--ink)}
.ht-crit-c .s-hint{margin:0}

/* thanh tiêu chí: mỗi thanh là một dãy 10 ô cửa sổ sáng đèn */
.ht-bars{gap:0;border-top:1px solid var(--edge)}
.ht-bars li{position:relative;padding:17px 0 19px;border-bottom:1px solid var(--ln);gap:10px 14px;align-items:center}
.ht-bars li>span{display:flex;align-items:center;gap:12px;min-width:0;font:700 15.5px/1.3 var(--fb)}
.ht-rk{flex:none;display:inline-grid;place-items:center;min-width:36px;height:26px;border:1px solid var(--edge);border-radius:3px;text-decoration:none;font:800 12px/1 var(--fb);letter-spacing:.08em;color:var(--mut);transition:background .35s,color .35s,border-color .35s}
.ht-bars li.is-top .ht-rk{background:var(--ac);border-color:var(--ac);color:#0a0a0c}
.ht-bars b{font:800 24px/1 var(--ff);letter-spacing:-.02em}
.ht-bars i{height:12px;border-radius:2px;background:rgba(255,255,255,.08)}
.ht-bars i::after{border-radius:0;background:linear-gradient(90deg,#ff6a13,#ff8c42 72%,#ffc59a)}
.ht-bars i::before{content:"";position:absolute;inset:0;z-index:1;background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 3px),var(--bg) calc(10% - 3px) 10%)}
.ht-how2{grid-column:1/-1;margin:2px 0 0;font-size:15px;line-height:1.6;color:var(--mut)}
.ht-how2 em{display:inline-block;margin-right:8px;padding:3px 7px;border:1px solid rgba(255,106,19,.6);border-radius:3px;color:var(--warm);font:800 12px/1.1 var(--fb);font-style:normal;letter-spacing:.1em;text-transform:uppercase;vertical-align:1px}
@media(prefers-reduced-motion:no-preference){
  .kx-js .ht-tip.is-chg{animation:htTip .55s cubic-bezier(.16,1,.3,1)}
}
@keyframes htTip{from{opacity:0;transform:translateY(8px)}}
@media(min-width:1025px){
  .ht-crit{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(48px,6vw,96px);align-items:start}
  .ht-crit-h{position:sticky;top:96px}
  .ht-bars li{padding:20px 0 22px}
}

/* =====================  ĐIỀU KHOẢN HỢP ĐỒNG + CHỌN XE (thẻ lật)  ===================== */
.ht-flip-sec{background:var(--bg2)}
.ht-sub2{margin-top:clamp(44px,7vw,92px)}
.ht-flip-sec .s-flip-f,.ht-flip-sec .s-flip-b{border-radius:0;min-height:272px;padding:clamp(20px,2.4vw,28px)}
.ht-flip-sec .s-flip-f{background:linear-gradient(180deg,rgba(20,20,26,.2),rgba(20,20,26,.94) 62%),var(--win) 100% 0/48px 44px,var(--card);box-shadow:none;justify-content:space-between}
.ht-flip-sec .s-flip-h{opacity:1;color:var(--ac);font:800 12px var(--fb);letter-spacing:.16em}
.ht-flip-sec .s-flip-f h3{margin-bottom:8px;font-size:clamp(19px,2.2vw,23px)}
.ht-flip-sec .s-flip-f p{margin:0;font-size:15px}
.ht-flip-sec .s-ico{width:46px;height:46px;margin-bottom:16px;border-radius:4px;border:1px solid rgba(255,106,19,.4)}
.ht-flip-sec .s-flip-b{background:var(--ac);color:#0a0a0c;border-color:var(--ac);--edge:rgba(10,10,12,.5);justify-content:flex-start}
.ht-flip-sec .s-flip-b .s-flip-h{color:#0a0a0c;opacity:.85}
.ht-bk{display:grid;gap:11px;margin:0;padding:0;list-style:none}
.ht-bk li{position:relative;padding-left:20px;font-size:15px;line-height:1.5;color:#0a0a0c}
.ht-flip-sec .s-flip-b li{color:#0a0a0c}
.ht-bk li::before{content:"";position:absolute;left:0;top:.45em;width:9px;height:9px;border-radius:2px;background:#0a0a0c}
.ht-bk b{font-weight:800}
/* viền focus nằm trong mép vì clip-path cắt mất outline bên ngoài */
.ht-flip-sec .s-flip:focus-visible .s-flip-f{outline:0;box-shadow:inset 0 0 0 3px var(--ac)}
.ht-flip-sec .s-flip:focus-visible .s-flip-b{box-shadow:inset 0 0 0 4px #0a0a0c}
/* thẻ xe: số chỗ lớn */
.ht-cap{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.ht-cap b{font-size:clamp(76px,21vw,104px);line-height:.86;color:var(--ink);text-shadow:0 0 30px rgba(255,106,19,.4)}
.ht-cap span{font:800 15px var(--fb);letter-spacing:.14em;text-transform:uppercase;color:var(--ac)}
/* thẻ mẹo */
.ht-tipc.ht-cut.s-card{display:grid;gap:12px;align-content:start;border-color:rgba(255,106,19,.55);background:linear-gradient(135deg,rgba(255,106,19,.2),rgba(255,106,19,.04) 62%),var(--card)}
.ht-tipc .ht-tag{justify-self:start}
.ht-tipc h3{margin:0;font-size:clamp(20px,2.4vw,26px);line-height:1.2}
.ht-tipc p{margin:0;color:var(--ink);opacity:.88}
/* kit ép clip-path:none cho phần tử data-r trong rail (mobile, iPad): giữ lại góc cắt */
.kx-js .s-rail [data-r].ht-cut{clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)))}
@media(min-width:1025px){
  .ht-flip-sec .s-flip-f,.ht-flip-sec .s-flip-b{min-height:296px}
}

/* =====================  ROOMING LIST MẪU (ht_room): tờ giấy sáng  ===================== */
.ht-room-sec{--edge:rgba(10,10,12,.22);--acd:#c2410c}
.ht-paper{--pp:clamp(16px,3.4vw,40px);position:relative;padding:var(--pp);background:#fff;color:#0a0a0c;border:1px solid rgba(10,10,12,.12);border-radius:4px;box-shadow:0 30px 60px -28px rgba(10,10,12,.5),0 2px 0 rgba(10,10,12,.05)}
.ht-hole{position:absolute;left:calc(var(--pp)/2 - 6px);width:12px;height:12px;border-radius:50%;background:var(--bg);box-shadow:inset 0 1px 3px rgba(10,10,12,.4)}
.ht-hole.a{top:22%}.ht-hole.b{top:80%}
.ht-pp-h{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin:calc(var(--pp)*-1) calc(var(--pp)*-1) 0;padding:var(--pp) var(--pp) 20px;border-bottom:2px dashed rgba(10,10,12,.3)}
.ht-pp-h::before,.ht-pp-h::after{content:"";position:absolute;bottom:-12px;width:22px;height:22px;border-radius:50%;background:var(--bg);border:1px solid rgba(10,10,12,.12)}
.ht-pp-h::before{left:-12px}.ht-pp-h::after{right:-12px}
.ht-pp-h>div{min-width:0}
.ht-pp-h b{display:block;font:800 clamp(22px,4.6vw,34px)/1.1 var(--ff);letter-spacing:.03em}
.ht-pp-h>div span{display:block;margin-top:6px;font-size:13.5px;line-height:1.45;color:#44444c}
.ht-stamp{flex:none;align-self:center;padding:8px 13px;border:3px solid var(--acd);border-radius:6px;color:var(--acd);font:800 clamp(15px,3.8vw,22px)/1 var(--ff);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;opacity:0;transform:rotate(-9deg) scale(1.9);box-shadow:inset 0 0 0 1px var(--acd);transition:opacity .22s,transform .5s cubic-bezier(.34,1.56,.64,1);pointer-events:none}
.ht-stamp.is-on{opacity:.93;transform:rotate(-9deg) scale(1)}

/* bảng */
.ht-paper .s-tblw{margin-inline:calc(var(--pp)*-1);padding-inline:var(--pp)}
.ht-tbl{min-width:0;font-size:14.5px;color:#0a0a0c}
.ht-tbl th{padding:14px 12px;font-size:12px;color:#44444c;border-bottom:2px solid #0a0a0c}
.ht-tbl td{padding:6px 12px;vertical-align:middle;border-bottom:1px solid rgba(10,10,12,.14);line-height:1.4}
.ht-tbl th:first-child,.ht-tbl td:first-child{padding-left:12px}
.ht-tbl tbody tr:hover td{background:transparent}
.ht-tbl tbody tr{transition:background .3s}
@media(hover:hover){.ht-tbl tbody tr:hover{background:rgba(10,10,12,.035)}}
.ht-tbl tr.is-mate{background:rgba(255,106,19,.15)}
.ht-tbl tr.is-self{background:rgba(255,106,19,.28)}
.ht-tbl tr.is-mate td:first-child{box-shadow:inset 4px 0 0 var(--ac)}
.ht-rowb{display:flex;align-items:center;min-height:44px;padding:0 4px;margin-left:-4px;border:0;border-radius:4px;background:none;color:inherit;font:800 14.5px var(--fb);text-align:left;cursor:pointer;text-decoration:underline dotted rgba(10,10,12,.45);text-underline-offset:4px}
.ht-rowb:focus-visible{outline:3px solid #0a0a0c;outline-offset:1px}
.ht-rid{display:inline-grid;place-items:center;width:24px;height:24px;margin-right:8px;border-radius:4px;background:rgba(10,10,12,.09);color:#0a0a0c;font:800 12px/1 var(--fb);font-style:normal}
.ht-rt{display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border:1.5px solid #0a0a0c;border-radius:99px;font:800 12.5px/1 var(--fb);letter-spacing:.04em;white-space:nowrap}
.ht-rt.t{background:#fff;color:#0a0a0c}
.ht-rt.s{background:#0a0a0c;color:#fff}
.ht-rt.r{background:var(--ac);border-color:var(--ac);color:#0a0a0c}
.ht-tm2{font-weight:700;white-space:nowrap}
.ht-ea{display:inline-block;margin-left:6px;padding:2px 7px;border:1px solid var(--acd);border-radius:3px;color:var(--acd);font:800 12px/1.25 var(--fb);font-style:normal;letter-spacing:.03em}
@media(prefers-reduced-motion:no-preference){.kx-js .ht-tbl tr.is-new{animation:htRow .8s ease-out}}
@keyframes htRow{from{opacity:0;background:rgba(255,106,19,.45)}}

/* ba bên cùng đọc */
.ht-who{display:grid;gap:12px;margin:20px 0 0;padding:18px 0 0;border-top:1px solid rgba(10,10,12,.14)}
.ht-who li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 10px;align-items:baseline;font-size:15px;line-height:1.5;color:#35353c}
.ht-who i{width:11px;height:11px;border-radius:2px;background:#0a0a0c;transform:translateY(1px)}
.ht-who li:nth-child(2) i{background:var(--ac)}
.ht-who li:nth-child(3) i{background:#fff;box-shadow:inset 0 0 0 2px #0a0a0c}
.ht-who b{color:#0a0a0c;font-weight:800;font-size:15px}
.ht-who span{grid-column:2}

/* chân tờ: tóm tắt + nút */
.ht-pp-f{display:grid;gap:16px;margin-top:20px;padding-top:18px;border-top:2px dashed rgba(10,10,12,.3)}
.ht-pp-s{margin:0;font-size:15px;line-height:1.6;color:#2a2a31}
.ht-pp-s b{color:#0a0a0c}
.ht-sel{display:block;margin-bottom:8px;padding:9px 12px;border-left:3px solid var(--ac);background:rgba(255,106,19,.14);color:#0a0a0c}
.ht-pp-b{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ht-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 16px;border:2px solid #0a0a0c;border-radius:var(--r);background:transparent;color:#0a0a0c;font:800 13px var(--fb);letter-spacing:.07em;text-transform:uppercase;cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .2s,opacity .25s}
.ht-btn i{padding:3px 8px;border-radius:99px;background:#0a0a0c;color:#fff;font:800 12px/1.2 var(--fb);font-style:normal;letter-spacing:.04em}
.ht-btn.is-main{background:var(--ac);border-color:var(--ac)}
.ht-btn.is-main[aria-pressed=true]{background:#0a0a0c;border-color:#0a0a0c;color:#fff}
.ht-btn:active:not(:disabled){transform:scale(.97)}
.ht-btn:disabled{opacity:.4;cursor:not-allowed}
.ht-btn:focus-visible{outline:3px solid #0a0a0c;outline-offset:3px}
@media(hover:hover){
  .ht-btn:hover:not(:disabled){background:#0a0a0c;border-color:#0a0a0c;color:#fff}
  .ht-btn:hover:not(:disabled) i{background:var(--ac);color:#0a0a0c}
}

/* mobile: mỗi dòng thành một thẻ nhỏ (vẫn là bảng nhờ role); cột phải xếp loại phòng, giờ đến, nhãn đến sớm */
@media(max-width:700px){
  .ht-hole{display:none}
  .ht-paper .s-tblw{overflow:visible}
  .ht-tbl,.ht-tbl tbody{display:block;min-width:0}
  .ht-tbl thead{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .ht-tbl tr{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n r" "m t" "d t";gap:2px 14px;align-items:center;margin-inline:-12px;padding:4px 12px 12px;border-bottom:1px solid rgba(10,10,12,.14)}
  .ht-tbl td{display:block;padding:0;border:0;font-size:15px}
  .ht-tbl td:nth-child(1){grid-area:n;padding-left:0}
  .ht-tbl td:nth-child(2){grid-area:r;display:flex;align-items:center;justify-self:end}
  .ht-tbl td:nth-child(3){grid-area:m;align-self:start;color:#2a2a31}
  .ht-tbl td:nth-child(4){grid-area:d;align-self:start;color:#2a2a31}
  .ht-tbl td:nth-child(5){grid-area:t;align-self:start;justify-self:end;text-align:right}
  .ht-tbl td:nth-child(3)::before,.ht-tbl td:nth-child(4)::before{content:attr(data-l) ": ";font-weight:700;color:#0a0a0c}
  .ht-tbl td:nth-child(3)::before{content:"Ở chung: "}
  .ht-ea{display:block;margin:5px 0 0;text-align:center}
  .ht-tbl tr.is-mate{box-shadow:inset 4px 0 0 var(--ac)}
  .ht-tbl tr.is-mate td:first-child{box-shadow:none}
}
@media(min-width:641px){
  .ht-pp-b{grid-template-columns:repeat(2,auto);justify-content:end}
  .ht-btn{padding:0 24px}
}
@media(min-width:900px){
  .ht-who{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
  .ht-pp-f{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:28px}
}

/* =====================  TUYẾN BÀN GIAO (ht_route): xe chạy theo cuộn  ===================== */
.ht-route-sec{background:var(--bg2)}
.ht-route{position:relative;--bx:100%}
.ht-rl{position:absolute;left:0;top:0;width:30px;height:var(--rh,100%);pointer-events:none}
.ht-rl::before{content:"";position:absolute;left:3px;right:3px;top:0;bottom:0;background:#0b0b0e;border-inline:1px solid var(--edge)}
.ht-rl::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:repeating-linear-gradient(180deg,rgba(255,255,255,.5) 0 12px,transparent 12px 22px)}
.ht-rf{position:absolute;left:50%;top:0;width:4px;height:var(--bx);margin-left:-2px;background:var(--ac);box-shadow:0 0 14px rgba(255,106,19,.7);z-index:1}
.ht-rb{position:absolute;left:50%;top:var(--bx);z-index:3;width:64px;height:26px;margin:-13px 0 0 -32px;transform:rotate(90deg);filter:drop-shadow(0 0 8px rgba(255,106,19,.55))}
.ht-rb svg{display:block;width:100%;height:100%}
@media(prefers-reduced-motion:no-preference){
  .kx-js .ht-route.is-live .ht-rf{transition:height .22s linear,width .22s linear}
  .kx-js .ht-route.is-live .ht-rb{transition:top .22s linear,left .22s linear}
}
.ht-stops{position:relative;display:grid;gap:clamp(26px,6vw,36px)}
.ht-stops li{position:relative;min-width:0;padding-left:54px}
/* kit đặt clip-path:inset(0) khi hiện, sẽ cắt ghim nằm ngoài khung li */
.kx-js .ht-stops li.kx-in{clip-path:none}
.ht-pin{position:absolute;left:2px;top:0;z-index:2;width:26px;height:26px;display:grid;place-items:center;border:2px solid rgba(255,255,255,.55);border-radius:50%;background:var(--bg2);transition:background .35s,border-color .35s,box-shadow .35s}
.ht-pin::after{content:"";width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.45);transition:background .35s}
.ht-tm{display:inline-block;margin-bottom:10px;padding:6px 10px;border-radius:4px;background:#f5f5f6;color:#0a0a0c;box-shadow:0 0 0 2px #0a0a0c,0 0 0 3px rgba(255,255,255,.5);font:800 13px/1 var(--fb);letter-spacing:.06em;transition:background .35s,box-shadow .35s}
.ht-stops h3{margin:0 0 6px;font-size:clamp(18px,2.2vw,21px);line-height:1.25}
.ht-stops p{margin:0;color:var(--mut);font-size:15px;line-height:1.6}
.ht-route:not(.is-live) .ht-pin,.ht-route .ht-stops li.is-pass .ht-pin{border-color:var(--ac);background:var(--ac);box-shadow:0 0 0 5px rgba(255,106,19,.18)}
.ht-route:not(.is-live) .ht-pin::after,.ht-route .ht-stops li.is-pass .ht-pin::after{background:#0a0a0c}
.ht-route .ht-stops li.is-pass .ht-tm{background:var(--ac);box-shadow:0 0 0 2px #0a0a0c,0 0 0 3px var(--ac)}
@media(prefers-reduced-motion:no-preference){
  .kx-js .ht-route .ht-stops li.is-pass .ht-pin{animation:htPin .6s cubic-bezier(.34,1.56,.64,1)}
}
@keyframes htPin{from{transform:scale(.6)}60%{transform:scale(1.25)}}
@media(min-width:641px) and (max-width:1024px){
  .ht-stops li{display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:18px;align-items:start}
  .ht-tm{grid-column:1;grid-row:1/3;justify-self:start;margin:0}
  .ht-stops h3,.ht-stops p{grid-column:2}
}
@media(min-width:1025px){
  .ht-rl{left:0;right:0;top:0;width:auto;height:30px}
  .ht-rl::before{left:0;right:0;top:3px;bottom:3px;border-inline:0;border-block:1px solid var(--edge)}
  .ht-rl::after{left:0;right:0;top:50%;bottom:auto;width:auto;height:2px;margin:-1px 0 0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.5) 0 12px,transparent 12px 22px)}
  .ht-rf{left:0;top:50%;width:var(--bx);height:4px;margin:-2px 0 0}
  .ht-rb{left:var(--bx);top:50%;margin:-13px 0 0 -32px;transform:none}
  .ht-stops{grid-template-columns:repeat(6,minmax(0,1fr));gap:0 clamp(18px,2.2vw,32px);padding-top:56px}
  .ht-stops li{padding:0}
  .ht-pin{left:0;top:-54px}
}

/* =====================  FAQ  ===================== */
.ht-faq-sec{background:var(--bg)}
.ht-faq{align-items:start}
@media(min-width:1025px){.ht-faq>div:first-child{position:sticky;top:96px}}

/* =====================  giảm chuyển động: tắt mọi hoạt hình của trang  ===================== */
@media(prefers-reduced-motion:reduce){
  .sk-ht [class*="ht-"],.sk-ht [class*="ht-"]::before,.sk-ht [class*="ht-"]::after{animation:none!important;transition:none!important}
}