@font-face { font-family: Sarabun; font-weight: 400; font-display: swap; src: url("../fonts/sarabun-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Sarabun; font-weight: 400; font-display: swap; src: url("../fonts/sarabun-thai-400.woff2") format("woff2"); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: Sarabun; font-weight: 600; font-display: swap; src: url("../fonts/sarabun-latin-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Sarabun; font-weight: 600; font-display: swap; src: url("../fonts/sarabun-thai-600.woff2") format("woff2"); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: Sarabun; font-weight: 700; font-display: swap; src: url("../fonts/sarabun-latin-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Sarabun; font-weight: 700; font-display: swap; src: url("../fonts/sarabun-thai-700.woff2") format("woff2"); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
:root { --teal:#0c5c5a; --teal-deep:#083c3b; --sand:#f6f1e8; --paper:#fffdf9; --coral:#e36a4f; --amber:#e0a04a; --ink:#1a2a28; --line:#e4d9c8; }
* { box-sizing: border-box; }
body { margin:0; font-family: Sarabun, "Leelawadee UI", Tahoma, sans-serif; color:var(--ink); background:var(--sand); line-height:1.5; }
a { color: var(--teal-deep); }
img, svg { max-width: 100%; }
.skip { position:absolute; left:-999px; top:0; background:#fff; padding:.5rem; }
.skip:focus { left:.5rem; z-index:5; }
.wrap { width:min(1120px, calc(100% - 2rem)); margin-inline:auto; }
header.site { position:sticky; top:0; z-index:30; background:rgba(255,253,249,.94); color:var(--ink); border-bottom:1px solid var(--line); backdrop-filter:blur(10px); }
header.site a { color:var(--teal-deep); text-decoration:none; }
.bar { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:4.25rem; }
.brand { font-weight:700; letter-spacing:.01em; line-height:1.15; }
.brand small { display:block; font-weight:400; color:var(--teal); }
nav.primary { display:flex; flex-wrap:wrap; gap:.75rem 1rem; }
.cta, button.cta, .btn { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:.6rem 1rem; border-radius:999px; border:0; background:var(--coral); color:#fff; font-weight:700; text-decoration:none; cursor:pointer; }
.btn.secondary { background:transparent; color:var(--teal-deep); border:1px solid var(--teal); }
header .cta { background:var(--amber); color:#1a2a28; }
.hero, .hero-ota { background: radial-gradient(680px 320px at 100% 0%, rgba(224,160,74,.55), transparent 60%), linear-gradient(165deg, #083c3b 0%, #0c5c5a 48%, #14756d 100%); color:#fff; padding:2.2rem 0 2.6rem; }
.hero h1, .hero-ota h1 { font-size:clamp(2.1rem, 5vw, 4rem); line-height:1.08; margin:0 0 .6rem; letter-spacing:-.02em; }
.search-card, .card, .panel { background:var(--paper); color:var(--ink); border-radius:18px; box-shadow:0 16px 40px rgba(8,60,59,.12); padding:1rem; }
.hero-grid { display:grid; grid-template-columns: 1.1fr .9fr; gap:1.5rem; align-items:center; }
.hero-art .scene { border-radius:24px; display:block; box-shadow:0 18px 40px rgba(0,0,0,.18); }
.eyebrow { margin:0 0 .4rem; letter-spacing:.08em; text-transform:uppercase; font-size:.82rem; opacity:.85; }
.lede, .lede-ink { font-size:1.08rem; }
.lede-ink { color:#3d4f4c; }
.facts { display:flex; flex-wrap:wrap; gap:.5rem; padding:0; margin:1rem 0 0; list-style:none; }
.facts li { background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25); border-radius:999px; padding:.35rem .75rem; }
.search-card { margin-top:1.25rem; }
.search-main { grid-template-columns: 1.3fr 1.3fr .8fr .7fr; }
.search-card:has(input[value="day_trip"]:checked) .only-transfer { display:none; }
.search-card:not(:has(input[value="day_trip"]:checked)) .only-day { display:none; }
.tabs label { position:relative; background:#fff; cursor:pointer; white-space:nowrap; flex:0 0 auto; }
.tabs input { position:absolute; opacity:0; width:1px; height:1px; }
.tabs label:has(input:checked) { background:var(--teal); color:#fff; border-color:var(--teal); }
.section-head { display:flex; justify-content:space-between; gap:1rem; align-items:end; margin-bottom:1rem; }
.section-head h2 { margin:0; }
.section-head p { margin:0; max-width:42rem; color:#4d5e5b; }
.filters { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem; }
.filters label { min-height:44px; display:inline-flex; align-items:center; padding:.35rem .9rem; border-radius:999px; border:1px solid var(--line); background:#fff; cursor:pointer; font-weight:700; }
.board:has(#filter-all:checked) label[for="filter-all"],
.board:has(#filter-airport:checked) label[for="filter-airport"],
.board:has(#filter-point:checked) label[for="filter-point"],
.board:has(#filter-day:checked) label[for="filter-day"] { background:var(--teal); color:#fff; border-color:var(--teal); }
.board:has(#filter-airport:checked) .offer:not([data-kind="airport_transfer"]) { display:none; }
.board:has(#filter-point:checked) .offer:not([data-kind="point_to_point"]) { display:none; }
.board:has(#filter-day:checked) .offer:not([data-kind="day_trip"]) { display:none; }
.offer-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:1rem; }
.offer { background:#fff; border-radius:20px; overflow:hidden; box-shadow:0 10px 28px rgba(8,60,59,.08); display:flex; flex-direction:column; }
.offer-cover { display:block; }
.offer-cover .scene, .offer-cover svg { display:block; width:100%; height:148px; object-fit:cover; }
.offer-body { padding:1rem 1rem 1.1rem; display:flex; flex-direction:column; gap:.35rem; flex:1; }
.offer-body h3 { margin:0; font-size:1.2rem; }
.offer-body h3 a { text-decoration:none; }
.badge { margin:0; display:inline-flex; align-self:flex-start; background:#e7f3f1; color:var(--teal-deep); border-radius:999px; padding:.15rem .6rem; font-size:.82rem; font-weight:700; }
.route-line { margin:0; font-weight:700; }
.stops { display:flex; flex-wrap:wrap; gap:.35rem; margin:0; }
.stops span { background:var(--sand); border-radius:999px; padding:.1rem .55rem; font-size:.85rem; }
.fare { margin:.2rem 0; }
.offer-form { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; margin-top:auto; }
.offer-form .cta { grid-column:1 / -1; }
.dest-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:.75rem; }
.dest { min-height:140px; border-radius:20px; padding:1rem; color:#fff; text-decoration:none; display:flex; flex-direction:column; justify-content:flex-end; background:linear-gradient(160deg, #0c5c5a, #1a8f86); }
.dest:nth-child(2) { background:linear-gradient(160deg, #0b4f6e, #2a8fbf); }
.dest:nth-child(3) { background:linear-gradient(160deg, #1d4a3a, #67a35a); }
.dest:nth-child(4) { background:linear-gradient(160deg, #6a3a22, #e0a04a); color:#1a2a28; }
.dest span { opacity:.9; }
.band { background:#fff; }
.detail-layout { display:grid; grid-template-columns:1.2fr .8fr; gap:1rem; align-items:start; }
.book-panel { position:sticky; top:5rem; }
.detail-layout .scene { border-radius:20px; margin-bottom:1rem; }
.search-card { margin-top:1.5rem; }
.tabs { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem; }
.tabs label { min-height:44px; display:flex; align-items:center; gap:.35rem; padding:.4rem .7rem; border:1px solid var(--line); border-radius:999px; }
.grid { display:grid; gap:1rem; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
label.field { display:flex; flex-direction:column; gap:.25rem; font-weight:600; }
input, select, textarea { font:inherit; min-height:48px; padding:.5rem .7rem; border:1px solid #cfc3b2; border-radius:10px; background:#fff; width:100%; }
textarea { min-height:7rem; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
.help, .error { font-size:.95rem; }
.error { color:#9d2c2c; font-weight:600; }
.muted { color:#5c6b68; }
.section { padding:2.5rem 0; }
.section h2 { margin-top:0; }
.card h3 { margin:.4rem 0; }
.steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1rem; }
.step { background:#fff; border-radius:16px; padding:1rem; }
.notice { background:#fff6e8; border:1px solid var(--amber); border-radius:12px; padding:.8rem 1rem; }
footer.site { background:var(--teal-deep); color:#f6f1e8; padding:2rem 0; }
footer.site a { color:#fff; }
.lang a { color:var(--teal-deep); margin-left:.5rem; font-weight:700; }
.sticky-pay { position:sticky; bottom:0; background:#fff; border-top:1px solid var(--line); padding:.75rem 0; }
table { width:100%; border-collapse:collapse; background:#fff; }
th, td { text-align:left; padding:.55rem; border-bottom:1px solid var(--line); vertical-align:top; }
.admin { display:grid; grid-template-columns: 220px 1fr; gap:1rem; }
.admin nav { display:flex; flex-direction:column; gap:.35rem; }
.admin nav a { text-decoration:none; padding:.35rem .2rem; }
@media (max-width: 800px) {
    .admin { grid-template-columns:1fr; }
    nav.primary { display:none; }
    header details nav { display:flex; flex-direction:column; padding-bottom:.8rem; }
    header details a { color:var(--teal-deep); }
    .hero-grid, .detail-layout, .dest-grid, .search-main { grid-template-columns:1fr; }
    .hero-art { display:none; }
    .section-head { flex-direction:column; align-items:flex-start; }
    .book-panel { position:static; }
}
header details { display:none; }
@media (max-width: 800px) { header details { display:block; } }

.office-body { background:#eef3f2; }
.office { display:grid; grid-template-columns:240px 1fr; min-height:100vh; }
.office-side { background:var(--teal-deep); color:#fff; padding:1rem .8rem 2rem; }
.office-side nav { display:flex; flex-direction:column; gap:.2rem; }
.office-side a { color:#e7f3f1; text-decoration:none; border-radius:10px; padding:.55rem .7rem; }
.office-side a.is-on, .office-side a:hover { background:rgba(255,255,255,.12); }
.office-brand { display:block; font-weight:700; margin-bottom:1rem; }
.office-brand small { display:block; font-weight:400; opacity:.8; }
.office-top { display:flex; justify-content:space-between; align-items:center; min-height:3.5rem; padding:0 1.25rem; background:#fff; border-bottom:1px solid var(--line); }
.office-content { padding:1.25rem; }
.office-content h1 { margin-top:0; }
.stat-grid, .split { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:.75rem; }
.stat-grid strong { display:block; font-size:1.8rem; }
.table-wrap { overflow:auto; background:#fff; border-radius:16px; }
.inline { display:flex; flex-wrap:wrap; gap:.5rem; align-items:end; margin:.4rem 0; }
.inline input, .inline select { width:auto; min-width:10rem; }
.office-login { min-height:100vh; display:grid; place-items:center; background:linear-gradient(165deg, #083c3b, #14756d); padding:1rem; }
.office-card { width:min(420px, 100%); background:#fffdf9; border-radius:20px; padding:1.25rem; }
.office-card h1 { margin:.2rem 0 .4rem; }
@media (max-width: 800px) {
    .office { grid-template-columns:1fr; }
    .office-side nav { flex-direction:row; overflow:auto; }
    .office-side a { white-space:nowrap; }
}