/* Kai's Adventures — giao diện v2 (29/10/2026), học phong cách Ample: nền trắng thoáng, tiêu đề Lexend vừa trộn Cormorant nghiêng,
   một màu ô liu trầm làm mảng lớn, nút viên thuốc có mũi tên, ảnh bo góc lớn cuộn ngang, hiệu ứng nhẹ. Tiền tố lớp ngắn, tiếng Việt không dấu. */
:root {
  --nen: #FCFCFA; --nen-2: #F3F4EF; --the: #FFFFFF; --muc: #1A1D21; --muc-2: #43484E; --nhat: #70757B; --mo: #CDD0D3; --vien: #E6E7E2;
  --oliu: #7E893A; --oliu-dam: #4F5720; --oliu-nhat: #EFF1E5; --toi: #1F2429;
  --wa: #1FA855; --zl: #0068FF;
  --sans: "Lexend", "Segoe UI", system-ui, -apple-system, sans-serif; --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --cao-dau: 72px;
  /* cho khung trợ lý chat.js */ --indigo: var(--toi); --jade: var(--oliu); --jade-deep: var(--oliu-dam); --porcelain: var(--nen); --slate: var(--muc-2); --muted: var(--nhat);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --nen: #101316; --nen-2: #161A1E; --the: #1A1F24; --muc: #EEEFEA; --muc-2: #C4C8CC; --nhat: #969CA2; --mo: #43494F; --vien: #2A3036; --oliu: #6F7A30; --oliu-dam: #C4CD72; --oliu-nhat: #22260F; --toi: #22282E; color-scheme: dark } }
:root[data-theme="dark"] { --nen: #101316; --nen-2: #161A1E; --the: #1A1F24; --muc: #EEEFEA; --muc-2: #C4C8CC; --nhat: #969CA2; --mo: #43494F; --vien: #2A3036; --oliu: #6F7A30; --oliu-dam: #C4CD72; --oliu-nhat: #22260F; --toi: #22282E; color-scheme: dark }
*, *::before, *::after { box-sizing: border-box }
[hidden] { display: none !important }
html { scroll-padding-top: calc(var(--cao-dau) + 60px); -webkit-text-size-adjust: 100% }
body { background: var(--nen); color: var(--muc); font: 300 16px/1.7 var(--sans); margin: 0; -webkit-font-smoothing: antialiased; overflow-x: hidden }
b, strong { font-weight: 500 }
h1, h2, h3, h4, p, dl, dd, figure { margin: 0 }
img { max-width: 100%; display: block }
button { font-family: var(--sans) }
a { color: inherit }
/* biểu tượng nét 24×24: kích thước + nét mặc định (độ ưu tiên 0 — mọi luật riêng đều thắng) */
:where(.dau, main, .cuoi, .mn, .day, .fab, .goi-y-en) :where(svg[viewBox="0 0 24 24"]) { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5 }
:where(svg.wa) { fill: currentColor; stroke: none }
:focus-visible { outline: 3px solid var(--oliu); outline-offset: 2px; border-radius: 10px }
.le { padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)) }
.khung { max-width: 1180px; margin: 0 auto }
.an-chu { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }

/* ---- chữ ---- */
.tieu { font: 500 clamp(32px, 4.3vw, 54px)/1.08 var(--sans); letter-spacing: -.038em; text-wrap: balance }
.tieu em, .tieu-nho em, .bia h1 em, .cuoi h2 em, .cta h2 em, .ve-dau em { font: italic 500 1.13em/1 var(--serif); letter-spacing: -.005em ; font-variant-numeric: lining-nums }
.tieu-nho { font: 500 clamp(22px, 2.4vw, 28px)/1.1 var(--sans); letter-spacing: -.04em }
.nhan-nho { font: 400 11.5px/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--nhat) }
.dau-muc { display: grid; gap: 16px; max-width: 62ch; margin-bottom: 44px }
.dau-muc p { color: var(--muc-2); font-size: 16.5px }
.dau-muc--giua { margin-inline: auto; text-align: center; justify-items: center }
.dau-muc--hang { max-width: none; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap }
.dau-muc--hang > div { display: grid; gap: 14px; max-width: 62ch } .dau-muc--hang > .doi { display: flex; gap: 8px }
.muc { padding-block: 112px }
.muc--nen2 { background: var(--nen-2) }

/* ---- nút ---- */
.thuoc { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--vien); background: var(--the); color: var(--muc); font: 400 15px var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .3s, color .3s, border-color .3s }
.thuoc svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .3s }
.thuoc:hover svg { transform: translateX(4px) }
.thuoc:not(.thuoc--trang):not(.thuoc--den):not(.thuoc--wa):not(.thuoc--zl):hover { background: var(--muc); color: var(--nen); border-color: var(--muc) }
.thuoc--den { background: var(--muc); color: var(--nen); border-color: var(--muc) }
.thuoc--trang { background: #fff; color: #1A1D21; border-color: #fff }
.thuoc--wa { background: var(--wa); color: #fff; border-color: var(--wa) } .thuoc--zl { background: var(--zl); color: #fff; border-color: var(--zl) }
.thuoc svg.wa { fill: var(--wa); stroke: none } .thuoc--wa svg.wa, .thuoc--zl svg.wa { fill: currentColor }
.tron { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--vien); background: var(--the); color: var(--muc); display: inline-grid; place-items: center; cursor: pointer; transition: background-color .3s, color .3s, border-color .3s }
.tron svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5 }
.tron:hover { background: var(--muc); color: var(--nen); border-color: var(--muc) }
.lien-ket { font: 400 15px var(--sans); text-decoration: none; padding: 4px 0; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size .35s } .lien-ket:hover { background-size: 0 1px; background-position: 100% 100% }
/* nút Đặt trên ảnh: viên thuốc trắng, biểu tượng WhatsApp xanh / Zalo */
.dat { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 0; background: rgba(255,255,255,.95); color: #1A1D21; font: 400 14px var(--sans); cursor: pointer; white-space: nowrap; text-decoration: none }
.dat .wa { width: 16px; height: 16px; fill: var(--wa); flex: none } .zl { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; background: var(--zl); color: #fff; font: 600 8px var(--sans) }
.dat .mt { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; flex: none; transition: transform .3s } .dat:hover .mt { transform: translateX(4px) }
.dat--den { background: var(--muc); color: var(--nen) }

/* ---- đầu trang dính + menu ---- */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); background: var(--nen); z-index: 60 }
.dau { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: color-mix(in srgb, var(--nen) 94%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--vien); transition: box-shadow .3s }
.dau.cuon-xuong { box-shadow: 0 10px 30px -22px rgba(0,0,0,.45) }
.dau .khung { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: var(--cao-dau) }
.logo { display: flex; align-items: center; gap: 10px; font: 500 18px/1.05 var(--sans); letter-spacing: -.025em; text-decoration: none; flex: none }
.logo svg { width: 30px; height: 30px; flex: none } .logo small { display: block; font: 400 10px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--nhat); margin-top: 3px }
.dau nav { display: flex; gap: 30px; font: 400 12.5px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muc-2) }
.dau nav a { white-space: nowrap; text-decoration: none; padding: 6px 0; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .35s } .dau nav a:hover { background-size: 100% 1px }
.dau .phai { display: flex; align-items: center; gap: 10px }
.ngon { display: inline-flex; border: 1px solid var(--vien); border-radius: 999px; padding: 2px }
.ngon a { text-decoration: none; color: var(--nhat); font: 400 12px var(--sans); padding: 5px 11px; border-radius: 999px } .ngon a[aria-current="true"] { background: var(--muc); color: var(--nen) }
.dau .thuoc { min-height: 40px; padding: 0 17px; font-size: 14px }
.menu-nut { display: none; width: 44px; height: 44px; border: 0; background: none; color: var(--muc); cursor: pointer; place-items: center }
.menu-nut svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6 }
.mn-nen { position: fixed; inset: 0; z-index: 70; background: rgba(8,12,16,.45); opacity: 0; transition: opacity .35s; pointer-events: none }
.mn { position: fixed; top: 0; right: 0; bottom: 0; z-index: 71; width: min(340px, 88vw); background: var(--nen); padding: calc(env(safe-area-inset-top, 0px) + 16px) max(22px, env(safe-area-inset-right, 0px)) 24px 26px; transform: translateX(100%); transition: transform .45s cubic-bezier(.2,.7,.2,1); display: grid; align-content: start; gap: 2px; overflow-y: auto; visibility: hidden; transition: transform .45s cubic-bezier(.2,.7,.2,1), visibility 0s .45s }
.mn .dong-mn { justify-self: end; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--vien); background: none; color: var(--muc); cursor: pointer; margin-bottom: 12px; font: 300 18px/1 var(--sans) }
.mn a { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--vien); text-decoration: none; font-size: 16px; opacity: 0; transform: translateY(12px); transition: opacity .4s, transform .4s }
.mn a::after { content: "→"; color: var(--nhat) } .mn .thuoc { margin-top: 18px; border-bottom: 0 } .mn .thuoc::after { content: none }
.mo-menu .mn { transform: none; visibility: visible; transition: transform .45s cubic-bezier(.2,.7,.2,1); box-shadow: -20px 0 40px -30px rgba(0,0,0,.5) } .mo-menu .mn-nen { opacity: 1; pointer-events: auto } .mo-menu .mn a { opacity: 1; transform: none }
.mo-menu .mn a:nth-of-type(2) { transition-delay: .05s } .mo-menu .mn a:nth-of-type(3) { transition-delay: .1s } .mo-menu .mn a:nth-of-type(4) { transition-delay: .15s } .mo-menu .mn a:nth-of-type(5) { transition-delay: .2s } .mo-menu .mn a:nth-of-type(6) { transition-delay: .25s }
.mo-menu { overflow: hidden }

