@import url('https://fonts.googleapis.com/css2?family=Charmonman:wght@600;700&family=Mitr:wght@300;400;500;600&family=Sarabun:wght@300;400;500;600;700&display=swap');
:root{
 --ink:#3c322c;--brown:#8a4d2b;--brown2:#ad6b3b;--orange:#d98236;
 --gold:#e8bb55;--cream:#fffaf0;--paper:#fffdf8;--pink:#f7d8ca;
 --blue:#cfe9f4;--green:#7ea678;--lotus:#e9a6ad;--muted:#72665e;
 --shadow:0 18px 48px rgba(103,67,42,.16)
}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:Sarabun,sans-serif;color:var(--ink);
background:
radial-gradient(circle at 15% 5%,rgba(255,255,255,.98),transparent 25%),
linear-gradient(180deg,#fff9ee 0%,#f9e2ce 40%,#fffaf1 100%)}
a{text-decoration:none;color:inherit}img{display:block;max-width:100%}
.topline{background:#70452f;color:#fff7e7;text-align:center;padding:8px;font-size:.88rem}
.nav{position:sticky;top:0;z-index:60;background:rgba(255,250,240,.96);backdrop-filter:blur(12px);border-bottom:1px solid #ecd6c4}
.navin{max-width:1240px;margin:auto;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{font-weight:800;color:#9b542d;font-size:1.13rem}.links{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}.links a{padding:9px 11px;border-radius:999px;font-weight:700}.links a:hover,.links a.active{background:#b76c3c;color:white}
.menu{display:none;border:0;background:#b76c3c;color:white;padding:10px 15px;border-radius:14px;font:inherit}
.wrap{max-width:1240px;margin:auto;padding:30px 20px}
.hero{min-height:680px;position:relative;display:grid;grid-template-columns:1fr 1.05fr;align-items:center;overflow:hidden}
.hero:before{content:"";position:absolute;inset:0;z-index:-4;background:linear-gradient(180deg,#dff1f7 0 50%,#dcebcf 50% 100%);border-radius:0 0 70px 70px}
.cloud{position:absolute;background:rgba(255,255,255,.7);border-radius:999px;filter:blur(.2px);z-index:-3;animation:drift 18s linear infinite}
.cloud:before,.cloud:after{content:"";position:absolute;background:inherit;border-radius:50%}
.c1{width:230px;height:55px;top:90px;right:10%}.c1:before{width:90px;height:90px;left:35px;bottom:5px}.c1:after{width:120px;height:115px;right:28px;bottom:0}
.c2{width:170px;height:42px;top:210px;left:44%;animation-duration:24s}.c2:before{width:72px;height:72px;left:22px;bottom:4px}.c2:after{width:80px;height:80px;right:20px;bottom:2px}
@keyframes drift{50%{transform:translateX(25px)}}
.hills{position:absolute;left:32%;right:-5%;bottom:0;height:42%;z-index:-3;background:
radial-gradient(ellipse at 15% 100%,#82aa77 0 27%,transparent 28%),
radial-gradient(ellipse at 48% 100%,#6f986d 0 34%,transparent 35%),
radial-gradient(ellipse at 80% 100%,#95b984 0 38%,transparent 39%)}
.hero-copy{padding:50px 20px 50px 0;position:relative;z-index:3}.eyebrow{display:inline-block;background:#ffe0bd;color:#7d482b;padding:8px 16px;border-radius:999px;font-weight:800}.grade{display:inline-block;margin-top:18px;border:3px solid #3e3a34;border-radius:999px;padding:10px 20px;background:#ffe1c6;box-shadow:8px 8px 0 #f2c248;font-weight:800}
.hero h1{font-family:Mitr,sans-serif;font-size:clamp(3rem,6.3vw,5.6rem);line-height:1.02;margin:28px 0 18px;color:#9f562f;text-shadow:0 4px 0 white}.hero h1 span{display:block;font-size:.48em;margin-top:16px;color:#bc6d39}
.lead{font-size:1.17rem;line-height:1.9;max-width:640px}.btns{display:flex;gap:13px;flex-wrap:wrap;margin-top:26px}.btn{display:inline-flex;align-items:center;gap:7px;padding:13px 23px;border:2px solid #b86938;border-radius:16px;background:white;color:#6c4029;font-weight:800;cursor:pointer;font:inherit}.btn.primary{background:#c86f42;color:white;border-color:#c86f42}
.hero-art{position:relative;align-self:end;min-height:640px;z-index:2}.hero-art img{position:absolute;right:-4%;bottom:-2%;width:112%;max-width:none;filter:drop-shadow(0 22px 24px rgba(65,42,29,.2))}
.lotus{position:absolute;z-index:4;font-size:3rem;filter:drop-shadow(0 5px 7px rgba(89,54,43,.18));animation:float 4s ease-in-out infinite}.l1{right:8%;bottom:5%}.l2{right:44%;bottom:2%;animation-delay:1.2s}.l3{right:24%;bottom:8%;font-size:2.2rem;animation-delay:2s}
.spark{position:absolute;color:#f2b43f;font-size:1.8rem;z-index:4;animation:twinkle 2.4s ease-in-out infinite}.s1{right:15%;top:15%}.s2{right:43%;top:24%;animation-delay:.8s}.s3{right:4%;top:42%;animation-delay:1.4s}
@keyframes float{50%{transform:translateY(-9px) rotate(2deg)}}@keyframes twinkle{50%{opacity:.35;transform:scale(.65)}}
.section{padding:55px 0}.section h2,.pagehead h1{font-family:Mitr,sans-serif;color:#96522f}.section h2{font-size:2.25rem;margin:0 0 10px}.sub{font-size:1.08rem;line-height:1.8;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:24px}.card{background:rgba(255,253,248,.95);border:1px solid #ead7c3;border-radius:26px;padding:24px;box-shadow:var(--shadow)}.card h3{color:#9a5531;margin-top:0}.card p,.card li{line-height:1.78}.icon{width:55px;height:55px;border-radius:18px;background:#fde2cc;display:grid;place-items:center;font-size:1.8rem;margin-bottom:14px}
.pagehead{padding:48px 0 22px}.pagehead h1{font-size:clamp(2.4rem,5vw,4.3rem);margin:0}.twocol{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}.photo{width:100%;border-radius:26px;background:white;padding:8px;box-shadow:var(--shadow)}
.timeline .step{display:grid;grid-template-columns:55px 1fr;gap:18px;margin:18px 0}.dot{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:#af6738;color:white;font-weight:800;box-shadow:0 0 0 8px #f4d3b9}
.scene-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.scene{background:white;border-radius:25px;overflow:hidden;box-shadow:var(--shadow)}.scene img{width:100%;aspect-ratio:16/10;object-fit:cover}.scene .text{padding:22px}.scene h3{color:#99532e;margin-top:0}.scene p{line-height:1.78}
.quote{background:#fff;border-left:8px solid #c87343;padding:22px 26px;border-radius:0 22px 22px 0;font-size:1.16rem;line-height:1.9;box-shadow:var(--shadow)}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:22px}.poem{background:#fff9ed;border:1px solid #ead2b7;border-radius:22px;padding:22px;font-size:1.08rem;line-height:1.95}.meaning{background:#f3f8ee;border-radius:18px;padding:17px;margin-top:14px;line-height:1.75}
.route{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}.place{background:#fff;border:1px solid #dfc4a8;border-radius:999px;padding:9px 14px;box-shadow:0 7px 17px rgba(102,67,44,.08)}
.infographic{background:linear-gradient(150deg,#fff9e9,#f8e0c9);border-radius:32px;padding:28px;box-shadow:var(--shadow)}.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.node{background:white;border:2px solid #ead3bc;border-radius:20px;padding:18px 12px;text-align:center}.node .emoji{font-size:2.6rem}.node b{display:block;color:#98532f;margin-top:8px}.node p{font-size:.94rem;line-height:1.55}
.qcard{background:#fff;margin:20px 0;padding:24px;border-radius:24px;box-shadow:var(--shadow)}.qnum{font-weight:800;color:#a75b34}.option{display:block;border:2px solid #ead9ca;border-radius:15px;padding:13px 14px;margin:10px 0;cursor:pointer;line-height:1.55}.option:hover{border-color:#c67849;background:#fff8f2}.option input{margin-right:10px}.progress{height:14px;background:#e9ded4;border-radius:99px;overflow:hidden;margin-top:10px}.bar{height:100%;width:0;background:linear-gradient(90deg,#ad6037,#e2b64e);transition:.25s}.result{display:none;background:#fff;padding:28px;border-radius:26px;box-shadow:var(--shadow);margin-top:24px}.result.show{display:block}.review{padding:15px;border-radius:14px;margin:11px 0;line-height:1.65}.correct{background:#edf7e8}.wrong{background:#fff0e9}
.footer{background:#70452f;color:#fff6e5;text-align:center;padding:30px 20px;margin-top:55px}.mini{font-size:.9rem;opacity:.86}
@media(max-width:900px){.hero{grid-template-columns:1fr;min-height:auto}.hero-copy{padding-right:0}.hero-art{min-height:500px}.hero-art img{right:-10%;width:112%}.grid{grid-template-columns:1fr 1fr}.twocol,.scene-grid,.compare{grid-template-columns:1fr}.flow{grid-template-columns:1fr 1fr}.menu{display:block}.links{display:none;position:absolute;left:14px;right:14px;top:67px;background:#fff;padding:12px;border-radius:18px;box-shadow:var(--shadow);flex-direction:column}.links.open{display:flex}.links a{width:100%}}
@media(max-width:560px){.grid,.flow{grid-template-columns:1fr}.wrap{padding-left:15px;padding-right:15px}.hero h1{font-size:3rem}.hero-art{min-height:360px}.hero-art img{width:125%;right:-22%}.lead{font-size:1.04rem}.card{padding:20px}}


.hero{
  overflow:visible;
  min-height:720px;
  padding:24px 0 10px;
}
.hero-copy{
  min-width:0;
  padding-left:18px;
  padding-right:32px;
}
.hero h1{
  max-width:100%;
  overflow:visible;
  word-break:keep-all;
  white-space:normal;
  letter-spacing:-0.025em;
  position:relative;
  z-index:6;
}
.hero h1 span{
  white-space:nowrap;
}
.hero-art{
  overflow:visible;
}
.hero-art img{
  right:-2%;
  width:108%;
}
@media(max-width:1100px){
  .hero h1{font-size:clamp(2.8rem,6vw,5rem)}
  .hero-copy{padding-left:28px;padding-right:18px}
}
@media(max-width:900px){
  .hero{overflow:hidden;padding-top:12px}
  .hero h1 span{white-space:normal}
  .hero-copy{padding-left:14px;padding-right:14px}
}


/* ===== Natural layered hero redesign ===== */
.hero{
  min-height:720px;
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,0.9fr) minmax(520px,1.1fr);
  align-items:center;
  overflow:hidden;
  border-radius:0 0 64px 64px;
  isolation:isolate;
  background:
    radial-gradient(circle at 17% 16%,rgba(255,255,255,.96),transparent 23%),
    linear-gradient(180deg,#dff3fb 0%,#eff8f3 57%,#d9e8c8 100%);
}
.hero::before{
  content:"";
  position:absolute;
  inset:auto -5% 0 28%;
  height:53%;
  z-index:-5;
  background:
    radial-gradient(ellipse at 13% 100%,#9fbe8e 0 24%,transparent 25%),
    radial-gradient(ellipse at 42% 100%,#7fa773 0 31%,transparent 32%),
    radial-gradient(ellipse at 74% 100%,#6f9868 0 34%,transparent 35%),
    radial-gradient(ellipse at 100% 100%,#9ab987 0 30%,transparent 31%);
  opacity:.98;
}
.hero::after{
  content:"";
  position:absolute;
  left:34%;right:-8%;bottom:-3%;
  height:33%;
  z-index:-2;
  border-radius:52% 0 0 0;
  background:
    radial-gradient(ellipse at 25% 80%,rgba(245,226,172,.9),transparent 42%),
    linear-gradient(180deg,rgba(178,220,231,.62),rgba(115,180,198,.58));
  transform:skewY(-2deg);
}
.hero-copy{
  position:relative;
  z-index:8;
  padding:54px 26px 54px 30px;
  min-width:0;
}
.hero h1{
  margin:28px 0 18px;
  overflow:visible;
  max-width:100%;
  line-height:1;
  letter-spacing:-.035em;
}
.hero h1 .main-title{
  display:block;
  font-size:clamp(3.4rem,6.5vw,6.1rem);
  color:#99512e;
  white-space:nowrap;
  text-shadow:0 4px 0 rgba(255,255,255,.96);
}
.hero h1 .sub-title{
  display:block;
  margin-top:14px;
  font-size:clamp(2.1rem,3.4vw,3.4rem);
  color:#bc6d39;
  white-space:nowrap;
}
.hero-art{
  position:relative;
  min-height:690px;
  align-self:stretch;
  z-index:3;
  overflow:visible;
}
.hero-art .sun{
  position:absolute;
  width:88px;height:88px;
  border-radius:50%;
  top:15%;left:17%;
  background:radial-gradient(circle,#fff8cf 0 38%,rgba(255,225,130,.55) 39% 62%,transparent 63%);
  filter:blur(.3px);
  z-index:-1;
}
.hero-art .river-glow{
  position:absolute;
  left:0;right:-10%;bottom:1%;
  height:27%;
  border-radius:55% 0 0 0;
  background:
    linear-gradient(180deg,rgba(255,255,255,.28),rgba(121,186,203,.34)),
    repeating-linear-gradient(175deg,rgba(255,255,255,.24) 0 4px,transparent 4px 16px);
  opacity:.8;
  z-index:0;
}
.hero-art img{
  position:absolute;
  right:-1%;
  bottom:0;
  width:105%;
  max-width:none;
  z-index:2;
  filter:drop-shadow(0 22px 25px rgba(68,45,31,.22));
}
.hero-art .boat{
  position:absolute;
  left:1%;bottom:16%;
  width:84px;height:46px;
  z-index:4;
  transform:rotate(-4deg);
}
.hero-art .boat::before{
  content:"";
  position:absolute;left:0;right:0;bottom:0;height:15px;
  background:#8a5432;border-radius:5px 5px 18px 18px;
  box-shadow:0 4px 8px rgba(66,42,27,.18);
}
.hero-art .boat::after{
  content:"";
  position:absolute;left:36px;bottom:12px;width:3px;height:34px;
  background:#70452f;
  box-shadow:15px 12px 0 -1px #70452f;
}
.hero-art .sail{
  position:absolute;left:38px;bottom:25px;width:31px;height:30px;
  background:linear-gradient(135deg,#f6dfad,#e4b96c);
  clip-path:polygon(0 100%,0 0,100% 100%);
  border:1px solid rgba(112,69,47,.3);
}
.hero-art .lotus{
  position:absolute;z-index:5;font-size:2.3rem;
  filter:drop-shadow(0 5px 7px rgba(89,54,43,.18));
  animation:float 4s ease-in-out infinite;
}
.hero-art .l1{right:7%;bottom:6%}
.hero-art .l2{right:31%;bottom:2%;animation-delay:1.1s}
.hero-art .l3{right:54%;bottom:8%;font-size:1.8rem;animation-delay:2s}
.hero-art .spark{z-index:5}
.cloud{
  position:absolute;
  background:rgba(255,255,255,.72);
  border-radius:999px;
  filter:blur(.2px);
  z-index:-2;
  animation:drift 20s linear infinite;
}
.c1{width:230px;height:55px;top:94px;right:8%}
.c2{width:170px;height:42px;top:218px;left:42%}
.hills{display:none}

@media(max-width:1050px){
  .hero{grid-template-columns:minmax(0,1fr) minmax(430px,.95fr)}
  .hero h1 .main-title{font-size:clamp(3rem,6vw,5rem)}
  .hero-art img{width:110%;right:-8%}
}
@media(max-width:900px){
  .hero{grid-template-columns:1fr;min-height:auto;border-radius:0 0 38px 38px}
  .hero-copy{padding:34px 18px 14px}
  .hero h1 .main-title,.hero h1 .sub-title{white-space:normal}
  .hero-art{min-height:470px}
  .hero-art img{width:108%;right:-6%}
  .hero::after{left:-5%;right:-5%;height:27%}
}
@media(max-width:560px){
  .hero-art{min-height:360px}
  .hero-art img{width:120%;right:-18%}
  .hero h1 .main-title{font-size:3rem}
  .hero h1 .sub-title{font-size:2rem}
  .hero-art .boat{transform:scale(.75);transform-origin:left bottom}
}

/* ===== Natural illustrated route map redesign ===== */
.route-map{
  position:relative;
  overflow:hidden;
  margin-top:28px;
  padding:28px 28px 34px;
  min-height:610px;
  border-radius:34px;
  border:1px solid #e4cdb4;
  box-shadow:var(--shadow);
  background:
    radial-gradient(circle at 18% 12%,rgba(255,255,255,.92),transparent 20%),
    linear-gradient(180deg,#dceff5 0 38%,#efe1bd 38% 73%,#cddfbd 73% 100%);
}
.route-map::before{
  content:"";
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 8% 84%,#759d6f 0 12%,transparent 13%),
    radial-gradient(ellipse at 27% 81%,#8db27d 0 15%,transparent 16%),
    radial-gradient(ellipse at 52% 83%,#6f986a 0 15%,transparent 16%),
    radial-gradient(ellipse at 78% 80%,#8fb07a 0 17%,transparent 18%),
    radial-gradient(ellipse at 100% 82%,#70966a 0 15%,transparent 16%);
  opacity:.88;
}
.route-map::after{
  content:"";
  position:absolute;left:-6%;right:-6%;top:29%;height:28%;
  border-radius:50%;
  border:42px solid rgba(104,178,206,.58);
  border-left-color:transparent;border-right-color:transparent;
  transform:rotate(-3deg);
  filter:blur(.2px);
}
.route-title{
  position:relative;z-index:5;text-align:center;
  margin:0 0 24px;font-family:Mitr,sans-serif;
  color:#8e4b2a;font-size:1.9rem;
}
.route-path-svg{
  position:absolute;inset:80px 35px 80px 35px;
  width:calc(100% - 70px);height:calc(100% - 160px);
  z-index:2;overflow:visible;
}
.route-stops{position:absolute;inset:102px 52px 90px 52px;z-index:4}
.stop{
  position:absolute;transform:translate(-50%,-50%);
  text-align:center;min-width:92px;
}
.marker{
  width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;margin:0 auto 6px;
  color:#fff;font-weight:800;background:#9b542d;
  border:4px solid #fff;box-shadow:0 4px 12px rgba(76,48,31,.25);
}
.stop.water .marker{background:#3d8fbd}
.stop.end .marker{background:#c94f3c}
.place-name{
  display:inline-block;
  padding:5px 8px;border-radius:12px;
  background:rgba(255,255,255,.9);
  border:1px solid rgba(204,163,121,.86);
  font-size:.82rem;font-weight:700;line-height:1.22;
  box-shadow:0 4px 12px rgba(83,54,34,.1);
}
.map-ornament{
  position:absolute;z-index:3;font-size:2rem;opacity:.8;
  filter:drop-shadow(0 4px 5px rgba(72,49,34,.15));
}
.mo1{left:7%;top:46%}.mo2{left:47%;top:42%}.mo3{right:10%;top:34%}
.mo4{right:16%;bottom:14%}.mo5{left:20%;bottom:10%}
.route-legend{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%);
  z-index:5;display:flex;gap:14px;flex-wrap:wrap;justify-content:center;
}
.legend-item{background:rgba(255,255,255,.9);padding:8px 12px;border-radius:999px;border:1px solid #e3cbb3;font-size:.9rem}
.legend-swatch{display:inline-block;width:28px;height:3px;margin-right:7px;vertical-align:middle}
.legend-swatch.blue{background:#4c93c5}.legend-swatch.brown{background:#b76c3c}
@media(max-width:900px){
  .route-map{min-height:auto;padding-bottom:28px}
  .route-path-svg,.route-stops,.route-legend,.map-ornament{display:none}
  .route-mobile-list{display:grid!important;grid-template-columns:repeat(2,1fr);gap:10px;position:relative;z-index:5}
}
.route-mobile-list{display:none}

/* ===== Interactive 3D route map ===== */
.map3d-shell{
  position:relative;
  margin-top:26px;
  border-radius:30px;
  overflow:hidden;
  background:linear-gradient(180deg,#e8f5f7,#f4ead3);
  border:1px solid #e1cbb3;
  box-shadow:var(--shadow);
}
.map3d-toolbar{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  padding:12px 14px;
  background:rgba(255,253,247,.94);
  border-bottom:1px solid #ead7c5;
}
.map3d-btn{
  border:1px solid #c98a60;
  background:#fff8ef;
  color:#74462e;
  border-radius:999px;
  padding:8px 13px;
  font:inherit;
  font-weight:700;
  cursor:pointer;
}
.map3d-btn:hover{background:#f7e2cf}
.map3d-hint{margin-left:auto;color:#76675e;font-size:.9rem}
.map3d-stage{width:100%;min-height:430px;touch-action:none}
.map3d-stage canvas{display:block;width:100%;height:100%}
.map3d-tooltip{
  position:absolute;
  z-index:8;
  min-width:170px;
  pointer-events:none;
  background:rgba(255,253,248,.96);
  border:1px solid #dbbd9e;
  box-shadow:0 12px 28px rgba(72,48,33,.18);
  border-radius:14px;
  padding:10px 12px;
}
.map3d-tooltip strong{display:block;color:#91502f;margin-bottom:3px}
.map3d-tooltip span{font-size:.86rem;color:#74665e}
.map3d-legend{
  display:flex;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
  padding:12px;
  background:rgba(255,253,248,.95);
  border-top:1px solid #ead7c5;
}
.legend-dot{
  display:inline-block;
  width:12px;height:12px;
  border-radius:50%;
  margin-right:6px;
  vertical-align:-1px;
}
.legend-dot.water{background:#3f91c0}
.legend-dot.land{background:#a85f36}
.legend-dot.end{background:#c7493c}
.map3d-fallback{display:none;padding:14px;text-align:center}
@media(max-width:700px){
  .map3d-hint{width:100%;margin-left:0}
  .map3d-stage{min-height:390px}
}

/* ===== Offline CSS 3D map: no CDN or WebGL required ===== */
.offline3d-shell{
  margin-top:26px;border-radius:30px;overflow:hidden;
  background:#fffdf8;border:1px solid #dfc8b0;box-shadow:var(--shadow)
}
.offline3d-toolbar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:12px 14px;border-bottom:1px solid #e6d4c2;background:#fffdf8
}
.offline3d-viewport{
  position:relative;height:620px;overflow:hidden;cursor:grab;
  perspective:1250px;touch-action:none;
  background:linear-gradient(180deg,#dceff5,#f4ead5 70%,#d5e5c4)
}
.offline3d-viewport.dragging{cursor:grabbing}
.offline3d-scene{
  position:absolute;inset:0;transform-style:preserve-3d;
  transform-origin:50% 55%;transition:transform .08s linear
}
.offline3d-board{
  position:absolute;left:50%;top:50%;
  width:1000px;height:600px;margin-left:-500px;margin-top:-300px;
  border-radius:38px;overflow:hidden;transform-style:preserve-3d;
  background:linear-gradient(180deg,#dff2f7 0 36%,#efdfbb 36% 72%,#cbdcb7 72%);
  box-shadow:0 45px 80px rgba(80,53,35,.34);
}
.offline3d-board::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 20% 10%,rgba(255,255,255,.8),transparent 21%),
             linear-gradient(120deg,transparent 45%,rgba(255,255,255,.15) 55%,transparent 65%)
}
.offline3d-river{
  position:absolute;z-index:1;background:rgba(83,164,195,.68);
  box-shadow:inset 0 0 18px rgba(255,255,255,.5),0 8px 18px rgba(51,112,136,.18)
}
.river-a{left:-70px;top:160px;width:1120px;height:128px;border-radius:46% 54% 48% 52%;transform:rotate(5deg)}
.river-b{left:420px;top:260px;width:480px;height:92px;border-radius:52%;transform:rotate(-12deg)}
.offline3d-land{position:absolute;z-index:2;border-radius:50%;filter:drop-shadow(0 12px 12px rgba(72,71,42,.18))}
.land-a{left:-90px;bottom:-80px;width:520px;height:310px;background:#8fae72}
.land-b{left:300px;bottom:-70px;width:500px;height:300px;background:#7c9d68}
.land-c{right:-100px;bottom:-90px;width:440px;height:310px;background:#9bb87d}
.offline3d-route{position:absolute;inset:0;z-index:4;filter:drop-shadow(0 3px 4px rgba(60,43,31,.2))}
.offline3d-marker{
  position:absolute;z-index:10;transform:translate(-50%,-50%) translateZ(42px);
  width:34px;height:34px;border:4px solid white;border-radius:50%;
  color:white;font-weight:800;cursor:pointer;
  box-shadow:0 6px 14px rgba(66,43,28,.35)
}
.offline3d-marker.water{background:#3f91c0}.offline3d-marker.land{background:#a85f36}.offline3d-marker.end{background:#c7493c}
.offline3d-marker:hover{transform:translate(-50%,-50%) translateZ(58px) scale(1.14)}
.offline3d-temple,.offline3d-boat,.offline3d-tree,.offline3d-mountain{
  position:absolute;z-index:8;filter:drop-shadow(0 8px 8px rgba(54,42,30,.2));
  transform:translateZ(56px)
}
.temple-start{left:5%;top:4%;font-size:4.8rem}.temple-end{left:72%;top:70%;font-size:4.2rem}
.offline3d-boat{left:48%;top:33%;font-size:4rem;transform:translateZ(48px) rotate(-7deg)}
.offline3d-mountain{color:#6e8d59;font-size:6rem;line-height:1}
.m1{left:8%;bottom:7%}.m2{left:23%;bottom:12%;font-size:4.8rem}.m3{right:13%;bottom:14%;font-size:5.5rem}.m4{right:32%;bottom:6%;font-size:4.4rem}
.offline3d-tree{font-size:2.7rem}.t1{left:18%;top:42%}.t2{left:38%;top:48%}.t3{right:20%;top:38%}.t4{right:7%;top:56%}
.offline3d-tooltip{
  position:absolute;z-index:50;min-width:180px;padding:10px 12px;
  border-radius:14px;background:rgba(255,253,248,.97);
  border:1px solid #d8b996;box-shadow:0 12px 28px rgba(69,45,30,.2)
}
.offline3d-tooltip strong{display:block;color:#8e4e2f}.offline3d-tooltip small{color:#74665d}
@media(max-width:1050px){
  .offline3d-viewport{height:540px}
  .offline3d-board{transform:scale(.82)}
}
@media(max-width:700px){
  .offline3d-viewport{height:430px}
  .offline3d-board{transform:scale(.58)}
  .map3d-hint{width:100%;margin-left:0}
}

/* ===== Full realistic homepage hero ===== */
.hero-realistic{
  position:relative;
  min-height:720px;
  display:flex;
  align-items:center;
  overflow:hidden;
  border-radius:0 0 64px 64px;
  background:url("images/hero-realistic.png") center center/cover no-repeat;
}
.hero-realistic::before,
.hero-realistic::after{display:none!important}
.hero-realistic-overlay{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(255,249,239,.95) 0%,rgba(255,249,239,.88) 28%,rgba(255,249,239,.54) 48%,rgba(255,249,239,.08) 76%),
    linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,245,228,.12));
}
.hero-realistic .hero-copy{
  width:min(610px,52%);
  padding:64px 28px 64px 42px;
  position:relative;
  z-index:2;
}
.hero-realistic .main-title{
  display:block;
  font-size:clamp(3.3rem,6vw,5.8rem);
  white-space:nowrap;
  color:#92502e;
  text-shadow:0 4px 0 rgba(255,255,255,.95);
}
.hero-realistic .sub-title{
  display:block;
  margin-top:12px;
  font-size:clamp(2rem,3.4vw,3.3rem);
  color:#b96c38;
}
@media(max-width:850px){
  .hero-realistic{min-height:760px;background-position:64% center;align-items:flex-start}
  .hero-realistic-overlay{
    background:linear-gradient(180deg,rgba(255,249,239,.96) 0%,rgba(255,249,239,.88) 51%,rgba(255,249,239,.18) 78%);
  }
  .hero-realistic .hero-copy{width:100%;padding:38px 20px}
  .hero-realistic .main-title{white-space:normal}
}

/* ===== Realistic map viewer ===== */
.realmap-shell{
  margin-top:26px;border-radius:30px;overflow:hidden;
  border:1px solid #dbc2a8;background:#fffdf8;box-shadow:var(--shadow)
}
.realmap-toolbar{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding:12px 14px;background:#fffdf8;border-bottom:1px solid #e4d1bd
}
.realmap-viewport{
  position:relative;height:min(72vw,760px);min-height:480px;
  overflow:hidden;background:#132a31;cursor:grab;touch-action:none
}
.realmap-viewport.dragging{cursor:grabbing}
.realmap-image{
  position:absolute;left:50%;top:50%;
  width:100%;height:100%;object-fit:contain;
  transform-origin:center center;
  user-select:none;-webkit-user-drag:none;
  transition:transform .06s linear;
  filter:saturate(1.02) contrast(1.02)
}
@media(max-width:700px){
  .realmap-viewport{height:520px;min-height:420px}
  .realmap-toolbar .map3d-hint{width:100%}
  .realmap-image{width:140%;height:140%}
}

/* ===== Readable semi-realistic 3D route map ===== */
.earthmap-layout{
  display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:20px;margin-top:26px
}
.earthmap-shell,.route-side-panel{
  border:1px solid #ddc4aa;background:#fffdf8;border-radius:28px;box-shadow:var(--shadow);overflow:hidden
}
.earthmap-toolbar{
  display:flex;gap:9px;align-items:center;flex-wrap:wrap;padding:12px 14px;border-bottom:1px solid #e8d5c1
}
.earth-viewport{
  position:relative;height:660px;overflow:hidden;perspective:1250px;touch-action:none;cursor:grab;
  background:
    radial-gradient(circle at 77% 18%,rgba(255,255,255,.55),transparent 18%),
    linear-gradient(180deg,#cae5ef,#eaf1df 58%,#c6d9b4)
}
.earth-viewport.dragging{cursor:grabbing}
.earth-scene{
  position:absolute;inset:0;transform-style:preserve-3d;transform-origin:50% 55%;
  transition:transform .07s linear
}
.earth-board{
  position:absolute;left:50%;top:50%;width:1000px;height:600px;margin-left:-500px;margin-top:-300px;
  border-radius:40px;overflow:hidden;transform-style:preserve-3d;
  background:
    radial-gradient(circle at 12% 10%,rgba(255,255,255,.8),transparent 19%),
    linear-gradient(180deg,#c7e4ee 0 34%,#dfd1a8 34% 72%,#8ead78 72%);
  box-shadow:0 48px 90px rgba(65,48,35,.38)
}
.earth-board::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse at 12% 82%,#6e9367 0 12%,transparent 13%),
    radial-gradient(ellipse at 30% 77%,#87aa74 0 16%,transparent 17%),
    radial-gradient(ellipse at 57% 82%,#759966 0 17%,transparent 18%),
    radial-gradient(ellipse at 86% 76%,#8eb079 0 18%,transparent 19%)
}
.earth-sea{
  position:absolute;z-index:1;left:40%;right:-8%;top:12%;bottom:0;
  background:
    repeating-radial-gradient(ellipse at 35% 45%,rgba(255,255,255,.16) 0 2px,transparent 2px 15px),
    linear-gradient(145deg,#69b8cf,#2f7fa2 68%,#205c78);
  clip-path:polygon(24% 0,100% 0,100% 100%,4% 100%,11% 74%,2% 52%,18% 28%);
  box-shadow:inset 18px 0 30px rgba(255,255,255,.2)
}
.earth-land{
  position:absolute;z-index:2;border-radius:48%;filter:drop-shadow(0 12px 14px rgba(58,55,35,.2))
}
.earth-land-1{left:-10%;top:14%;width:66%;height:55%;background:#a7b77b;transform:rotate(7deg)}
.earth-land-2{left:-7%;bottom:-16%;width:67%;height:54%;background:#7c9b69;transform:rotate(-5deg)}
.earth-land-3{left:39%;bottom:-18%;width:48%;height:42%;background:#91ad72;transform:rotate(4deg)}
.earth-mountain{
  position:absolute;z-index:5;width:0;height:0;
  border-left:70px solid transparent;border-right:70px solid transparent;border-bottom:120px solid #607c57;
  filter:drop-shadow(0 12px 10px rgba(49,55,38,.25));transform:translateZ(52px)
}
.em1{left:8%;bottom:9%}.em2{left:23%;bottom:17%;transform:translateZ(42px) scale(.8)}
.em3{left:44%;bottom:8%;transform:translateZ(45px) scale(.72)}
.earth-city,.earth-boat{position:absolute;z-index:7;transform:translateZ(64px);filter:drop-shadow(0 8px 8px rgba(50,38,28,.28))}
.ec1{left:7%;top:5%;font-size:5rem}.ec2{left:73%;top:70%;font-size:4.5rem}
.eb1{left:59%;top:35%;font-size:4rem;transform:translateZ(55px) rotate(-8deg)}
.eb2{left:73%;top:48%;font-size:2.8rem;transform:translateZ(46px) rotate(4deg)}
.earth-route{position:absolute;inset:0;z-index:8;filter:drop-shadow(0 3px 5px rgba(55,40,28,.28))}
.earth-marker{
  position:absolute;z-index:12;transform:translate(-50%,-50%) translateZ(76px);
  width:36px;height:36px;border:4px solid #fff;border-radius:50%;color:#fff;
  font-weight:800;cursor:pointer;box-shadow:0 7px 16px rgba(51,37,25,.38);
  transition:transform .15s,box-shadow .15s
}
.earth-marker.water{background:#2f93c8}.earth-marker.land{background:#b86f36}.earth-marker.end{background:#c94338}
.earth-marker:hover,.earth-marker.active{
  transform:translate(-50%,-50%) translateZ(96px) scale(1.22);
  box-shadow:0 9px 22px rgba(43,31,22,.48),0 0 0 8px rgba(255,255,255,.42)
}
.earth-tooltip{
  position:absolute;z-index:50;min-width:195px;padding:11px 13px;border-radius:14px;
  background:rgba(255,253,248,.98);border:1px solid #d6b794;box-shadow:0 14px 30px rgba(61,42,29,.22)
}
.earth-tooltip strong{display:block;color:#8e4c2c}.earth-tooltip small{color:#706259}
.route-side-panel{padding:20px;max-height:748px;overflow:auto}
.route-side-panel h3{margin:0;color:#92502e}.route-side-panel p{color:#75675e;font-size:.92rem}
.route-list{display:grid;gap:8px;margin-top:15px}
.route-list-item{
  display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:13px;
  border:1px solid #ead8c6;background:#fff;color:#483a33;font:inherit;text-align:left;cursor:pointer
}
.route-list-item:hover,.route-list-item.active{background:#fff1e3;border-color:#c98b5b;transform:translateX(3px)}
.route-list-num{
  flex:0 0 30px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;background:#9d5c35
}
.route-list-item.water .route-list-num{background:#2f93c8}.route-list-item.end .route-list-num{background:#c94338}
@media(max-width:1050px){
  .earthmap-layout{grid-template-columns:1fr}
  .route-side-panel{max-height:none}
  .route-list{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:760px){
  .earth-viewport{height:480px}
  .earth-board{transform:scale(.62)}
  .route-list{grid-template-columns:repeat(2,1fr)}
  .map3d-hint{width:100%;margin-left:0}
}
@media(max-width:500px){
  .earth-viewport{height:410px}
  .earth-board{transform:scale(.5)}
  .route-list{grid-template-columns:1fr}
}

/* ===== 3D educational map with real HTML labels ===== */
.edu-map-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:20px;
  margin-top:26px;
}
.edu-map-shell,
.edu-route-panel{
  background:#fffdf8;
  border:1px solid #ddc4aa;
  border-radius:28px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.edu-map-toolbar{
  display:flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap;
  padding:12px 14px;
  border-bottom:1px solid #e8d5c1;
}
.edu-map-viewport{
  position:relative;
  height:660px;
  overflow:hidden;
  perspective:1250px;
  touch-action:none;
  cursor:grab;
  background:
    radial-gradient(circle at 78% 16%,rgba(255,255,255,.64),transparent 18%),
    linear-gradient(180deg,#cbe8f1 0%,#eaf1df 58%,#c7dcb8 100%);
}
.edu-map-viewport.dragging{cursor:grabbing}
.edu-map-scene{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  transform-origin:50% 55%;
  transition:transform .07s linear;
}
.edu-map-board{
  position:absolute;
  left:50%;
  top:50%;
  width:1000px;
  height:600px;
  margin-left:-500px;
  margin-top:-300px;
  overflow:hidden;
  border-radius:40px;
  transform-style:preserve-3d;
  background:
    radial-gradient(circle at 14% 12%,rgba(255,255,255,.82),transparent 18%),
    linear-gradient(180deg,#c6e5ee 0 34%,#e1d3aa 34% 72%,#8fad79 72%);
  box-shadow:0 48px 90px rgba(65,48,35,.38);
}
.edu-sky-glow{
  position:absolute;
  inset:0;
  z-index:0;
  background:radial-gradient(circle at 72% 16%,rgba(255,245,196,.58),transparent 18%);
}
.edu-sea{
  position:absolute;
  z-index:1;
  left:40%;
  right:-8%;
  top:12%;
  bottom:0;
  background:
    repeating-radial-gradient(ellipse at 35% 45%,rgba(255,255,255,.16) 0 2px,transparent 2px 15px),
    linear-gradient(145deg,#6cbccf,#337fa2 68%,#205d78);
  clip-path:polygon(24% 0,100% 0,100% 100%,4% 100%,11% 74%,2% 52%,18% 28%);
  box-shadow:inset 18px 0 30px rgba(255,255,255,.2);
}
.edu-land{
  position:absolute;
  z-index:2;
  border-radius:48%;
  filter:drop-shadow(0 12px 14px rgba(58,55,35,.2));
}
.edu-land-a{left:-10%;top:14%;width:66%;height:55%;background:#a8b97e;transform:rotate(7deg)}
.edu-land-b{left:-7%;bottom:-16%;width:67%;height:54%;background:#7d9d6a;transform:rotate(-5deg)}
.edu-land-c{left:39%;bottom:-18%;width:48%;height:42%;background:#92ae74;transform:rotate(4deg)}
.edu-mountain{
  position:absolute;
  z-index:5;
  width:0;
  height:0;
  border-left:70px solid transparent;
  border-right:70px solid transparent;
  border-bottom:120px solid #607c57;
  filter:drop-shadow(0 12px 10px rgba(49,55,38,.25));
  transform:translateZ(52px);
}
.mountain-a{left:8%;bottom:9%}
.mountain-b{left:23%;bottom:17%;transform:translateZ(42px) scale(.8)}
.mountain-c{left:44%;bottom:8%;transform:translateZ(45px) scale(.72)}
.mountain-d{right:8%;bottom:14%;transform:translateZ(44px) scale(.68)}
.edu-landmark{
  position:absolute;
  z-index:7;
  transform:translateZ(64px);
  filter:drop-shadow(0 8px 8px rgba(50,38,28,.28));
}
.bangkok-palace{left:7%;top:5%;font-size:5rem}
.southern-temple{left:73%;top:70%;font-size:4.5rem}
.route-boat-one{left:59%;top:35%;font-size:4rem;transform:translateZ(55px) rotate(-8deg)}
.route-boat-two{left:73%;top:48%;font-size:2.8rem;transform:translateZ(46px) rotate(4deg)}
.edu-map-route{
  position:absolute;
  inset:0;
  z-index:8;
  filter:drop-shadow(0 3px 5px rgba(55,40,28,.28));
}
.edu-marker{
  position:absolute;
  z-index:12;
  transform:translate(-50%,-50%) translateZ(76px);
  width:38px;
  height:38px;
  border:4px solid #fff;
  border-radius:50%;
  color:#fff;
  font-weight:800;
  font-size:.92rem;
  cursor:pointer;
  box-shadow:0 7px 16px rgba(51,37,25,.38);
  transition:transform .15s,box-shadow .15s;
}
.edu-marker.water{background:#2f93c8}
.edu-marker.land{background:#b86f36}
.edu-marker.end{background:#c94338}
.edu-marker:hover,
.edu-marker.active{
  transform:translate(-50%,-50%) translateZ(98px) scale(1.22);
  box-shadow:0 9px 22px rgba(43,31,22,.48),0 0 0 8px rgba(255,255,255,.42);
}
.edu-map-tooltip{
  position:absolute;
  z-index:50;
  min-width:205px;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(255,253,248,.98);
  border:1px solid #d6b794;
  box-shadow:0 14px 30px rgba(61,42,29,.22);
}
.edu-map-tooltip strong{
  display:block;
  color:#8e4c2c;
  font-size:1.05rem;
  margin-bottom:3px;
}
.edu-map-tooltip span{color:#706259;font-size:.9rem}
.edu-route-panel{
  padding:20px;
  max-height:748px;
  overflow:auto;
}
.edu-route-panel h3{margin:0;color:#92502e}
.edu-route-panel p{color:#75675e;font-size:.92rem;line-height:1.55}
.edu-route-list{display:grid;gap:8px;margin-top:15px}
.edu-route-item{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:9px 10px;
  border-radius:13px;
  border:1px solid #ead8c6;
  background:#fff;
  color:#483a33;
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:.15s;
}
.edu-route-item:hover,
.edu-route-item.active{
  background:#fff1e3;
  border-color:#c98b5b;
  transform:translateX(3px);
}
.edu-route-num{
  flex:0 0 31px;
  width:31px;
  height:31px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  font-weight:800;
  background:#9d5c35;
}
.edu-route-item.water .edu-route-num{background:#2f93c8}
.edu-route-item.end .edu-route-num{background:#c94338}
.edu-route-name{font-weight:600}
@media(max-width:1050px){
  .edu-map-layout{grid-template-columns:1fr}
  .edu-route-panel{max-height:none}
  .edu-route-list{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:760px){
  .edu-map-viewport{height:480px}
  .edu-map-board{transform:scale(.62)}
  .edu-route-list{grid-template-columns:repeat(2,1fr)}
  .map3d-hint{width:100%;margin-left:0}
}
@media(max-width:500px){
  .edu-map-viewport{height:410px}
  .edu-map-board{transform:scale(.5)}
  .edu-route-list{grid-template-columns:1fr}
}