:root{--accent:#1D4ED8;--ink:#0F172A;--muted:#475569;--line:#E2E8F0;--soft:#F1F5FF;--grey:#F8FAFC}
*{box-sizing:border-box}
body{margin:0;background:#fff;color:var(--ink);font-family:'Noto Sans Thai',system-ui,sans-serif;font-size:17px;line-height:1.65}
a{color:var(--accent)}
img,video{display:block;max-width:100%}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.narrow{max-width:860px}
section{padding:88px 0}
.bg-soft{background:var(--soft)}.bg-grey{background:var(--grey)}
h1{font-size:clamp(36px,6vw,56px);line-height:1.2;margin:0;font-weight:800;white-space:pre-line}
h2{font-size:clamp(28px,4vw,40px);line-height:1.25;margin:0;font-weight:800}
h3{margin:0;font-weight:700}
p{margin:0}
.muted{color:var(--muted)}
.center{text-align:center}
.stack{display:flex;flex-direction:column;gap:16px}
.head{display:flex;flex-direction:column;gap:8px;margin-bottom:32px}
.head.center{align-items:center}
.row{display:flex;flex-wrap:wrap;gap:20px}
.row>*{flex:1 1 260px;min-width:0}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 26px;border-radius:12px;font-weight:700;text-decoration:none;border:1px solid transparent}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{filter:brightness(.92)}
.btn-ghost{background:#fff;border-color:#CBD5E1;color:var(--ink)}
.btn-white{background:#fff;color:#1E3A8A}
.pill{display:inline-block;font-size:14px;font-weight:600;padding:4px 14px;border-radius:999px;background:#fff;border:1px solid #C7D2FE;color:#1E3A8A}
.pill-accent{background:var(--accent);color:#fff;border-color:var(--accent)}
/* nav */
.nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding-top:16px;padding-bottom:16px}
.logo{font-weight:800;font-size:20px;color:var(--ink);text-decoration:none}
.nav-links{display:flex;flex-wrap:wrap;align-items:center;gap:20px;font-size:15px}
.nav-links a:not(.btn){color:#334155;text-decoration:none}
.nav-links .btn{min-height:44px;padding:8px 18px}
/* hero */
.hero .wrap{display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px}
.hero .sub{font-size:19px;color:var(--muted);max-width:640px}
.hero-imgs{display:flex;flex-wrap:wrap;gap:12px;width:100%;margin-top:12px}
.hero-imgs img{flex:1 1 220px;min-width:0;height:380px;object-fit:cover;object-position:center 38%;border-radius:20px}
/* tables */
.tbl-box{overflow-x:auto;border:1px solid var(--line);border-radius:18px;background:#fff}
table{width:100%;border-collapse:collapse}
th,td{padding:14px 18px;text-align:left;vertical-align:middle}
thead th{background:var(--grey);font-weight:600;color:var(--muted);font-size:15px}
tbody tr{border-top:1px solid var(--line)}
.num{text-align:right}
.cmp{min-width:760px}
.cmp th.col,.cmp td{text-align:center}
.cmp thead th{background:#fff;color:var(--ink);padding:24px 16px;vertical-align:top}
.cmp .hl{background:var(--soft)}
.cmp .pname{font-weight:700;font-size:19px}
.cmp .price{font-weight:800;font-size:32px;line-height:1.2}
.cmp .small{font-size:14px;font-weight:400;color:var(--muted)}
.strike{text-decoration:line-through}
.cmp tbody th{font-weight:400}
.check{color:#15803D}
.dash{color:#64748B}
/* status */
.st{font-size:14px;font-weight:600;padding:2px 10px;border-radius:999px;white-space:nowrap}
.st-open{background:#DCFCE7;color:#166534}.st-soon{background:#F1F5F9;color:#334155}.st-full{background:#FEE2E2;color:#991B1B}
/* calendar */
.cal{border:1px solid var(--line);border-radius:20px;padding:24px;margin-top:24px}
.cal-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}
.legend{display:flex;flex-wrap:wrap;gap:16px;font-size:14px;color:#334155}
.legend span{display:inline-flex;align-items:center;gap:6px}
.sw{width:14px;height:14px;border-radius:4px;border:1px solid}
.grid7{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.dow{text-align:center;font-size:13px;font-weight:600;color:var(--muted)}
.day{min-height:78px;border:1px solid var(--line);border-radius:10px;padding:6px 8px;font-size:14px;display:flex;flex-direction:column;gap:2px}
.day b{font-weight:600}
.day small{font-size:12px;font-weight:600;line-height:1.3}
.day.empty{border:0}
.t-group{background:#DBEAFE;border-color:var(--accent)}.t-group small{color:#1E3A8A}
.t-private{background:#DCFCE7;border-color:#15803D}.t-private small{color:#166534}
.t-full{background:#F1F5F9;color:#94A3B8}
/* cards */
.card{border:1px solid var(--line);border-radius:18px;padding:26px;background:#fff;display:flex;flex-direction:column;gap:6px}
.card.hl{border:2px solid var(--accent)}
.card .big{font-weight:800;font-size:34px;line-height:1.2}
.work figure{margin:0;display:flex;flex-direction:column;gap:8px}
.work video,.work img{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:14px;background:#E2E8F0}
.work figcaption{font-size:14px;color:var(--muted)}
.works{margin-top:32px}
.works .row>*{flex:1 1 200px}
/* faq */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:16px 0}
.faq summary{font-weight:700;font-size:18px;cursor:pointer;min-height:44px;display:flex;align-items:center}
.faq details p{margin-top:6px;color:var(--muted)}
.cta-box{background:var(--accent);color:#fff;border-radius:24px;padding:48px 36px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px}
.cta-box p{color:#E0E7FF}
footer{border-top:1px solid var(--line);padding:28px 0;font-size:15px;color:var(--muted)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}
footer .links{display:flex;flex-wrap:wrap;gap:16px}
footer a{color:var(--muted)}
/* pack pages */
.pack-hero .wrap{display:flex;flex-wrap:wrap;gap:40px;align-items:center}
.pack-hero .main{flex:999 1 480px;display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.price-box{flex:1 1 320px;background:#fff;border:2px solid var(--accent);border-radius:20px;padding:28px;display:flex;flex-direction:column;gap:10px}
.price-box .line0{font-weight:800;font-size:40px;line-height:1.2}
.step-num{font-weight:800;font-size:36px;color:var(--accent);line-height:1}
.card ul,.card ol,.info ul{margin:6px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:4px}
.info{background:#fff;border-radius:18px;padding:28px}
.review{border:1px solid var(--line);border-radius:18px;padding:26px;display:flex;flex-direction:column;gap:10px}

.only-mob{display:none}
@media (max-width:760px){.only-desk{display:none}.only-mob{display:flex}}
.card .big{font-size:34px}
@media (max-width:640px){.nav-links a:not(.btn){display:none}section{padding:64px 0}.hero-imgs img{height:260px}.cta-box{padding:36px 22px}}