/* ---- ảnh bìa ---- */
.bia { position: relative; overflow: hidden; background-color: #4E6B45; color: #fff }
/* 30/10/2026: ảnh bìa đèo Mã Pí Lèng – sông Nho Quế; điện thoại dùng ảnh dọc hẻm Nho Quế (<picture>) */
.bia__nen { position: absolute; inset: -14% 0; will-change: transform } .bia__nen picture { display: block; width: 100%; height: 100% }
.bia__nen img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42% }
.bia::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12,20,16,.5) 0%, rgba(12,20,16,.18) 42%, rgba(12,20,16,0) 68%), linear-gradient(180deg, rgba(12,20,16,.22) 0%, transparent 20%, transparent 58%, rgba(12,20,16,.42) 100%); pointer-events: none }
.bia .khung { position: relative; z-index: 1; min-height: min(780px, 88svh); display: grid; align-content: end; gap: 22px; padding-block: 120px 80px }
.bia__nhan { font: 400 12px/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.85); display: flex; align-items: center; gap: 12px } .bia__nhan::before { content: ""; width: 28px; height: 1px; background: currentColor }
.bia h1 { font: 500 clamp(46px, 7.6vw, 104px)/1 var(--sans); letter-spacing: -.05em; max-width: 13ch; text-wrap: balance }
.bia h1 em { font-size: 1.1em }
.bia__mo { max-width: 46ch; font: 300 clamp(16px, 1.5vw, 18.5px)/1.65 var(--sans); color: rgba(255,255,255,.9) }
.bia__nut { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin-top: 4px } .bia__nut .lien-ket { color: #fff }
.bia__dau { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font: 300 13.5px var(--sans); color: rgba(255,255,255,.85) }
.bia__dau li { display: inline-flex; align-items: center; gap: 8px } .bia__dau li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.8) }
.bia__chu { position: absolute; z-index: 1; right: max(20px, env(safe-area-inset-right, 0px)); bottom: 22px; font: 300 12px var(--sans); color: rgba(255,255,255,.75) }
.bia--con .khung { min-height: min(620px, 74svh) }
.vet { display: flex; gap: 8px; font: 300 13px var(--sans); color: rgba(255,255,255,.8) } .vet a { text-decoration: none } .vet a:hover { text-decoration: underline }

/* ---- dải số ---- */
.so-dai { border-bottom: 1px solid var(--vien) }
.so { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-block: 34px }
.so div { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 18px; padding: 4px 28px; border-left: 1px solid var(--vien) } .so div:first-child { border-left: 0; padding-left: 0 }
.so b { font: 200 clamp(40px, 4.4vw, 58px)/1 var(--sans); letter-spacing: -.05em; font-variant-numeric: tabular-nums; white-space: nowrap }
.so span { font: 300 13px/1.45 var(--sans); color: var(--nhat); max-width: 22ch }

/* ---- khung "Giá thật": ảnh thật của tour + giá + nút Đặt ---- */
.mau { padding-block: 96px 104px }
.mau__khung { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 76px); align-items: center }
.mau__anh { position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 5 / 4; background: var(--nen-2) }
.mau__anh img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.045); transition: opacity .8s ease, transform 1.6s cubic-bezier(.2,.7,.2,1) }
.mau__anh img.dang { opacity: 1; transform: none }
.mau__anh .chip-kinh { position: absolute; z-index: 1; left: 18px; top: 18px }
.mau__chu { display: grid; gap: 20px; align-content: center }
.mau__dau { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--vien) }
.mau__dau .nhan-nho { color: var(--oliu-dam) } .doi { display: flex; gap: 8px }
#tg { display: grid; gap: 16px } #tg .tieu-nho { font-size: clamp(26px, 2.7vw, 34px); line-height: 1.15 }
.tg-gia { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap }
.tg-gia b { font: 200 clamp(46px, 5vw, 68px)/1 var(--sans); letter-spacing: -.055em; font-variant-numeric: tabular-nums }
.tg-gia span { font: 300 13.5px var(--sans); color: var(--nhat) }
.dac { display: flex; flex-wrap: wrap; gap: 8px 22px; font: 300 13.5px var(--sans); color: var(--muc-2) }
.dac span { display: inline-flex; align-items: center; gap: 8px } .dac svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.4; color: var(--oliu-dam) }
#tg .dac { padding-block: 16px; border-block: 1px solid var(--vien) }
.mau__don { display: flex; align-items: center; gap: 8px; font: 300 13.5px var(--sans); color: var(--nhat) } .mau__don svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4 }

