:root{--gold:#c9a227;--gold2:#e6c65a;--ink:#0f2236;--ink2:#17324d;--cream:#fff6e0;--text:#2b2620;--mut:#6f675a;--wa:#25d366}
*{box-sizing:border-box;margin:0}html{scroll-behavior:smooth}
body{font:16px/1.65 'Segoe UI',system-ui,-apple-system,Arial,sans-serif;color:var(--text);background:#fff}
img{max-width:100%;display:block}a{color:inherit;text-decoration:none}
.wrap{width:min(1180px,100% - 32px);margin:auto}
h1,h2,h3{font-family:Georgia,'Times New Roman',serif;line-height:1.2;color:var(--ink)}
h1{font-size:clamp(2rem,5vw,3.4rem)}h2{font-size:clamp(1.6rem,3.4vw,2.3rem);margin-bottom:.6rem}h3{font-size:1.15rem;margin-bottom:.4rem}
.eyebrow{color:var(--gold);letter-spacing:.18em;text-transform:uppercase;font-size:.78rem;font-weight:700}
header{position:sticky;top:0;z-index:50;background:linear-gradient(90deg,#0f2236,#173a5c);border-bottom:3px solid var(--gold)}
.nav{display:flex;align-items:center;justify-content:space-between;height:84px}
.brand img{height:70px;width:auto}
nav ul{display:flex;gap:6px;list-style:none;padding:0}
nav a{color:#eee;padding:8px 12px;border-radius:6px;font-size:.95rem}
nav a:hover,nav a.on{color:var(--gold2)}
nav a.cta{background:var(--gold);color:#111;font-weight:700}
.burger{display:none;background:none;border:1px solid var(--gold);color:var(--gold);padding:6px 11px;border-radius:6px;font-size:1.2rem;cursor:pointer}
.hero{background:radial-gradient(ellipse at 80% 10%,rgba(240,190,60,.45),transparent 50%),radial-gradient(ellipse at 10% 90%,rgba(40,140,200,.3),transparent 50%),linear-gradient(rgba(15,34,54,.5),rgba(15,34,54,.5)),url(../img/hero-bg.jpg) center/cover,linear-gradient(135deg,#0f2236,#1b4268 60%,#7a5a12);color:#fff;padding:clamp(22px,3vw,36px) 0;text-align:center}
.hero h1{color:#fff}.hero p{max-width:640px;margin:16px auto 28px;color:#e8e2d3;font-size:1.1rem}
.hero.sm{padding:clamp(30px,4vw,50px) 0}.hero h1{font-size:clamp(1.8rem,4vw,2.8rem)}.hero p{margin:12px auto 20px}
.btn{display:inline-block;padding:13px 26px;border-radius:8px;font-weight:700;border:2px solid var(--gold);background:var(--gold);color:#111;cursor:pointer;font-size:1rem;transition:.2s}
.btn:hover{background:var(--gold2)}.btn.ghost{background:transparent;color:#fff}.btn.ghost:hover{background:rgba(255,255,255,.1)}
.btn.wa{background:var(--wa);border-color:var(--wa);color:#fff}.btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
section{padding:clamp(48px,7vw,84px) 0}.alt{background:linear-gradient(180deg,#fff6e0,#ffeec2)}.dark{background:var(--ink);color:#e8e2d3}.dark h2,.dark h3{color:#fff}
.head{text-align:center;max-width:720px;margin:0 auto 40px}.head p{color:var(--mut)}
.grid{display:grid;gap:22px}.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border:1px solid #f1dfa8;border-top:4px solid var(--gold);border-radius:12px;padding:26px;box-shadow:0 6px 18px rgba(15,34,54,.08);transition:.25s}
.card .ic{font-size:1.9rem;margin-bottom:8px}
.cat{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:4/3;background:#222;display:block}
.cat img{width:100%;height:100%;object-fit:cover;transition:.4s}.cat:hover img{transform:scale(1.06)}
.cat span{position:absolute;left:0;right:0;bottom:0;padding:34px 14px 12px;background:linear-gradient(transparent,rgba(0,0,0,.85));color:#fff;font-weight:600}
.split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.split img{border-radius:12px;width:100%;aspect-ratio:4/3;object-fit:cover}
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.gal img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;cursor:zoom-in;transition:.2s}.gal img:hover{opacity:.85}
.tabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:28px}
.tabs button{padding:8px 16px;border-radius:99px;border:1px solid var(--gold);background:#fff;cursor:pointer;font-size:.92rem}
.tabs button.on{background:var(--gold);font-weight:700}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
.stats b{display:block;font:700 2rem Georgia,serif;color:var(--gold2)}
.list{list-style:none;padding:0}.list li{padding:8px 0 8px 28px;position:relative}.list li:before{content:"✓";position:absolute;left:0;color:var(--gold);font-weight:700}
.cta-band{background:linear-gradient(120deg,#f2c230,#e8892b);text-align:center;color:#111}.cta-band h2{color:#111}
.cta-band .btn{background:var(--ink);border-color:var(--ink);color:var(--gold2)}
footer{background:linear-gradient(180deg,#12283f,#0a1726);color:#bdb6a6;padding:50px 0 20px;font-size:.93rem}
footer h4{color:var(--gold2);margin-bottom:10px;font-family:Georgia,serif}footer ul{list-style:none;padding:0}footer li{margin:5px 0}footer a:hover{color:var(--gold2)}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1.3fr;gap:30px}.copy{border-top:1px solid #333;margin-top:30px;padding-top:16px;text-align:center;font-size:.82rem}
.fab{position:fixed;right:16px;bottom:16px;z-index:60;background:var(--wa);color:#fff;border-radius:99px;padding:12px 20px;font-weight:700;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.lb{position:fixed;inset:0;background:rgba(0,0,0,.9);display:none;align-items:center;justify-content:center;z-index:100;padding:20px;cursor:zoom-out}.lb.on{display:flex}.lb img{max-height:92vh;max-width:96vw;border-radius:8px}
.map iframe{width:100%;height:340px;border:0;border-radius:12px}
.crow{display:flex;gap:12px;margin:12px 0}.crow i{font-style:normal;font-size:1.3rem}
@media(max-width:900px){.g3,.g4,.stats{grid-template-columns:repeat(2,1fr)}.split,.fgrid{grid-template-columns:1fr}.gal{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.burger{display:block}nav{position:absolute;left:0;right:0;top:76px;background:var(--ink);display:none;border-bottom:2px solid var(--gold)}nav.open{display:block}nav ul{flex-direction:column;padding:10px 16px}nav a{display:block;padding:12px}.g2{grid-template-columns:1fr}.gal{grid-template-columns:repeat(2,1fr)}.brand img{height:58px}.fab{padding:10px 16px}}
@media(max-width:480px){.g3,.g4{grid-template-columns:1fr 1fr;gap:12px}.card{padding:18px}}

.mk{margin:0 0 10px}.mkc{display:block;padding:24px;border-radius:12px;color:#fff;text-align:center;transition:.2s}.mkc:hover{transform:translateY(-3px)}
.mkc b{display:block;font:700 1.6rem Georgia,serif}.mkc span{display:block;opacity:.9;margin:4px 0 10px}.mkc em{font-style:normal;font-weight:700;text-decoration:underline}
.shp{background:#ee4d2d}.lzd{background:linear-gradient(135deg,#0f146d,#f57224)}
.svg{width:1em;height:1em;vertical-align:-.12em}.card .ic{color:var(--gold);width:48px;height:48px;border-radius:12px;background:#fbf3d6;display:grid;place-items:center;font-size:1.6rem;margin-bottom:12px}
.crow i{color:var(--gold);display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#fbf3d6}.fab .svg{font-size:1.2rem;margin-right:6px}.star{color:var(--gold2)}
.gal img,.split img,.rail figure,.cat{transition:transform .35s ease,box-shadow .35s ease,filter .35s ease}
.gal img:hover,.split img:hover{transform:scale(1.045);box-shadow:0 0 0 3px var(--gold),0 16px 32px rgba(0,0,0,.3);filter:brightness(1.05);position:relative;z-index:2}
.cat:hover{box-shadow:0 0 0 3px var(--gold),0 16px 32px rgba(0,0,0,.3)}
.rtabs{display:flex;gap:8px;justify-content:center;margin-bottom:22px;flex-wrap:wrap}.rtabs button{padding:8px 18px;border-radius:99px;border:1px solid var(--gold);background:transparent;color:#eee;cursor:pointer}.rtabs button.on{background:var(--gold);color:#111;font-weight:700}
.railw{position:relative}.rail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 4px 18px;scrollbar-width:thin;scrollbar-color:var(--gold) #333}
.rail figure{flex:0 0 260px;height:340px;scroll-snap-align:start;border-radius:14px;overflow:hidden;background:#fff;position:relative;cursor:zoom-in}
.rail figure img{width:100%;height:100%;object-fit:cover;object-position:top}
.rail figure:hover{transform:translateY(-6px) scale(1.03);box-shadow:0 0 0 3px var(--gold),0 18px 34px rgba(0,0,0,.5)}
.tag{position:absolute;top:10px;left:10px;z-index:2;color:#fff;font-size:.75rem;font-weight:700;padding:3px 10px;border-radius:99px}.t-shopee{background:#ee4d2d}.t-lazada{background:#f57224}.t-buyer{background:#1f7a4d}
.arr{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:42px;height:42px;border-radius:50%;border:0;background:var(--gold);color:#111;font-size:1.6rem;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.4)}.arr.l{left:-8px}.arr.r{right:-8px}
.btn.pill.shp{background:#ee4d2d;border-color:#ee4d2d;color:#fff}.btn.pill.lzd{background:#f57224;border-color:#f57224;color:#fff}
@media(max-width:720px){.rail figure{flex-basis:72vw}.arr{display:none}}

.card:hover{transform:translateY(-6px);box-shadow:0 14px 30px rgba(15,34,54,.18)}
.card .ic{background:linear-gradient(135deg,#ffd75e,#f0a92b);color:var(--ink)}
.crow i{background:linear-gradient(135deg,#ffd75e,#f0a92b);color:var(--ink)}
h1,h2,h3{color:#0f2236}.hero h1,.dark h2,.dark h3{color:#fff}
.hero h1{text-shadow:0 2px 14px rgba(0,0,0,.35)}.eyebrow{color:#d98e0b}.hero .eyebrow,.dark .eyebrow{color:var(--gold2)}
.tabs button.on,.btn{background:linear-gradient(135deg,#f6cf4a,#e6a21f);border-color:#e6a21f}.btn.ghost{background:transparent;border-color:#fff}.btn.wa{background:var(--wa);border-color:var(--wa)}.btn.pill.shp{background:#ee4d2d;border-color:#ee4d2d}.btn.pill.lzd{background:#f57224;border-color:#f57224}
.dark{background:linear-gradient(135deg,#0f2236,#1b4268)}
.split img{box-shadow:0 18px 40px rgba(15,34,54,.25)}

.gal img.fadeout{opacity:0;transform:scale(.8) rotate(-2deg);transition:opacity .2s,transform .2s}
.gal img.pop{animation:pop .5s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes pop{from{opacity:0;transform:translateY(24px) scale(.85) rotate(2deg)}to{opacity:1;transform:none}}

.lb{cursor:default}.lb img{cursor:default;max-width:min(92vw,1100px)}.lb img.sw{animation:lbin .3s ease}@keyframes lbin{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.lba,.lbx{position:absolute;border:0;background:rgba(255,255,255,.15);color:#fff;cursor:pointer;border-radius:50%;width:48px;height:48px;font-size:2rem;line-height:1;transition:.2s}.lba:hover,.lbx:hover{background:var(--gold);color:#111}
.lp{left:14px;top:50%;transform:translateY(-50%)}.ln{right:14px;top:50%;transform:translateY(-50%)}.lbx{top:14px;right:14px}
.lbc{position:absolute;bottom:16px;left:0;right:0;text-align:center;color:#ddd;font-size:.9rem}

.rv{opacity:0}
.rv-in{animation:reveal .7s cubic-bezier(.2,.8,.3,1) both}
@keyframes reveal{from{opacity:0;transform:translateY(40px) scale(.9) rotate(-1.5deg)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.rv{opacity:1}}

.mklogo{width:26px;height:26px;flex:none}.mkl{display:flex;gap:22px;flex-wrap:wrap;align-items:center}
.mkl a{display:inline-flex;align-items:center;gap:8px;font-weight:600}.mkl a:hover{text-decoration:underline}
.mkl.big{justify-content:center;margin:0 0 10px;gap:40px}.mkl.big a{font-size:1.1rem;gap:10px}.mkl.big .mklogo{width:40px;height:40px}.mkl.big b{display:block;font-family:Georgia,serif;font-size:1.25rem}
.mkl.big span{display:block;line-height:1.3}
.bigtel{font:700 clamp(1.2rem,3vw,1.8rem) Georgia,serif;margin-top:10px}.bigtel a{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center}.bigtel .mklogo{width:34px;height:34px}
.tl{display:inline-flex;align-items:center;gap:6px}.tl .mklogo{width:22px;height:22px}
footer .mkl{gap:16px}

.hero.sm{padding:clamp(18px,2.5vw,28px) 0}
.hero h1{font-size:clamp(1.5rem,3.2vw,2.3rem);line-height:1.15}.hero .eyebrow{font-size:.7rem;margin-bottom:4px}
.hero p{font-size:1rem;margin:8px auto 14px;max-width:700px}.hero .btn{padding:10px 22px}

.hero.home{background:linear-gradient(90deg,rgba(15,34,54,.82) 0%,rgba(15,34,54,.55) 40%,rgba(15,34,54,0) 75%),url(../img/hero-bg.jpg) center/cover,#0f2236;text-align:left;min-height:clamp(260px,24vw,340px);display:flex;align-items:center;padding:28px 0}
.hero.home .wrap>*{max-width:680px;margin-left:0;margin-right:0}.hero.home .btns{justify-content:flex-start}
@media(max-width:720px){.hero.home{background:linear-gradient(rgba(15,34,54,.7),rgba(15,34,54,.7)),url(../img/hero-bg.jpg) 30% center/cover;text-align:center}.hero.home .wrap>*{margin:auto}.hero.home .btns{justify-content:center}}

.crumb{font-size:.82rem;opacity:.85;margin:0 0 6px}.crumb a{color:var(--gold2)}
.toolbar{display:flex;gap:14px;align-items:center;justify-content:center;margin-bottom:16px}.toolbar input,.qf input,.qf select,.qf textarea{padding:11px 14px;border:1px solid #d9cfb4;border-radius:8px;font:inherit;width:100%;background:#fff}.toolbar input{max-width:420px}#cnt{color:var(--mut);font-size:.9rem;white-space:nowrap}
figure.pc{position:relative;margin:0;overflow:hidden;border-radius:10px;background:#fff;box-shadow:0 2px 10px rgba(15,34,54,.12)}figure.pc img{width:100%;display:block}
figure.pc figcaption{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 12px;font-size:.88rem}figure.pc figcaption a{display:flex;align-items:center;gap:5px;color:#128c4a;font-weight:700;white-space:nowrap}figure.pc .mklogo{width:18px;height:18px}
.qf label{display:block;margin:10px 0;font-weight:600;font-size:.9rem}.qf label input,.qf label select,.qf label textarea{margin-top:5px;font-weight:400}.fr{display:grid;grid-template-columns:1fr 1fr;gap:12px}.qf .hint{font-size:.85rem;color:var(--mut);margin:6px 0 14px}.qf .btns{display:flex;gap:10px;flex-wrap:wrap}.btn.ghost.dk{color:var(--ink);border-color:var(--ink)}
.steps{padding-left:20px;display:grid;gap:10px;margin-top:10px}.narrow{max-width:820px}.jump{display:flex;gap:10px;flex-wrap:wrap}.jump a{padding:7px 14px;border-radius:99px;background:var(--cream);border:1px solid var(--gold);font-weight:600;font-size:.9rem}
details{border:1px solid #e6dcc0;border-radius:10px;margin:8px 0;background:#fff;padding:2px 16px}summary{cursor:pointer;font-weight:700;padding:13px 0}details p{padding:0 0 14px;color:var(--mut)}
nav a.cta{margin-left:4px}@media(max-width:720px){.fr{grid-template-columns:1fr}}

.bigtel,.bigtel a,.bigtel u,.tl,.crow a{font-family:"Helvetica Neue",Arial,system-ui,sans-serif!important;font-variant-numeric:lining-nums tabular-nums;letter-spacing:.01em}
.bigtel{font-size:clamp(1.3rem,3vw,1.9rem);font-weight:800}
.rail figure .stars{position:absolute;left:10px;bottom:10px;display:flex;gap:2px;background:rgba(15,34,54,.78);padding:5px 9px;border-radius:99px}.rail figure .stars .star{width:15px;height:15px;color:#f6cf4a}
.rvh{text-align:center;margin:38px 0 16px}.rvg{column-count:3;column-gap:14px}.rvg img{width:100%;height:auto!important;aspect-ratio:auto!important;display:block;margin:0 0 14px;break-inside:avoid;border-radius:10px;background:#fff;border:1px solid #e6dcc0;box-shadow:0 2px 8px rgba(15,34,54,.1);transition:.25s;cursor:zoom-in}.rvg img:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(15,34,54,.2)}
@media(max-width:900px){.rvg{column-count:2}}@media(max-width:560px){.rvg{column-count:1}}

.card.bgc{position:relative;overflow:hidden;color:#fff;border:0;background:var(--ink);isolation:isolate}
.card.bgc::before{content:"";position:absolute;inset:0;background:var(--bg) center/cover;transition:transform .7s ease;z-index:-2}
.card.bgc::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(10,26,44,.72),rgba(10,26,44,.84));transition:opacity .4s;z-index:-1}
.card.bgc:hover::before{transform:scale(1.1)}.card.bgc:hover::after{opacity:.82}
.card.bgc h3{color:var(--gold2)}.card.bgc p{color:#f1ede2}.card.bgc .ic,.card.bgc .svg{color:var(--gold2)}
/* responsive: nav, tablet & mobile polish */
nav a{white-space:nowrap}
@media(max-width:1020px){.burger{display:block}nav{position:absolute;left:0;right:0;top:100%;background:var(--ink);display:none;border-bottom:2px solid var(--gold);z-index:50}nav.open{display:block}nav ul{flex-direction:column;padding:10px 16px;gap:2px}nav a{display:block;padding:12px}nav a.cta{margin:6px 0 0;text-align:center}header{position:sticky;top:0}.nav{position:relative}}
@media(max-width:900px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}.split{grid-template-columns:1fr}.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.g4,.g3,.g2,.fgrid{grid-template-columns:1fr}.gal{grid-template-columns:repeat(2,1fr);gap:8px}.toolbar{flex-direction:column;align-items:stretch}.toolbar input{max-width:none}.tabs{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:6px;-webkit-overflow-scrolling:touch}.tabs button{white-space:nowrap}figure.pc figcaption{flex-direction:column;align-items:flex-start;gap:4px;font-size:.8rem}.bigtel{font-size:1.25rem}.btn{padding:12px 20px}.cta-band h2{font-size:1.5rem}.map iframe{min-height:280px}.card{padding:20px}img,iframe{max-width:100%}}

.card.bgc .ic{background:linear-gradient(135deg,#f6cf4a,#e6a21f)}.card.bgc .ic .svg,.card.bgc .ic svg{color:#0f2236!important;stroke-width:2.2}
.mkl-h{display:inline-flex;align-items:center;gap:10px}.mkl-h .mklogo{width:30px;height:30px}.mkl-h:hover{color:var(--gold)}
.lb img{min-width:min(86vw,440px);background:#fff;border-radius:8px}
@media(max-width:1020px){.tabs button{min-height:42px;padding:9px 18px}.mkl-h{min-height:44px}.crumb{font-size:.85rem}}
@media(max-width:600px){figure.pc figcaption{font-size:.88rem}figure.pc figcaption a{min-height:30px}.card.bgc p,.card p{font-size:1rem}body{font-size:16px}}