/* ---- thanh chọn chuyến (số khách + ngày) dính dưới đầu trang ---- */
.chon { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--cao-dau)); z-index: 40; background: color-mix(in srgb, var(--nen) 94%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--vien) }
.chon .khung { display: flex; align-items: center; gap: 12px; padding-block: 12px; flex-wrap: wrap }
.chon__nhan { font: 400 11.5px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--nhat); margin-right: 4px }
.dem { display: inline-grid; grid-template-columns: 40px auto 40px; align-items: center; height: 44px; border: 1px solid var(--vien); border-radius: 999px; background: var(--the) }
.dem button { height: 42px; border: 0; background: none; font: 300 22px/1 var(--sans); color: var(--muc); cursor: pointer; border-radius: 50% }
.dem button:disabled { opacity: .3; cursor: default }
.dem output { text-align: center; font: 400 14px var(--sans); white-space: nowrap; padding: 0 4px; font-variant-numeric: tabular-nums; min-width: 74px }
.ngay-nut { min-height: 44px; min-width: 170px; border: 1px solid var(--vien); border-radius: 999px; background: var(--the); display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 16px; font: 400 14px var(--sans); color: var(--muc); cursor: pointer }
.ngay-nut[aria-expanded="true"] { border-color: var(--muc) } .ngay-nut svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6 }
.chon__ghi { font: 300 13px var(--sans); color: var(--nhat); margin-left: auto }
.chon__ghi i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin: 0 5px 1px 10px; vertical-align: middle } .chon__ghi .ok { background: #3FAE6A } .chon__ghi .lim { background: #E2A325 } .chon__ghi .full { background: #C9473A }
.dai-ngay { flex-basis: 100%; display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 6px; scrollbar-width: thin; overscroll-behavior-x: contain }
.dai-ngay button { flex: none; width: 48px; padding: 6px 0; border: 1px solid var(--vien); border-radius: 14px; background: var(--the); color: var(--muc); cursor: pointer; display: grid; justify-items: center; gap: 2px }
.dai-ngay small { font: 300 10px var(--sans); color: var(--nhat); text-transform: capitalize } .dai-ngay b { font: 400 15px/1.1 var(--sans) }
.dai-ngay i { width: 6px; height: 6px; border-radius: 50%; background: #3FAE6A } .dai-ngay i.lim { background: #E2A325 } .dai-ngay i.full { background: #C9473A } .dai-ngay i.chua { background: var(--mo) }
.dai-ngay button[aria-selected="true"] { border-color: var(--muc); background: var(--muc); color: var(--nen) } .dai-ngay button[aria-selected="true"] small { color: var(--nen) }
.dai-ngay button:disabled { opacity: .45; cursor: not-allowed }
.toi { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px 0 12px; border-radius: 999px; background: var(--oliu-nhat); color: var(--oliu-dam); font: 300 13px var(--sans); text-decoration: none; white-space: nowrap; transition: background-color .3s }
.toi i { width: 7px; height: 7px; border-radius: 50%; background: var(--oliu); flex: none } .toi b { font-weight: 500; letter-spacing: .02em; font-variant-numeric: tabular-nums }
.toi:hover { background: color-mix(in srgb, var(--oliu-nhat) 72%, var(--oliu) 28%) }

/* ---- ai nên đi (bốn ô chữ, đường mảnh) ---- */
.bon { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--vien) }
.bon article { padding: 28px 26px 6px 0; display: grid; gap: 10px; align-content: start } .bon article + article { padding-left: 26px; border-left: 1px solid var(--vien) }
.bon h3 { font: 400 20px/1.25 var(--sans); letter-spacing: -.03em } .bon p { color: var(--muc-2); font-size: 15px }

/* ---- thẻ tour ảnh lớn cuộn ngang ---- */
.keo { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: none; overscroll-behavior-x: contain; margin-right: calc(-1 * max(20px, env(safe-area-inset-right, 0px))); padding-right: max(20px, env(safe-area-inset-right, 0px)) }
.keo::-webkit-scrollbar { display: none }
.tt { flex: none; width: min(360px, 80vw); scroll-snap-align: start; display: grid; grid-template-rows: auto 1fr; gap: 18px; align-content: start }
.tt__anh { position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--vien) }
.tt__anh img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2,.7,.2,1) }
.tt__anh .chip-kinh { position: absolute; left: 14px; top: 14px }
.chip-kinh { font: 400 11.5px var(--sans); letter-spacing: .04em; background: rgba(255,255,255,.92); color: #1A1D21; border-radius: 999px; padding: 4px 11px; white-space: nowrap; box-shadow: 0 6px 16px -10px rgba(0,0,0,.4) }
.nen { position: absolute; inset: 0; overflow: hidden } .nen img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2,.7,.2,1) }
.tt:hover .tt__anh img, .mua-the:hover .nen img, .cta:hover .nen img { transform: scale(1.04) }
.tt__than { display: grid; gap: 10px; grid-template-rows: auto auto auto 1fr; padding-inline: 2px }
.tt__than h3 { font: 400 21px/1.22 var(--sans); letter-spacing: -.03em; text-wrap: balance } .tt__than h3 a { text-decoration: none } .tt__than h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px }
.tt__than > p { font: 300 14px/1.6 var(--sans); color: var(--muc-2) }
.tt .dac { gap: 6px } .tt .dac span { border: 1px solid var(--vien); border-radius: 999px; padding: 2px 10px; font-size: 12px; background: var(--the) }
.tt__chan { align-self: end; display: grid; gap: 12px; align-content: end; padding-top: 16px; margin-top: 4px; border-top: 1px solid var(--vien) }
.gia-tren { font: 300 12px var(--sans); color: var(--nhat) } .gia-tren b { display: block; font: 300 30px/1.05 var(--sans); letter-spacing: -.045em; color: var(--muc); font-variant-numeric: tabular-nums; margin-top: 2px } .gia-tren small { display: block; font: 300 12px var(--sans); color: var(--nhat); margin-top: 3px }
.gia-tren--hoi b { font-size: 21px; letter-spacing: -.02em; margin: 0 }
.xe { display: inline-flex; align-items: center; gap: 7px; font: 300 12.5px var(--sans); color: var(--muc-2); flex-wrap: wrap } .xe:empty { display: none }
.xe i { width: 6px; height: 6px; border-radius: 50%; background: var(--mo) } .xe.ok i { background: #3FAE6A } .xe.lim i { background: #E2A325 } .xe.full i { background: #C9473A }
.xe button { background: none; border: 0; padding: 0; color: var(--muc); font: 400 12.5px var(--sans); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: pointer }
.tt__nut { display: flex; align-items: center; gap: 14px; flex-wrap: wrap }
.ghi-er { margin-top: 18px; font: 300 14px var(--sans); color: var(--oliu-dam) }

/* ---- ba cách đi: chọn xe ở trên, ảnh sạch bên trái, chữ bên phải ---- */
.xe-lon { display: grid; gap: 34px }
.xe-chon { display: flex; gap: clamp(20px, 4.4vw, 60px); flex-wrap: wrap; align-items: baseline; border-bottom: 1px solid var(--vien) }
.xe-chon button { border: 0; background: none; color: var(--mo); font: italic 500 clamp(30px, 4.2vw, 54px)/1 var(--serif); cursor: pointer; padding: 0 0 16px; margin-bottom: -1px; border-bottom: 1px solid transparent; transition: color .35s, border-color .35s }
.xe-chon button[aria-pressed="true"] { color: var(--muc); border-bottom-color: var(--muc) } .xe-chon button:hover { color: var(--muc-2) }
.xe-lon__than { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(28px, 4.4vw, 68px); align-items: center }
.xe-lon__anh { position: relative; border-radius: 26px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--nen-2) }
.xe-lon__anh img { width: 100%; height: 100%; object-fit: cover; animation: hien-anh .8s ease both }
.xe-lon__chu { display: grid; gap: 14px; align-content: center; animation: hien-chu .6s ease both }
.xe-lon__chu .nhan-nho { color: var(--oliu-dam) } .xe-lon__chu p { color: var(--muc-2); font-size: 15.5px }
.xe-lon__chu ul { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; border-top: 1px solid var(--vien) }
.xe-lon__chu li { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--vien); font: 300 14.5px var(--sans) } .xe-lon__chu li::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--oliu); margin-top: 10px }
@keyframes hien-anh { from { opacity: 0; transform: scale(1.03) } to { opacity: 1; transform: none } }
@keyframes hien-chu { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }

/* ---- mảng ô liu: cam kết / danh sách chữ to ---- */
.oliu { background: var(--oliu); color: #fff; padding-block: 112px }
.oliu .khung { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: start }
.oliu .tieu { color: #fff } .oliu .trai { display: grid; gap: 22px } .oliu .trai > p { color: rgba(255,255,255,.9); max-width: 46ch }
.ds-to { display: grid; align-content: start; border-top: 1px solid rgba(255,255,255,.22) }
.ds-to button { border: 0; background: none; color: rgba(255,255,255,.5); text-align: left; padding: 16px 0; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font: 300 clamp(24px, 2.7vw, 36px)/1.15 var(--sans); letter-spacing: -.04em; border-bottom: 1px solid rgba(255,255,255,.22); transition: color .35s }
.ds-to button span { font: 200 clamp(16px, 1.7vw, 22px)/1 var(--sans); letter-spacing: -.02em }
.ds-to button[aria-pressed="true"] { color: #fff } .ds-to button:hover { color: rgba(255,255,255,.85) }
.the-trang { background: #fff; color: #1A1D21; border-radius: 22px; padding: 26px; display: grid; gap: 12px; box-shadow: 0 30px 50px -40px rgba(0,0,0,.5) }
.the-trang .nhan-nho { color: #4F5720 } .the-trang h3 { font: 400 24px/1.25 var(--sans); letter-spacing: -.03em } .the-trang p { font: 300 15px/1.65 var(--sans); color: #43484E }

/* ---- lịch trình: tuyến đường + ba ngày ---- */
.tuyen { list-style: none; margin: 0 0 48px; padding: 0; display: flex; justify-content: space-between; position: relative; gap: 8px; overflow-x: auto; scrollbar-width: none }
.tuyen::-webkit-scrollbar { display: none }
.tuyen::before { content: ""; position: absolute; left: 6px; right: 6px; top: 6px; height: 1px; background: var(--mo) }
.tuyen li { position: relative; display: grid; gap: 2px; padding-top: 22px; min-width: 76px; font: 400 13.5px var(--sans) } .tuyen li small { font: 300 12px var(--sans); color: var(--nhat) }
.tuyen li::before { content: ""; position: absolute; left: 0; top: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--nen); border: 1px solid var(--muc-2) } .tuyen li:first-child::before, .tuyen li:last-child::before { background: var(--oliu); border-color: var(--oliu) }
.ngay { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: start }
.ngay .ds-ngay { display: grid; border-top: 1px solid var(--vien) }
.ds-ngay button { border: 0; border-bottom: 1px solid var(--vien); background: none; text-align: left; padding: 18px 0; cursor: pointer; color: var(--mo); display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 6px; align-items: baseline; transition: color .35s }
.ds-ngay button small { font: 400 11.5px var(--sans); letter-spacing: .14em; text-transform: uppercase } .ds-ngay button b { font: 400 clamp(22px, 2.4vw, 30px)/1.2 var(--sans); letter-spacing: -.035em }
.ds-ngay button[aria-pressed="true"] { color: var(--muc) } .ds-ngay button[aria-pressed="true"] small { color: var(--oliu-dam) } .ds-ngay button:hover { color: var(--muc-2) }
.ngay-the { display: grid; gap: 18px }
.ngay-anh { border-radius: 22px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--nen-2) } .ngay-anh img { width: 100%; height: 100%; object-fit: cover }
.ngay-the .tuyen-chu { font: 300 14px var(--sans); color: var(--nhat) }
.diem { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px } .diem li { font: 300 13px var(--sans); border: 1px solid var(--vien); border-radius: 999px; padding: 4px 12px; background: var(--the) }

/* ---- bảng so sánh / bảng giá ---- */
.bang-khung { overflow-x: auto; border-top: 1px solid var(--muc) }
.bang { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 720px; font-size: 14.5px }
.bang th, .bang td { text-align: left; vertical-align: top; padding: 16px 18px 16px 0; border-bottom: 1px solid var(--vien); font-weight: 300 }
.bang thead th { font: 400 11.5px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--nhat); padding-top: 14px }
.bang tbody th { font-weight: 400; color: var(--muc) }
.bang--ss th.noi, .bang--ss td.noi { background: var(--the); padding-inline: 18px; color: var(--muc); font-weight: 400 }
.bang--ss thead th.noi { color: var(--oliu-dam); border-radius: 16px 16px 0 0; box-shadow: inset 0 3px var(--oliu) }
.bang--ss tbody tr:last-child td.noi { border-radius: 0 0 16px 16px; border-bottom-color: transparent }
.bang--ss td.noi + td, .bang--ss th.noi + th { padding-left: 22px }

/* ---- ảnh chuyến thật: cuộn ngang ---- */
.anh-keo { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; margin-right: calc(-1 * max(20px, env(safe-area-inset-right, 0px))); padding-right: max(20px, env(safe-area-inset-right, 0px)) }
.anh-keo::-webkit-scrollbar { display: none }
.anh-the { flex: none; width: min(320px, 74vw); scroll-snap-align: start; display: grid; gap: 10px }
.anh-the > div { border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--nen-2) } .anh-the img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2,.7,.2,1) }
.anh-the figcaption { font: 300 13px var(--sans); color: var(--nhat) }

/* ---- ảnh chuyến thật: lưới ---- */
.luoi-anh { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(170px, 17vw, 232px); gap: 12px }
.luoi-anh figure { position: relative; border-radius: 20px; overflow: hidden; background: var(--nen-2) }
.luoi-anh figure:first-child { grid-column: span 2; grid-row: span 2 }
.luoi-anh img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2,.7,.2,1) } .luoi-anh figure:hover img { transform: scale(1.04) }
.luoi-anh figcaption { position: absolute; left: 12px; bottom: 12px; max-width: calc(100% - 24px); font: 400 12px var(--sans); background: rgba(255,255,255,.92); color: #1A1D21; border-radius: 999px; padding: 4px 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }

/* ---- mùa đẹp ---- */
.mua { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px }
.mua-the { display: grid; gap: 12px; align-content: start; grid-template-rows: auto 1fr auto }
.mua-the .anh { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 5; display: grid; align-content: end; padding: 16px; color: #fff }
.mua-the .anh::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 58%, rgba(10,14,12,.42)); pointer-events: none }
.mua-the .anh b { position: relative; z-index: 1; font: italic 500 28px/1 var(--serif) }
.mua-the p { font: 300 14px/1.55 var(--sans); color: var(--muc-2) }
.mua-the button { justify-self: start; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--vien); background: var(--the); color: var(--muc); font: 400 13px var(--sans); cursor: pointer; transition: background-color .3s, color .3s }
.mua-the button:hover { background: var(--muc); color: var(--nen) }

/* ---- liên hệ: hàng gọn ---- */
.lien { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: start }
.lien .dau-muc { margin: 0 }
.lien__ds { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--muc) }
.lien__ds a { display: grid; grid-template-columns: 128px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 22px 4px; border-bottom: 1px solid var(--vien); text-decoration: none; transition: padding .35s }
.lien__ten { font: 400 11.5px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--nhat) }
.lien__gt { font: 300 clamp(18px, 2vw, 24px)/1.3 var(--sans); letter-spacing: -.03em; overflow-wrap: anywhere }
.lien__ds svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; transition: transform .35s }
.lien__ds a:hover { padding-left: 14px } .lien__ds a:hover svg { transform: translateX(4px) }

/* ---- đánh giá ---- */
.dg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px }
.dg blockquote { margin: 0; background: var(--the); border: 1px solid var(--vien); border-radius: 22px; padding: 24px; display: grid; gap: 14px; align-content: start }
.dg blockquote p { font: 300 15.5px/1.7 var(--sans) } .dg footer { font: 300 13px var(--sans); color: var(--nhat) } .dg footer b { color: var(--muc) }
.sao { color: var(--oliu); letter-spacing: 2px; font-size: 14px }

/* ---- hỏi đáp ---- */
.hd { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: start }
.hd__trai { display: grid; gap: 18px; position: sticky; top: calc(var(--cao-dau) + 90px) }
.hd details { border-bottom: 1px solid var(--vien) } .hd details:first-of-type { border-top: 1px solid var(--vien) }
.hd summary { list-style: none; cursor: pointer; padding: 20px 40px 20px 0; position: relative; font: 400 17.5px/1.45 var(--sans); letter-spacing: -.02em }
.hd summary::-webkit-details-marker { display: none }
.hd summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 12px; height: 12px; margin-top: -8px; border-right: 1.5px solid var(--muc-2); border-bottom: 1.5px solid var(--muc-2); transform: rotate(45deg); transition: transform .3s }
.hd details[open] summary::after { transform: rotate(-135deg); margin-top: -2px }
.hd details p { padding: 0 40px 22px 0; color: var(--muc-2); font-size: 15.5px }

/* ---- cẩm nang ---- */
.cn-hop { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start }
.cn-hop .dau-muc { margin: 0; justify-items: start }
.cn { display: grid; border-top: 1px solid var(--muc) }
.cn > a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 18px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--vien); text-decoration: none; font: 400 clamp(19px, 1.9vw, 23px)/1.3 var(--sans); letter-spacing: -.03em }
.cn__bai b { font-weight: 400 } .cn__bai span { grid-column: 1; font: 300 14.5px/1.55 var(--sans); letter-spacing: 0; color: var(--muc-2) }
.cn__bai svg { grid-row: 1 / 3; grid-column: 2; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; transition: transform .35s }
.cn > a:hover svg { transform: translateX(4px) } .cn > a:hover b { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px }

/* ---- lời mời cuối (ảnh bo góc) ---- */
.cta { position: relative; border-radius: 28px; overflow: hidden; color: #fff; min-height: 520px; display: grid; align-content: end; padding: 56px }
.cta { background-color: #3A4632 } .cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,14,12,.5) 0%, rgba(10,14,12,.12) 58%, rgba(10,14,12,0) 82%), linear-gradient(180deg, transparent 45%, rgba(10,14,12,.32)); pointer-events: none }
.cta > :not(.nen) { position: relative; z-index: 1 }
.cta h2 { font: 500 clamp(36px, 5vw, 68px)/1.04 var(--sans); letter-spacing: -.045em; max-width: 14ch; text-wrap: balance } .cta p { max-width: 44ch; color: rgba(255,255,255,.9); margin: 16px 0 26px }
.cta .nut { display: flex; gap: 12px; flex-wrap: wrap }

/* ---- chân trang ô liu ---- */
.cuoi { background: var(--oliu); color: #fff; padding-block: 104px 0; overflow: hidden }
.cuoi .khung { display: grid; gap: 44px }
.cuoi h2 { font: 500 clamp(42px, 6.6vw, 90px)/1 var(--sans); letter-spacing: -.05em; text-align: center; text-wrap: balance }
.cuoi .giua { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap }
.cot4 { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; border-top: 1px solid rgba(255,255,255,.22); padding-top: 40px }
.cot4 h3 { font: 400 11.5px var(--sans); letter-spacing: .16em; text-transform: uppercase; margin-bottom: 18px; color: rgba(255,255,255,.78) }
.cot4 ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font: 300 15px/1.5 var(--sans) } .cot4 a { text-decoration: none } .cot4 a:hover { text-decoration: underline; text-underline-offset: 3px }
.cot4 p { font: 300 14.5px/1.65 var(--sans); color: rgba(255,255,255,.88) } .cot4 .lon { font: 300 24px/1.3 var(--sans); letter-spacing: -.03em; color: #fff; display: block; margin-top: 10px; text-decoration: none }
.ban-quyen { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font: 300 12.5px var(--sans); color: rgba(255,255,255,.78); border-top: 1px solid rgba(255,255,255,.22); padding-top: 18px }
.chu-mo { font: 500 clamp(90px, 22vw, 300px)/.8 var(--sans); letter-spacing: -.07em; color: rgba(255,255,255,.1); text-align: center; margin-top: 14px; user-select: none; white-space: nowrap }

/* ---- thanh đặt dính đáy (điện thoại) + nút nổi ---- */
.day { position: fixed; left: 0; right: 0; bottom: 0; z-index: 44; display: none; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 8px; padding: 10px max(14px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px)); background: color-mix(in srgb, var(--nen) 88%, transparent); backdrop-filter: blur(14px) saturate(1.2); border-top: 1px solid var(--vien); transition: transform .35s }
.day button { min-height: 48px; border-radius: 999px; border: 1px solid var(--muc); cursor: pointer; font: 300 13.5px/1.2 var(--sans); display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; font-variant-numeric: tabular-nums }
.day button b { font-weight: 500 } .day .d1 { background: var(--muc); color: var(--nen) } .day .d2 { background: var(--the); color: var(--muc); border-color: var(--vien) }
.an-day .day { transform: translateY(110%) }
.fab { position: fixed; z-index: 43; right: max(18px, env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; align-items: flex-end; gap: 10px }
.len { width: 46px; height: 46px; border-radius: 50%; border: 0; background: color-mix(in srgb, var(--muc) 55%, transparent); color: var(--nen); display: grid; place-items: center; cursor: pointer; opacity: 0; transform: translateY(12px); transition: opacity .3s, transform .3s; pointer-events: none }
.len svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6 } .len.hien-len { opacity: 1; transform: none; pointer-events: auto }
.toast { position: fixed; z-index: 90; width: max-content; left: 50%; bottom: calc(90px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--toi); color: #fff; border-radius: 14px; padding: 12px 18px; font: 300 14px var(--sans); box-shadow: 0 14px 30px -14px rgba(0,0,0,.5); max-width: calc(100vw - 40px); text-align: center }

.fab .kc-launch { background: var(--muc); color: var(--nen); border: 0; font: 400 13.5px/1 var(--sans); letter-spacing: 0; min-height: 48px; box-shadow: 0 16px 30px -18px rgba(0,0,0,.55) }
.fab .kc-launch:hover { background: var(--oliu) } .fab .kc-launch__ai { background: var(--oliu); font-weight: 500 }

/* ---- trang chính sách ---- */
.chinh-sach .khung { max-width: 920px }
.vet--toi { color: var(--nhat); margin-bottom: 22px }
.cs-mo { font-size: 18px; color: var(--muc-2); max-width: 60ch; margin: 18px 0 30px }
.cs-muc { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 44px } .cs-muc a { border: 1px solid var(--vien); border-radius: 999px; padding: 7px 15px; text-decoration: none; font: 300 14px var(--sans); background: var(--the); transition: background-color .3s, color .3s } .cs-muc a:hover { background: var(--muc); color: var(--nen) }
.cs { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: 32px; padding-block: 36px; border-top: 1px solid var(--vien) }
.cs > div { display: grid; gap: 12px } .cs p { color: var(--muc-2); font-size: 15.5px }
.cs-cap { margin-top: 12px; padding-top: 22px; border-top: 1px solid var(--vien); font: 300 13px var(--sans); color: var(--nhat) }

/* ---- trang tour ---- */
.su-kien { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-bottom: 1px solid var(--vien) }
.su-kien div { padding: 30px 22px; border-left: 1px solid var(--vien) } .su-kien div:first-child { border-left: 0; padding-left: 0 }
.su-kien small { display: block; font: 400 11px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--nhat) } .su-kien b { display: block; font: 300 22px/1.25 var(--sans); letter-spacing: -.03em; margin-top: 8px }
.ngay-dai { display: grid; gap: 64px }
.ngay-dai article { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center }
.ngay-dai article:nth-child(even) .ngay-anh { order: 2 }
.ngay-dai .chu { display: grid; gap: 14px } .ngay-dai .chu ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px } .ngay-dai .chu li { display: flex; gap: 12px; color: var(--muc-2) } .ngay-dai .chu li::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--oliu); margin-top: 11px }
.gia-hop { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start }
.gia-the { background: var(--toi); color: #fff; border-radius: 24px; padding: 34px 34px 34px 40px; position: relative; overflow: hidden; display: grid; gap: 16px }
.gia-the::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--oliu) }
.gia-the .gia-lon b { display: block; font: 200 clamp(44px, 5vw, 64px)/1 var(--sans); letter-spacing: -.055em; font-variant-numeric: tabular-nums } .gia-the .gia-lon small { font: 300 13.5px var(--sans); color: rgba(255,255,255,.7) }
.tg-nhan { font: 400 11.5px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.62) }
.gia-the .xe { color: rgba(255,255,255,.8) } .gia-the .xe button { color: #fff } .gia-the .xe i { background: rgba(255,255,255,.45) } .gia-the .xe.ok i { background: #6FE09A } .gia-the .xe.lim i { background: #F5C15C } .gia-the .xe.full i { background: #F28A7E }
.gia-the .dem { background: transparent; border-color: rgba(255,255,255,.3) } .gia-the .dem button, .gia-the .dem output { color: #fff }
.gom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px }
.gom ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; border-top: 1px solid var(--vien) } .gom li { padding: 13px 0; border-bottom: 1px solid var(--vien); display: flex; gap: 12px; color: var(--muc-2); font-size: 15.5px }
.gom .co li::before { content: "✓"; color: var(--oliu-dam) } .gom .khong li::before { content: "–"; color: var(--nhat) }
.anh-doi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 44px } .anh-doi figure { display: grid; gap: 10px } .anh-doi .anh-the-tinh { border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 3 } .anh-doi img { width: 100%; height: 100%; object-fit: cover } .anh-doi figcaption { font: 300 13px var(--sans); color: var(--nhat) }

/* ---- hiệu ứng ---- */
.hien { opacity: 0; transform: translateY(18px); transition: opacity .9s ease, transform .9s cubic-bezier(.16,.8,.24,1) }
.hien.trai { transform: translateX(-18px) } .hien.da { opacity: 1; transform: none }
.no-js .hien { opacity: 1; transform: none }

.goi-y-en { background: var(--oliu-nhat); color: var(--oliu-dam); font: 300 13px var(--sans) }
.goi-y-en .khung { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 40px; flex-wrap: wrap }
.goi-y-en a { color: inherit; font-weight: 500; text-decoration: none; border-bottom: 1px solid currentColor } .goi-y-en button { border: 0; background: none; color: inherit; font-size: 18px; line-height: 1; cursor: pointer; padding: 4px 8px }
@media (max-width: 1080px) { .dau nav { gap: 20px } .dau nav a:nth-child(n+5) { display: none } }
/* có chip "Chuyến của bạn": bớt mục menu cho đầu trang không xuống dòng */
@media (max-width: 1440px) { .dau:has(.toi:not([hidden])) nav { gap: 24px } .dau:has(.toi:not([hidden])) nav a:nth-child(n+4) { display: none } }
@media (max-width: 900px) {
  :root { --cao-dau: 62px }
  .dau nav, .dau .thuoc, .dau .ngon { display: none } .menu-nut { display: grid } .logo small { display: none } .logo { font-size: 16.5px } .logo svg { width: 28px; height: 28px }
  .muc { padding-block: 80px } .dau-muc { margin-bottom: 32px }
  .bia .khung { min-height: min(700px, 86svh); padding-block: 96px 64px; gap: 18px } .bia__chu { left: max(20px, env(safe-area-inset-left, 0px)); right: auto; bottom: 16px }
  .bia--con .khung { min-height: min(560px, 74svh) }
  .so { padding-block: 26px } .so div { display: block; padding: 0 16px } .so span { margin-top: 10px }
  .mau { padding-block: 64px 72px } .mau__khung { grid-template-columns: minmax(0, 1fr); gap: 26px } .mau__anh { aspect-ratio: 4 / 3; border-radius: 22px }
  .chon .khung { gap: 8px; padding-block: 10px } .chon__nhan, .chon__ghi { display: none } .ngay-nut { min-width: 0; flex: 1 }
  .bon { grid-template-columns: repeat(2, minmax(0, 1fr)) } .bon article:nth-child(3) { border-left: 0; padding-left: 0 } .bon article:nth-child(n+3) { border-top: 1px solid var(--vien) }
  .xe-lon { gap: 24px } .xe-lon__than { grid-template-columns: minmax(0, 1fr); gap: 22px } .xe-lon__anh { border-radius: 22px }
  .luoi-anh { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 42vw; gap: 10px }
  .lien, .cn-hop { grid-template-columns: minmax(0, 1fr); gap: 30px } .lien__ds a { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 18px 2px } .lien__ds svg { grid-row: 1 / 3; grid-column: 2 } .lien__gt { grid-column: 1 }
  .cs { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-block: 28px }
  .bang--ss tbody th, .bang--ss thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--nen-2); min-width: 128px; box-shadow: inset -1px 0 var(--vien) }
  .oliu { padding-block: 80px } .oliu .khung, .ngay, .hd, .gia-hop, .gom { grid-template-columns: minmax(0, 1fr); gap: 36px } .hd__trai { position: static }
  .mua { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px } .mua-the .anh b { font-size: 24px }
  .dg { grid-template-columns: minmax(0, 1fr) }
  .cta { padding: 32px 24px; min-height: 460px; border-radius: 24px }
  .cuoi { padding-block: 80px 0 } .cot4 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px } .cot4 > div:first-child { grid-column: 1 / -1 }
  .su-kien { grid-template-columns: repeat(2, minmax(0, 1fr)) } .su-kien div { padding: 20px 16px 20px 0; border-left: 0; border-top: 1px solid var(--vien) } .su-kien div:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--vien) }
  .ngay-dai article { grid-template-columns: minmax(0, 1fr); gap: 22px } .ngay-dai article:nth-child(even) .ngay-anh { order: 0 }
  .day { display: grid } .dau-muc--hang .doi { display: none } .fab { bottom: calc(86px + env(safe-area-inset-bottom, 0px)) } .toast { bottom: calc(150px + env(safe-area-inset-bottom, 0px)) } .len { display: none }
  .dau, .chon { transition: transform .35s cubic-bezier(.2,.7,.2,1), top .35s cubic-bezier(.2,.7,.2,1), box-shadow .3s }
  .an-dau .dau { transform: translateY(-110%) } .an-dau .chon { top: env(safe-area-inset-top, 0px) }
  .kc { bottom: 0 }
}
@media (max-width: 900px) { .toi span { display: none } .toi { min-height: 34px; padding: 0 12px 0 10px; font-size: 12.5px } }
.trang-chuyen .toast { bottom: auto; top: calc(env(safe-area-inset-top, 0px) + var(--cao-dau) + 12px) }
@media (max-width: 520px) { .xe-chon { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 18px } .xe-chon::-webkit-scrollbar { display: none } .xe-chon button { font-size: 24px; white-space: nowrap; flex: none } .luoi-anh figcaption { font-size: 11px; padding: 3px 9px; left: 8px; bottom: 8px; max-width: calc(100% - 16px) } .so b { font-size: 34px } .so div { padding: 0 10px } .so span { font-size: 12px } .bon { grid-template-columns: minmax(0, 1fr) } .bon article, .bon article + article { padding: 22px 0 8px; border-left: 0; border-top: 1px solid var(--vien) } .bon article:first-child { border-top: 0 } .anh-doi { grid-template-columns: minmax(0, 1fr) } .tt { width: 84vw } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important } .hien { opacity: 1; transform: none } }

/* 30/10/2026 — thẻ tour 2 ngày: ảnh hai xe Jeep (không thấy rõ mặt khách), ảnh dọc nên canh khung về phía xe */
#t-j2 .tt__anh img { object-position: 50% 80% }

/* 30/10/2026 — ảnh bìa điện thoại: ảnh dọc hẻm Nho Quế, lớp mờ dồn xuống phần có chữ */
@media (max-width: 700px) {
  .bia__nen img { object-position: 50% 58% }
  .bia::after { background: linear-gradient(180deg, rgba(12,20,16,.28) 0%, transparent 16%, transparent 40%, rgba(12,20,16,.38) 62%, rgba(12,20,16,.66) 100%) }
}

/* 30/10/2026 — giữ xe kiểu Vé 247: khung giữ chỗ (máy tính hộp giữa, điện thoại trượt từ đáy), lưới ngày 4 vạch = 4 xe Jeep, tra cứu chuyến */
:root { --do: #B3261E; --vang: #9A6412 }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --do: #F0907F; --vang: #E3AE57 } }
:root[data-theme="dark"] { --do: #F0907F; --vang: #E3AE57 }
body.mo-giu { overflow: hidden }
.giu-nen { position: fixed; inset: 0; z-index: 1000; background: rgba(8,12,16,.5); display: grid; place-items: center; padding: 24px max(16px, env(safe-area-inset-right, 0px)) 24px max(16px, env(safe-area-inset-left, 0px)); animation: giu-nen .25s ease }
.giu { position: relative; width: min(560px, 100%); max-height: calc(100svh - 48px); overflow: auto; overscroll-behavior: contain; background: var(--nen); color: var(--muc); border-radius: 28px; padding: 28px 28px 24px; display: grid; gap: 18px; box-shadow: 0 40px 80px -40px rgba(0,0,0,.6); outline: none; animation: giu-hien .32s cubic-bezier(.2,.7,.2,1) }
@keyframes giu-nen { from { opacity: 0 } }
@keyframes giu-hien { from { opacity: 0; transform: translateY(14px) scale(.985) } }
@keyframes giu-len { from { transform: translateY(60px); opacity: .3 } }
.giu :where(svg[viewBox="0 0 24 24"]) { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5 }
.giu__dong { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--vien); background: var(--the); color: var(--muc); font: 300 16px/1 var(--sans); cursor: pointer }
.giu__dong:hover { background: var(--muc); color: var(--nen) }
.giu__nhan { color: var(--oliu-dam); padding-right: 48px }
.giu h3 { font: 500 clamp(26px, 3vw, 32px)/1.08 var(--sans); letter-spacing: -.04em; padding-right: 44px; text-wrap: balance; margin-top: -8px }
.giu h3 em { font: italic 500 1.13em/1 var(--serif); letter-spacing: -.005em; color: var(--oliu-dam) }
.giu__hang { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--vien) }
.giu__gia { text-align: right; min-width: 0 }
.giu__gia b { display: block; font: 300 28px/1.05 var(--sans); letter-spacing: -.04em; font-variant-numeric: tabular-nums }
.giu__gia b.hoi { font-size: 20px }
.giu__gia small { display: block; font: 300 12.5px/1.45 var(--sans); color: var(--nhat); margin-top: 4px }
.giu__nho { display: block; font: 400 11px/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--nhat); margin: 0 0 10px }
.giu__goi { font: 300 13px/1.55 var(--sans); color: var(--nhat); margin: 0 }
.giu__goi a { color: var(--muc) }
#giu-ngay { display: grid; gap: 10px }
.o-ngay { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 6px }
.o-ngay button { border: 1px solid var(--vien); border-radius: 16px; background: var(--the); color: var(--muc); padding: 9px 10px 8px; text-align: left; display: grid; gap: 4px; cursor: pointer; min-height: 80px; font-family: var(--sans); transition: border-color .2s, transform .2s }
.o-ngay button:hover:not(:disabled) { border-color: var(--muc); transform: translateY(-1px) }
.o-ngay .thu { font: 400 10.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--nhat) }
.o-ngay .ng { font: 400 17px/1.1 var(--sans); font-variant-numeric: tabular-nums }
.o-ngay .xe4 { display: flex; gap: 3px }
.o-ngay .xe4 i { flex: 1; height: 4px; border-radius: 2px; background: var(--vien) }
.o-ngay .xe4 i.con { background: var(--oliu) }
.o-ngay .cho { font: 300 11.5px/1.2 var(--sans); color: var(--oliu-dam) }
.o-ngay .it .cho { color: var(--vang) }
.o-ngay button:disabled { background: var(--nen-2); cursor: not-allowed }
.o-ngay button:disabled .ng, .o-ngay button:disabled .cho { color: var(--nhat) }
.o-ngay button[aria-pressed="true"] { border-color: var(--muc); box-shadow: inset 0 0 0 1px var(--muc) }
.o-ngay .khac { place-content: center; text-align: center; border-style: dashed; color: var(--muc-2); font: 300 13px var(--sans) }
.ngay-da { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--vien); border-radius: 999px; background: var(--the); padding: 6px 6px 6px 18px; font: 400 15px var(--sans) }
.ngay-da i { font-style: normal; font-weight: 300; color: var(--oliu-dam) }
.ngay-da button { flex: none; border: 1px solid var(--vien); border-radius: 999px; background: var(--nen); color: var(--muc); padding: 8px 14px; font: 400 13px var(--sans); cursor: pointer }
.ngay-da button:hover { background: var(--muc); color: var(--nen) }
.giu__canh { margin: 0; font: 300 13.5px/1.55 var(--sans); color: var(--vang); background: color-mix(in srgb, var(--vang) 10%, transparent); border-radius: 12px; padding: 10px 14px }
.giu__form { display: grid; gap: 16px }
.o-nhap { display: grid; gap: 7px }
.o-nhap label { font: 400 13.5px var(--sans); color: var(--muc-2) }
.o-nhap label small { font-weight: 300; color: var(--nhat) }
.giu input:not([type=checkbox]), .giu textarea { width: 100%; border: 1px solid var(--vien); border-radius: 14px; background: var(--the); color: var(--muc); padding: 13px 16px; font: 300 16px/1.4 var(--sans); outline: none; transition: border-color .2s }
.giu input:focus, .giu textarea:focus { border-color: var(--oliu) }
.giu textarea { resize: vertical; min-height: 64px }
.chip-ds { display: flex; gap: 6px; flex-wrap: wrap }
.chip-ds button { border: 1px solid var(--vien); border-radius: 999px; background: var(--the); color: var(--muc); padding: 9px 14px; font: 300 13.5px/1.2 var(--sans); cursor: pointer }
.chip-ds button[aria-pressed="true"] { background: var(--muc); color: var(--nen); border-color: var(--muc) }
.giu__them { justify-self: start; border: 0; background: none; padding: 2px 0; font: 300 14px var(--sans); color: var(--muc-2); cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px }
.giu__phu { display: grid; gap: 14px }
.giu__loi { margin: 0; font: 300 13.5px/1.5 var(--sans); color: var(--do) }
.giu__loi:empty { display: none }
.giu__gui { width: 100%; min-height: 54px; font-size: 15.5px }
.giu__gui:disabled { opacity: .7; cursor: progress }
.giu__hen { text-align: center; margin-top: -6px }
.giu-xong { display: grid; gap: 16px; justify-items: start }
.giu-xong__dau { display: flex; align-items: center; gap: 8px; font: 400 14px var(--sans); color: var(--oliu-dam); margin: 0; padding-right: 44px }
.giu-xong__dau svg { stroke-width: 2 }
.giu-ma { display: flex; align-items: center; gap: 12px; flex-wrap: wrap }
.giu-ma b { font: 400 clamp(36px, 7vw, 50px)/1 var(--sans); letter-spacing: .04em; font-variant-numeric: tabular-nums }
.giu-chep { border: 1px solid var(--vien); border-radius: 999px; background: var(--the); color: var(--muc); padding: 7px 14px; font: 400 13px var(--sans); cursor: pointer }
.giu-tom { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px 18px; margin: 0; padding: 14px 0; border-top: 1px solid var(--vien); border-bottom: 1px solid var(--vien); font: 300 14.5px/1.45 var(--sans) }
.giu-tom dt { color: var(--nhat) }
.giu-tom dd { margin: 0; min-width: 0; font-variant-numeric: tabular-nums }
.giu-tom dd span { color: var(--nhat) }
.giu-tiep { margin: 0; width: 100%; background: var(--oliu-nhat); border-radius: 16px; border-left: 2px solid var(--oliu); padding: 13px 16px; font: 300 14.5px/1.6 var(--sans) }
.giu-nut { display: flex; gap: 10px; flex-wrap: wrap; width: 100% }
.giu-nut .thuoc { flex: 1 1 210px; min-height: 50px }
.lai { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; border: 1px dashed var(--mo); border-radius: 999px; background: transparent; color: var(--muc-2); font: 300 13px var(--sans); cursor: pointer; white-space: nowrap }
.lai svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6 }
.lai span { color: var(--nhat) }
.lai:hover { border-color: var(--muc); color: var(--muc) }
.tra-lk { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--vien); display: inline-grid; place-items: center; color: var(--muc); text-decoration: none; flex: none; transition: background-color .3s, color .3s }
.tra-lk:hover { background: var(--muc); color: var(--nen) }
.dau .tra-lk svg { width: 17px; height: 17px }
/* trang tra cứu */
.tra .khung { max-width: 760px }
.tra-mo { font-size: 17px; color: var(--muc-2); max-width: 56ch; margin: 16px 0 28px }
.tra-form { display: flex; gap: 10px; flex-wrap: wrap }
.tra-form input { flex: 1 1 260px; min-width: 0; min-height: 54px; border: 1px solid var(--vien); border-radius: 999px; background: var(--the); color: var(--muc); padding: 0 22px; font: 300 16.5px var(--sans); outline: none }
.tra-form input:focus { border-color: var(--oliu) }
.tra-form .thuoc { min-height: 54px; padding: 0 28px }
#tra-kq { display: grid; gap: 12px; margin-top: 30px }
.tra-ds { display: grid; gap: 10px }
.tra-the { border: 1px solid var(--vien); border-radius: 22px; background: var(--the); padding: 18px 20px; display: grid; gap: 6px }
.tra-the__dau { display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
.tra-the__dau b { font: 400 18px var(--sans); letter-spacing: .05em }
.tra-the p { margin: 0; color: var(--muc-2); font-size: 15px }
.tra-the .tra-the__phu { color: var(--nhat); font-size: 14px }
.tra-the .lien-ket { justify-self: start; margin-top: 4px }
.tt-tag { display: inline-block; font: 400 12px/1 var(--sans); padding: 6px 10px; border-radius: 999px; background: var(--nen-2); color: var(--muc-2) }
.tt-tag.tt-giu { background: color-mix(in srgb, var(--vang) 14%, transparent); color: var(--vang) }
.tt-tag.tt-chot { background: var(--oliu-nhat); color: var(--oliu-dam) }
.tt-tag.tt-coc { background: var(--oliu); color: #fff }
.tra-rong, .tra-cho { margin: 0; border: 1px dashed var(--mo); border-radius: 18px; padding: 16px 18px; color: var(--muc-2); font-size: 15px }
.tra-cho { border-style: solid; border-color: var(--vien) }
.tra-loi { color: var(--do); border-color: color-mix(in srgb, var(--do) 40%, transparent) }
.tra-ghi { margin-top: 26px; font: 300 13.5px/1.6 var(--sans); color: var(--nhat) }
.lai { max-width: 100%; overflow: hidden; text-overflow: ellipsis }
@media (max-width: 900px) { .lai span { display: none } .lai { min-height: 44px } .dau:has(.toi:not([hidden])) .tra-lk { display: none } }
@media (max-width: 700px) {
  .giu-nen { place-items: end stretch; padding: 0 }
  .giu { width: 100%; max-height: 92svh; border-radius: 26px 26px 0 0; padding: 22px max(18px, env(safe-area-inset-right, 0px)) calc(20px + env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px)); animation: giu-len .38s cubic-bezier(.2,.7,.2,1) }
  .o-ngay { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .giu__gia { text-align: left; flex-basis: 100% }
}

/* ---- How to book / Cách đặt tour: 6 bước có biểu tượng (1/11/2026) ---- */
.cd { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px }
.cd li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; row-gap: 6px; align-content: start; padding: 22px 0 30px; border-top: 1px solid var(--muc); min-width: 0 }
.cd__so { grid-column: 1 / -1; font: 400 11.5px/1 var(--sans); letter-spacing: .16em; color: var(--nhat); margin-bottom: 12px }
.cd__ic { grid-row: span 2; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--oliu-nhat); color: var(--oliu-dam); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--oliu) 28%, transparent) }
.cd__ic svg { width: 22px; height: 22px; stroke-width: 1.5 }
.cd h3 { margin: 0; align-self: center; font: 500 19px/1.3 var(--sans); letter-spacing: -.02em }
.cd p { grid-column: 2; margin: 0; color: var(--muc-2); font-size: 15px; line-height: 1.6 }
.cd__ghi { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px 30px; font-size: 14.5px; color: var(--muc-2) }
.cd__ghi p { margin: 0 }
.cd__ghi a, .cd-lk { color: var(--oliu-dam); text-underline-offset: 3px }
.cd-lk { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap }
.cd-lk svg { width: 15px; height: 15px }
@media (max-width: 900px) { .cd { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px } }
@media (max-width: 560px) { .cd { grid-template-columns: minmax(0, 1fr) } .cd li { padding: 18px 0 20px } .cd__so { margin-bottom: 8px } }
.tt .dac .dac-bh { gap: 5px; color: var(--oliu-dam); border-color: color-mix(in srgb, var(--oliu) 35%, var(--vien)) } .tt .dac .dac-bh svg { width: 14px; height: 14px; stroke-width: 1.6 }