@font-face{font-family:"TATSana Chon";src:url(../fonts/woff2-001.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"TATSana Chon";src:url(../fonts/woff2-002.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"TATSana Chon";src:url(../fonts/woff2-003.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --f1:url(../img/f1.gif);--f2:url(../img/f2.gif);--f3:url(../img/f3.gif);--f4:url(../img/f4.gif);--f6:url(../img/f6.gif);--f7:url(../img/f7.gif);
  --p1:url(../img/p1.jpg);--p2:url(../img/p2.jpg);--p3:url(../img/p3.jpg);--p4:url(../img/p4.jpg);--p6:url(../img/p6.jpg);--p7:url(../img/p7.jpg);--f5:url(../img/f5.gif);--p5:url(../img/p5.jpg);--px3:url(../img/px3.jpg);
  --g1:url(../img/g1.jpg);--g2:url(../img/g2.jpg);--g3:url(../img/g3.jpg);--g4:url(../img/g4.jpg);--g9:url(../img/g9.jpg);
  --cover:url(../img/cover.jpg);
  --orange:#ff6700;
  --orange-deep:#d45400;
  --orange-hi:#ff8a33;
  --ink:#000000;
  --ink-soft:#5c5c5c;
  --paper:#ffffff;
  /* Ivory Cream จากพาเลตต์แบรนด์ — ใช้เป็นพื้นอ่อนเวลาอยากให้ส่วนนั้นเด่นขึ้นจากพื้นขาว
     ไม่ใช้กับตัวอักษร เพราะบนพื้นขาวมันจางเกินกว่าจะอ่านออก */
  --cream:#fffabb;
  --gray:#383838;
  --font:"TATSana Chon","Sarabun",system-ui,sans-serif;
  --bar-h:86px;
  --gutter:clamp(14px,2.6vw,40px);
}
*{box-sizing:border-box;font-family:var(--font)}
html,body{margin:0;padding:0}
body{background:#0f0f0f;color:var(--ink);font-weight:400;font-size:16px;line-height:1.7;overflow-x:hidden;text-rendering:optimizeLegibility}
h1,h2,h3,h4{line-height:1.3;letter-spacing:0}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--orange-hi);outline-offset:3px}

/* ================= BANNER : transparent → liquid glass on hover ================= */
.topbar{position:fixed;top:14px;left:0;right:0;z-index:90;display:flex;flex-direction:column;align-items:center;gap:8px;padding:0 var(--gutter);pointer-events:none}
.glass{position:relative;pointer-events:auto;overflow:hidden;background:transparent;border:1px solid transparent;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  transition:background .45s ease,box-shadow .45s ease,border-color .45s ease,-webkit-backdrop-filter .45s ease,backdrop-filter .45s ease}
.topbar:hover .glass,.topbar:focus-within .glass,.topbar.is-open .glass,
.topbar.is-light .glass{
  background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.36) 46%,rgba(255,255,255,.5));
  -webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
  border-color:rgba(255,255,255,.6);
  box-shadow:0 10px 34px rgba(22,44,66,.16),0 2px 8px rgba(22,44,66,.08),
    inset 0 1px 0 rgba(255,255,255,.95),inset 0 -14px 24px rgba(255,255,255,.26)}
.glass::before{content:"";position:absolute;left:-30%;top:-120%;width:36%;height:340%;opacity:0;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.5) 46%,rgba(255,255,255,0));
  transform:rotate(8deg);pointer-events:none}
.topbar:hover .glass::before{animation:sheen 6s ease-in-out infinite}
@keyframes sheen{0%,55%{transform:translateX(0) rotate(8deg);opacity:0}65%{opacity:.9}100%{transform:translateX(400%) rotate(8deg);opacity:0}}
.glass::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .45s ease;
  background:radial-gradient(120% 80% at 10% 0%,rgba(255,255,255,.5),rgba(255,255,255,0) 56%)}
.topbar:hover .glass::after,.topbar.is-open .glass::after,
.topbar.is-light .glass::after{opacity:1}

.bar{width:100%;height:var(--bar-h);border-radius:26px;display:flex;align-items:center;padding:0 16px}
.bar>*{position:relative;z-index:2}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;padding:2px;border-radius:999px;margin-right:auto}
.brand img{width:68px;height:68px;border-radius:50%;transition:transform .45s cubic-bezier(.2,.8,.2,1),filter .3s;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.35))}
.brand:hover img{transform:rotate(-8deg) scale(1.06);filter:drop-shadow(0 3px 12px rgba(255, 103, 0,.55))}

.center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:clamp(30px,5.2vw,80px);white-space:nowrap}
.link{appearance:none;background:none;border:0;cursor:pointer;color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.5);
  font-size:20.5px;font-weight:700;padding:10px 2px;position:relative;text-decoration:none;
  transition:color .3s ease,text-shadow .3s ease}
.link::after{content:"";position:absolute;left:50%;right:50%;bottom:2px;height:2px;border-radius:2px;background:currentColor;
  transition:left .32s cubic-bezier(.2,.8,.2,1),right .32s cubic-bezier(.2,.8,.2,1)}
.link:hover::after,.link:focus-visible::after,.link[aria-expanded="true"]::after{left:0;right:0}
.stories{display:inline-flex;align-items:center;gap:7px}
.chev{width:10px;height:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform .3s}
.link[aria-expanded="true"] .chev{transform:rotate(-135deg) translate(-3px,-3px)}

.right{display:flex;align-items:center;gap:8px;margin-left:auto}
.search{display:flex;align-items:center;border-radius:999px;transition:background .35s,box-shadow .35s}
.search.is-open{background:rgba(255,255,255,.28);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.iconbtn{appearance:none;border:0;background:none;cursor:pointer;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;
  color:#fff;filter:drop-shadow(0 1px 8px rgba(0,0,0,.45));transition:color .3s,background .25s,transform .25s}
.iconbtn:hover{background:rgba(255,255,255,.4);transform:scale(1.06)}
.iconbtn svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.search input{width:0;opacity:0;border:0;background:none;outline:none;font-size:17px;font-weight:400;color:#fff;padding:0;
  transition:width .42s cubic-bezier(.2,.8,.2,1),opacity .3s,padding .42s,color .3s}
.search input::placeholder{color:rgba(255,255,255,.7)}
.search.is-open input{width:clamp(120px,17vw,210px);opacity:1;padding:0 12px 0 2px}
.cta{display:inline-flex;align-items:center;height:50px;padding:0 28px;border-radius:999px;text-decoration:none;
  font-size:19px;font-weight:700;color:#fff;border:2px solid rgba(255,255,255,.9);background:rgba(255,255,255,.14);
  text-shadow:0 1px 10px rgba(0,0,0,.35);
  transition:background .3s,color .3s,border-color .3s,box-shadow .3s,transform .25s;white-space:nowrap}

/* lit state (pointer over the bar) */
.topbar:hover .link,.topbar:focus-within .link,.topbar.is-open .link,
.topbar:hover .iconbtn,.topbar.is-open .iconbtn,
.topbar.is-light .link,
.topbar.is-light .iconbtn{color:var(--ink);text-shadow:none;filter:none}
.topbar:hover .search input,.topbar.is-open .search input,
.topbar.is-light .search input{color:var(--ink)}
.topbar:hover .search input::placeholder,
.topbar.is-light .search input::placeholder{color:rgba(21,24,28,.45)}
.topbar:hover .link:hover,.topbar:hover .link:focus-visible,.topbar:hover .link[aria-expanded="true"],
.topbar.is-open .link[aria-expanded="true"],.topbar:hover .iconbtn:hover,
.topbar.is-light .link:hover,
.topbar.is-light .link:focus-visible,
.topbar.is-light .link[aria-expanded="true"],
.topbar.is-light .iconbtn:hover{color:var(--orange)}
.topbar:hover .brand img,
.topbar.is-light .brand img{filter:none}
.topbar:hover .cta,.topbar.is-open .cta,
.topbar.is-light .cta{color:var(--orange);border-color:var(--orange);background:rgba(255,255,255,.3);text-shadow:none}
.topbar:hover .cta:hover,.topbar.is-open .cta:hover,
.topbar.is-light .cta:hover{background:var(--orange);color:#fff;box-shadow:0 6px 20px rgba(255, 103, 0,.42);transform:translateY(-1px)}
.topbar:hover .search.is-open,
.topbar.is-light .search.is-open{background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.8)}

.subbar{width:100%;border-radius:20px;padding:0 12px;display:flex;align-items:center;justify-content:center;gap:clamp(4px,1.4vw,20px);flex-wrap:wrap;
  max-height:0;opacity:0;visibility:hidden;transform:translateY(-10px) scale(.99);pointer-events:none;
  transition:max-height .42s cubic-bezier(.2,.8,.2,1),opacity .32s,transform .42s cubic-bezier(.2,.8,.2,1),padding .42s,visibility .42s}
.topbar.is-open .subbar{max-height:130px;opacity:1;visibility:visible;transform:none;padding:9px 12px;pointer-events:auto}
.subbar a{position:relative;z-index:2;text-decoration:none;color:var(--ink);font-size:19px;font-weight:700;padding:11px 22px;border-radius:999px;
  transition:color .25s,background .25s,box-shadow .25s}
.subbar a:hover,.subbar a:focus-visible{color:#fff;background:var(--orange);box-shadow:0 6px 18px rgba(255, 103, 0,.35)}
@media(max-width:900px){
  :root{--bar-h:68px}
  .center{gap:22px}.link{font-size:17px}
  .brand img{width:50px;height:50px}
  .cta{padding:0 18px;font-size:16px;height:42px}
  .iconbtn{width:44px;height:44px}
  .subbar a{font-size:16.5px;padding:9px 15px}
}
/* วัดจากของจริง: ป้าย "อนุสาร อ.ส.ท." ยังมีที่พอถึงจอกว้าง 500px (เหลือช่องไฟ 10px)
   ของเดิมซ่อนตั้งแต่ 620px ซึ่งเร็วเกินไป แท็บเล็ตแนวตั้งกับมือถือจอใหญ่เลยไม่เห็นเมนูนี้
   จอที่แคบกว่านี้ใส่ไม่ลงจริง ๆ จึงย้ายไปอยู่ในเมนูที่กางลงมาแทน (ดู subbar__more) */
@media(max-width:499px){.center .title{display:none}}

/* ================= SECTION HOME ================= */
.track{position:relative;height:360vh}
.sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#0d0d0d}
.scene{position:absolute;inset:0;perspective:2200px;perspective-origin:50% 47%}
/* พื้นรองของฉากท้องฟ้า — ต้องเป็นสีฟ้าหม่นของหมอกในภาพ ไม่ใช่สีดำ
   นี่คือสิ่งที่คนอ่านจะเห็นถ้าภาพพื้นหลังโหลดไม่ขึ้นหรือยังมาไม่ถึง
   ของเดิมเป็น #0d0d0d ทุกความผิดพลาดจึงจบลงที่ "หน้าจอดำทั้งหน้า" เสมอ */
.skywrap{position:absolute;inset:0;z-index:0;will-change:transform;background:#c9d5dc;overflow:hidden}
.bgloop{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0;pointer-events:none;
  transform:scale(1.02)}


.stage{position:absolute;left:50%;top:50%;z-index:3;transform:translate(-50%,-50%);transform-style:preserve-3d;will-change:transform}
.book{position:relative;transform-style:preserve-3d}
.paperbg{background-image:linear-gradient(100deg,#ffffff 0%,#fbfbf8 54%,#eeeee7 100%);background-size:300% 100%}
.spine{position:absolute;right:100%;top:0;height:100%;width:2.6%;z-index:8;overflow:hidden}
.spine img{width:100%;height:100%;object-fit:fill}
.edge{position:absolute;left:100%;top:.7%;bottom:.7%;width:1.5%;z-index:1;border-radius:0 3px 3px 0;
  background:repeating-linear-gradient(180deg,#ffffff 0 1.5px,#ddd8cc 1.5px 3px);box-shadow:2px 6px 14px rgba(20,40,60,.28)}
.leftpage{position:absolute;right:100%;top:0;width:100%;height:100%;opacity:0;z-index:0;
  background-image:linear-gradient(260deg,#ffffff 0%,#fbfbf8 54%,#f0f0e9 100%);
  box-shadow:-22px 26px 56px rgba(24,44,66,.26),inset 10px 0 22px rgba(120,130,140,.18)}
.stack{position:absolute;inset:0;z-index:2;background-image:linear-gradient(100deg,#fff,#fbfbf8 60%,#e9e9e2);
  box-shadow:0 30px 62px rgba(24,44,66,.32)}
.gutter{position:absolute;left:0;top:0;bottom:0;width:15%;z-index:6;opacity:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(38,28,18,.36),rgba(38,28,18,0))}
.gutter--l{left:auto;right:0;background:linear-gradient(270deg,rgba(38,28,18,.3),rgba(38,28,18,0))}
.cast{position:absolute;inset:0;z-index:4;opacity:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(12,18,26,.6),rgba(12,18,26,.16) 44%,rgba(12,18,26,0) 74%)}
.gloss2{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(112deg,rgba(255,255,255,0) 18%,rgba(255,255,255,.66) 34%,rgba(255,255,255,0) 50%)}

.leaf{position:absolute;inset:0;z-index:5;transform-style:preserve-3d;will-change:transform}
.seg{position:absolute;top:0;left:0;width:33.34%;height:100%;transform-origin:left center;transform-style:preserve-3d;will-change:transform}
.seg .seg{left:100%;width:100%}
.face{position:absolute;inset:0;backface-visibility:hidden;overflow:hidden;background-repeat:no-repeat}
.face--b{transform:rotateY(180deg)}
.face>i{position:absolute;inset:0;display:block;opacity:0;background:linear-gradient(90deg,rgba(10,14,20,.6),rgba(10,14,20,.04) 74%)}
.face--b>i{background:linear-gradient(270deg,rgba(10,14,20,.55),rgba(10,14,20,.03) 74%)}
.seg1>.face{background-position:0% 50%}
.seg2>.face{background-position:50% 50%}
.seg3>.face{background-position:100% 50%}
.leaf--cover .face--f{background-image:var(--cover);background-size:300% 100%}

.bookshadow{position:absolute;left:50%;top:100%;transform:translate(-50%,-4px);height:22px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(60,90,120,.42),rgba(60,90,120,0));filter:blur(3px)}

/* window that becomes the homepage */
.window{position:absolute;left:50%;top:50%;z-index:2;transform:translate(-50%,-50%);overflow:hidden;
  /* ตรึงขนาดเต็มจอ ส่วนที่เห็นคุมด้วย clip-path จาก JS — ไม่แตะ layout ตอนเลื่อน */
  width:100vw;height:100vh;height:100svh}
.photo{position:absolute;left:50%;top:50%;width:100vw;height:100vh;height:100svh;transform:translate(-50%,-50%);will-change:transform}
.photo>img{width:100%;height:100%;object-fit:cover;filter:saturate(1.12) contrast(1.07) brightness(.94)}
.photodim{position:absolute;inset:0;background:#04080b;opacity:.05}
.layer{position:absolute;inset:0;pointer-events:none}
.mist span{position:absolute;display:block;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.82),rgba(255,255,255,0));filter:blur(10px);will-change:transform}
.seaclouds{position:absolute;left:-25%;right:-25%;bottom:16%;height:34%}
.seaclouds b{position:absolute;display:block;height:100%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,246,235,.85),rgba(255,240,225,.35) 55%,rgba(255,255,255,0));filter:blur(12px);will-change:transform}
.rays{position:absolute;left:88%;top:20%;width:120vmax;height:120vmax;transform:translate(-50%,-50%);
  background:repeating-conic-gradient(from 0deg,rgba(255,226,180,.28) 0deg 1.6deg,rgba(255,255,255,0) 1.6deg 8deg);
  -webkit-mask-image:radial-gradient(closest-side,rgba(0,0,0,.95),rgba(0,0,0,0) 68%);mask-image:radial-gradient(closest-side,rgba(0,0,0,.95),rgba(0,0,0,0) 68%);
  mix-blend-mode:screen;opacity:.5;animation:spin 190s linear infinite,breathe 13s ease-in-out infinite}
.sunglow{position:absolute;inset:0;mix-blend-mode:screen;animation:breathe 11s ease-in-out infinite;
  background:radial-gradient(58% 52% at 88% 22%,rgba(255,214,150,.5),rgba(255,190,120,.12) 45%,rgba(255,255,255,0) 72%)}
.vignette{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 40%,rgba(0,0,0,0) 44%,rgba(6,14,24,.5))}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes breathe{0%,100%{opacity:.6}50%{opacity:1}}
@keyframes mistDrift{from{transform:translate3d(-7%,0,0) scale(1)}to{transform:translate3d(11%,-4%,0) scale(1.18)}}
@keyframes flowRight{from{transform:translateX(-14%)}to{transform:translateX(16%)}}
.fogsweep{position:absolute;inset:0;z-index:4;opacity:0;pointer-events:none}
.fogsweep b{position:absolute;display:block;height:26%;border-radius:50%;filter:blur(26px);
  background:radial-gradient(closest-side,rgba(255,252,246,.9),rgba(255,250,240,0))}

.herocopy{position:absolute;left:0;right:0;bottom:0;padding:0 clamp(18px,6vw,90px) clamp(38px,7vh,74px);color:#fff;z-index:3}
.herocopy__eyebrow{display:flex;align-items:center;gap:12px;font-size:13px;letter-spacing:.16em;opacity:1;text-shadow:0 2px 14px rgba(0,0,0,.75)}
.herocopy__eyebrow em{font-style:normal;color:#ffc08a}
.herocopy h1{font-weight:700;font-size:clamp(30px,3.4vw,52px);line-height:1.32;margin:16px 0 0;text-shadow:0 3px 34px rgba(0,0,0,.5)}
.herocopy h1 b{font-weight:700}
.herocopy p{max-width:56ch;margin:14px 0 0;font-size:clamp(14px,1.02vw,16px);line-height:1.75;opacity:1;text-shadow:0 2px 18px rgba(0,0,0,.75);text-wrap:pretty}
.herocopy__foot{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;margin-top:22px;font-size:13px;letter-spacing:.04em;opacity:.92;text-shadow:0 2px 12px rgba(0,0,0,.7)}
.herocopy__foot i{width:26px;height:1px;background:currentColor;display:inline-block}
.cue{position:absolute;right:clamp(18px,6vw,90px);bottom:clamp(38px,7vh,74px);display:flex;align-items:center;gap:10px;font-size:12.5px;letter-spacing:.18em;color:#fff;opacity:.9;text-shadow:0 2px 12px rgba(0,0,0,.7);z-index:3}
.cue u{display:block;width:1px;height:36px;background:linear-gradient(#fff,rgba(255,255,255,0));animation:drop 2.2s ease-in-out infinite}
/* จอมือถือ เครดิตภาพท้ายบทปกยาวจนตัดเป็นสองบรรทัดเต็มความกว้าง ไปทับ "เลื่อนอ่านต่อ" ที่มุมขวาล่าง
   ย้ายตัวชี้ลงไปชิดขอบล่าง แล้วดันข้อความบทปกขึ้นเท่าที่ตัวชี้ใช้พอดี */
@media (max-width:640px){
  .herocopy{padding-bottom:max(54px,clamp(38px,7vh,74px))}
  .cue{bottom:14px}
  .cue u{height:24px}
}
@keyframes drop{0%{transform:translateY(-10px);opacity:0}40%{opacity:1}100%{transform:translateY(10px);opacity:0}}
.hint{position:absolute;left:50%;bottom:6vh;transform:translateX(-50%);text-align:center;color:#fff;z-index:5;text-shadow:0 1px 16px rgba(0,0,0,.6)}
.hint span{display:block;font-size:18px;font-weight:700;letter-spacing:.16em;opacity:1}
.hint u{display:block;width:1.5px;height:46px;margin:14px auto 0;background:linear-gradient(#fff,rgba(255,255,255,0));animation:drop 2.2s ease-in-out infinite}

/* ================= ADVERTISER ================= */
.ads{position:relative;z-index:6;background:#0f0f0f;padding:0}
.ads__frame{position:relative;width:100%;overflow:hidden;background:#0f0f0f;cursor:grab}
.ads__frame.is-drag{cursor:grabbing}
.ads__viewport{overflow:hidden}
.ads__track{display:flex;will-change:transform;transition:transform .8s cubic-bezier(.22,.8,.2,1)}
.ads__track.no-anim{transition:none}
/* ต้องตัดขอบในระดับ "ใบ" ด้วย ไม่ใช่แค่ที่กรอบรวม
   เพราะภาพเบลอที่เป็นพื้นหลังถูกขยายเกินขอบใบไว้ 14% ถ้าใบไม่ตัดขอบตัวเอง
   ภาพเบลอของใบข้าง ๆ จะล้นเข้ามาโผล่ที่ริมซ้าย-ขวาของใบที่กำลังแสดงอยู่ */
.ads__slide{flex:0 0 100%;position:relative;min-width:0;overflow:hidden}
.ads__slide img{width:100%;height:auto;display:block;pointer-events:none;-webkit-user-drag:none}
.ads__dots{position:absolute;left:50%;bottom:clamp(14px,2.4vw,30px);transform:translateX(-50%);display:flex;gap:12px;z-index:3}
.dot{appearance:none;border:0;padding:0;cursor:pointer;width:clamp(38px,4.6vw,64px);height:5px;border-radius:999px;overflow:hidden;position:relative;
  background:rgba(255,255,255,.26);-webkit-backdrop-filter:blur(10px) saturate(160%);backdrop-filter:blur(10px) saturate(160%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),0 2px 8px rgba(0,0,0,.16);transition:background .35s,transform .3s}
.dot:hover{transform:scaleY(1.6)}
.dot i{position:absolute;inset:0;background:#fff;transform-origin:left;transform:scaleX(0)}
.dot.is-active i{transform:scaleX(1);transition:transform 5.6s linear}
.ads__arrow{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:0;cursor:pointer;z-index:3;
  display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);opacity:0;transition:opacity .3s,background .3s}
.ads__frame:hover .ads__arrow{opacity:1}
.ads__arrow:hover{background:rgba(232,244,255,.3)}
.ads__arrow svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ads__arrow--prev{left:clamp(10px,1.6vw,24px)}.ads__arrow--next{right:clamp(10px,1.6vw,24px)}


/* ================= ARTICLES ================= */
.stories-sec{position:relative;z-index:6;background:#0f0f0f;padding:0}
.stories-sec__in{width:100%}

.hl{position:relative;width:100vw;margin-left:calc(50% - 50vw);height:100vh;height:100dvh;min-height:640px;overflow:hidden;background:#141414;cursor:grab}
.hl.is-drag{cursor:grabbing}
@media(max-width:760px){.hl{height:100dvh;min-height:520px}}
.hl__viewport{position:absolute;inset:0;overflow:hidden}
.hl__track{display:flex;height:100%;will-change:transform;transition:transform .85s cubic-bezier(.22,.8,.2,1)}
.hl__track.no-anim{transition:none}
.hl__slide{position:relative;flex:0 0 100%;height:100%;min-width:0;overflow:hidden}
.hl__slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);-webkit-user-drag:none}
.hl__slide.is-on img{animation:hlpan 24s ease-in-out infinite alternate}
@keyframes hlpan{from{transform:scale(1.07) translate3d(1.2%,.8%,0)}to{transform:scale(1.18) translate3d(-1.6%,-1.4%,0)}}
.hl__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,11,17,.58),rgba(6,11,17,.3) 34%,rgba(6,11,17,.52) 62%,rgba(6,11,17,.86))}
.hl__body{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  color:#fff;padding:clamp(24px,5vw,90px);gap:clamp(12px,1.2vw,16px)}
.hl__body>*{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.hl__slide.is-on .hl__body>*{opacity:1;transform:none}
.hl__slide.is-on .hl__body>*:nth-child(2){transition-delay:.09s}
.hl__slide.is-on .hl__body>*:nth-child(3){transition-delay:.18s}
.hl__slide.is-on .hl__body>*:nth-child(4){transition-delay:.27s}
.chip{display:inline-block;background:var(--orange);color:#fff;font-size:13px;padding:6px 16px;border-radius:6px;letter-spacing:.04em;box-shadow:0 6px 20px rgba(255, 103, 0,.4)}
.hl__body h2{margin:0;font-weight:700;font-size:clamp(26px,2.6vw,44px);line-height:1.4;letter-spacing:0;max-width:26ch;
  text-shadow:0 4px 40px rgba(0,0,0,.8),0 2px 6px rgba(0,0,0,.5)}
.hl__body p{margin:0;max-width:62ch;font-size:clamp(14px,1.02vw,16.5px);line-height:1.8;opacity:.96;
  text-shadow:0 2px 20px rgba(0,0,0,.8),0 1px 3px rgba(0,0,0,.5);text-wrap:pretty}
.hl__btn{display:inline-flex;align-items:center;gap:10px;margin-top:8px;padding:11px 28px;border-radius:999px;text-decoration:none;
  font-size:15px;color:#fff;border:1.5px solid rgba(255,255,255,.75);background:rgba(255,255,255,.10);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:background .3s,color .3s,border-color .3s,box-shadow .3s,transform .25s}
.hl__btn:hover,.hl__btn:focus-visible{background:var(--orange);border-color:var(--orange);color:#fff;transform:translateY(-2px);box-shadow:0 10px 26px rgba(255, 103, 0,.5)}
.hl__dots{position:absolute;left:50%;bottom:clamp(16px,2.4vw,30px);transform:translateX(-50%);display:flex;gap:12px;z-index:4}
.hl__arrow{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:0;cursor:pointer;z-index:4;
  display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);opacity:0;transition:opacity .3s,background .3s}
.hl:hover .hl__arrow{opacity:1}
.hl__arrow:hover{background:rgba(232,244,255,.3)}
.hl__arrow svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hl__arrow--prev{left:clamp(10px,1.6vw,24px)}.hl__arrow--next{right:clamp(10px,1.6vw,24px)}


/* แบนเนอร์หมวด: กรอบสี่เหลี่ยมผืนผ้าเต็มจอ ภาพทุกใบขยายเต็มกรอบแล้วครอบตัดส่วนเกิน
   ไม่ว่าไฟล์ต้นฉบับจะเป็นแนวตั้งหรือแนวนอน ผลที่เห็นคือเต็มจอเหมือนกันหมด */
.thero{display:none;position:relative;width:100vw;margin-left:calc(50% - 50vw);
  height:100vh;height:100dvh;min-height:560px;
  overflow:hidden;background:#141414}
body.view-travel .thero{display:block}
body.view-travel .hl{display:none}
.thero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* แถบไล่สีต้องเข้มพอให้ตัวหนังสือขาวอ่านออกบนภาพสว่าง ๆ ด้วย (เช่นภาพอาหารจานขาว)
   ของเดิมกลางภาพจางแค่ .28 ซึ่งหัวเรื่องจมหายไปเลยเมื่อภาพพื้นสว่าง */
.thero__scrim{position:absolute;inset:0;z-index:2;background:
  linear-gradient(180deg,rgba(6,11,17,.60),rgba(6,11,17,.40) 28%,rgba(6,11,17,.58) 60%,rgba(6,11,17,.86)),
  radial-gradient(ellipse 70% 45% at 50% 50%,rgba(6,11,17,.42),rgba(6,11,17,0) 70%)}
.thero__body{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  color:#fff;padding:clamp(24px,5vw,90px);gap:clamp(12px,1.2vw,16px)}
.thero__body h2{margin:0;font-weight:700;font-size:clamp(26px,2.6vw,44px);line-height:1.4;max-width:26ch;
  text-shadow:0 4px 40px rgba(0,0,0,.8),0 2px 6px rgba(0,0,0,.5)}
.thero__body p{margin:0;max-width:62ch;font-size:clamp(14px,1.02vw,16.5px);line-height:1.8;opacity:.96;
  text-shadow:0 2px 20px rgba(0,0,0,.8),0 1px 3px rgba(0,0,0,.5)}
.allwrap{background:#fff;padding:clamp(30px,3.8vw,56px) 16px clamp(38px,4.8vw,66px);display:flex;justify-content:center}
.allbtn{display:inline-flex;align-items:center;gap:10px;padding:13px 38px;border-radius:999px;text-decoration:none;
  font-size:clamp(15px,1.1vw,17px);color:var(--orange);border:1.6px solid var(--orange);background:transparent;
  transition:background .32s ease,color .32s ease,box-shadow .32s ease,transform .25s ease}
.allbtn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .32s}
.allbtn:hover,.allbtn:focus-visible{background:var(--orange);color:#fff;box-shadow:0 12px 28px rgba(255, 103, 0,.4);transform:translateY(-2px)}
.allbtn:hover svg{transform:translateX(5px)}

.tabs{display:grid;grid-template-columns:repeat(var(--cols,6),1fr);gap:7px;margin:0;padding:7px;background:#fff}
@media(max-width:1000px){.tabs{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.tabs{grid-template-columns:repeat(2,1fr)}}
/* การ์ด "ดูเรื่องราวทั้งหมด" ใช้แทนปุ่มเฉพาะบนมือถือ — จอใหญ่ยังเป็นปุ่มเหมือนเดิม */
.tabs .tab--all{display:none}
@media(max-width:560px){
  .tabs .tab--all{display:block}
  /* รูปไร่ชาสว่างและสีสดกว่ารูปหมวดอื่นมาก ม่านมืดชุดเดียวกันจึงยังดูเด่นกว่าเพื่อน
     หรี่ลงให้กลืนกับการ์ดข้าง ๆ แล้วตอนแตะค่อยสว่างขึ้นเหมือนการ์ดอื่น */
  .tabs .tab--all img{filter:brightness(.72) saturate(.85)}
  .tabs .tab--all:hover img,.tabs .tab--all:focus-visible img{filter:brightness(.86) saturate(1)}
  .stories-sec .allwrap{display:none}
}
.tab{border:0;padding:0;background:#fff;cursor:pointer;position:relative;overflow:hidden;text-decoration:none;
  aspect-ratio:3/2.5;display:block}
@media(max-width:1000px){.tab{aspect-ratio:3/2.2}}
.tab img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1),filter .45s}
.tab::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.16) 26%,rgba(0,0,0,.76));transition:background .4s}
.tab span{position:absolute;left:0;right:0;bottom:clamp(14px,1.6vw,26px);z-index:2;color:#fff;text-align:center;
  font-size:clamp(15px,1.15vw,19px);font-weight:400;text-shadow:0 2px 16px rgba(0,0,0,.8),0 1px 3px rgba(0,0,0,.5);
  transition:color .3s,text-shadow .45s,transform .45s,letter-spacing .45s}
.tab:hover img,.tab:focus-visible img{transform:scale(1.09);filter:brightness(1.12)}
.tab:hover::after,.tab:focus-visible::after{background:linear-gradient(180deg,rgba(0,0,0,0) 24%,rgba(0,0,0,.6))}
.tab:hover span,.tab:focus-visible span{transform:translateY(-4px);letter-spacing:.03em;
  text-shadow:0 0 18px rgba(255,255,255,.95),0 0 40px rgba(248,148,77,.9),0 2px 12px rgba(0,0,0,.6)}

footer{background:#fff;color:#5c5c5c;border-top:1px solid #ece7de;padding:clamp(44px,5vw,76px) clamp(20px,4vw,64px) clamp(36px,4vw,58px);position:relative;z-index:6}
.foot{width:100%;max-width:1560px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(26px,3.4vw,44px)}
.foot__top{display:flex;align-items:center;gap:clamp(18px,2.6vw,40px);flex-wrap:wrap}
.foot__logos{display:flex;align-items:center;gap:14px}
.foot__logos img{width:clamp(50px,5vw,64px);height:clamp(50px,5vw,64px);border-radius:50%;display:block}
.foot__logos .tat{background:#fff;padding:0}
.foot__brand{appearance:none;border:0;background:none;padding:0;cursor:pointer;font:inherit;
  color:var(--ink);font-size:22px;font-weight:700;display:block;transition:color .28s}
.foot__brand:hover{color:var(--orange)}
.foot__brandtext small{display:block;margin-top:8px;font-size:15px;line-height:1.9;font-weight:400;color:#6b6b6b}
.foot__main{display:flex;justify-content:space-between;gap:clamp(28px,4vw,70px);flex-wrap:wrap;
  border-top:1px solid #ece7de;padding-top:clamp(24px,3vw,40px)}
.foot__contact{max-width:640px}
.foot__contact h4{margin:0;color:var(--ink);font-size:18px;font-weight:700}
.foot__dept{margin-top:8px;font-size:15px;color:#383838}
.foot__contact ul{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:13px}
.foot__contact li{display:flex;align-items:flex-start;gap:12px;font-size:14.5px;line-height:1.75;color:#5c5c5c}
.foot__contact svg{width:19px;height:19px;flex:0 0 auto;margin-top:2px;fill:none;stroke:var(--orange);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.foot__contact a{color:#5c5c5c;text-decoration:none;transition:color .28s}
.foot__contact a:hover{color:var(--orange)}
.foot__right{display:flex;flex-direction:column;align-items:flex-end;gap:22px;margin-left:auto}
.foot__nav{display:flex;flex-direction:column;align-items:flex-end;gap:12px;font-size:15.5px;text-align:right}
.foot__nav a{color:var(--ink);text-decoration:none;position:relative;transition:color .28s}
.foot__nav a::after{content:"";position:absolute;right:0;bottom:-4px;width:0;height:1.5px;background:var(--orange);transition:width .32s cubic-bezier(.2,.8,.2,1)}
.foot__nav a:hover,.foot__nav a:focus-visible{color:var(--orange)}
.foot__nav a:hover::after,.foot__nav a:focus-visible::after{width:100%}
.social{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.social a{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#5c5c5c;
  background:#f6f3ee;box-shadow:inset 0 0 0 1px #e6e0d6;
  transition:color .3s,background .3s,transform .3s,box-shadow .3s}
.social svg{width:19px;height:19px;fill:currentColor;display:block}
.social a:hover,.social a:focus-visible{color:#fff;background:var(--orange);transform:translateY(-3px);
  box-shadow:0 8px 20px rgba(255, 103, 0,.45),inset 0 0 0 1px rgba(255,255,255,.3)}
.foot__right .social{margin-top:2px}
@media(max-width:820px){
  .foot__main{flex-direction:column}
  .foot__right{align-items:flex-start;margin-left:0}
  .foot__nav{flex-direction:row;flex-wrap:wrap;align-items:flex-start;text-align:left;gap:20px}
  .foot__nav a::after{left:0;right:auto}
  .foot__right .social{justify-content:flex-start}
}


/* ================= ARTICLES INDEX (หน้าบทความรวม) ================= */
.ap{display:none;background:#fff;color:var(--ink);padding:0 0 clamp(50px,6vw,86px);position:relative;z-index:7}  /* สูงกว่า footer (6) — dropdown จังหวัด/คอลัมน์ห้อยลงมาทับ footer ได้ ไม่โดนตัด */
body.view-all .ap,body.view-travel .ap{display:block}
body.view-all .track,body.view-all .ads,body.view-all .allwrap,
body.view-travel .track,body.view-travel .ads,body.view-travel .allwrap{display:none}
.ap__in{max-width:1720px;margin:0 auto;padding:0 clamp(16px,2.6vw,44px)}
.ap__crumb{display:flex;align-items:center;gap:10px;padding:28px 0 6px;font-size:16px;color:var(--ink-soft)}
/* หน้าฉบับนิตยสารกับหน้าทริป วางแถบนำทางไว้นอกกล่องเนื้อหา มันเลยไปชิดขอบซ้ายของจอ
   ไม่ตรงกับหัวเรื่องที่อยู่ข้างล่าง — จัดให้อยู่ในกรอบและระยะขอบชุดเดียวกันพอดี */
.ap__crumb--inset{
  box-sizing:border-box;max-width:1280px;margin:0 auto;
  padding:clamp(76px,9vw,110px) clamp(20px,5vw,60px) 0;flex-wrap:wrap
}
.ap__crumb button{appearance:none;border:0;background:none;cursor:pointer;font:inherit;color:var(--orange);font-weight:700;padding:0}
.ap__crumb button:hover{text-decoration:underline}

.ap__head{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding:clamp(18px,2.4vw,28px) 0 14px;border-bottom:2px solid var(--orange)}
.ap__head h2{margin:0;font-size:clamp(28px,2.9vw,40px);font-weight:700;letter-spacing:0}
.ap__filters{display:flex;gap:12px;flex-wrap:wrap}

.dd{position:relative}
.dd__btn{appearance:none;cursor:pointer;font:inherit;font-size:17px;font-weight:700;color:var(--orange);
  background:#fff;border:1.6px solid var(--orange);border-radius:999px;padding:9px 20px;display:inline-flex;align-items:center;gap:10px;
  transition:background .25s,color .25s,box-shadow .25s}
.dd__btn i{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid currentColor;transition:transform .25s}
.dd__btn:hover,.dd.is-open .dd__btn{background:var(--orange);color:#fff;box-shadow:0 8px 22px rgba(255, 103, 0,.34)}
.dd.is-open .dd__btn i{transform:rotate(180deg)}
.dd__pop{position:absolute;top:calc(100% + 8px);right:0;width:min(280px,86vw);background:#fff;border:1px solid #e7e2d9;
  border-radius:14px;box-shadow:0 18px 46px rgba(20,40,60,.18);padding:10px;z-index:30;
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .22s,transform .22s,visibility .22s}
.dd.is-open .dd__pop{opacity:1;visibility:visible;transform:none}
.dd__search{width:100%;border:1.4px solid #e7e2d9;border-radius:10px;padding:9px 12px;font:inherit;font-size:15px;outline:none;color:var(--ink)}
.dd__search:focus{border-color:var(--orange)}
.dd__list{max-height:260px;overflow:auto;margin-top:8px}
.dd__list button{display:block;width:100%;text-align:left;appearance:none;border:0;background:none;cursor:pointer;font:inherit;
  font-size:15.5px;color:var(--ink);padding:8px 12px;border-radius:9px;transition:background .18s,color .18s}
.dd__list button:hover,.dd__list button.is-sel{background:var(--orange);color:#fff}
.dd__empty{padding:10px 12px;font-size:14.5px;color:var(--ink-soft)}

.ap__tags{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(8px,1vw,14px);padding:clamp(22px,3vw,34px) 0 clamp(26px,3.4vw,40px)}
.ptag{appearance:none;cursor:pointer;font:inherit;font-size:17px;font-weight:700;color:var(--orange);background:#fff;
  border:1.6px solid var(--orange);border-radius:8px;padding:9px 20px;transition:background .25s,color .25s,box-shadow .25s,transform .2s}
.ptag:hover{background:var(--orange);color:#fff;box-shadow:0 8px 20px rgba(255, 103, 0,.32);transform:translateY(-2px)}
.ptag.is-on{background:var(--orange);color:#fff;box-shadow:0 8px 20px rgba(255, 103, 0,.32)}

.ap__grid{display:flex;gap:clamp(18px,2.2vw,38px);align-items:flex-start}
.ap__col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:clamp(24px,2.6vw,42px)}
.pcard{display:block;text-decoration:none;color:inherit;background:#fff;border:1px solid #efeae2;border-radius:4px;
  box-shadow:0 6px 18px rgba(20,40,60,.07);overflow:hidden;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s}
.pcard:hover{transform:translateY(-8px);box-shadow:0 22px 44px rgba(20,40,60,.2)}
.pcard__img{position:relative;overflow:visible;background:#dfdcd6;z-index:2}
.pcard__frame{position:relative;overflow:hidden;display:block;background:#dfdcd6}
.pcard__frame img{width:100%;height:auto;display:block;transition:transform 1.1s cubic-bezier(.2,.8,.2,1),filter .5s}
.pcard:hover .pcard__frame img{transform:scale(1.09);filter:saturate(1.12) brightness(1.05)}
.pcard__frame::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.45) 50%,rgba(255,255,255,0));
  transform:skewX(-12deg);opacity:0}
.pcard:hover .pcard__frame::after{animation:pshine .9s ease-out}
@keyframes pshine{0%{left:-70%;opacity:0}18%{opacity:1}100%{left:120%;opacity:0}}
.pcard__chip{position:absolute;left:50%;bottom:0;transform:translate(-50%,50%);background:var(--orange);color:#fff;
  font-size:15.5px;font-weight:700;padding:6px 22px;white-space:nowrap;z-index:5;border-radius:2px;line-height:1.35;
  box-shadow:0 4px 14px rgba(0,0,0,.22);
  transition:padding .35s ease,box-shadow .35s ease,letter-spacing .35s ease,transform .35s ease}
.pcard:hover .pcard__chip{padding:6px 30px;letter-spacing:.02em;transform:translate(-50%,50%) translateY(-3px);
  box-shadow:0 10px 24px rgba(255, 103, 0,.5)}
.pcard__body{padding:34px 22px 26px}
.pcard h3{margin:0;font-size:21px;font-weight:400;line-height:1.5;color:var(--ink);transition:color .3s}
.pcard:hover h3{color:var(--orange)}
.pcard time{display:block;margin-top:18px;font-size:14.5px;letter-spacing:.06em;color:#9b9b9b}

.ap__empty{width:100%;text-align:center;color:var(--ink-soft);font-size:17px;padding:50px 0}
/* ระหว่างรอเนื้อหาชุดใหม่ (กดกรอง/สลับมุมมอง/เปลี่ยนหน้า) — จางเฉพาะส่วนที่กำลังเปลี่ยน
   ปุ่มตัวกรองยังคมชัดและกดต่อได้ทันที ความสูงไม่ขยับ หน้าจึงไม่กระตุก */
.ap__in.is-loading .ap__grid,
.ap__in.is-loading .ap__pager,
.ap__in.is-loading .ap__empty{opacity:.4;pointer-events:none}
.ap__in .ap__grid,
.ap__in .ap__pager,
.ap__in .ap__empty{transition:opacity .2s ease}
.ap__pager{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;padding-top:clamp(34px,4vw,54px)}
.ppage{appearance:none;cursor:pointer;font:inherit;font-size:16px;font-weight:700;min-width:42px;height:42px;padding:0 12px;
  border:1.6px solid var(--orange);border-radius:6px;background:#fff;color:var(--orange);
  transition:background .25s,color .25s,box-shadow .25s,transform .2s}
.ppage:hover{background:var(--orange);color:#fff;transform:translateY(-2px);box-shadow:0 8px 18px rgba(255, 103, 0,.3)}
.ppage.is-on{background:var(--orange);color:#fff}
.ppage:disabled{opacity:.35;cursor:default;transform:none;box-shadow:none;background:#fff;color:var(--orange)}

/* ================= SECTION : นิตยสาร ================= */
.mag{position:relative;z-index:6;background:#fff;color:var(--ink);padding:clamp(46px,6vw,86px) 0 0}
body.view-all .mag,body.view-travel .mag{display:none}
.mag__title{text-align:center;color:var(--orange);font-weight:700;letter-spacing:.14em;
  font-size:clamp(26px,3.2vw,42px);margin:0 0 clamp(52px,7.6vw,108px)}
.mag__feature{max-width:1280px;margin:0 auto;padding:0 clamp(20px,5vw,60px) clamp(40px,6vw,80px);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,60px);align-items:center}
@media(max-width:820px){.mag__feature{grid-template-columns:1fr;text-align:center;justify-items:center}}
/* จอแคบ เนื้อหาเรียงคอลัมน์เดียว ป้าย "ปีที่ · ฉบับที่" จึงขึ้นมาชิดแถบนำทางจนติดกัน เว้นระยะไว้ */
@media(max-width:820px){.mag > .ap__crumb--inset{padding-bottom:22px}}
.mag__info h3{margin:0;font-size:clamp(24px,2.4vw,34px);font-weight:700;color:var(--orange)}
.mag__info .issue{margin:6px 0 0;font-size:clamp(17px,1.5vw,22px);color:var(--orange)}
.mag__info p{margin:22px 0 0;font-size:clamp(15px,1.15vw,17.5px);line-height:1.95;color:#383838;max-width:44ch}
.mag__buy{display:flex;align-items:center;gap:clamp(16px,2vw,30px);margin-top:clamp(24px,3vw,42px);flex-wrap:wrap}
@media(max-width:820px){.mag__buy{justify-content:center}}
.mag__price{font-size:clamp(24px,2.4vw,34px);font-weight:700;color:var(--orange)}
.btn-orange{display:inline-flex;align-items:center;gap:10px;border:0;cursor:pointer;font:inherit;
  font-size:clamp(15px,1.2vw,18px);font-weight:700;color:#fff;background:var(--orange);
  border-radius:999px;padding:13px 30px;text-decoration:none;
  transition:box-shadow .3s,transform .25s,filter .3s}
.btn-orange:hover{box-shadow:0 12px 28px rgba(255, 103, 0,.45);transform:translateY(-2px);filter:brightness(1.06)}

.mag__coverwrap{display:flex;justify-content:center;perspective:1600px}
.mag__cover{position:relative;width:min(340px,74vw);cursor:pointer;background:none;border:0;padding:0;
  transform:rotate(6deg);transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.2,.8,.2,1),filter .5s}
.mag__cover img{width:100%;display:block;box-shadow:0 26px 60px rgba(20,40,60,.34)}
.mag__cover:hover{transform:rotate(3deg) rotateY(-12deg) scale(1.05)}
.mag__cover::after{content:"คลิกเพื่อเปิดอ่าน";position:absolute;left:50%;bottom:-42px;transform:translateX(-50%);
  white-space:nowrap;font-size:14.5px;color:var(--orange);opacity:0;transition:opacity .35s}
.mag__cover:hover::after{opacity:1}

/* ---- ชั้นวางนิตยสาร ---- */
.shelfsec{background:linear-gradient(180deg,#fafafa,#f1f1f1 45%,#ededed);padding:clamp(34px,4vw,60px) clamp(16px,4vw,50px) clamp(46px,6vw,80px)}
.shelf__filter{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:clamp(30px,4vw,56px)}
.shelf__filter>span{font-size:clamp(17px,1.5vw,21px);font-weight:700;color:#4a4a4a;letter-spacing:.02em}
.shelf__wrap{max-width:1320px;margin:0 auto;perspective:1800px}
.shelf{position:relative;margin-bottom:clamp(34px,4.4vw,62px)}
.shelf__row{display:flex;justify-content:center;align-items:flex-end;gap:clamp(14px,2.6vw,48px);
  padding:0 clamp(10px,3vw,50px);transform-style:preserve-3d}
.shelf__board{height:16px;border-radius:4px;position:relative;
  background:linear-gradient(180deg,#ffffff,#f4f4f4 42%,#e2e2e2 78%,#d3d3d3);
  box-shadow:0 22px 38px rgba(20,40,60,.18),0 6px 12px rgba(20,40,60,.1),
             inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(0,0,0,.06)}
.shelf__board::before{content:"";position:absolute;left:3%;right:3%;top:-34px;height:34px;pointer-events:none;
  background:radial-gradient(70% 100% at 50% 100%,rgba(255,163,80,.4),rgba(255,163,80,.08) 55%,rgba(255,163,80,0));
  filter:blur(2px)}
.shelf__board::after{content:"";position:absolute;left:2%;right:2%;top:100%;height:34px;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,40,60,.16),rgba(20,40,60,0));filter:blur(6px)}
.sbookwrap{position:relative;flex:0 0 auto;width:clamp(120px,15vw,190px);perspective:1400px}
.sbook{position:relative;display:block;width:100%;cursor:pointer;background:none;border:0;padding:0;
  transform-style:preserve-3d;transition:transform .55s cubic-bezier(.2,.8,.2,1),filter .5s;
  transform:rotateY(0deg)}
.sbook img{width:100%;height:auto;display:block;position:relative;z-index:2;
  box-shadow:0 14px 22px rgba(20,40,60,.28),0 2px 4px rgba(20,40,60,.18);transition:box-shadow .5s,filter .5s}
.sbook__spine{position:absolute;left:0;top:1.5%;height:97%;width:13px;transform-origin:left center;
  transform:rotateY(-90deg);background:linear-gradient(90deg,#cfcac1,#f2efe9 45%,#dcd7cd);
  box-shadow:inset -2px 0 6px rgba(0,0,0,.16);opacity:0;transition:opacity .5s}
.sbook__floor{position:absolute;left:6%;right:6%;bottom:-10px;height:14px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(20,40,60,.34),rgba(20,40,60,0));filter:blur(3px);
  transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .55s}
.sbookwrap:hover .sbook{transform:translateY(-30px) translateZ(70px) rotateY(19deg) scale(1.04)}
.sbookwrap:hover{z-index:6}
.sbookwrap:hover .sbook img{box-shadow:34px 40px 60px rgba(20,40,60,.34),0 4px 10px rgba(20,40,60,.2)}
.sbookwrap:hover .sbook__spine{opacity:1}
.sbookwrap:hover .sbook__floor{transform:translateY(16px) scale(1.18);opacity:.5}
.sbook.is-sold img{filter:grayscale(.74) brightness(1.1) contrast(.88)}
.badge{position:absolute;display:grid;place-items:center;border-radius:50%;font-weight:700;color:#fff;
  z-index:20;pointer-events:none}
/* ป้าย "ใหม่" ใช้สีส้มของแบรนด์ ไม่ใช่สีแดง — เงาใต้ป้ายไล่ตามสีเดียวกัน
   ไม่งั้นจะเหลือเงาแดงค้างอยู่ใต้ป้ายส้ม เห็นเป็นขอบสีเพี้ยน */
.badge--new{left:-12px;top:-16px;width:clamp(46px,5.6vw,64px);height:clamp(46px,5.6vw,64px);background:#ff6700;
  font-size:clamp(13px,1.3vw,16px);box-shadow:0 10px 20px rgba(255,103,0,.45)}
.badge--sold{left:50%;top:46%;transform:translate(-50%,-50%);width:64%;aspect-ratio:1;background:rgba(110,110,110,.76);
  font-size:clamp(13px,1.35vw,18px);line-height:1.15;letter-spacing:.04em;text-align:center;backdrop-filter:blur(1px)}
.shelf__more{display:flex;justify-content:center;margin-top:clamp(16px,2vw,30px)}

/* ---- ตัวอ่านนิตยสาร ---- */
.reader{position:fixed;inset:0;z-index:200;background:rgba(8,11,15,.94);display:none;
  align-items:center;justify-content:center;padding:clamp(14px,3vw,40px);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.reader.is-on{display:flex}
.reader__stage{position:relative;width:min(1400px,96vw);height:min(84vh,860px);perspective:2600px;
  display:flex;align-items:center;justify-content:center}
.rpage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  transform-origin:left center;backface-visibility:hidden;will-change:transform,opacity}
.rpage img{max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 30px 80px rgba(0,0,0,.55)}
.rpage.is-cover img{max-height:78%}
.rpage.is-out{animation:pageOut .85s cubic-bezier(.4,.05,.25,1) forwards}
.rpage.is-in{animation:pageIn .85s cubic-bezier(.2,.8,.2,1) forwards}
.rpage.is-back{animation:pageBack .8s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes pageOut{from{transform:rotateY(0) translateX(0);opacity:1}
  60%{opacity:1}to{transform:rotateY(-118deg) translateX(-6%);opacity:0}}
@keyframes pageIn{from{transform:scale(.94) translateX(4%);opacity:0}to{transform:none;opacity:1}}
@keyframes pageBack{from{transform:rotateY(96deg) translateX(-8%);opacity:0}to{transform:none;opacity:1}}
.reader__end{width:min(820px,92vw);text-align:center;color:#fff;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);border-radius:18px;padding:clamp(30px,4vw,54px);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.reader__end h4{margin:0 0 10px;font-size:clamp(22px,2.4vw,32px);font-weight:700}
.reader__end p{margin:0 0 8px;font-size:clamp(15px,1.25vw,18px);opacity:.92;line-height:1.8}
@media(min-width:760px){.reader__end p.one{white-space:nowrap}}
.reader__end .sub{display:block;margin-bottom:26px;font-size:14.5px;opacity:.6}
.reader__nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;border:0;
  cursor:pointer;z-index:6;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.45);
  transition:background .3s,opacity .3s;font-size:24px;line-height:1}
.reader__nav:hover{background:rgba(255,255,255,.3)}
.reader__nav:disabled{opacity:.25;cursor:default}
.reader__nav--prev{left:-6px}.reader__nav--next{right:-6px}
@media(min-width:900px){.reader__nav--prev{left:-64px}.reader__nav--next{right:-64px}}
.reader__close{position:fixed;top:18px;right:20px;z-index:8;width:48px;height:48px;border-radius:50%;border:0;cursor:pointer;
  color:#fff;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.45);font-size:22px;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:background .3s,transform .3s}
.reader__close:hover{background:rgba(255,255,255,.3);transform:rotate(90deg)}
.reader__count{position:absolute;left:50%;bottom:-38px;transform:translateX(-50%);color:rgba(255,255,255,.7);
  font-size:14.5px;letter-spacing:.14em;z-index:6}

/* ================= หน้ารวมนิตยสาร : hero ชั้นหนังสือ ================= */
.maghero{display:none;background:#fff;color:var(--ink);padding:clamp(92px,10vh,132px) 0 clamp(10px,2vw,30px);position:relative;z-index:6;overflow:hidden}
body.view-mag .maghero{display:block}
body.view-mag .track,body.view-mag .ads,body.view-mag .allwrap,
body.view-mag .stories-sec,body.view-mag .ap{display:none}
body.view-mag .shelf__more{display:none}
body.view-mag #magPager{display:flex}
#magPager{display:none}

.mh__head{max-width:1400px;margin:0 auto;padding:0 clamp(20px,5vw,60px) clamp(18px,2.6vw,34px);text-align:center}
.mh__kicker{display:block;font-size:13px;letter-spacing:.36em;color:var(--orange);text-transform:uppercase;margin-bottom:18px}
.mh__head h1{margin:0;font-size:clamp(30px,4vw,58px);font-weight:700;line-height:1.32;letter-spacing:-.01em}
.mh__head p{margin:18px auto 0;max-width:none;font-size:clamp(13px,1.15vw,18px);line-height:1.9;color:#6b6b6b}
@media(min-width:760px){.mh__head p{white-space:nowrap}}

.mh__shelf{position:relative;padding:0}
.mh__viewport{overflow:hidden;cursor:grab;padding:clamp(56px,6vw,96px) 0 clamp(120px,12vw,168px);-webkit-user-select:none;user-select:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.mh__viewport.is-drag{cursor:grabbing}
.mh__track{display:flex;align-items:center;gap:clamp(20px,2.4vw,44px);padding:0;
  will-change:transform;perspective:1600px}
.mh__item{position:relative;flex:0 0 auto;width:clamp(184px,18.6vw,264px);perspective:2200px;
  opacity:0;transform:translateY(46px) scale(.94);transition:width .5s cubic-bezier(.2,.8,.2,1)}
.maghero.is-open .mh__item,
body.view-mag .maghero .mh__item{animation:bookIn 1.15s cubic-bezier(.22,.85,.24,1) forwards}
@keyframes bookIn{from{opacity:0;transform:translateY(46px) translateZ(-220px) scale(.94)}
  to{opacity:1;transform:none}}
.b3d{position:relative;display:block;width:100%;background:none;border:0;padding:0;cursor:pointer;
  transform-style:preserve-3d;transform:rotateY(9deg);transform-origin:bottom center;
  transition:transform .6s cubic-bezier(.2,.8,.2,1),filter .5s}
.b3d img{width:100%;height:auto;display:block;position:relative;z-index:2;border-radius:1px 3px 3px 1px;
  box-shadow:0 10px 18px rgba(20,40,60,.2),0 2px 5px rgba(20,40,60,.14);transition:box-shadow .55s,filter .55s}
.b3d__spine{position:absolute;left:0;top:1%;height:98%;width:22px;transform-origin:left center;transform:rotateY(-90deg);
  background:linear-gradient(90deg,#c8c2b8,#f6f3ed 40%,#ddd7cc);box-shadow:inset -3px 0 8px rgba(0,0,0,.2)}
.b3d__edge{position:absolute;right:0;top:1.5%;height:97%;width:12px;transform-origin:right center;transform:rotateY(90deg);
  background:repeating-linear-gradient(180deg,#fff 0 1.4px,#e2ded4 1.4px 2.8px)}
.b3d__floor{position:absolute;left:0;right:0;bottom:-11px;height:14px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(20,40,60,.34),rgba(20,40,60,0));filter:blur(4px);
  transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .6s}
.mh__item:hover{z-index:8}
.mh__item:hover .b3d{transform:rotateY(14deg) translateY(-26px) translateZ(70px) scale(1.16)}
.mh__item:hover .b3d img{box-shadow:26px 44px 70px rgba(20,40,60,.34),0 6px 14px rgba(20,40,60,.22);filter:saturate(1.05)}
.mh__item:hover .b3d__floor{transform:translateY(22px) scaleX(1.35) scaleY(1.1);opacity:.4}
.mh__cap{position:absolute;left:50%;top:100%;transform:translate(-50%,8px);width:max(120%,180px);
  margin-top:22px;text-align:center;opacity:0;pointer-events:none;
  transition:opacity .4s ease,transform .4s cubic-bezier(.2,.8,.2,1)}
.mh__item:hover .mh__cap{opacity:1;transform:translate(-50%,0)}
.mh__cap b{display:block;font-size:16px;font-weight:700;line-height:1.5}
.mh__cap span{display:block;font-size:13.5px;color:#8c8c8c;margin-top:2px}
.mh__hint{text-align:center;margin-top:-40px;font-size:13.5px;letter-spacing:.2em;color:#9b9b9b}

.ap__view{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:16px 0 0}
.ap__view .lbl{display:inline-flex;align-items:center;gap:8px;font-size:15.5px;color:#6b6b6b;margin-right:4px}
.ap__view .lbl svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.vsw{appearance:none;cursor:pointer;border:1.6px solid #e0dbd2;background:#fff;border-radius:10px;width:44px;height:44px;
  display:grid;place-items:center;color:#8c8c8c;transition:border-color .25s,color .25s,background .25s,box-shadow .25s,transform .2s}
.vsw svg{width:20px;height:20px;fill:currentColor}
.vsw:hover{color:var(--orange);border-color:var(--orange);transform:translateY(-2px)}
.vsw.is-on{background:var(--orange);border-color:var(--orange);color:#fff;box-shadow:0 8px 18px rgba(255, 103, 0,.32)}
.ap__grid.is-list .pcard__frame{aspect-ratio:4/3}
.ap__grid.is-list .pcard__frame img{height:100%;object-fit:cover}
.ap__grid.is-list .pcard h3{min-height:3em}

.ap__grid.is-full{width:100vw;margin-left:calc(50% - 50vw);gap:10px;padding:0 10px}
.ap__grid.is-full .ap__col{gap:10px}
.ap__grid.is-full .pcard{position:relative;border:0;border-radius:3px;overflow:hidden;background:#141414;
  box-shadow:0 14px 30px rgba(20,40,60,.16)}
.ap__grid.is-full .pcard:hover{transform:translateY(-6px);box-shadow:0 26px 52px rgba(20,40,60,.3)}
.ap__grid.is-full .pcard__img{overflow:hidden}
.ap__grid.is-full .pcard__frame{aspect-ratio:3/4.1}
.ap__grid.is-full .pcard__frame img{height:100%;object-fit:cover}
.ap__grid.is-full .pcard__frame::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,10,15,.34),rgba(6,10,15,.04) 34%,rgba(6,10,15,.46) 62%,rgba(6,10,15,.86))}
.ap__grid.is-full .pcard__chip{top:clamp(14px,1.4vw,22px);bottom:auto;left:clamp(14px,1.4vw,22px);transform:none;
  font-size:clamp(13px,1vw,15px);padding:5px 16px;box-shadow:0 6px 18px rgba(0,0,0,.32)}
.ap__grid.is-full .pcard:hover .pcard__chip{transform:translateY(-3px);padding:5px 22px}
.ap__grid.is-full .pcard__body{position:absolute;left:0;right:0;bottom:0;z-index:4;
  padding:clamp(18px,1.8vw,28px);display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.ap__grid.is-full .pcard h3{color:#fff;font-size:clamp(17px,1.35vw,22px);line-height:1.48;
  text-shadow:0 3px 22px rgba(0,0,0,.75),0 1px 4px rgba(0,0,0,.5)}
.ap__grid.is-full .pcard:hover h3{color:#fff}
.ap__grid.is-full .pcard time{margin-top:0;color:rgba(255,255,255,.8);font-size:13.5px;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.ap__grid.is-full .pcard__body::after{content:"อ่านเรื่องนี้ →";margin-top:4px;font-size:14px;color:#fff;
  border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:2px;transition:color .3s,border-color .3s,transform .3s}
.ap__grid.is-full .pcard:hover .pcard__body::after{color:var(--orange-hi);border-color:var(--orange-hi);transform:translateX(4px)}
@media(max-width:820px){.ap__grid.is-full .pcard__frame{aspect-ratio:3/3.6}}

/* ================= หน้าตัวอย่างบทความ ================= */
.art{display:none;background:#fff;color:var(--ink);position:relative;z-index:6}
body.view-article .art{display:block}
body.view-article .track,body.view-article .ads,body.view-article .allwrap,
body.view-article .stories-sec,body.view-article .ap,
body.view-article .mag,body.view-article .maghero{display:none}

/* ภาพหัวเรื่องบทความ: กรอบสี่เหลี่ยมผืนผ้าเต็มความกว้างจอ ภาพขยายเต็มแล้วครอบตัด
   สูงตามจอแต่ไม่เกิน 900px เพื่อให้ยังเห็นว่ามีเนื้อหาอยู่ข้างล่าง */
.art__hero{position:relative;width:100vw;margin-left:calc(50% - 50vw);
  height:clamp(420px,86vh,900px);
  overflow:hidden;background:#1a1d20}
.art__hero img{width:100%;height:100%;object-fit:cover}
.art__hero::after{content:"";position:absolute;inset:0;z-index:2;background:
  linear-gradient(180deg,rgba(8,12,18,.52),rgba(8,12,18,.40) 40%,rgba(8,12,18,.62)),
  radial-gradient(ellipse 72% 46% at 50% 50%,rgba(8,12,18,.40),rgba(8,12,18,0) 70%)}
.art__herobody{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;color:#fff;padding:clamp(24px,5vw,70px);gap:clamp(12px,1.4vw,18px)}
.art__herobody h1{margin:0;font-weight:700;font-size:clamp(30px,4.6vw,70px);line-height:1.25;
  text-shadow:0 4px 40px rgba(0,0,0,.75),0 2px 6px rgba(0,0,0,.45)}
.art__herobody p{margin:0;font-size:clamp(14px,1.15vw,18px);line-height:1.8;opacity:.96;
  text-shadow:0 2px 18px rgba(0,0,0,.75)}

.art__body{max-width:960px;margin:0 auto;padding:clamp(40px,5vw,72px) clamp(20px,4vw,40px) clamp(40px,5vw,70px)}
.art__body p{margin:0 0 1.6em;font-size:clamp(15px,1.15vw,17.5px);line-height:2.05;color:#2f2f2f}
.art__body p:last-of-type{margin-bottom:0}
.art__fig{margin:clamp(26px,3vw,40px) 0}
.art__fig img{width:100%;display:block;border-radius:2px;box-shadow:0 14px 34px rgba(20,40,60,.14)}
.art__h3{margin:clamp(34px,4vw,52px) 0 clamp(16px,2vw,24px);font-size:clamp(22px,2.2vw,30px);font-weight:400;color:var(--ink)}
/* รูปคู่ = รูปแนวตั้งสองใบวางเคียงกัน
   บังคับกรอบ 3:4 เท่ากันทั้งสองใบ แล้วครอบรูปให้เต็มกรอบจากจุดกึ่งกลาง
   แอดมินจะอัปรูปขนาดไหนมาก็ได้ ระบบทำให้สูงเท่ากันและอยู่ระนาบเดียวกันเสมอ
   (ของเดิมใช้ height:100% ซึ่งในกริดที่ความสูงแถวยังไม่นิ่ง เบราว์เซอร์ตีเป็น auto
    รูปสองใบจึงสูงไม่เท่ากันเวลาสัดส่วนต้นฉบับต่างกัน) */
.art__duo{
  display:grid;grid-template-columns:1fr 1fr;align-items:start;
  gap:clamp(10px,1.4vw,18px);margin:clamp(26px,3vw,40px) 0
}
.art__duo img{
  width:100%;aspect-ratio:3/4;height:auto;object-fit:cover;object-position:center;
  display:block;border-radius:2px;box-shadow:0 14px 34px rgba(20,40,60,.14)
}
/* จอเล็กยังวางคู่กันเหมือนเดิม เพราะเป็นภาพชุดเดียวกัน แยกบรรทัดแล้วความเป็นคู่หาย
   กรอบ 3:4 ย่อตามความกว้างคอลัมน์อยู่แล้ว จึงไม่สูงเกินจอ */
@media(max-width:560px){.art__duo{gap:8px}}
.art__meta{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.art__meta li{display:flex;align-items:flex-start;gap:12px;font-size:clamp(14.5px,1.1vw,16.5px);color:#383838;line-height:1.8}
.art__meta svg{width:19px;height:19px;flex:0 0 auto;margin-top:3px;fill:none;stroke:#6b6b6b;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.art__meta a{color:#383838;text-decoration:none;word-break:break-all;transition:color .25s}
.art__meta a:hover{color:var(--orange)}
.art__rule{height:1px;background:var(--orange);opacity:.55;margin:clamp(34px,4vw,54px) 0 clamp(22px,2.6vw,32px)}
.art__credit{text-align:center;font-size:clamp(14px,1.05vw,16px);line-height:2;color:#6b6b6b}

.art__rel{background:#f2f2f2;padding:clamp(40px,5vw,72px) clamp(20px,4vw,60px) clamp(48px,6vw,84px)}
.art__rel__in{max-width:1560px;margin:0 auto}
/* หัวข้อของบล็อกนี้เท่านั้น — ต้องเจาะจงเป็นลูกตรงของ .art__rel__in
   ถ้าเขียนกว้าง ๆ ว่า .art__rel h3 มันจะไปโดนหัวเรื่องในการ์ดด้วย (ก็เป็น h3 เหมือนกัน)
   แล้วเขียนทีหลัง .pcard h3 ที่มีน้ำหนักเท่ากัน หัวเรื่องการ์ดจึงโตตาม 32px ไปด้วย */
.art__rel__in > h3{margin:0 0 clamp(20px,2.6vw,34px);font-size:clamp(22px,2.4vw,32px);font-weight:400}
.art__rel__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,32px)}
@media(max-width:900px){.art__rel__grid{grid-template-columns:1fr}}

/* ================= Section VDO / หน้ารวมวิดีโอ ================= */
.vdo{position:relative;z-index:6;background:#fff}
body.view-all .vdo,body.view-travel .vdo,body.view-mag .vdo,body.view-article .vdo{display:none}
.vhero{position:relative;width:100vw;margin-left:calc(50% - 50vw);height:100vh;height:100dvh;min-height:600px;
  overflow:hidden;background:#0d0d0d}
.vhero__media{position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat}
.vhero__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,10,14,.5),rgba(6,10,14,.24) 40%,rgba(6,10,14,.72))}
.vhero__body{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;color:#fff;padding:clamp(24px,5vw,80px);gap:clamp(10px,1.2vw,16px)}
.vhero__body h2{margin:0;font-size:clamp(26px,3.4vw,52px);line-height:1.34;font-weight:400;
  text-shadow:0 4px 40px rgba(0,0,0,.7),0 2px 6px rgba(0,0,0,.45)}
.vhero__body h2 b{font-weight:700}
.vhero__body .sub{font-size:clamp(15px,1.3vw,20px);opacity:.94;text-shadow:0 2px 18px rgba(0,0,0,.7)}
/* แบนเนอร์วิดีโอที่กดเล่นแล้ว — ตัวเล่นเต็มกรอบแบนเนอร์เท่าภาพปก ไม่มีแถบว่างด้านบน
   วิดีโอเป็น 16:9 แต่แบนเนอร์เป็นสัดส่วนของจอ YouTube จึงเติมขอบดำซ้าย-ขวาให้เอง ซึ่งตั้งใจให้เป็นแบบนั้น
   ซ่อนหัวเรื่องกับปุ่มระหว่างเล่น */
.vhero{--vtop:clamp(76px,8vw,112px)}
.vhero__frame{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:4;background:#000}
.vhero.is-live{background:#000}
.vhero.is-live .vhero__body,.vhero.is-live .vhero__scrim,.vhero.is-live .vhero__media{visibility:hidden}
.vhero__close{position:absolute;right:clamp(12px,1.6vw,24px);top:calc(var(--vtop) + 12px);z-index:5;
  width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.5);cursor:pointer;
  display:grid;place-items:center;color:#fff;background:rgba(12,16,22,.55);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .25s,border-color .25s}
.vhero__close[hidden]{display:none}
.vhero__close:hover,.vhero__close:focus-visible{background:var(--orange);border-color:var(--orange);color:#fff}
/* ระหว่างเล่นเป็นปุ่มขาว เด่นบนวิดีโอทุกสี และเข้ากับแถบเมนูพื้นขาวด้านบน */
.vhero.is-live .vhero__close{background:#fff;color:var(--ink);border-color:rgba(21,24,28,.22);box-shadow:0 4px 14px rgba(20,40,60,.12)}
.vhero.is-live .vhero__close:hover,.vhero.is-live .vhero__close:focus-visible{background:var(--orange);border-color:var(--orange);color:#fff}
.vhero__close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.glassbtn{display:inline-flex;align-items:center;gap:12px;margin-top:clamp(14px,2vw,26px);cursor:pointer;
  padding:13px 30px;border-radius:999px;text-decoration:none;border:1.5px solid rgba(255,255,255,.65);
  background:rgba(255,255,255,.14);color:#fff;font:inherit;font-size:clamp(15px,1.2vw,18px);font-weight:700;
  -webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);
  box-shadow:0 10px 30px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.5);
  transition:background .3s,color .3s,border-color .3s,box-shadow .3s,transform .25s}
.glassbtn:hover,.glassbtn:focus-visible{background:var(--orange);border-color:var(--orange);color:#fff;
  transform:translateY(-2px);box-shadow:0 14px 32px rgba(255, 103, 0,.5)}
.glassbtn .ic{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.9);display:grid;place-items:center;flex:0 0 auto}
.glassbtn .ic::after{content:"";width:0;height:0;border-left:9px solid #000000;border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:2px}
.glassbtn:hover .ic{background:#fff}

.vstrip{display:grid;width:100vw;margin-left:calc(50% - 50vw);gap:0;background:#0d0d0d}
.vstrip--2{grid-template-columns:1fr 1fr}
.vstrip--4{grid-template-columns:repeat(4,1fr);position:relative}
@media(max-width:820px){.vstrip--2{grid-template-columns:1fr}.vstrip--4{grid-template-columns:1fr 1fr}}
.clip{position:relative;display:block;width:100%;padding:0;border:0;background:#111;cursor:pointer;overflow:hidden}
.clip__media{position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat;
  transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .5s}
.clip:hover .clip__media{transform:scale(1.04);filter:brightness(1.06)}
.clip.is-live{cursor:default}
.clip__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:clamp(52px,5vw,76px);height:clamp(52px,5vw,76px);
  border-radius:50%;display:grid;place-items:center;z-index:2;pointer-events:none;
  background:rgba(255,255,255,.2);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7);transition:opacity .35s,transform .35s,background .35s}
.clip__play::after{content:"";width:0;height:0;border-left:clamp(15px,1.5vw,20px) solid #fff;
  border-top:clamp(10px,1vw,13px) solid transparent;border-bottom:clamp(10px,1vw,13px) solid transparent;margin-left:5px}
.clip:hover .clip__play{background:rgba(255, 103, 0,.85);transform:translate(-50%,-50%) scale(1.08)}
.clip.is-playing .clip__play{opacity:0;transform:translate(-50%,-50%) scale(.7)}
.vstrip__btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5}
.vstrip__btn .glassbtn{margin-top:0}

/* ---- หน้ารวมวิดีโอ ---- */
.vpage{display:none;background:#fff;color:var(--ink);position:relative;z-index:6}
body.view-video .vpage{display:block}
body.view-video .track,body.view-video .ads,body.view-video .allwrap,body.view-video .stories-sec,
body.view-video .ap,body.view-video .mag,body.view-video .maghero,body.view-video .art,body.view-video .vdo{display:none}
.vpage__in{max-width:1400px;margin:0 auto;padding:clamp(44px,5vw,76px) clamp(20px,3.4vw,56px) 0}
.vpage__head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding-bottom:14px;border-bottom:2px solid var(--orange)}
.vpage__head h3{margin:0;font-size:clamp(24px,2.6vw,36px);font-weight:700}
.vpage__head a{font-size:clamp(14px,1.1vw,16.5px);color:#6b6b6b;text-decoration:none;transition:color .28s}
.vpage__head a:hover{color:var(--orange)}
.vgrid{display:grid;gap:clamp(16px,1.8vw,28px);margin-top:clamp(22px,2.6vw,38px)}
.vgrid+.vgrid{margin-top:clamp(26px,3.2vw,46px)}
.vpage__head+.vgrid{margin-top:clamp(24px,3vw,42px)}
.vpage__head:not(:first-child){margin-top:clamp(30px,4vw,58px)}
.vgrid--3{grid-template-columns:repeat(3,1fr)}
.vgrid--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.vgrid--3{grid-template-columns:1fr 1fr}.vgrid--4{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.vgrid--3,.vgrid--4{grid-template-columns:1fr}}
.vcard{display:block;background:none;border:0;padding:0;cursor:pointer;text-align:left}
.vcard .clip{border-radius:3px;background:#0f0f0f;box-shadow:0 10px 24px rgba(20,40,60,.14);transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s}
.vcard:hover .clip{transform:translateY(-6px);box-shadow:0 20px 40px rgba(20,40,60,.22)}
.vcard b{display:block;margin-top:14px;font-size:clamp(15px,1.2vw,17.5px);font-weight:400;color:var(--ink);transition:color .28s}
.vcard:hover b{color:var(--orange)}
.vpage__more{display:flex;justify-content:center;padding:clamp(30px,4vw,54px) 0 clamp(10px,2vw,20px)}
.vpage__more .glassbtn{color:var(--orange);border-color:var(--orange);background:rgba(255,255,255,.5);
  box-shadow:0 8px 22px rgba(20,40,60,.12);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.vpage__more .glassbtn:hover{background:var(--orange);color:#fff;border-color:var(--orange)}
.vpage__foot{padding-bottom:clamp(50px,6vw,90px)}

/* ================= หน้าเที่ยวกับ อ.ส.ท. ================= */
.tour{display:none;background:#fff;color:var(--ink);position:relative;z-index:6}
body.view-tour .tour{display:block}
body.view-tour .track,body.view-tour .ads,body.view-tour .allwrap,body.view-tour .stories-sec,
body.view-tour .ap,body.view-tour .mag,body.view-tour .maghero,body.view-tour .art,
body.view-tour .vdo,body.view-tour .vpage{display:none}

.tuhero{position:relative;width:100vw;margin-left:calc(50% - 50vw);height:100vh;height:100dvh;min-height:620px;overflow:hidden;background:#141414;cursor:grab}
.tuhero.is-drag{cursor:grabbing}
.tuhero__track{display:flex;height:100%;will-change:transform;transition:transform .85s cubic-bezier(.22,.8,.2,1)}
.tuhero__track.no-anim{transition:none}
.tuhero__slide{position:relative;flex:0 0 100%;height:100%;overflow:hidden}
.tuhero__slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.06)}
.tuhero__slide.is-on img{animation:hlpan 26s ease-in-out infinite alternate}
.tuhero__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,11,17,.5),rgba(6,11,17,.2) 34%,rgba(6,11,17,.48) 62%,rgba(6,11,17,.86))}
.tuhero__body{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;color:#fff;padding:clamp(24px,5vw,90px);gap:clamp(12px,1.4vw,18px)}
.tuhero__body>*{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.tuhero__slide.is-on .tuhero__body>*{opacity:1;transform:none}
.tuhero__slide.is-on .tuhero__body>*:nth-child(2){transition-delay:.09s}
.tuhero__slide.is-on .tuhero__body>*:nth-child(3){transition-delay:.18s}
.tuhero__slide.is-on .tuhero__body>*:nth-child(4){transition-delay:.27s}
.tuhero__body h2{margin:0;font-weight:700;font-size:clamp(28px,4vw,58px);line-height:1.26;max-width:22ch;
  text-shadow:0 4px 40px rgba(0,0,0,.8),0 2px 6px rgba(0,0,0,.5)}
.tuhero__body h2 em{display:block;font-style:normal;font-weight:400;font-size:.62em;letter-spacing:.14em;
  color:#ffc08a;margin-bottom:8px}
.tuhero__body p{margin:0;max-width:56ch;font-size:clamp(15px,1.3vw,20px);line-height:1.85;
  text-shadow:0 2px 20px rgba(0,0,0,.8)}
.tuhero__dots{position:absolute;left:50%;bottom:clamp(18px,2.6vw,34px);transform:translateX(-50%);display:flex;gap:12px;z-index:4}
.tuhero__arrow{position:absolute;top:50%;transform:translateY(-50%);width:50px;height:50px;border-radius:50%;border:0;cursor:pointer;z-index:4;
  display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.16);font-size:24px;line-height:1;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);
  opacity:0;transition:opacity .3s,background .3s}
.tuhero:hover .tuhero__arrow{opacity:1}
.tuhero__arrow:hover{background:rgba(255,255,255,.32)}
.tuhero__arrow--prev{left:clamp(10px,1.6vw,26px)}.tuhero__arrow--next{right:clamp(10px,1.6vw,26px)}


.tsec{max-width:1400px;margin:0 auto;padding:clamp(46px,5.4vw,84px) clamp(20px,3.4vw,56px) 0}
.tsec__head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding-bottom:14px;border-bottom:2px solid var(--orange)}
.tsec__head h3{margin:0;font-size:clamp(24px,2.7vw,38px);font-weight:700}
.tsec__head span{font-size:clamp(14px,1.1vw,16.5px);color:#6b6b6b}

/* ไฮไลต์ทัวร์ */
.tcards{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.2vw,34px);margin-top:clamp(24px,3vw,42px)}
@media(max-width:860px){.tcards{grid-template-columns:1fr}}
.tcard{position:relative;display:block;border-radius:4px;overflow:hidden;text-decoration:none;color:inherit;background:#141414;
  box-shadow:0 16px 36px rgba(20,40,60,.18);transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
.tcard:hover{transform:translateY(-7px);box-shadow:0 28px 56px rgba(20,40,60,.3)}
.tcard__img{position:relative;aspect-ratio:16/9.4;overflow:hidden}
.tcard__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.tcard:hover .tcard__img img{transform:scale(1.07)}
.tcard__img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,11,17,.1) 40%,rgba(6,11,17,.82))}
.tbadge{position:absolute;top:16px;left:16px;z-index:3;background:var(--orange);color:#fff;font-weight:700;
  font-size:14px;padding:6px 18px;border-radius:999px;box-shadow:0 8px 20px rgba(255, 103, 0,.42)}
.tbadge--ghost{left:auto;right:16px;background:rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.tcard__over{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:clamp(18px,2.2vw,30px);color:#fff}
.tcard__over h4{margin:0;font-size:clamp(20px,1.9vw,28px);font-weight:700;line-height:1.4;text-shadow:0 3px 22px rgba(0,0,0,.75)}
.tcard__over p{margin:6px 0 0;font-size:clamp(14px,1.1vw,16.5px);opacity:.92;text-shadow:0 2px 16px rgba(0,0,0,.7)}
.tcard__body{padding:clamp(18px,2vw,26px);background:#fff}
.tmeta{display:flex;flex-wrap:wrap;gap:10px 22px;font-size:14.5px;color:#5c5c5c}
.tmeta i{display:inline-flex;align-items:center;gap:7px;font-style:normal}
.tmeta svg{width:17px;height:17px;fill:none;stroke:var(--orange);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tcard__cta{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:16px;flex-wrap:wrap}
.tprice{font-size:14.5px;color:#6b6b6b}
.tprice b{display:block;font-size:clamp(20px,1.8vw,26px);color:var(--orange);font-weight:700;line-height:1.3}

/* รายละเอียดทัวร์ */
.tdetail{display:flex;gap:clamp(22px,3.2vw,58px);align-items:center;margin-top:clamp(30px,4vw,64px);flex-wrap:wrap}
.tdetail:nth-child(even){flex-direction:row-reverse}
@media(max-width:900px){.tdetail,.tdetail:nth-child(even){flex-direction:column;align-items:stretch}}
.tdetail__img{flex:1 1 57%;min-width:300px;position:relative;border-radius:4px;overflow:hidden;
  box-shadow:0 22px 48px rgba(20,40,60,.24)}
.tdetail__img img{width:100%;height:auto;display:block;aspect-ratio:4/2.9;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.tdetail__img:hover img{transform:scale(1.05)}
.tdetail__txt{flex:1 1 36%;min-width:280px}
.tkick{display:inline-block;background:#fff9d9;color:#d45400;font-size:13.5px;font-weight:700;padding:5px 15px;border-radius:6px}
.tdetail__txt h4{margin:14px 0 0;font-size:clamp(22px,2.2vw,32px);font-weight:700;line-height:1.36}
.tdetail__txt .lead{margin:10px 0 0;font-size:clamp(15px,1.15vw,17px);line-height:1.9;color:#4a4a4a}
.tlist{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px}
.tlist li{display:flex;align-items:flex-start;gap:11px;font-size:15px;line-height:1.75;color:#383838}
.tlist svg{width:18px;height:18px;flex:0 0 auto;margin-top:3px;fill:none;stroke:var(--orange);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tnote{margin-top:16px;padding:12px 16px;background:#FBF8F4;border-left:3px solid var(--orange);
  border-radius:0 4px 4px 0;font-size:14.5px;line-height:1.8;color:#5c5c5c}
.tdetail__cta{display:flex;align-items:center;gap:clamp(16px,2vw,30px);margin-top:22px;flex-wrap:wrap}
.tlink{font-size:clamp(15px,1.15vw,17px);color:var(--ink);text-decoration:none;position:relative;transition:color .28s}
.tlink::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:1.5px;background:var(--orange);transition:width .32s cubic-bezier(.2,.8,.2,1)}
.tlink:hover{color:var(--orange)}
.tlink:hover::after{width:100%}
.tfoot{padding:clamp(40px,5vw,72px) clamp(20px,3.4vw,56px) clamp(56px,7vw,100px);text-align:center;max-width:1400px;margin:0 auto}
.tfoot p{margin:0 0 18px;color:#6b6b6b;font-size:clamp(15px,1.15vw,17px)}

.art__issue{margin-top:22px;padding-top:18px;border-top:1px solid #ece7de;font-size:clamp(14.5px,1.1vw,16.5px);color:#383838}
.art__issuebtn{margin-top:16px;display:flex;justify-content:center}
.maginfo{position:fixed;inset:0;z-index:210;background:rgba(8,11,15,.72);display:none;align-items:center;justify-content:center;
  padding:clamp(14px,3vw,40px);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.maginfo.is-on{display:flex}
.maginfo__box{position:relative;width:min(1000px,96vw);max-height:92vh;overflow:auto;background:#fff;border-radius:6px;
  box-shadow:0 40px 90px rgba(0,0,0,.45);padding:clamp(26px,4vw,54px)}
.maginfo__close{position:absolute;top:14px;right:16px;width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
  background:#f4f1ec;color:#5c5c5c;font-size:20px;transition:background .3s,transform .3s}
.maginfo__close:hover{background:var(--orange);color:#fff;transform:rotate(90deg)}
.maginfo__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,56px);align-items:center}
@media(max-width:760px){.maginfo__grid{grid-template-columns:1fr;text-align:center;justify-items:center}}
.maginfo__txt h3{margin:14px 0 0;font-size:clamp(24px,2.4vw,34px);font-weight:700;color:var(--orange)}
.maginfo__txt .issue{margin-top:6px;font-size:clamp(17px,1.5vw,22px);color:var(--orange)}
.maginfo__txt p{margin:18px 0 0;font-size:clamp(15px,1.15vw,17px);line-height:1.95;color:#383838;max-width:44ch}
.maginfo__hint{margin-top:16px;font-size:14px;color:#8c8c8c}
.maginfo__cover button{border:0;background:none;padding:0;cursor:pointer;display:block;perspective:1400px}
.maginfo__cover img{width:min(300px,72vw);display:block;transform:rotate(4deg);
  box-shadow:0 26px 60px rgba(20,40,60,.34);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.maginfo__cover button:hover img{transform:rotate(2deg) rotateY(-12deg) scale(1.05)}

@media(prefers-reduced-motion:reduce){
  .mist span,.seaclouds b,.sunglow,.rays,.cue u,.hint u,.glass::before,.hl__slide img{animation:none!important}
}

/* ============================================================
   ส่วนต่อขยายของระบบจริง (เพิ่มจาก prototype)
   prototype ซ่อนทุกหน้าไว้แล้วเปิดด้วย body.view-* ตอนนี้เป็นหน้าจริงคนละ URL
   จึงเปิดด้วย .is-open ที่ตัว section แทน
   ============================================================ */
.ap.is-open,
.art.is-open,
.maghero.is-open,
.vpage.is-open,
.tour.is-open   { display:block }
.thero          { display:block }
.vdo            { display:block }

/* บนหน้าที่ไม่ใช่หน้าแรก ไม่มีฉากเปิดเล่ม จึงต้องเว้นที่ให้แถบบน */
.ap.is-open,.art.is-open,.vpage.is-open,.tour.is-open{ padding-top:0 }
.art.is-open .art__hero{ margin-top:0 }

/* ---------- ปุ่มสลับภาษา ---------- */
.langsw{
  display:grid;place-items:center;min-width:44px;height:38px;padding:0 12px;border-radius:999px;
  color:#fff;font-size:14px;font-weight:700;letter-spacing:.02em;text-decoration:none;
  filter:drop-shadow(0 1px 8px rgba(0,0,0,.45));
  transition:background .25s,transform .25s;
}
.langsw:hover{ background:rgba(255,255,255,.4);transform:scale(1.05) }
.topbar:hover .langsw,.topbar.is-open .langsw,
.topbar.is-light .langsw{ color:var(--ink) }

/* ---------- ข้อความแจ้งเตือน ---------- */
.flash{
  position:fixed;left:50%;top:calc(var(--bar-h) + 32px);transform:translateX(-50%);
  z-index:200;max-width:min(560px,92vw);padding:12px 20px;border-radius:12px;
  font-size:15px;font-weight:600;box-shadow:0 8px 32px rgba(0,0,0,.24);
}
.flash--ok   { background:#E7F6EF;color:#1B8A5A }
.flash--warn { background:#fffabb;color:#d45400 }
.flash--error{ background:#FDECEA;color:#C4342A }
.flash--info { background:#EDF3FE;color:#1A56A8 }

/* ---------- dropdown แบบ select จริง (แทน dropdown จำลองของ prototype) ---------- */
.dd--native{ display:inline-flex;flex-direction:column;gap:4px }
.dd--native .dd__lbl{ font-size:12.5px;color:var(--ink-soft);font-weight:600 }
.dd--native select{
  appearance:none;-webkit-appearance:none;
  padding:9px 34px 9px 14px;border:1px solid #DEE3EA;border-radius:999px;
  background:#fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235B6470' stroke-width='2' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E") no-repeat right 14px center;
  font:inherit;font-size:15px;color:var(--ink);cursor:pointer;min-width:160px;
}
.dd--native select:focus{ outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(255, 103, 0,.15) }

/* ---------- ปุ่มที่กดไม่ได้ ---------- */
.btn-orange.is-off,.allbtn.is-off{
  opacity:.5;pointer-events:none;cursor:default;
}

/* ---------- การ์ดที่ยังไม่มีรูป ---------- */
.pcard__ph{
  display:block;width:100%;aspect-ratio:4/3;
  background:linear-gradient(135deg,#EDEFF2,#DFE3E8);
}

/* ---------- บทความ : ส่วนที่เพิ่มจาก prototype ---------- */
.art__lead{ font-size:1.08em;color:var(--ink-soft) }
.art__fig figcaption{ font-size:.86em;color:var(--ink-soft);padding:10px 2px 0;line-height:1.6 }
.art__quote{
  margin:32px 0;padding:4px 0 4px 22px;border-left:3px solid var(--orange);
  font-size:1.12em;line-height:1.8;color:var(--ink);
}

/* ---------- กล่องเล่นวิดีโอ ---------- */
.vmodal{
  position:fixed;inset:0;z-index:300;background:rgba(8,10,13,.92);
  display:grid;place-items:center;padding:clamp(16px,4vw,60px);
}
.vmodal[hidden]{ display:none }
.vmodal__frame{ width:min(1180px,100%);aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden }
.vmodal__frame iframe{ width:100%;height:100%;border:0;display:block }
.vmodal__close{
  position:absolute;top:20px;right:24px;width:46px;height:46px;border:0;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;font-size:20px;cursor:pointer;
}
.vmodal__close:hover{ background:rgba(255,255,255,.28) }

/* ตัวอ่านนิตยสารซ่อนด้วย hidden ด้วย (นอกจาก class ของ prototype) */
.reader[hidden]{ display:none }

/* ---------- หน้าแจ้ง error ---------- */
.errpage{
  min-height:100vh;display:grid;place-items:center;background:#fff;color:var(--ink);
  position:relative;z-index:6;padding:120px 24px 80px;text-align:center;
}
.errpage__code{ font-size:clamp(72px,14vw,150px);font-weight:700;line-height:1;color:var(--orange);opacity:.22 }
.errpage h1{ margin:8px 0 12px;font-size:clamp(24px,3.4vw,34px) }
.errpage p{ color:var(--ink-soft);margin:0 0 28px;max-width:44ch }

/* ---------- แบ่งหน้า : ทำให้เป็นลิงก์ได้ ---------- */
a.ppage{ text-decoration:none;display:inline-flex;align-items:center;justify-content:center }
.ppage.is-off{ opacity:.35;pointer-events:none }
.ppage.is-gap{ border:0;background:none;pointer-events:none }

/* ---------- ลิงก์ในเบรดครัมบ์ ---------- */
.ap__crumb a{ text-decoration:none;color:var(--ink-soft) }
.ap__crumb a:hover{ color:var(--orange) }

/* ============================================================
   ปรับตาม requirement (Design Website - Osotho, Canva)
   ============================================================ */

/* ---- แถบเมนู : ข้อ 3,4 ชี้แล้วเปลี่ยนเป็นสีส้ม (ทั้งตอนโปร่งใสและตอนเป็นกระจก) ---- */
.link:hover,
.link:focus-visible,
.link[aria-expanded="true"]{ color:var(--orange-hi) }
.topbar:hover .link:hover,
.topbar:hover .link:focus-visible,
.topbar:hover .link[aria-expanded="true"],
.topbar.is-open .link[aria-expanded="true"],
.topbar.is-light .link:hover,
.topbar.is-light .link:focus-visible,
.topbar.is-light .link[aria-expanded="true"]{ color:var(--orange) }

/* ---- ข้อ 5 : ชี้ที่ค้นหา → วงกลมใสขึ้นมา + แว่นขยายเปลี่ยนเป็นสีส้ม ---- */
.iconbtn{ position:relative }
.iconbtn::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:rgba(255,255,255,.24);
  border:1px solid rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;transform:scale(.7);
  transition:opacity .3s ease,transform .35s cubic-bezier(.2,.8,.2,1);
}
.iconbtn:hover::before,.search.is-open .iconbtn::before{ opacity:1;transform:scale(1) }
.iconbtn svg{ position:relative;z-index:1;transition:stroke .3s ease }
.iconbtn:hover,
.search.is-open .iconbtn,
.topbar:hover .iconbtn:hover,
.topbar.is-light .iconbtn:hover{ background:none;color:var(--orange) }

/* ---- ข้อ 6 : ชี้สมัครสมาชิก → พื้นส้ม ฟอนต์ขาว (ตอนแถบยังโปร่งใสก็ต้องเป็น) ---- */
.cta:hover{
  background:var(--orange);color:#fff;border-color:var(--orange);
  text-shadow:none;box-shadow:0 6px 20px rgba(255, 103, 0,.42);transform:translateY(-1px);
}

/* ---- แถบหมวด : ชี้แล้วสว่างขึ้น + เด้งขึ้นมาแบบ Pop Up ---- */
.tab{ transition:transform .38s cubic-bezier(.2,.8,.2,1),box-shadow .38s,z-index 0s }
.tab:hover{
  transform:translateY(-10px) scale(1.035);z-index:3;
  box-shadow:0 26px 50px rgba(16,28,40,.34);
}
.tab:hover::after{ background:linear-gradient(180deg,rgba(0,0,0,.02) 30%,rgba(0,0,0,.5)) }
.tab:hover img{ filter:saturate(1.14) brightness(1.12) }

/* ---- สไลด์ไฮไลต์ : ภาพค่อย ๆ ซูมเข้าเบา ๆ ตลอดเวลาที่ค้างอยู่ (Ken Burns) ---- */
@keyframes hlZoom{ from{ transform:scale(1) } to{ transform:scale(1.09) } }
.hl__slide.is-on>img{ animation:hlZoom 9s ease-out forwards }
@media (prefers-reduced-motion:reduce){ .hl__slide.is-on>img{ animation:none } }

/* ---- แถบส้มบนสไลด์ = คอลัมน์ + หัวเรื่องบทความ (ต้องตรงกันทุกหน้า) ---- */
.chip--pair{ display:inline-flex;align-items:center;gap:0;overflow:hidden }
.chip--pair b{ font-weight:700 }
.chip--pair i{
  font-style:normal;opacity:.72;margin:0 7px;
  border-left:1px solid rgba(255,255,255,.5);height:12px;
}

/* ---- ชั้นวางในหน้าแรก : แถวละ 6 เล่ม และใหญ่ขึ้น ---- */
.shelf__row{ gap:clamp(10px,1.6vw,26px) }
@media (max-width:1100px){ .shelf__row{ flex-wrap:wrap } }

/* ---- ตัวอ่าน : หน้าแรกและหน้าสุดท้ายไม่ต้องมีปุ่มซ้าย/ขวา ---- */
.reader__nav:disabled{ opacity:0;pointer-events:none }

/* ---- Popup ติดต่อโฆษณา ท้ายเว็บ ---- */
.adbox{
  position:fixed;inset:0;z-index:300;background:rgba(8,10,13,.72);
  /* เรียงเป็นคอลัมน์เพื่อวางหัวเรื่องไว้เหนือการ์ด ไม่ใช่ทับบนการ์ด */
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(14px,1.8vw,22px);padding:24px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
/* หัวเรื่องนอกการ์ด — ขาวหนาบนพื้นมืด */
.adbox__head{
  margin:0;color:#fff;font-weight:700;text-align:center;
  font-size:clamp(24px,3vw,38px);letter-spacing:.01em;
  text-shadow:0 2px 18px rgba(0,0,0,.55);
}
.adbox[hidden]{ display:none }
.adbox__in{
  background:var(--paper);color:var(--ink);border-radius:18px;
  padding:clamp(26px,3.4vw,44px);width:min(520px,100%);position:relative;
  box-shadow:0 30px 90px rgba(0,0,0,.4);
}
.adbox__in h3{ margin:0 0 6px;font-size:clamp(20px,2.4vw,26px) }
.adbox__in p{ margin:0 0 22px;color:var(--ink-soft);font-size:15px }
.adbox__list{ list-style:none;margin:0;padding:0;display:grid;gap:12px }
.adbox__list li{ display:flex;gap:12px;align-items:flex-start;font-size:15.5px }
.adbox__list svg{ width:20px;height:20px;flex:0 0 20px;margin-top:3px;
  fill:none;stroke:var(--orange);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round }
/* ข้อความติดต่อเป็นสีเดียวกับที่อยู่ด้านบน อ่านเป็นเนื้อความปกติ
   แล้วค่อยเปลี่ยนเป็นสีส้มตอนชี้ เพื่อบอกว่ากดได้ */
.adbox__list a{ color:var(--ink);text-decoration:none;transition:color .2s ease }
.adbox__list a:hover,
.adbox__list a:focus-visible{ color:var(--orange);text-decoration:underline }
.adbox__close{
  position:absolute;top:14px;right:16px;width:36px;height:36px;border:0;border-radius:50%;
  background:rgba(0,0,0,.06);color:var(--ink);font-size:16px;cursor:pointer;
}
.adbox__close:hover{ background:rgba(0,0,0,.12) }

/* ---- Popup รายละเอียดนิตยสาร (เรียกจากหน้าบทความ) ---- */
.maginfo{
  position:fixed;inset:0;z-index:300;background:rgba(8,10,13,.78);
  display:grid;place-items:center;padding:clamp(16px,3vw,48px);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.maginfo[hidden]{ display:none }
/* กล่องนี้ไม่เคยจำกัดความสูงไว้เลย จอเตี้ย ๆ (มือถือแนวนอน · หน้าต่างเล็ก)
   กล่องจึงสูงเกินจอแล้วเนื้อในล้นออกไปทั้งบนและล่าง — ภาพปกหลุดหายขึ้นไปข้างบน
   ส่วนบรรทัด "คลิกที่ปกเพื่อเปิดอ่านตัวอย่าง" ก็ถูกตัดหายไปข้างล่าง
   จำกัดความสูงแล้วให้เลื่อนในกล่องได้แทน */
.maginfo__box{
  background:var(--paper);border-radius:18px;width:min(880px,100%);
  max-height:92dvh;overflow:auto;-webkit-overflow-scrolling:touch;
  padding:clamp(24px,3vw,42px);position:relative;box-shadow:0 30px 90px rgba(0,0,0,.42);
}
@media (max-height:520px){
  .maginfo{ padding:10px }
  .maginfo__box{ max-height:96dvh;padding:18px 20px }
  .maginfo__grid{ grid-template-columns:1fr 200px;gap:18px }
  .maginfo__txt p{ margin-bottom:12px;line-height:1.6 }
}
.maginfo__grid{ display:grid;grid-template-columns:1fr 300px;gap:clamp(20px,3vw,40px);align-items:center }
@media (max-width:760px){ .maginfo__grid{ grid-template-columns:1fr } }
.maginfo__txt h3{ margin:6px 0 2px;font-size:clamp(22px,2.6vw,30px) }
.maginfo__txt .issue{ color:var(--orange);font-weight:600;margin-bottom:14px }
.maginfo__txt p{ color:var(--ink-soft);font-size:15px;line-height:1.75;margin:0 0 20px }
.maginfo__hint{ font-size:13px;color:var(--ink-soft);margin-top:14px }
.maginfo__cover button{ border:0;background:none;padding:0;cursor:pointer;width:100%;
  transition:transform .4s cubic-bezier(.2,.8,.2,1) }
.maginfo__cover button:hover{ transform:translateY(-6px) scale(1.03) }
/* ต้องมีเพดานความกว้าง — พอจอแคบกว่า 760px ตารางยุบเหลือคอลัมน์เดียว
   width:100% จึงกลายเป็นเต็มความกว้างกล่อง ปกเล่มพองเป็น 600×820 px
   ล้นออกนอกกล่องทั้งซ้ายขวา (เพราะเอียง 4 องศาด้วย) และดันเนื้อหาที่เหลือตกจอ */
.maginfo__cover img{ width:100%;max-width:min(300px,62vw);margin-inline:auto;
  border-radius:6px;box-shadow:0 20px 50px rgba(0,0,0,.3) }
@media (max-height:520px){
  .maginfo__cover img{ max-width:min(180px,26vh) }
}
.maginfo__close{
  position:absolute;top:14px;right:16px;width:38px;height:38px;border:0;border-radius:50%;
  background:rgba(0,0,0,.06);color:var(--ink);font-size:17px;cursor:pointer;z-index:2;
}
.maginfo__close:hover{ background:rgba(0,0,0,.12) }

/* ปุ่ม "ติดต่อโฆษณา" ในเมนูท้ายเว็บ ให้หน้าตาเหมือนลิงก์ข้าง ๆ */
.foot__nav button{
  appearance:none;background:none;border:0;padding:0;margin:0;
  font:inherit;color:inherit;cursor:pointer;text-align:inherit;
}

/* ชื่อคลิปวางตรงกลางใต้ภาพ ตาม requirement หน้ารวมวิดีโอ */
.vcard b{ display:block;text-align:center }

/* ---- dropdown มีช่องค้นหา (คอลัมน์ / จังหวัด) ตาม requirement ข้อ 3 ---- */
.ap__filters .dd{ position:relative }
/* ปุ่มคอลัมน์ / จังหวัด — ขอบส้ม ตัวหนังสือส้มหนา และหัวลูกศรสามเหลี่ยมทึบ
   (เดิมผมทำเป็นขอบเทาตัวหนังสือดำกับลูกศรเส้นบาง ซึ่งดูจืดไปกับหน้า) */
.dd__btn{
  appearance:none;cursor:pointer;font:inherit;font-size:16px;font-weight:700;
  display:inline-flex;align-items:center;gap:10px;
  padding:9px 20px;border:1.6px solid var(--orange);border-radius:999px;
  background:#fff;color:var(--orange);
  transition:background .25s,color .25s,box-shadow .25s;
}
/* ตอนชี้ก็ถมส้มเหมือนตอนกด
   ของเดิมผมทับแค่พื้นให้จาง แต่ไม่ได้ทับสีตัวอักษร กฎเก่าที่ตั้ง color:#fff
   จึงยังมีผล กลายเป็นตัวหนังสือขาวบนพื้นเกือบขาว อ่านไม่ออก
   คราวนี้เขียนทั้งพื้นและสีตัวอักษรพร้อมกัน ไม่ให้ค้างครึ่ง ๆ */
.dd__btn:hover{
  background:var(--orange);color:#fff;
  box-shadow:0 6px 18px rgba(255, 103, 0,.30);
}
.dd__btn:hover i{ border-top-color:#fff }
/* สามเหลี่ยมทึบชี้ลง ทำจากขอบกล่อง ไม่ต้องใช้ไฟล์ไอคอน */
.dd__btn i{
  width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:6px solid currentColor;transition:transform .25s;
}
/* ตอนกดเปิดดรอปดาวน์ ถมส้มทั้งปุ่มและกลับตัวหนังสือเป็นขาว
   ให้เห็นชัดว่าปุ่มไหนกำลังเปิดอยู่ พร้อมเงาส้มฟุ้งรอบปุ่ม */
.dd.is-open .dd__btn{
  background:var(--orange);color:#fff;
  box-shadow:0 6px 20px rgba(255, 103, 0,.34),0 0 0 4px rgba(255, 103, 0,.14);
}
.dd.is-open .dd__btn i{ transform:rotate(180deg) }

.dd__pop{
  /* ยึดขอบขวาของปุ่ม ไม่ใช่ขอบซ้าย — แถบตัวกรองชิดขวาของหน้าอยู่แล้ว
     ของเดิมยึดซ้ายและกว้างอย่างน้อย 240px ปุ่มตัวขวาสุดจึงดันเมนูล้นพ้นจอ
     และเพราะเมนูปิดด้วย visibility (ไม่ใช่ display:none) ความกว้างที่ล้นนั้น
     ยังดันให้ทั้งหน้าเลื่อนแนวนอนได้ ทั้ง ๆ ที่เมนูปิดอยู่
     — นี่คือสาเหตุที่หน้า /articles และหน้าหมวดล้นออกไป 22–150 px ทุกขนาดจอ */
  position:absolute;top:calc(100% + 8px);right:0;left:auto;z-index:40;
  min-width:min(240px, calc(100vw - 32px));
  max-width:calc(100vw - 32px);
  background:#fff;border:1px solid #e6e6e6;border-radius:14px;padding:10px;
  box-shadow:0 20px 50px rgba(20,40,60,.18);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .22s,transform .22s,visibility .22s;
}
.dd.is-open .dd__pop{ opacity:1;visibility:visible;transform:translateY(0) }
.dd__search{
  width:100%;padding:8px 12px;border:1px solid #e6e6e6;border-radius:9px;
  font:inherit;font-size:14.5px;outline:none;margin-bottom:8px;
}
.dd__search:focus{ border-color:var(--orange) }
.dd__list{ max-height:280px;overflow-y:auto;display:flex;flex-direction:column;gap:1px }
.dd__list a{
  display:block;padding:8px 12px;border-radius:8px;font-size:14.5px;
  color:var(--ink);text-decoration:none;transition:background .18s,color .18s;
}
.dd__list a:hover{ background:var(--orange);color:#fff }
.dd__list a.is-sel{ background:rgba(255, 103, 0,.12);color:var(--orange);font-weight:600 }
.dd__list a[hidden]{ display:none }
.dd__empty{ padding:14px 12px;font-size:14px;color:var(--ink-soft);text-align:center }

/* ---- แถบ # : ให้เห็นชัดว่าเป็นแฮชแท็ก ---- */
.ap__tags .ptag{ text-decoration:none }

/* ---- ตัวอ่าน : หน้าที่เรนเดอร์จาก PDF ---- */
.rpage canvas{ max-width:100%;max-height:100%;height:auto;width:auto;display:block;
  box-shadow:0 20px 60px rgba(0,0,0,.45);background:#fff }
.rpage__load,.rpage__err{ color:#d2d2d2;font-size:15px;display:grid;place-items:center;height:100%;min-height:200px }
.rpage__err{ color:#ff8a33 }

/* ============================================================
   เว้นช่องไฟสีขาวคั่น Section (requirement หน้า 1)
   "เว้นช่องไฟสีขาว เพื่อแบ่ง Section โดยเป็นสีขาวเพียงเล็กน้อย"
   ทั้งบนและล่างของแถบโฆษณา และคั่นระหว่างบล็อกเรื่องราว
   ============================================================ */
.ads{
  background:#fff;                     /* เดิมเป็น #0f0f0f ทำให้เห็นเป็นแถบดำ */
  padding:clamp(7px,0.8vw,12px) 0;     /* ช่องไฟบน–ล่าง บาง ๆ */
}
.ads__frame{ background:#fff }

/* บล็อกเรื่องราวต่อจากโฆษณา ก็ใช้พื้นขาวเดียวกัน จะได้ไม่มีเส้นเข้มคั่น */
.stories-sec{ background:#fff }

/* ช่องไฟระหว่างแบนเนอร์ที่เที่ยว → สไลด์ไฮไลต์ → แถบหมวด */
.stories-sec__in>.thero{ margin-bottom:clamp(7px,0.8vw,12px) }
.stories-sec__in>.hl{ margin-bottom:clamp(7px,0.8vw,12px) }

/* แถบ progress บนจุดบอกลำดับ ต้องวิ่งเท่ากับเวลาค้างของสไลด์ (8 วินาที) */
.dot.is-active i{ transition:transform 8s linear }

/* ============================================================
   ลบรอยพับเป็นร่องบนปกหนังสือ
   requirement: "ห้ามมีเส้นแบ่งเหมือนรอยพับเด็ดขาด"

   ปกถูกแบ่งเป็น 3 ท่อนเพื่อจำลองกระดาษโค้ง แต่เดิมมีเส้นโผล่จาก 3 เหตุ
     1. width:33.34% × 3 = 100.02% → ภาพแต่ละท่อนเลื่อนไม่ตรงกัน
     2. ขอบท่อนปัดเศษเป็นครึ่งพิกเซล เห็นพื้นขาวของ .stack ลอดออกมาเป็นเส้น
     3. เงาไล่เฉดถูกวาดซ้ำในทุกท่อน กลายเป็น 3 แถบที่มีขั้นชัดตรงรอยต่อ

   แก้โดยยึดตำแหน่งภาพจากความกว้างจริงของเล่ม (--bw ที่ JS ตั้งไว้)
   แล้วให้แต่ละท่อนล้ำไปทับเพื่อนบ้าน 1px  ภาพตรงรอยต่อจึงต่อเนื่องสนิท
   ============================================================ */
.seg{ width:calc(100% / 3) }        /* เดิม 33.34% เกินมา 0.02% */

.face{
  position:absolute;top:0;left:0;right:auto;height:100%;
  width:calc(100% + 1px);           /* ล้ำทับเพื่อนบ้านกันเส้นขาวจากการปัดเศษ */
}
.seg3>.face{ width:100% }           /* ท่อนขวาสุดไม่ต้องล้ำออกนอกเล่ม */

/* วางภาพด้วยหน่วยพิกเซลจริง แทน % ที่คำนวณจากความกว้างของท่อน */
.leaf--cover .face--f,
.paperbg{ background-size:var(--bw, 300%) 100% }
.seg1>.face{ background-position:0 50% }
.seg2>.face{ background-position:calc(-1 * var(--bw, 0px) / 3) 50% }
.seg3>.face{ background-position:calc(-2 * var(--bw, 0px) / 3) 50% }

/* เงาไล่เฉดเส้นเดียวยาวตลอดใบ ไม่ใช่ 3 เส้นซ้อนกัน */
.face>i{
  background-image:linear-gradient(90deg,
    rgba(10,14,20,.52),
    rgba(10,14,20,.26) 26%,
    rgba(10,14,20,.10) 52%,
    rgba(10,14,20,.02) 76%,
    rgba(10,14,20,0));
  background-size:var(--bw, 300%) 100%;
  background-repeat:no-repeat;
}
.face--b>i{
  background-image:linear-gradient(270deg,
    rgba(10,14,20,.48),
    rgba(10,14,20,.24) 26%,
    rgba(10,14,20,.09) 52%,
    rgba(10,14,20,.02) 76%,
    rgba(10,14,20,0));
}
.seg1>.face>i{ background-position:0 50% }
.seg2>.face>i{ background-position:calc(-1 * var(--bw, 0px) / 3) 50% }
.seg3>.face>i{ background-position:calc(-2 * var(--bw, 0px) / 3) 50% }

/* ค่าเริ่มต้นของ --bw เขียนตามสูตรเดียวกับใน measure() ของ site.js
     bh = clamp(260px, 58vh, 580px)   ·   bw = bh × 0.7742
   เพื่อให้ปกวางถูกตำแหน่งตั้งแต่เฟรมแรก ก่อน JS จะคำนวณค่าจริงมาทับ */
.book{ --bw:clamp(201.3px, 44.9vh, 449px) }

/* ============================================================
   ท่อนกระดาษแบบปรับจำนวนได้ (JS ตั้ง --segs และ --i ให้แต่ละท่อน)
   requirement: ตอนเปิดต้องเนียน ไม่เห็นเป็นแผ่นพับ ๆ
   ============================================================ */
.leaf > .seg{ width:calc(100% / var(--segs, 14)) }   /* ท่อนนอกสุดเท่านั้น ที่ซ้อนอยู่ข้างในกว้าง 100% */
.seg{ will-change:auto }                              /* 14 ท่อน × 2 ใบ ถ้าใส่ will-change หมดจะกินหน่วยความจำเกินจำเป็น */
.leaf{ will-change:transform }

/* ตำแหน่งภาพของแต่ละท่อน คิดจากลำดับท่อน --i เทียบความกว้างจริงของเล่ม */
.seg > .face{
  background-position:calc(-1 * var(--bw, 0px) * var(--i, 0) / var(--segs, 14)) 50%;
}
.seg > .face > i{
  background-position:calc(-1 * var(--bw, 0px) * var(--i, 0) / var(--segs, 14)) 50%;
}

/* ท่อนสุดท้ายไม่ต้องล้ำออกนอกขอบเล่ม */
.seg.is-last > .face{ width:100% }

/* ============================================================
   ท่อนกระดาษแบบพี่น้องระนาบเดียว (แทนแบบซ้อนชั้น)
   ความกว้าง / ตำแหน่งภาพ / transform ตั้งจาก JS ทั้งหมด (layoutLeaf + flip)
   CSS เหลือหน้าที่แค่วางระนาบ 3D ให้ถูก — ลึกแค่ 2 ชั้นเท่านั้น
   ============================================================ */
.leaf{ transform-style:preserve-3d;will-change:transform }
.leaf > .seg{
  position:absolute;top:0;left:0;height:100%;
  transform-origin:left center;
  transform-style:preserve-3d;
  backface-visibility:visible;
  will-change:transform;
}
/* ท่อนพี่น้องซ้อนทับกันได้ ท่อนที่อยู่ใกล้ผู้ชมกว่าต้องอยู่บน — 3D จัดการเอง */
.leaf > .seg > .face{
  width:100%;                       /* ความกว้างเผื่อทับอยู่ที่ตัว .seg แล้ว */
  left:0;right:auto;
}

/* พื้นหลังฉากเปิดเล่ม รับได้ทั้งภาพและวิดีโอ (requirement ข้อ 3) */
.skywrap video.bgloop{ width:100%;height:100%;object-fit:cover;display:block }

/* ============================================================
   "ภาพนิ่งให้กลายเป็นภาพเคลื่อนไหว"
   requirement ข้อ 3a เดิมเสนอ JPG → VDO → GIF
   แต่ทำเป็นชั้นบรรยากาศซ้อนบนภาพนิ่งดีกว่า เพราะ
     · โฮสต์ไม่ต้องเข้ารหัสวิดีโอ (shared hosting ทำไม่ได้)
     · ไฟล์เล็กกว่า GIF หลายสิบเท่า และลื่นกว่า (GPU 60fps)
     · ใช้ได้กับภาพ JPG อะไรก็ได้ที่อัปโหลดเข้ามาในเดือนถัด ๆ ไป
   ประกอบด้วย 4 ชั้น : ภาพซูมช้า + หมอกลอย + ไอน้ำไหลขวาง + แสงหายใจ
   ============================================================ */

/* 1. ตัวภาพเอง ซูม-เลื่อนช้ามาก ให้รู้สึกว่าฉากมีชีวิต */
/* ตัวภาพ "ไม่ซูม" — ภาพวิวที่ซูมเข้าออกเองดูไม่เป็นธรรมชาติ
   ชีวิตของฉากมาจากหมอก แสง และการขยับตามเมาส์แทน
   เผื่อขอบไว้ 6% เพื่อให้พารัลแลกซ์ตามเมาส์มีที่ให้เลื่อนโดยไม่เห็นขอบดำ */
.skywrap .bgloop{ transform:scale(1.06);transform-origin:52% 46% }

/* 2. ชั้นบรรยากาศ — ก้อนหมอกกับแถบไอน้ำสร้างจาก JS */
.atmo{ position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1 }
.atmo span{                       /* ก้อนหมอกฟุ้ง */
  position:absolute;display:block;border-radius:50%;
  background:radial-gradient(closest-side,rgba(238,248,255,.8),rgba(255,255,255,0));
  will-change:transform,opacity;
}
.atmo b{                          /* แถบไอน้ำไหลขวางแนวนอน */
  position:absolute;left:0;display:block;height:100%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(226,241,252,.72),rgba(206,228,244,.26) 58%,rgba(255,255,255,0));
  will-change:transform;
}
/* แสงแดดลอดเมฆ เคลื่อนผ่านฉากช้า ๆ ทำให้ความสว่างเปลี่ยนเหมือนมีเมฆบัง
   เป็นสัญญาณ "ภาพมีชีวิต" ที่ตาจับได้ดีกว่าการซูม และไม่ทำให้เวียนหัว */
.atmo u{
  position:absolute;top:-30%;bottom:-30%;left:0;width:60vw;display:block;
  background:radial-gradient(closest-side,rgba(224,240,255,.26),rgba(208,229,248,.10) 52%,rgba(255,255,255,0));
  mix-blend-mode:screen;will-change:transform;
}
.atmo em{                         /* เงาเมฆ ตามหลังแสงมาเป็นคู่ */
  position:absolute;top:-30%;bottom:-30%;left:0;width:74vw;display:block;
  background:radial-gradient(closest-side,rgba(12,20,30,.30),rgba(12,20,30,.10) 56%,rgba(12,20,30,0));
  will-change:transform;
}
@keyframes atmoLight{
  from { transform:translate3d(-70vw,0,0) }
  to   { transform:translate3d(120vw,0,0) }
}

.atmo i{                          /* ม่านหมอกบางคลุมทั้งฉาก */
  position:absolute;inset:-10%;display:block;
  background:radial-gradient(120% 70% at 50% 78%,rgba(232,244,255,.3),rgba(255,255,255,0) 62%);
  will-change:transform,opacity;
}

/* หน่วยต้องเป็น vw/vh ไม่ใช่ %
   เพราะ translate % คิดจากขนาดของก้อนหมอกเอง ก้อนกว้าง 30% ขยับ 6%
   จะได้แค่ 1.8% ของจอ — ราว 0.03%/วินาที ตามองไม่เห็น */
/* ลอยไปทางข้างเป็นหลัก ขึ้นลงน้อย ๆ — หมอกที่พุ่งขึ้นแนวตั้งอ่านเป็นไอร้อน */
@keyframes atmoFloat{
  0%   { transform:translate3d(-5vw,1vh,0) scale(1) }
  50%  { transform:translate3d(15vw,-3vh,0) scale(1.18) }
  100% { transform:translate3d(-5vw,1vh,0) scale(1) }
}
@keyframes atmoFloatAlt{
  0%   { transform:translate3d(6vw,-1vh,0) scale(1.12) }
  50%  { transform:translate3d(-14vw,2.5vh,0) scale(1) }
  100% { transform:translate3d(6vw,-1vh,0) scale(1.12) }
}
/* แถบไอน้ำวิ่งข้ามจอทั้งใบ */
@keyframes atmoFlow{
  from { transform:translate3d(-70vw,0,0) }
  to   { transform:translate3d(120vw,0,0) }
}
@keyframes atmoBreathe{
  0%,100% { opacity:.24;transform:scale(1) }
  50%     { opacity:.44;transform:scale(1.08) }
}

/* 3. ไล่เฉดขอบภาพ ให้กลืนกับพื้นหลังเข้มของหน้าเว็บ
      ::after เป็นลูกตัวสุดท้ายของ .atmo จึงทับหมอกอยู่ — ต้องเบามือ
      ไม่งั้นหมอกที่เพิ่งเพิ่มความทึบไปจะถูกกลบจนมองไม่เห็นอีก */
.atmo::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(130% 95% at 50% 42%,rgba(0,0,0,0) 62%,rgba(6,10,14,.24)),
    linear-gradient(180deg,rgba(6,10,14,.18),rgba(6,10,14,0) 22%,rgba(6,10,14,0) 74%,rgba(6,10,14,.26));
}

/* เคารพการตั้งค่าลดการเคลื่อนไหวของผู้ใช้ */
@media (prefers-reduced-motion:reduce){
  .atmo span,.atmo b,.atmo i,.atmo u,.atmo em{ animation:none!important }
  .atmo b{ opacity:.35 }
  .atmo u,.atmo em{ opacity:.3 }
}

/* ============================================================
   ทำให้ "ส่วนที่ควรขยับ" ในภาพนิ่งขยับจริง
   ใบไม้ ทุ่งหญ้า ผิวน้ำ — โดยไม่ต้องแยกมาสก์ตามภาพแต่ละใบ

   หลักการ: feDisplacementMap ดันพิกเซลตาม noise ที่เคลื่อนไหว
   บริเวณที่มีรายละเอียดสูง (ใบไม้/หญ้า/น้ำ) จะเห็นการสั่นชัด
   ส่วนท้องฟ้าที่เนียนอยู่แล้วจะแทบไม่เห็นความเปลี่ยนแปลง
   จึงได้ผลถูกที่โดยอัตโนมัติกับภาพอะไรก็ได้
   ============================================================ */
.atmo-defs{ position:absolute;width:0;height:0;overflow:hidden;pointer-events:none }

.bgwobble{
  position:absolute;top:0;left:0;width:100%;height:100%;
  object-fit:cover;display:block;pointer-events:none;z-index:0;
  transform:scale(1.06);transform-origin:52% 46%;
  filter:url(#leafWobble);
  /* ท้องฟ้าและสันเขาให้คมไว้ ปล่อยให้กระเพื่อมเฉพาะช่วงล่างที่เป็นพืชและน้ำ */
  -webkit-mask-image:linear-gradient(180deg,transparent 16%,#000 42%,#000 100%);
          mask-image:linear-gradient(180deg,transparent 16%,#000 42%,#000 100%);
}

/* ฟิลเตอร์บิดภาพกินซีพียู ถ้าจอเล็กหรือผู้ใช้ขอลดการเคลื่อนไหว ให้ปิดไป
   หมอกกับแสงเมฆยังทำงานอยู่ ภาพจึงไม่นิ่งสนิท */
@media (max-width:820px), (prefers-reduced-motion:reduce){
  .bgwobble{ display:none }
}

/* ============================================================
   ค้นหา : ปุ่มแคปซูลบนแถบเมนู + กล่องค้นหาเต็มจอ
   ============================================================ */

/* ---- ปุ่มแคปซูล ---- */
.searchpill{
  appearance:none;cursor:pointer;font:inherit;
  display:inline-flex;align-items:center;gap:10px;
  height:50px;padding:0 20px 0 6px;border-radius:999px;
  border:1px solid rgba(255,255,255,.42);
  background:rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.4);
  transition:background .3s,border-color .3s,color .3s,transform .25s;
}
.searchpill:hover{ background:rgba(255,255,255,.3);transform:translateY(-1px) }
.searchpill__ic{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:0 0 38px;
  background:rgba(255,255,255,.9);transition:background .3s;
}
.searchpill__ic svg{ width:19px;height:19px;fill:none;stroke:var(--orange);stroke-width:2.2;stroke-linecap:round }
.searchpill__txt{ font-size:16px;opacity:.92;white-space:nowrap }
.topbar:hover .searchpill,.topbar.is-open .searchpill,
.topbar.is-light .searchpill{
  color:var(--ink-soft);text-shadow:none;
  background:rgba(255,255,255,.6);border-color:rgba(255,255,255,.9);
}
@media(max-width:760px){
  .searchpill{ padding:0;width:50px;height:50px;justify-content:center }
  .searchpill__txt{ display:none }
  .searchpill__ic{ background:none }
  .searchpill__ic svg{ stroke:#fff }
  .topbar:hover .searchpill__ic svg,
.topbar.is-light .searchpill__ic svg{ stroke:var(--orange) }
}

/* ---- กล่องค้นหาเต็มจอ ---- */
.sbx{
  position:fixed;inset:0;z-index:300;
  display:grid;place-items:start center;padding:clamp(56px,12vh,140px) 18px 24px;
  background:rgba(16,22,30,.46);
  -webkit-backdrop-filter:blur(14px) saturate(120%);backdrop-filter:blur(14px) saturate(120%);
  animation:sbxIn .22s ease-out;
}
.sbx[hidden]{ display:none }
@keyframes sbxIn{ from{ opacity:0 } to{ opacity:1 } }

.sbx__panel{
  width:min(680px,100%);background:#fff;color:var(--ink);
  border-radius:18px;overflow:hidden;
  box-shadow:0 32px 90px rgba(10,18,28,.34),0 2px 8px rgba(10,18,28,.12);
  display:flex;flex-direction:column;max-height:min(620px,78vh);
  animation:sbxUp .26s cubic-bezier(.2,.85,.25,1);
}
@keyframes sbxUp{ from{ transform:translateY(-14px) scale(.985);opacity:0 } to{ transform:none;opacity:1 } }

.sbx__bar{ display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid #EEF1F4 }
.sbx__ic{ flex:0 0 22px;display:grid;place-items:center }
.sbx__ic svg{ width:20px;height:20px;fill:none;stroke:#8c8c8c;stroke-width:2;stroke-linecap:round }
.sbx__input{
  flex:1;min-width:0;border:0;outline:none;background:none;
  font:inherit;font-size:17px;color:var(--ink);padding:4px 0;
}
.sbx__input::placeholder{ color:#9b9b9b }
.sbx__esc{
  flex:0 0 auto;cursor:pointer;font:inherit;font-size:11px;font-weight:700;letter-spacing:.06em;
  padding:5px 9px;border-radius:7px;border:1px solid #E1E6EB;background:#f8f8f8;color:#8c8c8c;
}
.sbx__esc:hover{ background:#EDF1F5;color:var(--ink) }

.sbx__body{ flex:1;overflow-y:auto;overscroll-behavior:contain }

.sbx__empty{ display:grid;justify-items:center;gap:6px;padding:56px 24px 60px;text-align:center }
.sbx__emptyIc{
  width:62px;height:62px;border-radius:50%;background:#F2F5F8;display:grid;place-items:center;margin-bottom:8px;
}
.sbx__emptyIc svg{ width:24px;height:24px;fill:none;stroke:#A7B0BA;stroke-width:2;stroke-linecap:round }
.sbx__empty b{ font-size:15.5px;font-weight:600;color:var(--ink-soft) }
.sbx__empty span{ font-size:13.5px;color:#9b9b9b }

.sbx__label{
  padding:14px 20px 8px;font-size:12px;font-weight:600;letter-spacing:.04em;color:#9b9b9b;
}
.sbx__list{ padding:0 8px 8px }

.sbx__it{
  display:grid;grid-template-columns:54px 1fr 18px;gap:14px;align-items:center;
  padding:10px 12px;border-radius:11px;text-decoration:none;color:inherit;cursor:pointer;
  transition:background .14s;
}
.sbx__it:hover,.sbx__it.is-on{ background:#F4F7FA }
.sbx__thumb{
  width:54px;height:54px;border-radius:8px;overflow:hidden;background:#EEF2F6;
  display:grid;place-items:center;flex:0 0 54px;
}
.sbx__thumb img{ width:100%;height:100%;object-fit:cover }
.sbx__thumb svg{ width:20px;height:20px;fill:none;stroke:#AEB7C1;stroke-width:1.7 }
.sbx__txt{ min-width:0 }
.sbx__title{
  font-size:15px;font-weight:700;line-height:1.4;margin-bottom:5px;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
.sbx__meta{
  display:inline-flex;align-items:center;gap:5px;
  font-size:12px;color:#7d7d7d;background:#f2f2f2;border-radius:6px;padding:2px 8px;
}
.sbx__meta svg{ width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2 }
.sbx__go{ color:#c6c6c6;font-size:15px;text-align:right }
.sbx__it:hover .sbx__go,.sbx__it.is-on .sbx__go{ color:var(--orange) }

.sbx__none{ padding:52px 24px 56px;text-align:center;display:grid;gap:5px }
.sbx__none b{ font-size:15.5px;color:var(--ink) }
.sbx__none span{ font-size:13.5px;color:#9b9b9b }

.sbx__foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 20px;border-top:1px solid #EEF1F4;background:#fbfbfb;
  font-size:12.5px;color:#8c8c8c;
}
.sbx__foot a{ color:var(--orange);text-decoration:none;font-weight:600 }
.sbx__foot a:hover{ text-decoration:underline }

@media(max-width:560px){
  .sbx{ padding:0 }
  .sbx__panel{ max-height:100dvh;height:100dvh;border-radius:0;width:100% }
  .sbx__it{ grid-template-columns:46px 1fr 16px }
  .sbx__thumb{ width:46px;height:46px;flex-basis:46px }
}

/* ============================================================
   attribute hidden ถูกกฎ display ของเราทับ
   เบราว์เซอร์ซ่อน [hidden] ด้วยกฎ display:none จาก UA stylesheet
   แต่กฎที่เราเขียนเอง (author) ชนะ UA เสมอ ตัวที่ตั้ง display ไว้
   จึงไม่ยอมหายไปตอนสั่ง el.hidden = true
   ============================================================ */
.sbx__empty[hidden],
.sbx__none[hidden],
.sbx__group[hidden]{ display:none }

/* ============================================================
   คลิปวิดีโอ : ทุกอันเป็นภาพ preview ที่ลิงก์ออกไปดูบน YouTube
   ============================================================ */
a.clip{ display:block;text-decoration:none;overflow:hidden;position:relative }
.clip.is-blank{ cursor:default }

/* ป้าย YouTube มุมขวาล่าง ให้รู้ว่ากดแล้วออกไปนอกเว็บ */
.clip__yt{
  position:absolute;right:12px;bottom:12px;z-index:3;
  width:38px;height:27px;border-radius:7px;display:grid;place-items:center;
  background:rgba(12,16,22,.6);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  opacity:.85;transition:opacity .25s,background .25s,transform .25s;
}
.clip__yt svg{ width:20px;height:20px;fill:#FF0033 }
a.clip:hover .clip__yt{ opacity:1;background:#FF0033;transform:scale(1.06) }
a.clip:hover .clip__yt svg{ fill:#fff }
a.clip:hover .clip__yt svg path:last-child{ fill:#FF0033 }

/* ภาพนิ่งขยับเล็กน้อยตอนชี้ ให้รู้ว่ากดได้ */
a.clip .clip__media{ transition:transform .6s cubic-bezier(.2,.8,.2,1),filter .35s }
a.clip:hover .clip__media{ transform:scale(1.05);filter:brightness(1.06) }
a.clip:focus-visible{ outline:3px solid var(--orange-hi);outline-offset:2px }

/* เล่มที่ยังไม่ได้ใส่ปก — แสดงเป็นการ์ดชื่อเล่ม ไม่ใช่ช่องว่างบนชั้น */
.sbook__ph{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  gap:6px;padding:14px 12px;text-align:center;
  background:linear-gradient(160deg,#F3EFE8,#E4DED3);
  border:1px solid rgba(0,0,0,.08);
}
.sbook__ph b{ font-size:clamp(11px,1.1vw,14px);line-height:1.4;color:var(--ink) }
.sbook__ph i{ font-style:normal;font-size:clamp(9px,.9vw,12px);color:var(--ink-soft) }

/* ============================================================
   ตัวอ่าน : พลิกหน้าทีละใบเหมือนหนังสือจริง
   ภาพหนึ่งใบคือสเปรด 2 หน้า จึงต้องหั่นเป็นซ้าย-ขวาแล้วพลิกเฉพาะใบขวา
   โดยมีบานพับอยู่ที่สันกลาง

   ขณะพลิกไปหน้าถัดไป
     ใต้ใบ : ซ้าย = หน้าซ้ายของสเปรดเดิม · ขวา = หน้าขวาของสเปรดใหม่
     ตัวใบ : ด้านหน้า = หน้าขวาของสเปรดเดิม · ด้านหลัง = หน้าซ้ายของสเปรดใหม่
   ตรงกับกระดาษจริงที่ยกขึ้นแล้วพลิกข้าม
   ============================================================ */
.rbook{ position:absolute;inset:0;perspective:2400px;perspective-origin:50% 50% }
.rbook__in{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  transform-style:preserve-3d;
}

/* ครึ่งซ้าย-ขวาที่อยู่ใต้ใบพลิก */
.rhalf{
  position:absolute;top:0;height:100%;width:50%;
  background-size:200% 100%;background-repeat:no-repeat;
  box-shadow:inset 0 0 60px rgba(0,0,0,.16);
}
.rhalf--l{ left:0;  background-position:0 0 }
.rhalf--r{ left:50%; background-position:100% 0 }

/* ใบกระดาษที่พลิก บานพับอยู่ขอบซ้ายของมัน = สันกลางเล่ม */
.rleaf{
  position:absolute;top:0;left:50%;width:50%;height:100%;
  transform-origin:left center;transform-style:preserve-3d;
  will-change:transform;
}
/* เงาทอดลงบนหน้าที่อยู่ใต้ใบ */
.rbook__cast{
  position:absolute;top:0;left:0;width:50%;height:100%;
  background:linear-gradient(270deg,rgba(0,0,0,.45),rgba(0,0,0,0) 70%);
  opacity:0;pointer-events:none;
}

/* ใบเดี่ยว (เล่มที่หน้าในเป็นหน้าเดี่ยว) พลิกทั้งแผ่น บานพับขอบซ้าย
   ภาพในแต่ละท่อนคำนวณจาก JS ที่นี่กำหนดแค่ความกว้างของใบ */
.rleaf--solo{ left:0;width:100% }

@media (prefers-reduced-motion:reduce){
  .rleaf{ transition:none!important }
}

/* ============================================================
   ตัวอ่าน : กล่องเดียวค้างไว้ ไม่สลับ DOM ตอนเปลี่ยนหน้า

   เดิมสร้าง .rpage ใบใหม่ทุกครั้งแล้วลบใบเก่า ซึ่ง .rpage img ใช้ 100%
   ของเวที แต่กล่องพลิกคิดขนาดเอง 94% ตอนสลับจึงเห็นภาพขยาย 6%
   เหมือนซูมเข้า  คราวนี้ทุกหน้าใช้กล่องเดียวและกฎขนาดชุดเดียว
   ============================================================ */
.rbook{
  position:absolute;inset:0;
  display:grid;place-items:center;
  perspective:2600px;perspective-origin:50% 50%;
}
.rbook__in{
  position:relative;transform-style:preserve-3d;
  box-shadow:0 30px 80px rgba(0,0,0,.55);
  /* ขนาดค่อย ๆ เปลี่ยนเมื่อสัดส่วนหน้าต่างกัน เช่นปกแคบ → สเปรดกว้าง */
  transition:width .55s cubic-bezier(.3,.8,.25,1),
             height .55s cubic-bezier(.3,.8,.25,1),
             opacity .22s ease;
}
.rbook__in.is-fade{ opacity:0 }

/* หน้าที่เรนเดอร์จาก PDF สด (เล่มที่ยังไม่มีรูปหน้าตัวอย่าง) */
.rbook__pdf{ position:absolute;inset:0;display:grid;place-items:center;background:#11161c }
.rbook__pdf canvas{ max-width:100%;max-height:100%;width:auto;height:auto;display:block }

/* การ์ดชวนสั่งซื้อท้ายตัวอย่าง อยู่ในกล่องเดียวกัน ไม่ต้องสลับ DOM */
.rbook__in > .reader__end{
  position:absolute;inset:0;
  /* กฎ .reader__end เดิมตั้ง width:min(820px,92vw) ไว้ ซึ่งชนะ inset:0 ที่ไม่ได้บอกความกว้าง
     การ์ดจึงกว้างแค่ 820px แล้วชิดซ้ายในกล่อง ต้องล้างเป็น auto ให้ inset คุมขนาดแทน */
  width:auto;height:auto;
  display:grid;place-content:center;justify-items:center;gap:12px;
  padding:clamp(24px,4vw,54px);text-align:center;
  background:linear-gradient(160deg,#1b2129,#101519);
}

@media (prefers-reduced-motion:reduce){
  .rbook__in{ transition:none }
}

/* ============================================================
   ตัวกรองชั้นหนังสือ : Filter by : เดือน · ปี · SEARCH
   ใช้ร่วมกันทั้งบล็อก MAGAZINE หน้าแรก และหน้าชั้นหนังสือ
   ทำจาก <select> จริง จึงใช้งานได้แม้ปิด JS และเลื่อนด้วยคีย์บอร์ดได้
   ============================================================ */
.shelffilter{
  display:flex;align-items:center;justify-content:center;
  gap:12px;flex-wrap:wrap;
  /* ล่างต้องเผื่อไว้เยอะ เพราะปกบนชั้นแรกยกขึ้น 30px ตอนเอาเมาส์ไปชี้
     ถ้าเว้นน้อยกว่านี้ปกจะเด้งขึ้นไปทับปุ่ม SEARCH */
  padding:clamp(26px,3.4vw,46px) 16px clamp(52px,5.6vw,78px);
  /* ไม่ใส่พื้นหลัง ปล่อยให้กลืนกับพื้นของชั้นหนังสือ ไม่งั้นเป็นแถบขาวคาดกลางหน้า */
}
.shelffilter__lbl{
  /* สีเดียวกับ prototype — เทาอมน้ำเงิน ไม่ใช่ดำเข้ม */
  font-size:clamp(17px,1.5vw,21px);font-weight:700;color:#4a4a4a;letter-spacing:.02em;
}

/* กล่องเลือกทรงแคปซูล ขอบส้ม */
.pilldd{ position:relative;display:inline-flex;align-items:center }
.pilldd select{
  appearance:none;-webkit-appearance:none;
  /* ขนาดตาม .dd__btn ของ prototype : padding 9px 20px, ตัวอักษร 17px
     ไม่ตั้ง min-width กว้าง ๆ ปุ่มจะได้พอดีข้อความเหมือนต้นแบบ */
  min-width:0;
  padding:9px 36px 9px 20px;
  border:1.6px solid var(--orange);border-radius:999px;background:#fff;
  font:inherit;font-size:clamp(15px,1.4vw,17px);font-weight:700;color:var(--orange);
  cursor:pointer;transition:background .25s,color .25s,box-shadow .25s;
}
.pilldd select:hover{ background:rgba(255, 103, 0,.07) }
.pilldd select:focus-visible{ outline:none;box-shadow:0 0 0 3px rgba(255, 103, 0,.24) }
.pilldd i{
  position:absolute;right:16px;top:50%;width:8px;height:8px;pointer-events:none;
  border-right:2.2px solid var(--orange);border-bottom:2.2px solid var(--orange);
  transform:translateY(-70%) rotate(45deg);
}

/* ปุ่ม SEARCH */
.shelffilter__go{
  appearance:none;cursor:pointer;font:inherit;
  /* ขนาดตามปุ่มส้มของ prototype */
  padding:11px 30px;border:0;border-radius:999px;
  background:var(--orange);color:#fff;
  font-size:clamp(15px,1.2vw,18px);font-weight:700;letter-spacing:.06em;
  box-shadow:0 6px 18px rgba(255, 103, 0,.34);
  transition:background .25s,transform .2s,box-shadow .25s;
}
.shelffilter__go:hover{
  background:var(--orange-deep);transform:translateY(-1px);
  box-shadow:0 9px 24px rgba(255, 103, 0,.42);
}
.shelffilter__clear{
  font-size:14px;color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px;
}
.shelffilter__clear:hover{ color:var(--orange) }

@media(max-width:560px){
  .shelffilter{ gap:8px;padding-inline:12px }
  .shelffilter__lbl{ width:100%;text-align:center }
  .pilldd select{ min-width:0;padding:10px 36px 10px 16px }
  .shelffilter__go{ padding:11px 26px }
}


/* ============================================================
   [hidden] ต้องชนะกฎ display ของเราเสมอ
   UA stylesheet มีแค่ [hidden]{display:none} ซึ่งมีน้ำหนักต่ำสุด
   พอเราเขียน .cls{display:grid} ของที่สั่งซ่อนจะยังโผล่อยู่
   เจอปัญหานี้มาแล้วสามรอบ (กล่องค้นหา, ชิปแฮชแท็ก, ตัวอ่านนิตยสาร)
   จึงปิดจบด้วยกฎเดียวตรงนี้ ไม่ต้องไปตามแก้เป็นจุด ๆ อีก
   ============================================================ */
[hidden]{ display:none!important }


/* ชั้นหนังสือหน้า /magazines : .mh__item ตั้ง opacity:0 รออนิเมชัน
   ถ้าอนิเมชันไม่ทำงาน (reduced motion) หนังสือจะหายทั้งชั้น จึงกันไว้ */
@media (prefers-reduced-motion:reduce){
  .maghero.is-open .mh__item{ animation:none;opacity:1;transform:none }
}


/* ============================================================
   ลำดับชั้นในเวทีตัวอ่าน
   .rbook ถูก JS ต่อท้าย #rStage จึงอยู่หลังปุ่ม ‹ › ในลำดับ DOM
   และเป็น absolute inset:0 ทับพื้นที่เวทีทั้งผืน ปุ่มจึงกดไม่ติด
   ยกปุ่มกับตัวเลขหน้าขึ้นมาไว้เหนือเล่ม
   ============================================================ */
.reader__stage > .rbook{ z-index:1 }
.reader__nav,
.reader__count{ z-index:3 }


/* .rbook__in ถูกประกาศสองรอบ รอบเก่าเป็น absolute + top/left:50% + translate(-50%,-50%)
   รอบใหม่เปลี่ยนเป็น relative ในกริดที่จัดกลางให้แล้ว แต่ top/left/transform เดิมยังมีผล
   เล่มจึงถูกดันไปทางขวา ต้องล้างค่าเดิมให้หมด */
.reader__stage .rbook__in{ position:relative;top:auto;left:auto;transform:none }


/* ตัวกรองย้ายลงไปอยู่กับชั้นไม้ด้านล่างแล้ว (ตำแหน่งเดียวกับ prototype)
   ด้านบนจึงไม่ต้องบีบระยะอีก ปล่อยให้ใช้ค่าเดิมของ .maghero */


/* ตอนยังปิดเล่ม ครึ่งซ้ายเป็นที่ว่าง เงาจึงต้องอยู่ที่ตัวปกไม่ใช่รอบกล่องทั้งใบ */
.rbook__in.is-closed{ box-shadow:none }
.rbook__in.is-closed .rhalf--l{ box-shadow:none;background:none }
.rbook__in.is-closed .rhalf--r{
  box-shadow:0 30px 80px rgba(0,0,0,.55), inset 0 0 60px rgba(0,0,0,.16);
}


/* ตอนปิดเล่ม เลื่อนกล่องไปทางซ้ายหนึ่งในสี่ ปกจึงอยู่กลางจอพอดี
   พอเปิด กล่องเลื่อนกลับมาตรงกลางพร้อมกับที่ปกพลิกไปทับครึ่งซ้าย
   ได้จังหวะเหมือนกางหนังสือจริง และไม่มีการเปลี่ยนขนาดกล่องเลย */
.reader__stage .rbook__in{
  transition:transform .72s cubic-bezier(.42,.03,.24,1),opacity .22s ease;
}
.reader__stage .rbook__in.is-closed{ transform:translateX(-25%) }


/* ชื่อฉบับใต้ปกบนชั้นเลื่อน เป็นลิงก์ไปหน้ารายละเอียด แต่ไม่ต้องขีดเส้นใต้
   ให้เปลี่ยนเป็นสีส้มตอนเอาเมาส์ไปชี้แทน จะได้ยังรู้ว่ากดได้ */
.mh__cap a{ text-decoration:none;color:inherit }
.mh__cap a:hover b,
.mh__cap a:focus-visible b{ color:var(--orange) }

/* ลิงก์ที่ห่อปก/รูป ไม่ต้องมีเส้นใต้
   ปกติมองไม่เห็นเพราะข้างในเป็นรูป แต่เล่มที่ยังไม่ได้ใส่ปกจะโชว์ชื่อเป็นตัวอักษร
   ถ้าไม่ปิดไว้จะมีเส้นใต้โผล่มาเฉพาะเล่มนั้น */
.sbook,.b3d,.foot__brand,.social a,.ads__slide a,.thero,.vsw{ text-decoration:none }


/* ตัวอย่างคลิปจาก YouTube ตอนเอาเมาส์ไปชี้
   วางทับภาพปกเต็มกรอบ และไม่รับคลิก คลิกจึงทะลุไปที่ลิงก์เปิด YouTube */
.clip__ytframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;
  pointer-events:none;object-fit:cover;
  opacity:0;animation:clipFadeIn .45s ease forwards;
}
@keyframes clipFadeIn{ to{ opacity:1 } }
.clip.is-playing .clip__play{ opacity:0 }

/* คลิปที่กดเล่นแล้ว — ตัวเล่นต้องรับคลิกได้ (กดหยุด กรอเวลา ปรับเสียง)
   ปิดลูกเล่นตอนชี้ทั้งหมด ไม่งั้นกรอบจะซูมหรือเปลี่ยนสีทับตัวเล่น */
.clip__ytframe--live{ pointer-events:auto;z-index:4;opacity:1;animation:none;background:#000 }
.clip.is-live{ cursor:default }
.clip.is-live .clip__play,
.clip.is-live .clip__yt{ display:none }
.clip.is-live .clip__media,
a.clip.is-live:hover .clip__media{ transform:none;filter:none }
.vcard:hover .clip.is-live{ transform:none }


/* ภาพปกคลิปเปลี่ยนจาก background-image มาเป็น <img> เพื่อให้ถอยไฟล์ได้เมื่อ 404
   ต้องกินเต็มกรอบและครอบตัดเหมือน background-size:cover ของเดิม */
.clip__media .thumb,
.vhero__media .thumb{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;display:block;
}


/* แถบ "รูปแบบการจัดวาง" กับปุ่มสามอัน เดิมไม่มีระยะด้านล่างเลย
   การ์ดใบแรกจึงชิดติดปุ่ม และตอนเอาเมาส์ไปชี้การ์ดยกขึ้น 8px จะเลยขึ้นไปทับ
   เว้นด้านล่างไว้ให้พอ */
.ap__view{ padding-bottom:clamp(20px,2.4vw,34px) }


/* ============================================================
   แถบเมนูบนสุด — ปรับให้เบาตาขึ้น โครงเดิมทั้งหมด
   ของเดิมใช้ตัวหนา 700 กับขนาดใหญ่ทุกชิ้น เลยดูทึบและกินพื้นที่
   ฟอนต์ TATSana Chon มีน้ำหนัก 300/400/700 จึงเปลี่ยนตัวเมนูมาใช้ 400
   แล้วเก็บ 700 ไว้ให้ปุ่มสมัครสมาชิกกับเมนูที่กำลังเปิดอยู่เท่านั้น
   ============================================================ */
:root{ --bar-h:78px }

.brand img{ width:58px;height:58px }

.center{ gap:clamp(26px,4.4vw,64px) }
.link{
  font-size:18.5px;font-weight:400;letter-spacing:.012em;
  padding:9px 2px;
}
/* เส้นใต้บางลงและขยับลงมาหน่อย ดูคมกว่าเส้นหนา */
.link::after{ height:1.6px;bottom:1px;border-radius:1px }
/* เมนูที่เปิดอยู่ใช้สีส้มกับเส้นใต้เป็นตัวบอก ไม่เปลี่ยนเป็นตัวหนา
   เพราะความกว้างข้อความจะเปลี่ยน แล้วเมนูข้าง ๆ ขยับตาม */
.chev{ width:8.5px;height:8.5px;border-width:1.8px }

.cta{
  height:46px;padding:0 26px;
  font-size:17px;font-weight:700;letter-spacing:.01em;
  border-width:1.6px;
}

.iconbtn{ width:46px;height:46px }
.iconbtn svg{ width:22px;height:22px;stroke-width:1.9 }
.searchpill{ height:46px;padding:0 18px 0 5px }
.searchpill__ic{ width:36px;height:36px;flex-basis:36px }
.searchpill__ic svg{ width:18px;height:18px }
.searchpill__txt{ font-size:15px }
.langsw{ min-width:42px;height:36px;font-size:13.5px;letter-spacing:.06em }

/* แถบหมวดด้านล่าง — ตัวเล็กลง ระยะห่างเท่ากันขึ้น */
.subbar{ gap:clamp(2px,1vw,14px) }
.subbar a{
  font-size:16.5px;font-weight:400;letter-spacing:.01em;
  padding:10px 20px;
}
.subbar a:hover,.subbar a:focus-visible{
  /* ไม่เปลี่ยนน้ำหนักตัวอักษรตอนชี้ ไม่งั้นข้อความขยับ ปล่อยให้พื้นส้มเป็นตัวบอกพอ */
  box-shadow:0 4px 14px rgba(255, 103, 0,.28);
}

@media(max-width:900px){
  :root{ --bar-h:64px }
  .brand img{ width:46px;height:46px }
  .link{ font-size:16.5px }
  .cta{ height:40px;padding:0 16px;font-size:15.5px }
  .iconbtn{ width:42px;height:42px }
  .searchpill{ height:42px }
  .subbar a{ font-size:15.5px;padding:8px 14px }
}


/* แบนเนอร์โฆษณากางเต็มความกว้างจอ ยิ่งจอกว้างยิ่งต้องยืดภาพมาก
   จำกัดไว้ที่ 1920px บนจอที่กว้างกว่านั้นจะได้ไม่ยืดต่อจนภาพแตก */
.ads__frame{ max-width:1920px;margin-inline:auto }


/* ป้าย SOLD OUT / ใหม่ บนชั้นเลื่อนแนวนอน
   .mh__item เดิมไม่ได้ตั้ง position จึงต้องตั้งให้ป้ายเกาะได้
   และปกที่หมดแล้วหรี่สีลงเหมือนบนชั้นไม้ */
.mh__item{ position:relative }
.b3d.is-sold img{ filter:grayscale(.74) brightness(1.1) contrast(.88) }
.mh__item .badge--sold{ top:44% }
.mh__item .badge--new{ left:-6px;top:-10px }


/* ปกที่ขยายตอนเอาเมาส์ไปชี้ถูกกรอบตัดหัว เพราะ .mh__viewport ตั้ง overflow:hidden
   ซึ่งตัดทั้งแนวนอนและแนวตั้ง ทั้งที่ต้องการตัดแค่แนวนอน
   CSS ไม่ให้ตั้ง overflow-x:hidden คู่กับ overflow-y:visible (จะกลายเป็น auto มีแถบเลื่อน)
   จึงปล่อยกรอบนี้ให้ไม่ตัด แล้วอาศัย .maghero ที่มี overflow:hidden อยู่แล้วเป็นตัวตัดแนวนอนแทน */
.maghero .mh__viewport{ overflow:visible }

/* ปกที่ขยายตอนชี้ถูกตัดหัวบน Safari
   ต้นเหตุคือ mask-image ที่ใส่ไว้ไล่จางขอบซ้าย-ขวา — WebKit ใช้ mask
   เป็นตัวตัดเนื้อหาที่ล้นออกนอกกรอบด้วย ต่างจาก Chromium ที่ไม่ตัด

   เคยลองยืด mask ให้สูงกว่ากรอบ (mask-size:100% 400%) แต่เป็นการพึ่ง
   พฤติกรรมของเอนจินซึ่งตรวจไม่ได้ในเครื่องนี้ จึงเลิกใช้ mask ไปเลย
   เปลี่ยนมาวางแผ่นไล่สีขาวทับที่ริมซ้าย-ขวาแทน ได้ภาพเหมือนกันเป๊ะ
   แต่ไม่มีการตัดเนื้อหาในทุกเบราว์เซอร์ */
.maghero .mh__viewport{
  -webkit-mask-image:none;mask-image:none;
}
.maghero .mh__shelf::before,
.maghero .mh__shelf::after{
  content:"";position:absolute;top:0;bottom:0;width:7%;
  z-index:9;pointer-events:none;
}
.maghero .mh__shelf::before{
  left:0;background:linear-gradient(90deg,#fff 12%,rgba(255,255,255,0));
}
.maghero .mh__shelf::after{
  right:0;background:linear-gradient(270deg,#fff 12%,rgba(255,255,255,0));
}


/* ระยะระหว่างบล็อกภาพใหญ่ทั้งแถบ ให้เท่ากับช่องไฟระหว่างการ์ดหมวด (7px) ทั้งหมด
   ลำดับบนหน้าแรกคือ  โฆษณา → แบนเนอร์ท่องเที่ยว → สไลด์ไฮไลต์ → แถวการ์ด
     .ads        ใช้ padding บน-ล่างของตัวเอง
     .thero      ใช้ margin ล่างของตัวเอง
     .hl         ไม่ต้องมี margin เพราะ .tabs มี padding บน 7px อยู่แล้ว
                 ถ้าใส่ทั้งคู่จะกลายเป็น 19px */
.ads{ padding:7px 0 }
.stories-sec__in>.thero{ margin-bottom:7px }
.stories-sec__in>.hl{ margin-bottom:0 }


/* ราง scroll ของฉากเปิดเล่ม = ระยะเล่นฉาก + ช่วงค้างหน้า + ความสูงจอเอง
   ระยะเล่นฉากคือ ANIM_VH ใน site.js (150vh) ส่วนที่เหลือคือช่วงค้างหน้า
   เดิมค้างหนึ่งจอเต็ม (350vh) ผู้อ่านรู้สึกว่าหน้าค้าง เลื่อนแล้วไม่ไปไหน
   ตอนนี้เหลือ 15vh พอให้ข้อความเรื่องจากปกขึ้นครบ แล้วเลื่อนต่อก็ไหลลงไปด้านล่างทันที
   100vh (จอ) + 150vh (เล่นฉาก) + 15vh (ค้าง) = 265vh */
.track{ height:265vh }


/* ป้าย "ใหม่" / SOLD OUT ย้ายเข้ามาอยู่ในตัวลิงก์ปก เพื่อให้ขยับไปพร้อมปกตอนชี้
   แต่ .sbook / .b3d ตั้ง transform-style:preserve-3d ลูกทุกตัวจึงเรียงกันด้วยตำแหน่ง z
   ไม่ใช่ z-index — ป้ายที่อยู่ที่ z=0 เท่ากับปกจะถูกปกทับ
   ดันป้ายมาข้างหน้าด้วย translateZ จึงลอยอยู่บนปกเสมอ */
.sbook .badge--new,
.b3d .badge--new{ transform:translateZ(26px) }
.sbook .badge--sold,
.b3d .badge--sold{ transform:translate(-50%,-50%) translateZ(26px) }


/* จุดบอกลำดับสไลด์ — แถบที่วิ่งใช้เวลา 8 วินาที ถ้าดูแค่แถบจะบอกไม่ได้ทันที
   ว่ากำลังอยู่ภาพไหน จึงทำให้จุดที่กำลังแสดงสว่างและหนากว่าเพื่อนตั้งแต่แรก */
.dot.is-active{
  background:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.95),0 2px 10px rgba(0,0,0,.22);
  transform:scaleY(1.5);
}
.dot.is-active:hover{ transform:scaleY(1.7) }
/* เลิกใช้แถบวิ่งนับเวลาแล้ว เหลือแค่สีขาวบอกว่าอยู่หน้าไหน */
.dot i{ display:none }


/* ============================================================
   ช่องค้นหาบนแถบเมนู — ปกติเป็นไอคอนกลมเท่านั้น
   เอาเมาส์ไปชี้ / โฟกัส / มีข้อความอยู่ → ยืดออกมาให้พิมพ์
   ============================================================ */
.smini{
  position:relative;display:flex;align-items:center;
  height:46px;border-radius:999px;
  border:1px solid transparent;background:transparent;
  transition:width .42s cubic-bezier(.2,.8,.2,1),background .3s,border-color .3s,
             -webkit-backdrop-filter .3s,backdrop-filter .3s;
  width:46px;overflow:hidden;
}
.smini.is-open,.smini:focus-within,.smini.is-filled{
  width:clamp(210px,20vw,288px);
  background:rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.42);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.topbar:hover .smini.is-open,.topbar:hover .smini:focus-within,
.topbar.is-open .smini.is-open,.topbar.is-open .smini:focus-within,
.topbar.is-light .smini.is-open,
.topbar.is-light .smini:focus-within{
  background:rgba(255,255,255,.6);border-color:rgba(255,255,255,.9);
}

.smini__ic{
  appearance:none;border:0;cursor:pointer;flex:0 0 46px;
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:none;color:#fff;filter:drop-shadow(0 1px 8px rgba(0,0,0,.45));
  transition:background .3s,color .3s;
}
.smini__ic svg{ width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round }
/* ชี้แล้วแว่นขยายเปลี่ยนเป็นสีส้มของแบรนด์ ให้รู้ว่ากดได้ แต่ยังไม่กางช่องพิมพ์ */
.smini:not(.is-open) .smini__ic:hover{
  color:var(--orange);
  background:rgba(255,255,255,.92);
  filter:none;
}
.smini.is-open .smini__ic,.smini:focus-within .smini__ic{
  background:rgba(255,255,255,.9);color:var(--orange);filter:none;
}
.topbar:hover .smini__ic,.topbar.is-open .smini__ic,
.topbar.is-light .smini__ic{ color:var(--ink);filter:none }
.topbar:hover .smini.is-open .smini__ic,.topbar:hover .smini:focus-within .smini__ic,
.topbar.is-light .smini.is-open .smini__ic,
.topbar.is-light .smini:focus-within .smini__ic{ color:var(--orange) }

.smini__in{
  flex:1 1 auto;min-width:0;width:100%;
  border:0;background:none;outline:none;padding:0 16px 0 4px;
  font:inherit;font-size:15px;color:#fff;
  opacity:0;transition:opacity .28s;
}
.smini.is-open .smini__in,.smini:focus-within .smini__in,.smini.is-filled .smini__in{ opacity:1 }
.smini__in::placeholder{ color:rgba(255,255,255,.72) }
.topbar:hover .smini__in,.topbar.is-open .smini__in,
.topbar.is-light .smini__in{ color:var(--ink) }
.topbar:hover .smini__in::placeholder,.topbar.is-open .smini__in::placeholder,
.topbar.is-light .smini__in::placeholder{ color:rgba(21,24,28,.45) }
.smini__in::-webkit-search-cancel-button{ -webkit-appearance:none;appearance:none }

@media(max-width:760px){
  /* จอเล็ก กดไอคอนแล้วเปิดกล่องค้นหาเต็มจอเลย ไม่ต้องยืด */
  .smini.is-open,.smini:focus-within{ width:46px;background:none;border-color:transparent }
  .smini__in{ display:none }
}


/* ============================================================
   แถบเมนู : ทำกระจกให้ใสขึ้น ไม่ขุ่น
   ของเดิมซ้อนสีขาวไว้หนา (.62/.36/.5) เบลอ 24px และดันความอิ่มสี 180%
   สามอย่างรวมกันทำให้พื้นดูขุ่นเป็นฝ้า
   ลดสีขาวลงราวหนึ่งในสาม ลดเบลอ และเลิกดันความอิ่มสี
   ยังเก็บขอบกับเงาไว้ให้แถบมีขอบเขตชัดและตัวหนังสือสีเข้มยังอ่านออก
   ============================================================ */
.topbar:hover .glass,.topbar:focus-within .glass,.topbar.is-open .glass,
.topbar.is-light .glass{
  background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.15) 46%,rgba(255,255,255,.21));
  -webkit-backdrop-filter:blur(13px) saturate(106%);backdrop-filter:blur(13px) saturate(106%);
  border-color:rgba(255,255,255,.44);
  box-shadow:0 8px 26px rgba(22,44,66,.12),0 2px 6px rgba(22,44,66,.06),
    inset 0 1px 0 rgba(255,255,255,.66),inset 0 -10px 18px rgba(255,255,255,.10);
}

/* ไม่ใส่แสงเรืองรอบตัวอักษร — เคยลองแล้วเห็นเป็นฝ้าขาวรอบฟอนต์ ไม่สวย
   ตอนแถบสว่างขึ้นให้ล้างเงาข้อความทิ้งให้หมด (ของเดิมมีเงาดำไว้อ่านบนภาพ) */
.topbar:hover .link,.topbar:focus-within .link,.topbar.is-open .link,
.topbar:hover .subbar a,.topbar.is-open .subbar a,
.topbar.is-light .link,
.topbar.is-light .subbar a{ text-shadow:none }
/* แสงวูบที่วิ่งผ่านก็เบาลงตาม ไม่งั้นจะเห็นเป็นฝ้าขาวพาดกลางแถบ */
.glass::before{ background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.3) 46%,rgba(255,255,255,0)) }
.topbar:hover .glass::after,.topbar.is-open .glass::after,
.topbar.is-light .glass::after{ opacity:.6 }


/* ============================================================
   หน้าชั้นหนังสือ : หัวเรื่องถูกแถบเมนูทับ
   แถบเมนูลอยอยู่ (position:fixed) สูงถึง 102px ตอนปิด และ 168px ตอนกางเมนูหมวด
   แต่หัวเรื่องเริ่มที่ 92px จึงถูกทับทั้งสองสถานะ
   เว้นที่ด้านบนให้พ้นแถบตอนกางเมนูแล้วบวกช่องหายใจ
   คิดจาก --bar-h เพื่อให้ปรับตามความสูงแถบเองถ้าแก้ในอนาคต
   ============================================================ */
.maghero{ padding-top:calc(var(--bar-h) + 106px) }
@media(max-width:900px){
  /* จอเล็กแถบเตี้ยลง (--bar-h 64) แต่เมนูหมวดยังกางลงมา 60px
     +96 จึงพอดี ถ้าใช้ 78 จะเหลือเกยกัน 6px */
  .maghero{ padding-top:calc(var(--bar-h) + 96px) }
}


/* ============================================================
   ปุ่มเปิดหน้าซ้าย-ขวาในตัวอ่าน ชิดขอบจอเกินไปจนถูกตัด
   ปุ่มวางอยู่นอกเวที (right:-64px) แต่เวทีกว้างถึง 96vw
   ขอบขวาของปุ่มจึงเลยขอบจอออกไป
   หุบเวทีให้เหลือที่ว่างข้างละ ~95px แล้วขยับปุ่มออกอีกหน่อย
   ============================================================ */
@media(min-width:900px){
  .reader__stage{ width:min(1400px, calc(100vw - 200px)) }
  .reader__nav--prev{ left:-72px }
  .reader__nav--next{ right:-72px }
}
@media(max-width:899px){
  /* จอเล็กไม่มีที่ว่างข้างเวที วางปุ่มไว้ในกรอบแต่ขยับเข้ามาไม่ให้ชิดขอบ */
  .reader__stage{ width:min(1400px, calc(100vw - 24px)) }
  .reader__nav--prev{ left:8px }
  .reader__nav--next{ right:8px }
}


/* โลโก้ไม่ต้องมีเงา
   ของเดิมใส่ drop-shadow ไว้ทั้งตอนปกติ (เงาดำ) และตอนชี้ (เรืองส้ม)
   เพื่อให้เด่นบนภาพถ่าย แต่ไม่ต้องการแล้ว — เก็บแค่การหมุน-ขยายตอนชี้ไว้ */
.brand img,
.brand:hover img,
.topbar:hover .brand img,
.topbar.is-open .brand img,
.topbar.is-light .brand img{ filter:none }


/* ============================================================
   ใบพลิกในตัวอ่านแบบโค้ง — หั่นเป็นท่อนแนวตั้ง
   ท่อนเป็นพี่น้องระนาบเดียวกัน ลึกแค่ 2 ชั้น (rleaf > rseg > rface)
   ไม่ซ้อน preserve-3d ลึก เพราะ WebKit เรนเดอร์ชั้นลึกได้ไม่ดี
   ============================================================ */
.rleaf{ transition:none!important }        /* ขับอนิเมชันจาก JS ทีละเฟรม */
.rseg{
  position:absolute;top:0;left:0;height:100%;
  transform-origin:left center;transform-style:preserve-3d;
  will-change:transform;
}
.rface{
  position:absolute;top:0;left:0;height:100%;width:calc(100% + 1.5px);
  backface-visibility:hidden;overflow:hidden;
  background-repeat:no-repeat;
  /* ดันหน้ากระดาษออกจากระนาบท่อนเล็กน้อย ไม่ให้สองหน้าซ้อนระนาบเดียวกัน
     ถ้าซ้อนพอดี WebKit จะเลือกวาดด้านหลังทับด้านหน้า ภาพจะกลับซ้าย-ขวา */
  transform:translateZ(.06px);
}
.rface--b{ transform:rotateY(180deg) translateZ(.06px) }
/* เงาของแต่ละท่อน — ต้องเป็น "สีเรียบ" ห้ามเป็น gradient
   เพราะ gradient จะซ้ำใหม่ทุกท่อน กลายเป็นริ้วแนวตั้ง 18 ริ้ว
   ความเข้มคิดจากมุมเอียงของท่อนนั้นใน JS ท่อนที่หันหนีสายตาจะมืดกว่า
   ไล่ต่อกันเองเป็นเงาโค้งเรียบทั้งใบ */
.rface > i{
  position:absolute;inset:-1px;display:block;opacity:0;pointer-events:none;
  background:#070b11;
}

/* ============================================================
   ลากหน้าเพื่อพลิก — ให้รู้ว่ากดลากได้ และไม่ให้ลากไปเลือกข้อความ
   touch-action:pan-y ปล่อยการเลื่อนแนวตั้งให้เบราว์เซอร์
   แต่ยึดแนวนอนไว้ใช้พลิกหน้า
   ============================================================ */
.reader__stage .rbook__in{
  cursor:grab;user-select:none;-webkit-user-select:none;touch-action:pan-y;
}
.reader__stage .rbook__in.is-dragging{ cursor:grabbing }

/* ============================================================
   ตัวอ่านนิตยสาร — เอนจินพลิกหน้า StPageFlip (MIT © Nodlik)
   คัด CSS ของไลบรารีมาไว้ในไฟล์นี้เลย จะได้ไม่ต้องยิงไฟล์เพิ่มอีกหนึ่งคำขอ
   ที่มา: page-flip@2.0.7/src/Style/stPageFlip.css
   ============================================================ */
.stf__parent{
  position:relative;display:block;box-sizing:border-box;
  transform:translateZ(0);-ms-touch-action:pan-y;touch-action:pan-y;
}
.stf__wrapper{ position:relative;width:100%;box-sizing:border-box }
.stf__parent canvas{ position:absolute;width:100%;height:100%;left:0;top:0 }
.stf__block{ position:absolute;width:100%;height:100%;box-sizing:border-box;perspective:2000px }
.stf__item{ display:none;position:absolute;transform-style:preserve-3d }
.stf__outerShadow,
.stf__innerShadow,
.stf__hardShadow,
.stf__hardInnerShadow{ position:absolute;left:0;top:0 }

/* กล่องหนังสือ วางกลางเวที ขนาดจริงตั้งจาก JS ตามสัดส่วนหน้ากระดาษ
   ไลบรารีวัดพื้นที่จาก .stf__block ซึ่งสูง 100% ของ .stf__wrapper
   แต่ wrapper ไม่ได้ตั้งความสูงไว้ (ปกติได้จาก padding-bottom ตอน autoSize)
   เราคุมขนาดเองจึงต้องยืด wrapper ให้เต็มกล่อง ไม่งั้นความสูงเป็น 0 หนังสือหาย */
.rflip{ position:relative;margin:0 auto }
.rflip > .stf__wrapper{ height:100% }

/* กระดาษหนึ่งหน้า — ตัวหน้าถูกเอนจินเขียน inline style ทับทุกเฟรม
   จึงใส่ได้เฉพาะกฎที่มาจาก stylesheet ส่วนภาพอยู่ใน .rpg__art

   transform-style:flat ทับค่า preserve-3d ของ .stf__item ตั้งใจ —
   เอนจินหมุน rotateY ที่ตัวหน้าเอง ไม่ได้ใช้ลูกที่วางในสามมิติ
   ปล่อยเป็น preserve-3d จะทำให้ Safari แตกชั้นเป็นแผ่นย่อยเวลาแรสเตอร์ไรซ์
   แล้วเห็นเป็นขีดแนวตั้งพาดหน้ากระดาษระหว่างพลิก */
.rpg{
  background:#fff;overflow:hidden;
  transform-style:flat;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
.rpg__art{
  position:absolute;inset:0;overflow:hidden;
  box-shadow:inset 0 0 34px rgba(0,0,0,.09);
}
/* ภาพหน้ากระดาษ — หนึ่งหน้าหนึ่งภาพขนาดพอดี (สเปรดถูกผ่าครึ่งมาแล้วใน JS) */
.rpg__img{
  position:absolute;inset:0;width:100%;height:100%;
  display:block;object-fit:fill;
  -webkit-user-drag:none;user-select:none;
}
/* ทางสำรองเมื่อผ่าภาพสเปรดไม่สำเร็จ — ภาพเต็มกว้างสองเท่าแล้วเลื่อนไปครึ่งที่ต้องการ */
.rpg__img--half{ inset:0 auto 0 0;width:200% }
.rpg--cover .rpg__art{ box-shadow:inset 0 0 40px rgba(0,0,0,.13) }
.rpg--blank{ background:#faf7f2 }

/* ใบปิดท้าย — กระดาษสีเข้มเปล่า ๆ ข้อความอยู่ที่แผง .rend--stage */
.rpg--end{ background:#171717 }
.rpg--end .rpg__art{ box-shadow:none }
.rend{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;
  padding:26px;text-align:center;color:#fff;
}
/* แผงชวนอ่านต่อ — กว้างเท่าเล่มที่กางอยู่ ข้อความจึงอยู่กลางหนังสือ
   ไม่ใช่ไปกองอยู่หน้าซ้ายหน้าเดียวเหมือนตอนวางไว้ในตัวใบปิดท้าย */
.rend--stage{
  inset:auto;position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  z-index:2;background:#171717;
  opacity:0;transition:opacity .28s ease;
}
.rend--stage.is-on{ opacity:1 }
.rend--stage[hidden]{ display:none }
.rend h4{ margin:0;font-size:clamp(19px,2vw,27px);font-weight:700;line-height:1.5 }
.rend p{ margin:0;font-size:clamp(14px,1.2vw,17px);opacity:.9;line-height:1.8 }
.rend .btn-orange{ margin-top:10px }

/* ============================================================
   สไลด์แบนเนอร์โฆษณา — ตรึงอัตราส่วนกรอบ
   --ad-ratio มาจาก home.php — ยึดแบนเนอร์ตัวตั้ง 1440 × 540 px
   ============================================================ */
.ads__frame{ aspect-ratio:var(--ad-ratio, 2.5) }
.ads__viewport,
.ads__track,
.ads__slide{ height:100% }
.ads__slide > a{ display:block;width:100%;height:100% }
/* ---- ทุกใบเต็มกรอบขนาดเดียวกัน ----
   กรอบตรึงไว้ที่ 8 : 3 ตามแบนเนอร์ตัวตั้ง (ดู $adRatio ใน home.php)
   ใบที่สัดส่วนไม่ตรงถูกซูมให้เต็มกรอบ แล้วตัดส่วนที่เกินออกเท่ากันทั้งสองฝั่ง */
.ads__slide img{ display:block;width:100%;height:100%;object-fit:cover;object-position:center }

/* ============================================================
   เมนูท้ายเว็บเหลือรายการเดียว "ติดต่อโฆษณา" ซึ่งเป็น <button>
   กฎ hover เดิมเขียนไว้เฉพาะ .foot__nav a ปุ่มจึงไม่เปลี่ยนสี
   ให้ปุ่มใช้ลูกเล่นเดียวกับลิงก์ — ชี้แล้วเป็นสีส้มและมีเส้นใต้วิ่ง
   ============================================================ */
.foot__nav button{ position:relative;transition:color .28s }
.foot__nav button::after{
  content:"";position:absolute;right:0;bottom:-4px;width:0;height:1.5px;
  background:var(--orange);transition:width .32s cubic-bezier(.2,.8,.2,1);
}
.foot__nav button:hover,
.foot__nav button:focus-visible{ color:var(--orange) }
.foot__nav button:hover::after,
.foot__nav button:focus-visible::after{ width:100% }
@media(max-width:820px){ .foot__nav button::after{ left:0;right:auto } }

/* ชื่อกองงานใต้หัวเรื่องใน popup ติดต่อโฆษณา */
.adbox__dept{ margin:0 0 20px;color:var(--ink-soft);font-size:15px;line-height:1.7 }
/* ไอคอน LINE ตัวจริง — เป็นโลโก้ทึบที่มีตัวอักษร LINE เจาะอยู่ข้างใน
   จึงต้องระบายสีแทนการวาดเส้น ไม่งั้นจะเหลือแค่กรอบลูกโป่งคำพูดธรรมดา */
.adbox__list .adbox__brand{ fill:var(--orange);stroke:none }

/* ============================================================
   ป้ายหมวดบนการ์ดบทความ ย้ายจาก "ลอยกลางขอบภาพ" มาอยู่บรรทัดเดียว
   กับหัวเรื่องและชิดขอบขวา  ใช้ float เพื่อให้บรรทัดที่สองของหัวเรื่อง
   ไหลกลับมาใช้ความกว้างเต็มการ์ด ไม่ถูกบีบเป็นคอลัมน์แคบข้างป้าย
   ============================================================ */
.pcard__body{ padding:22px 22px 24px }
.pcard__chip{
  position:static;float:right;transform:none;
  /* ขนาดป้าย (ตัวอักษร 15.5px · ระยะใน 6/22px) เท่าดีไซน์ต้นฉบับเป๊ะ
     เงาเปลี่ยนเป็นโทนส้มอ่อนเพราะป้ายวางบนพื้นขาว ไม่ได้ทับบนภาพแล้ว */
  margin:0 0 4px 12px;padding:6px 22px;font-size:15.5px;
  box-shadow:0 3px 10px rgba(255, 103, 0,.28);
}
.pcard:hover .pcard__chip{
  padding:6px 30px;letter-spacing:.02em;transform:none;
  box-shadow:0 6px 16px rgba(255, 103, 0,.42);
}
.pcard__head{ display:block }
.pcard__head::after{ content:"";display:block;clear:both }   /* กันป้ายล้นออกนอกกล่อง */
.pcard time{ clear:both }        /* วันที่ต้องอยู่ใต้ป้ายเสมอ ไม่ไหลไปข้าง ๆ */

/* ป้ายมีสองตัวในการ์ด — โชว์ทีละตัวตามมุมมอง
   ปกติ: ตัวในบรรทัดหัวเรื่อง   ·   แบบเต็มหน้า: ตัวที่ทับมุมบนซ้ายของภาพ */
.pcard__chip--onimg{ display:none }
.ap__grid.is-full .pcard__chip--inline{ display:none }
.ap__grid.is-full .pcard__chip--onimg{
  display:inline-block;position:absolute;float:none;margin:0;
  top:clamp(14px,1.4vw,22px);left:clamp(14px,1.4vw,22px);
  box-shadow:0 4px 14px rgba(0,0,0,.22);          /* ทับบนภาพ ใช้เงาเข้มตามดีไซน์ */
}
.ap__grid.is-full .pcard:hover .pcard__chip--onimg{
  transform:translateY(-3px);padding:6px 30px;
}
.ap__grid.is-full .pcard__head{ width:100% }

/* ============================================================
   แบบคอลลาจ — สลับการ์ดใหญ่/เล็กเป็นตาหมากรุก
   แถวแรก ใหญ่ เล็ก ใหญ่  ·  แถวถัดไป เล็ก ใหญ่ เล็ก
   ตรึงสัดส่วนภาพไว้สองค่า การ์ดใหญ่ทุกใบจึงสูงเท่ากัน เล็กก็เท่ากัน
   (เดิมปล่อยให้ภาพสูงตามไฟล์ ความสูงการ์ดจึงมั่วไปตามรูปที่ได้มา)
   ============================================================ */
.pcard--lg .pcard__frame{ aspect-ratio:1/1 }
.pcard--sm .pcard__frame{ aspect-ratio:3/2 }
.pcard--lg .pcard__frame img,
.pcard--sm .pcard__frame img{ height:100%;object-fit:cover }

/* ============================================================
   ตารางการ์ด 3 คอลัมน์แบบตายตัว (บทความที่เกี่ยวข้อง · บทความในเล่ม)
   เป็นตารางจริงไม่ใช่คอลลาจ ทุกใบจึงต้องเท่ากันหมด
   เดิมไม่ได้ตรึงสัดส่วนภาพ ความสูงการ์ดจึงไม่เท่ากันตามรูปที่อัปโหลดมา
   ตรึงภาพ 4/3 และตั้งความสูงต่ำสุดของหัวเรื่องไว้ 3 บรรทัด
   หัวเรื่องยาวสั้นไม่เท่ากันก็ยังจบที่ระดับเดียวกัน
   ============================================================ */
.art__rel__grid .pcard__frame{ aspect-ratio:4/3 }
.art__rel__grid .pcard__frame img{ height:100%;object-fit:cover }
.art__rel__grid .pcard h3{ min-height:3em }

/* ============================================================
   คอลลาจ: หัวเรื่องกินที่ 2 บรรทัดเสมอ ไม่ว่าจะยาวหรือสั้น
   เดิมใบที่หัวเรื่องขึ้นสองบรรทัดจะสูงกว่าเพื่อน 26px การ์ดจึงจบไม่ตรงระนาบ
   ลดขนาดตัวอักษรลงหน่อยเพื่อให้หัวเรื่องยาว ๆ ยังจบใน 2 บรรทัด
   และตัดที่ 2 บรรทัดกันไว้ ถ้ายาวเกินจริง ๆ จะไม่ดันการ์ดให้ยืด
   ============================================================ */
.pcard--lg h3,
.pcard--sm h3{
  font-size:19px;
  min-height:3em;                 /* 2 บรรทัดพอดีที่ line-height 1.5 */
  max-height:3em;
  /* ห้ามใช้ -webkit-box/line-clamp หรือ overflow:hidden ตรงนี้
     ทั้งคู่ทำให้ h3 เป็นกล่องแยก (BFC) ทั้งกล่องจึงถูกบีบไปอยู่ข้างป้ายหมวด
     ทั้งสองบรรทัด จอ 1024 เหลือที่ให้หัวเรื่องแค่ ~100px
     overflow:clip ตัดส่วนเกินได้โดยไม่สร้าง BFC บรรทัดที่สองจึงไหลเต็มการ์ดจริง
     ส่วน "…" ท้ายบรรทัดที่สอง site.js เป็นคนตัดให้ (clampTitles) */
  display:block;overflow:hidden;
}
@supports (overflow:clip){
  .pcard--lg h3,
  .pcard--sm h3{ overflow:clip }
}
/* ป้ายสูง 30–33px แต่บรรทัดหัวเรื่องสูง 28.5px ถ้าปล่อยไว้ float จะกินบรรทัดที่สองด้วย
   ดึงขอบบน/ล่างเข้า ให้กล่อง float จบในบรรทัดแรก ตัวป้ายยังดูเท่าเดิมและอยู่กลางบรรทัดแรก */
.pcard--lg .pcard__chip--inline,
.pcard--sm .pcard__chip--inline{ margin-top:-2px;margin-bottom:-10px }

/* ============================================================
   หน้า อ.ส.ท. CLUB
   ============================================================ */
.club__hero{
  position:relative;overflow:hidden;background:#141414;
  height:clamp(280px,42vw,620px);display:grid;place-items:center;
}
.club__herobg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.club__hero::after{                      /* ไล่เฉดบาง ๆ ให้โลโก้ลอยเหนือภาพได้ทุกใบ */
  content:"";position:absolute;inset:0;
  background:radial-gradient(60% 55% at 50% 48%,rgba(0,0,0,.28),rgba(0,0,0,0) 70%);
}
.club__herologo{ position:relative;z-index:2;text-align:center;padding:20px }
.club__herologo img{ width:clamp(220px,32vw,460px);height:auto;display:block;margin:0 auto }
/* คำโปรยใต้โลโก้ — โลโก้กับคำโปรยต้องอยู่กลางภาพด้วยกัน ไม่ให้ grid แบ่งความสูงคนละครึ่ง */
.club__hero{ align-content:center }
/* มีคำโปรยแล้วเนื้อหาสูงขึ้น บนมือถือกรอบสูงแค่ 280px โลโก้จึงถูกดันขึ้นไปใต้แถบเมนู
   ให้กรอบสูงตามเนื้อหาได้ และเว้นที่ด้านบนไว้ให้แถบเมนูเสมอ */
@media (max-width:820px){
  .club__hero{ height:auto;min-height:clamp(280px,42vw,620px);padding:96px 0 32px }
}
.club__herotag span{ white-space:nowrap }
.club__herotag{
  /* ตัวอักษรแบบเดียวกับคำโปรยบนหัวเรื่องหน้าบทความ (.art__herobody p) */
  position:relative;z-index:2;margin:0;padding:0 20px;max-width:760px;
  color:#fff;text-align:center;font-size:clamp(14px,1.15vw,18px);line-height:1.8;font-weight:400;opacity:.96;
  text-shadow:0 1px 10px rgba(4,8,14,.82),0 1px 2px rgba(4,8,14,.85);
  text-wrap:balance;
}

/* ---- โลโก้ CLUB ทยอยปรากฏเหมือนกำลังเขียน ----
   สามชั้นซ้อนกัน แต่ละชั้นถูกเปิดออกจากซ้ายไปขวาด้วย clip-path
   ซึ่งเป็นทิศทางเดียวกับที่คนเขียนหนังสือ ตาจึงอ่านว่า "กำลังถูกเขียน" ไม่ใช่ "ค่อย ๆ จางเข้ามา"
   ใช้ clip-path ไม่ใช่ความกว้าง เพราะไม่แตะการคำนวณผังหน้า จึงไม่ทำให้หน้ากระตุก
     ชั้น 1 อสท     เปิดเร็ว เป็นตัวยืนของโลโก้
     ชั้น 2 CLUB    เปิดช้ากว่า ให้ความรู้สึกว่าเขียนด้วยมือ
     ชั้น 3 หนังสือ  เป็นลายเส้นประกอบ จึงเด้งเข้ามาทีเดียวตอนท้าย */
.clublogo{ position:relative;display:block;width:clamp(220px,32vw,460px);margin:0 auto }
.clublogo__l{ display:block;width:100%;height:auto }
.clublogo__l--2,
.clublogo__l--3{ position:absolute;left:0;top:0 }

@keyframes clubWrite{ from{ clip-path:inset(0 100% 0 0) } to{ clip-path:inset(0 0 0 0) } }
@keyframes clubPop{
  0%   { opacity:0;transform:scale(.6) rotate(-10deg) }
  65%  { opacity:1;transform:scale(1.09) rotate(3deg) }
  100% { opacity:1;transform:scale(1) rotate(0) }
}
/* ---- จังหวะการเขียน ----
   ช้าลงกว่าเดิมราวเท่าตัว ให้ตาตามทัน และ CLUB เขียนทีละตัวอักษรจริง ๆ
   ขอบที่กวาดผ่านเป็นเส้นเฉียง ไม่ใช่เส้นตรง — ปลายปากกาทำมุมกับกระดาษเสมอ
   ตัวอักษรจึงโผล่จากมุมล่างซ้ายไปมุมบนขวาเหมือนถูกลากด้วยปากกาจริง
   แต่ละตัวยังสะบัดเล็กน้อยตอนเริ่ม (clubStroke) เลียนแรงกดตอนลงปากกา */
.clublogo__l--1{ animation:clubWrite 1.15s cubic-bezier(.22,.61,.36,1) .15s both }
.clublogo__l--2{ animation:clubWrite 1.60s cubic-bezier(.55,.06,.30,1) 1.05s both }

/* ---- CLUB เด้งออกมาพร้อมกันทั้งคำ แบบเดียวกับหนังสือสีเหลือง ----
   ภาพตัวอักษรแต่ละตัวมีขนาดเต็มผืนโลโก้ ให้ทุกตัวใช้จุดหมุนเดียวกันที่กลางคำ CLUB
   (x 183–572 จากผืน 842 = 45%) ทั้งสี่ตัวจึงขยายและเอียงไปด้วยกันเป็นก้อนเดียว */
.clublogo__g{ position:absolute;left:0;top:0;transform-origin:45% 75%;
  animation:clubPop .6s cubic-bezier(.34,1.56,.64,1) .95s both }

.clublogo__l--3{ transform-origin:30% 70%;animation:clubPop .70s cubic-bezier(.34,1.56,.64,1) 1.40s both }

/* คำโปรยใต้โลโก้ขึ้นหลัง CLUB เด้งครบ (CLUB นิ่งที่ราว 1.55s)
   จางเข้าพร้อมลอยขึ้นเล็กน้อย ไปพร้อมกับหนังสือที่เด้งเข้ามา */
@keyframes clubTagIn{
  from{ opacity:0;transform:translateY(10px) }
  to  { opacity:.96;transform:none }
}
.club__herologo:has(.clublogo) + .club__herotag{ animation:clubTagIn .9s cubic-bezier(.22,.61,.36,1) 1.50s both }

/* ผู้ที่ตั้งค่าเครื่องว่าขอลดการเคลื่อนไหว ให้เห็นโลโก้เต็มทันที */
@media (prefers-reduced-motion: reduce){
  .clublogo__l--1,.clublogo__l--2,.clublogo__l--3,.clublogo__g{
    animation:none;clip-path:none;opacity:1;transform:none }
  .club__herologo:has(.clublogo) + .club__herotag{ animation:none;opacity:.96;transform:none }
}

/* ตัวอักษรสำรอง ใช้เมื่อยังไม่ได้อัปโหลดไฟล์โลโก้ CLUB */
.club__lock{ display:inline-block;line-height:1;text-shadow:0 6px 30px rgba(0,0,0,.35) }
.club__lock small{ display:block;font-size:clamp(13px,1.5vw,22px);color:var(--orange);letter-spacing:.12em }
.club__lock b{ display:block;font-size:clamp(56px,10vw,150px);color:var(--orange);font-weight:700 }
.club__lock i{
  display:block;margin-top:-.22em;font-style:italic;font-weight:700;
  font-size:clamp(30px,5.4vw,80px);color:#fffabb;
}

/* ---- สามช่องทางลัด ---- */
/* เว้นแถบขาวคั่นระหว่างภาพหัวเรื่องกับสามช่องทางลัด
   ให้เท่ากับช่องไฟระหว่างสามช่องพอดี จึงดึงมาจากตัวแปรตัวเดียวกัน
   แก้ที่เดียวแล้วทั้งสองระยะขยับตามกัน ไม่มีทางหลุดจากกันภายหลัง */
.club__tiles{
  --tile-gap:4px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--tile-gap);background:#fff;
  padding-top:var(--tile-gap);
}
@media(max-width:760px){ .club__tiles{ grid-template-columns:1fr } }
.club__tile{
  position:relative;display:grid;place-items:center;overflow:hidden;text-decoration:none;
  aspect-ratio:3/1.1;background:#2a2f36;
}
.club__tile img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s cubic-bezier(.2,.8,.2,1),filter .5s;
}
.club__tile::after{ content:"";position:absolute;inset:0;background:rgba(12,16,20,.42);transition:background .35s }
.club__tile:hover img{ transform:scale(1.07) }
.club__tile:hover::after{ background:rgba(12,16,20,.26) }
.club__tile span{
  position:relative;z-index:2;color:#fff;text-align:center;font-weight:700;line-height:1.45;
  font-size:clamp(16px,1.6vw,23px);text-shadow:0 3px 18px rgba(0,0,0,.6);padding:0 16px;
}

/* ---- ไฮไลต์แคมเปญ ---- */
.club__camp{ background:#f2f2f2;padding:clamp(34px,4.4vw,64px) clamp(20px,4vw,60px) }
.club__camp__in{
  max-width:1100px;margin:0 auto;display:grid;gap:clamp(20px,3vw,48px);
  grid-template-columns:1fr auto 1fr;align-items:center;
  /* ทั้งแถบเป็นลิงก์แล้ว ต้องล้างสไตล์ลิงก์ทิ้งและใส่สัญญาณว่ากดได้แทน */
  text-decoration:none;color:inherit;
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.club__camp__in:hover{ transform:translateY(-3px) }
.club__camp__in:hover .club__qr{ box-shadow:0 18px 40px rgba(255, 103, 0,.28) }
.club__camp__in:focus-visible{ outline:3px solid var(--orange);outline-offset:6px }
.club__qr{ transition:box-shadow .35s }
@media(max-width:820px){ .club__camp__in{ grid-template-columns:1fr;justify-items:center;text-align:center } }
.club__camp__label{ margin:0;font-size:clamp(20px,2.2vw,30px);font-weight:700;text-align:right }
@media(max-width:820px){ .club__camp__label{ text-align:center } }
.club__qr{ background:var(--orange);padding:12px 12px 0;width:clamp(150px,17vw,215px) }
.club__qr img{ width:100%;height:auto;display:block;background:#fff;padding:8px }
.club__qr span{
  display:block;text-align:center;color:#fff;font-size:clamp(12px,1.05vw,15px);
  padding:8px 4px 10px;line-height:1.4;
}
.club__camp__txt strong{
  display:block;font-size:clamp(20px,2.2vw,30px);color:var(--orange);font-weight:700;line-height:1.4;
}
.club__camp__txt span{ display:block;font-size:clamp(15px,1.4vw,20px);color:var(--ink);line-height:1.6 }

/* ---- สิทธิพิเศษสำหรับสมาชิก ---- */
.club__h2{
  margin:0 0 clamp(26px,3.4vw,50px);text-align:center;font-weight:700;
  font-size:clamp(22px,2.6vw,34px);color:var(--ink);
}
.club__perks{ background:#fff;padding:clamp(40px,5vw,78px) clamp(16px,3vw,40px) clamp(56px,6.5vw,104px) }
/* แถบของรางวัล — เลื่อนวนได้เหมือนชั้นหนังสือ แต่วางการ์ดเป็นเส้นโค้ง
   ท่าของแต่ละใบ (ยก เอียง ย่อ) คิดจาก JS ทุกเฟรมตามระยะห่างจากกลางจอ
   overflow ต้องเป็น visible ไม่งั้นใบที่ซูมตอนเอาเมาส์ชี้จะโดนกรอบตัดหัว */
/* ตัวห่อชั้นนอกเป็นตัวตัดแนวนอน — จำเป็น ไม่ใช่ของประดับ
   การ์ดในแถบเลื่อนวนถูกวางเลยขอบกรอบออกไปทั้งสองข้าง ถ้าไม่มีใครตัด
   มันจะไปดันความกว้างของ "ทั้งเอกสาร" (วัดได้ 4850px บนจอ 1470px
   และ 3289px บนจอ 390px) ทำให้เลื่อนหน้าออกข้างได้ทั้งหน้า
   ตัดที่ชั้นนอกแทนที่จะตัดที่ตัวกรอบเอง เพราะกรอบต้องปล่อยแนวตั้งไว้
   ให้การ์ดที่ถูกชี้ขยายขึ้นมาได้โดยไม่ถูกตัดหัว
   (CSS ตั้ง overflow-x กับ overflow-y คนละค่าไม่ได้ ใส่แล้วกลายเป็น auto มีแถบเลื่อนโผล่)
   วิธีเดียวกับชั้นหนังสือหน้า /magazines ซึ่งอาศัย .maghero เป็นตัวตัด */
.club__shelf{ position:relative;overflow:hidden }
.club__view{
  /* ระยะบนต้องเผื่อให้การ์ดที่ขยาย 1.16 เท่าและยกขึ้น 14px ไม่ชนขอบบนที่เพิ่งตัด */
  overflow:visible;cursor:grab;padding:clamp(36px,3.4vw,52px) 0 clamp(10px,1.4vw,22px);
  -webkit-user-select:none;user-select:none;
}
.club__view.is-drag{ cursor:grabbing }
.club__track{ display:flex;align-items:flex-start;gap:clamp(14px,1.8vw,30px);will-change:transform }
.club__perk{
  /* ขนาดวัดจากภาพแบบโดยตรง: ใบกลางกว้าง 147px ในภาพที่ย่อแสดง
     ภาพต้นฉบับกว้าง 1919 แสดงที่ 889 มาตราส่วน 2.158 → ของจริง 317px บนจอ 1920
     คิดเป็น 16.5vw จึงตั้งตามนั้น (ใบข้างจะเหลือราว 255px หลังถูกย่อตามเส้นโค้ง
     ซึ่งตรงกับที่วัดได้จากแบบเช่นกัน) */
  flex:0 0 clamp(210px,16.5vw,320px);margin:0;text-align:center;
  transform-origin:50% 65%;
  /* ไม่ใส่ transition ที่ตัวใบ เพราะ JS เขียน transform ใหม่ทุกเฟรม
     ถ้าใส่จะหน่วงจนการ์ดตามการลากไม่ทัน — เอฟเฟกต์ตอนชี้ไปอยู่ที่ชั้นในแทน */
}
.club__perk__in{
  display:block;background:#f2f2f2;border-radius:14px;padding:clamp(6px,0.7vw,10px);
  transition:transform .42s cubic-bezier(.2,.8,.2,1),box-shadow .42s;
}
.club__perk:hover{ z-index:200!important }
.club__perk:hover .club__perk__in{
  transform:translateY(-14px) scale(1.16);
  box-shadow:0 26px 54px rgba(20,40,60,.24);
}
.club__perk img{ width:100%;aspect-ratio:1/1;object-fit:contain;display:block }
.club__perk__ph{
  display:grid;place-items:center;aspect-ratio:1/1;color:#c2c2c2;font-weight:700;
  font-size:clamp(22px,2.4vw,34px);background:#ececec;border-radius:6px;
}
/* ชื่อของรางวัลยาวไม่เท่ากัน ถ้าปล่อยให้สูงตามเนื้อหา การ์ดแต่ละใบจะสูงไม่เท่ากัน
   แล้วเส้นโค้งของแถบจะเสียรูป ตัดที่สองบรรทัดและตรึงความสูงไว้เท่ากันทุกใบ */
.club__perk figcaption b{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:2.9em;margin-top:12px;font-size:15px;font-weight:400;color:var(--ink);line-height:1.45;
}
.club__perk figcaption span{ display:block;margin-top:4px;font-size:13.5px;color:var(--orange);font-weight:700 }
.club__hint{
  text-align:center;color:var(--ink-soft);font-size:14px;letter-spacing:.02em;
  padding:clamp(14px,1.8vw,26px) 0 clamp(6px,1vw,14px);
}
.club__more{ text-align:center }

/* ---- ขั้นตอนการรับสิทธิพิเศษ ---- */
.club__steps{ background:#fff;padding:clamp(40px,5vw,78px) clamp(20px,4vw,60px) clamp(56px,6vw,96px) }
.club__steprow{
  list-style:none;margin:0 auto;padding:0;max-width:820px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.3vw,20px);
}
/* จอแคบเรียงลงมาเป็นแถวเดียว ช่องจึงกว้างเท่าจอ
   ถ้ายังเป็นจัตุรัสจะสูงเท่าความกว้างจอ สามช่องรวมกันยาวเกินหนึ่งหน้าจอ
   เปลี่ยนเป็นแถบเตี้ย ๆ แทน เห็นครบทั้งสามขั้นตอนในหน้าจอเดียว */
@media(max-width:760px){
  .club__steprow{ grid-template-columns:1fr;max-width:460px }
}
/* ตอนนี้แต่ละขั้นตอนเป็นทางเข้าหน้าย่อยจริง จึงมี <a> ครอบเนื้อหาไว้ข้างใน
   พื้นที่กดต้องเต็มช่อง ไม่ใช่แค่ตัวอักษร จึงยกการจัดวางไปไว้ที่ <a> */
.club__step{
  background:#f4f4f4;color:var(--ink);border-radius:2px;
  /* เดิมเป็นจัตุรัส 318×318 px ซึ่งเหลือพื้นที่ว่างรอบไอคอนเยอะเกินความจำเป็น
     ย่อลงเป็นสี่เหลี่ยมเตี้ยลง ไอคอนกับข้อความยังอยู่ครบและยังกดง่ายเหมือนเดิม */
  aspect-ratio:3/2;box-shadow:0 8px 22px rgba(20,40,60,.07);
  transition:background .35s,color .35s,transform .35s;
}
.club__step>a{
  display:grid;place-content:center;justify-items:center;gap:10px;
  width:100%;height:100%;padding:16px;text-align:center;
  color:inherit;text-decoration:none;font-size:clamp(14.5px,1.2vw,17px);
}
.club__step svg{
  width:clamp(28px,2.6vw,38px);height:clamp(28px,2.6vw,38px);
  fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
}
/* ต้องเขียนหลังกฎหลัก ไม่งั้น aspect-ratio ของกฎหลักที่อยู่ล่างกว่าจะทับค่านี้ */
@media(max-width:760px){
  .club__step{ aspect-ratio:5/2 }
  .club__step>a{ gap:8px }
}
.club__step.is-on{ background:var(--orange);color:#fff;box-shadow:0 14px 32px rgba(255, 103, 0,.35) }
/* เอาเมาส์ไปชี้แล้วเป็นสีส้มเหมือนช่องที่กำลังเปิดอยู่ ให้รู้ว่ากดได้
   ใช้ :focus-visible ด้วย คนที่เดินด้วยแป้น Tab จะได้เห็นเหมือนกัน */
.club__step:hover,
.club__step:has(> a:focus-visible){
  background:var(--orange);color:#fff;
  transform:translateY(-4px);
  box-shadow:0 14px 32px rgba(255, 103, 0,.35);
}

/* ============================================================
   ฉากเปิดเล่มดับเครื่องเมื่อเลื่อนพ้นไปแล้ว (JS ใส่คลาส is-idle ให้)
   หยุดอนิเมชันประดับทั้งหมด และถอดฟิลเตอร์บิดภาพ SVG ออกจากสายการวาด
   ฟิลเตอร์ตัวนั้นมี <animate> วิ่งตลอด เบราว์เซอร์จึงคำนวณ noise ใหม่ทุกเฟรม
   แม้ไม่มีใครมองอยู่ ตัวนี้กินเวลาเฟรมราวหนึ่งในห้าของทั้งฉาก
   ============================================================ */
/* ต้องใช้ !important เพราะหมอกกับเมฆถูกสร้างจาก JS พร้อม style="animation:..."
   แบบย่อ ซึ่งรีเซ็ต animation-play-state กลับเป็น running และ inline ชนะกฎปกติ */
.track.is-idle .mist span,
.track.is-idle .seaclouds b,
.track.is-idle .sunglow,
.track.is-idle .rays,
.track.is-idle .cue u,
.track.is-idle .hint u{ animation-play-state:paused!important }
.track.is-idle .bgwobble{ display:none }

/* ============================================================
   ฉากเปิดเล่มแบบ 3 มิติ (three.js) — ผืนผ้าใบวางเต็มฉากใต้ข้อความ
   เปิดใช้เมื่อ JS สร้างฉากสำเร็จเท่านั้น (ใส่คลาส has-hero3d ที่ <html>)
   ชิ้นส่วนของฉาก CSS เดิมถูกซ่อนไว้ แต่ยังอยู่ครบเผื่อเครื่องที่ไม่รองรับ WebGL
   ============================================================ */
.hero3d{ position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1 }
.has-hero3d .stage,
.has-hero3d .fogsweep{ display:none!important }
/* ---- ภาพท้องฟ้าต้องอยู่ใต้ผืนผ้าใบเสมอ ----
   เดิมซ่อน .skywrap ทิ้งเพราะฉาก 3 มิติวาดฉากหลังของตัวเองอยู่แล้ว
   แต่แปลว่าถ้าผืนผ้าใบวาดไม่ออกด้วยเหตุใดก็ตาม ข้างหลังไม่เหลืออะไรเลย = จอดำ
   คงภาพนิ่งใบเดียวไว้เป็นพื้นรอง (ไฟล์เดียวกับที่ฉาก 3 มิติใช้ ไม่ได้โหลดเพิ่ม)
   แล้วปิดเฉพาะชิ้นที่กินแรงจริง — ฟิลเตอร์บิดภาพ หมอก และวิดีโอพื้นหลัง
   ตรึง opacity/transform ไว้ด้วย เพราะโค้ดฝั่งฉาก CSS อาจเขียนค่าค้างไว้
   ตั้งแต่ช่วงก่อนโมดูล 3 มิติโหลดเสร็จ */
.has-hero3d .skywrap{ opacity:1!important;transform:none!important }
.has-hero3d .bgwobble,
.has-hero3d .atmo,
.has-hero3d video.bgloop{ display:none!important }
/* .window ห้ามซ่อน เพราะข้อความบทปก (.herocopy) กับตัวชี้ทางเลื่อน (.cue) เป็นลูกของมัน
   ซ่อนแค่ภาพและชั้นหมอกข้างในแทน ส่วนตัวกล่องปล่อยไว้เป็นกรอบอ้างอิงตำแหน่ง
   กล่องนี้กว้างเท่าจอพอดีอยู่แล้ว ข้อความจึงอยู่ตำแหน่งเดิมเป๊ะโดยไม่ต้องแก้ HTML
   ต้องล้าง clip-path กับ opacity ด้วย เพราะช่วงก่อนโมดูล 3 มิติโหลดเสร็จ
   โค้ดฝั่งฉาก CSS ยังทำงานอยู่และอาจเขียนค่าสองตัวนี้ค้างไว้ในสไตล์ของชิ้นงาน */
.has-hero3d .window{ clip-path:none!important; opacity:1!important;
                     overflow:visible; pointer-events:none }
/* เก็บชั้นหรี่แสงกับขอบมืดของเดิมไว้ ซ่อนแค่ภาพกับหมอกที่ฉาก 3 มิติวาดเองแล้ว
   สองชั้นนี้คือสิ่งที่ทำให้ตัวอักษรสีขาวอ่านออกบนภาพทุ่งนาสว่าง ๆ
   (วัดได้: พื้นหลังหลังหัวเรื่องสว่าง 153/255 ซึ่งสู้กับตัวอักษรขาว)
   ต้องตรึง transform ไว้ด้วย เพราะ JS ฝั่งฉาก CSS เขียนค่าพารัลแลกซ์ทับได้
   ในช่วงก่อนที่โมดูล 3 มิติจะโหลดเสร็จ ถ้าค้างไว้ขอบมืดจะเยื้องออกจากกลางจอ */
.has-hero3d .window>.photo{ transform:translate(-50%,-50%)!important }
.has-hero3d .window>.photo>img,
.has-hero3d .window .seaclouds,
.has-hero3d .window .mist{ display:none!important }
.has-hero3d .herocopy,
.has-hero3d .cue{ z-index:6; pointer-events:auto }


/* ============================================================
   หน้าย่อยในหมวด อ.ส.ท. CLUB
   /club/join     สมัครสมาชิก + ข้อกำหนดการสมัคร
   /club/points   ข้อกำหนดและเงื่อนไขการรับคะแนน
   /club/rewards  คลังของรางวัลทั้งหมด
   ============================================================ */

/* ---- หน้าข้อกำหนด ---- */
.clubdoc{
  /* body ของเว็บเป็นสีเข้ม ทุกส่วนเนื้อหาจึงต้องปูพื้นขาวเอง เหมือนส่วนอื่นในหมวดคลับ */
  background:#fff;max-width:none;margin:0;
  /* จัดเนื้อหาให้อยู่กลางด้วย "ระยะขอบ" ไม่ใช่ margin:auto ของลูกแต่ละตัว
     เพราะกฎของลูกหลายตัวตั้ง margin แบบย่อ (เช่น margin:0 0 24px) ซึ่งเขียนทับ
     margin-left/right:auto ทิ้งไปทั้งคู่ เนื้อหาเลยไปกองชิดซ้าย
     วิธีนี้ความกว้างของแถบเนื้อหาถูกคุมจากตัวแม่ ลูกจะตั้ง margin อะไรก็ไม่หลุด */
  padding:clamp(34px,4.6vw,76px) max(clamp(20px,5vw,40px),calc((100% - 1120px) / 2)) clamp(30px,4vw,64px);
}
.clubdoc__title{
  margin:0 0 clamp(22px,3vw,44px);text-align:center;color:var(--orange);
  font-size:clamp(22px,2.6vw,36px);font-weight:700;
}
.clubdoc__cta{ text-align:center;padding:clamp(6px,1.4vw,18px) 0 clamp(24px,3.4vw,48px) }
/* ปุ่มท้ายหน้าให้อยู่กลางช่องว่างระหว่างข้อความสุดท้ายกับแถบสามขั้นตอนด้านล่าง
   เดิมชิดข้อความด้านบน (ห่าง 18px) แต่ห่างแถบล่างเกือบ 190px ดูเหมือนปุ่มลอยค้างอยู่ด้านบน */
.clubdoc__cta--end{ padding:clamp(36px,4.4vw,72px) 0 0 }
.clubdoc:has(.clubdoc__cta--end){ padding-bottom:0 }
/* ปุ่มสมัครสมาชิก — ทรงแคปซูลตามแบบ พื้นขาว ตัวอักษรส้ม เงาฟุ้งสองชั้นให้ดูลอย
   ชี้แล้วกลับด้าน: พื้นส้ม ตัวอักษรขาว */
.btn-join{
  display:inline-block;background:#fff;color:var(--orange);text-decoration:none;
  font-size:clamp(15px,1.5vw,21px);font-weight:700;letter-spacing:.01em;   /* เล็กลงราว 25% จากเดิม 18–28px */
  padding:clamp(10px,1.05vw,15px) clamp(28px,3.4vw,56px);border-radius:999px;
  box-shadow:0 10px 30px rgba(255, 103, 0,.16),0 2px 8px rgba(20,40,60,.10);
  transition:transform .3s,box-shadow .3s,background .3s,color .3s;
}
.btn-join:hover,
.btn-join:focus-visible{
  transform:translateY(-2px);background:var(--orange);color:#fff;
  box-shadow:0 16px 38px rgba(255, 103, 0,.34);
}

/* ปุ่มบนสุดของหน้าข้อกำหนด — ตัวอักษรล้วน ไม่มีกรอบ ไม่มีเงา ไม่มีพื้นหลัง
   สีดำตามปกติ เปลี่ยนเป็นส้มเมื่อชี้ */
.btn-join--plain{
  font-size:clamp(18px,2vw,28px);   /* ปุ่มบนทำหน้าที่หัวเรื่อง คงขนาดเดิมไว้ ไม่ย่อตามปุ่มล่าง */
  background:none;color:var(--ink);box-shadow:none;
  padding:clamp(6px,0.8vw,12px) 0;border-radius:0;
  transition:color .25s;
}
.btn-join--plain:hover,
.btn-join--plain:focus-visible{
  background:none;color:var(--orange);box-shadow:none;transform:none;
}
.clubdoc__body{ color:var(--ink);line-height:1.85 }
.clubdoc__h{
  margin:clamp(24px,2.8vw,40px) 0 clamp(10px,1.2vw,16px);
  font-size:clamp(15px,1.45vw,19px);font-weight:700;
}
.clubdoc__h:first-child{ margin-top:0 }
/* ระยะย่อหน้าคิดจากความลึกของเลขข้อ (--d) จึงเพิ่มชั้นย่อยได้โดยไม่ต้องแก้ CSS */
.clubdoc__li{
  display:flex;gap:10px;margin:0 0 clamp(6px,.8vw,11px);
  padding-left:calc(var(--d,1) * clamp(18px,2.2vw,34px));
  font-size:clamp(13.5px,1.15vw,15.5px);
}
.clubdoc__li b{ flex:none;font-weight:700 }
.clubdoc__li a{ color:#2f6fd0;text-decoration:none }
.clubdoc__li a:hover{ text-decoration:underline }
.clubdoc__note{
  margin:clamp(26px,3vw,44px) 0 0;color:var(--ink-soft);
  font-size:clamp(12.5px,1.05vw,14px);
}
.clubdoc__empty{ text-align:center;color:var(--ink-soft);padding:40px 0 }

/* ---- คลังของรางวัล ---- */
.rwd{
  background:#fff;max-width:none;margin:0;
  padding:clamp(34px,4.6vw,76px) max(clamp(20px,5vw,40px),calc((100% - 1220px) / 2)) clamp(30px,4vw,60px);
}
.rwd__title{
  margin:0 0 clamp(14px,1.8vw,26px);text-align:center;
  font-size:clamp(26px,3.4vw,48px);font-weight:700;
}
.rwd__filter{
  display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(8px,1vw,14px);
  border-top:2px solid var(--orange);padding-top:clamp(18px,2.2vw,32px);
  margin-bottom:clamp(26px,3.4vw,52px);
}
.rwd__chip{
  border:1.5px solid var(--orange);color:var(--orange);text-decoration:none;
  padding:7px clamp(12px,1.4vw,20px);border-radius:4px;
  font-size:clamp(13px,1.1vw,15px);transition:background .25s,color .25s;
}
.rwd__chip:hover{ background:rgba(255, 103, 0,.1) }
.rwd__chip.is-on{ background:var(--orange);color:#fff }
/* หมวดที่ยังไม่มีของรางวัลยังกดได้ แต่จางลงให้รู้ว่าว่าง */
.rwd__chip.is-empty:not(.is-on){ opacity:.45 }

.rwd__grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,34px);
}
@media(max-width:900px){ .rwd__grid{ grid-template-columns:repeat(2,1fr) } }
@media(max-width:560px){ .rwd__grid{ grid-template-columns:1fr } }
.rwd__card{
  border:1px solid #e6e6e6;background:#fff;padding:clamp(14px,1.6vw,22px);
  display:flex;flex-direction:column;
  transition:box-shadow .3s,transform .3s;
}
.rwd__card:hover{ transform:translateY(-3px);box-shadow:0 16px 34px rgba(20,40,60,.12) }
.rwd__pic{ display:block;background:#f2f2f2;aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden }
.rwd__pic img{ width:100%;height:100%;object-fit:contain;display:block }
.rwd__ph{ color:#c2c2c2;font-weight:700;font-size:clamp(22px,2.4vw,34px) }
.rwd__name{
  display:block;margin-top:clamp(12px,1.4vw,18px);font-weight:400;
  font-size:clamp(15px,1.3vw,19px);line-height:1.45;color:var(--ink);
}
.rwd__pts{
  display:inline-block;align-self:flex-start;margin-top:10px;
  background:var(--orange);color:#fff;font-weight:700;
  font-size:clamp(11.5px,.95vw,13px);padding:3px 10px;border-radius:2px;
}
.rwd__meta{ display:block;margin-top:8px;color:var(--ink-soft);font-size:clamp(11.5px,.95vw,13px) }
.rwd__empty{ text-align:center;color:var(--ink-soft);padding:clamp(40px,6vw,90px) 0 }
.rwd .ap__pager{ margin-top:clamp(28px,3.4vw,52px) }


/* ============================================================
   ตัวหนังสือบนภาพหัวเรื่องต้องอ่านออกเสมอ ไม่ว่าภาพจะสว่างแค่ไหน
   ------------------------------------------------------------
   ภาพที่แอดมินใส่มีทั้งภาพกลางคืนมืด ๆ และภาพอาหารจานขาวสว่างจ้า
   แถบไล่สีอย่างเดียวเอาไม่อยู่กับภาพสว่าง หัวเรื่องขาวจะจมหายไปเลย
   จึงเพิ่มเงาตัวอักษรกำกับอีกชั้น ซึ่งได้ผลกับทุกสีพื้นหลังโดยไม่ทำให้ภาพมืดลงทั้งใบ
   ============================================================ */
.thero__body,
.art__herobody{ z-index:3 }
.thero__body h2,
.art__herobody h1{
  text-shadow:0 2px 14px rgba(4,8,14,.78), 0 1px 3px rgba(4,8,14,.9);
}
.thero__body p,
.art__herobody p{
  text-shadow:0 1px 10px rgba(4,8,14,.82), 0 1px 2px rgba(4,8,14,.85);
}
/* ป้ายหมวดบนภาพก็ต้องลอยเหนือแถบไล่สีเช่นกัน */
.thero__body .chip{ position:relative;z-index:3 }

/* จอแคบ: ลดความสูงของภาพหัวเรื่องลง ไม่งั้นกินทั้งหน้าจนไม่เห็นว่ามีเนื้อหาข้างล่าง
   ยังเป็นกรอบสี่เหลี่ยมผืนผ้าที่ภาพขยายเต็มแล้วครอบตัดเหมือนเดิม */
@media (max-width:560px){
  .thero{ height:78dvh;min-height:420px }
  .art__hero{ height:62dvh;min-height:340px }
}

/* ระหว่างดึงผลลัพธ์ชุดใหม่มาใส่ชั้นหนังสือ — จางลงนิดเดียวพอให้รู้ว่ากำลังทำงาน
   ไม่ขยับผัง ตำแหน่งที่ผู้ใช้มองอยู่จึงไม่เลื่อนแม้แต่พิกเซลเดียว */
.shelfsec.is-loading{ opacity:.55;transition:opacity .15s;pointer-events:none }

/* ============================================================
   บทความไฮไลต์บนสุดของหน้าหมวด — เลือกได้ 1-3 เรื่อง
   เรื่องเดียว = แบนเนอร์นิ่งเหมือนเดิมทุกอย่าง
   หลายเรื่อง  = ซ้อนกันแล้วสลับให้ มีจุดให้กดเลือกเองได้
   ============================================================ */
.therowrap{ position:relative;display:block }
body.view-travel .therowrap{ display:block }
.therowrap.is-multi{ width:100vw;margin-left:calc(50% - 50vw);
  height:100vh;height:100dvh;min-height:560px;overflow:hidden }
.therowrap.is-multi .thero{
  position:absolute;inset:0;width:100%;margin-left:0;height:100%;min-height:0;
  opacity:0;visibility:hidden;transition:opacity .7s ease;
}
.therowrap.is-multi .thero.is-on{ opacity:1;visibility:visible }

.thero__dots{ position:absolute;left:0;right:0;bottom:clamp(18px,3vw,34px);z-index:4;
  display:flex;justify-content:center;gap:10px }
.thero__dots button{ width:10px;height:10px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.45);box-shadow:0 1px 6px rgba(0,0,0,.4);
  transition:background .25s,transform .25s }
.thero__dots button.is-on{ background:#fff;transform:scale(1.35) }
.thero__dots button:hover{ background:rgba(255,255,255,.8) }
@media (max-width:560px){
  .therowrap.is-multi{ height:78dvh;min-height:420px }
}

/* ชั้นเลื่อนที่มีของน้อยจนไม่เต็มความกว้าง — วางเรียงกลางแทนการเลื่อนวน */
.mh__track.is-short{ justify-content:center }

/* ============================================================
   แถวคลิปสั้น (YouTube Shorts) — ให้ปกใหญ่เต็มความกว้างจอ
   ------------------------------------------------------------
   สองเรื่องที่แก้พร้อมกัน
   1) กรอบการ์ดต้องเป็น 9:16 พอดีกับสัดส่วนจริงของ Shorts
      ของเดิมตั้งไว้ 9:14 ซึ่งเตี้ยกว่า พอครอบตัดภาพปกจาก YouTube
      (ซึ่งเป็นภาพ 16:9 ที่วางปกแนวตั้งไว้กลางแล้วขนาบด้วยสำเนาตัวเองที่เบลอ)
      จึงเหลือแถบเบลอนั้นโผล่ที่ขอบซ้ายขวาของการ์ด เห็นเป็นตัวหนังสือจาง ๆ
      พอเป็น 9:16 ส่วนที่ถูกครอบตัดจะพอดีกับตัวปกจริงเป๊ะ ไม่เหลือแถบเบลอ
   2) แถวนี้กินเต็มความกว้างจอ ไม่ติดขอบในของหน้า ปกจึงใหญ่ขึ้นมาก
   ============================================================ */
/* ขอบซ้าย-ขวาต้องตรงกับแถวแนวนอนด้านบน จึงอยู่ในกรอบเดียวกัน (.vpage__in)
   ไม่ดันออกไปเต็มจอ — ของใหญ่ขึ้นด้วยการลดช่องไฟระหว่างการ์ดแทน */
.vgrid--4{ gap:clamp(8px,0.9vw,16px) }
.vgrid--4 .clip{ aspect-ratio:9 / 16;border-radius:2px }
.vgrid--4 .vcard b{ padding-inline:clamp(6px,0.8vw,14px) }
@media(max-width:560px){
  .vgrid--4{ gap:14px }
}

/* ============================================================
   กล่องดูของรางวัลแบบขยายใหญ่ — เปิดจากการ์ดสิทธิพิเศษและหน้าแลกของรางวัล
   ============================================================ */
.rwdbox{
  position:fixed;inset:0;z-index:320;background:rgba(8,10,13,.74);
  display:flex;align-items:center;justify-content:center;
  padding:clamp(10px,3vw,24px);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.rwdbox[hidden]{ display:none }
.rwdbox__in{
  position:relative;background:#fff;border-radius:18px;overflow:hidden;
  width:min(460px,100%);max-height:90dvh;display:flex;flex-direction:column;
  box-shadow:0 30px 90px rgba(0,0,0,.42);
}
.rwdbox__close{
  position:absolute;right:12px;top:12px;z-index:2;width:34px;height:34px;border:0;border-radius:50%;
  background:rgba(255,255,255,.92);color:#333;font-size:15px;cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.18);
}
/* กรอบภาพสูงคงที่ ของทุกชิ้นจึงดูเป็นชุดเดียวกัน ไม่กระโดดตามสัดส่วนไฟล์
   ใช้ contain เพราะเป็นภาพสินค้า ต้องเห็นครบทั้งชิ้น ไม่ใช่ภาพบรรยากาศที่ครอบตัดได้ */
/* กรอบรูปสินค้า — วางรูปแบบ absolute เต็มกรอบไปเลย ไม่พึ่ง max-height:100%
   ซึ่งบางเบราว์เซอร์ไม่บังคับให้กับลูกของกล่องที่ความสูงมาจาก aspect-ratio
   ทำให้รูปยืดทะลุกรอบออกไปทับตัวหนังสือและล้นออกนอกการ์ด */
/* กรอบรูปต้องยอมหดเมื่อจอเตี้ย — ของเดิมตั้ง flex:0 0 auto ไว้ คือห้ามหดเด็ดขาด
   พอความสูงที่ใช้ได้น้อยกว่าที่ต้องการ (มือถือหมุนแนวนอน · หน้าต่างเล็ก ๆ)
   กล่องถูกจำกัดที่ 90dvh แต่รูปยังกินที่เท่าเดิม ชื่อของรางวัลกับปุ่มแลกคะแนน
   จึงถูก overflow:hidden ตัดหายไปทั้งท่อน กดแลกคะแนนไม่ได้เลย
   เปลี่ยนเป็นให้รูปหดได้ แล้วล็อกส่วนข้อความกับปุ่มไว้ไม่ให้โดนตัด */
.rwdbox__pic{
  position:relative;background:#f4f5f7;overflow:hidden;
  aspect-ratio:4 / 3;flex:1 1 auto;min-height:96px;
}
.rwdbox__pic img{
  position:absolute;inset:16px;
  width:calc(100% - 32px);height:calc(100% - 32px);
  object-fit:contain;display:block;
}
.rwdbox__body{ padding:clamp(14px,2.4vw,20px) clamp(18px,4vw,26px) clamp(16px,4vw,26px);
  display:grid;gap:6px;text-align:center;flex:0 0 auto }
.rwdbox__name{ font-size:clamp(17px,2vw,20px);font-weight:700;line-height:1.5 }
.rwdbox__pts{ color:var(--orange);font-weight:700;font-size:15.5px }
.rwdbox__meta{ color:var(--ink-soft);font-size:14px }
.rwdbox__meta:empty,.rwdbox__pts:empty{ display:none }
.rwdbox__cta{ margin-top:clamp(8px,1.4vw,12px);justify-self:center }

/* จอเตี้ยมาก ๆ (มือถือแนวนอน) — บีบให้พอดีจอ ปุ่มต้องกดได้เสมอ */
@media (max-height:520px){
  .rwdbox{ padding:8px }
  .rwdbox__in{ max-height:96dvh }
  .rwdbox__pic{ min-height:72px }
  .rwdbox__body{ padding:12px 18px 14px;gap:3px }
  .rwdbox__name{ font-size:16px;line-height:1.35 }
  .rwdbox__cta{ margin-top:6px }
}
@media (max-height:360px){
  .rwdbox__pic{ min-height:52px }
  .rwdbox__body{ padding:9px 16px 11px }
  .rwdbox__name{ font-size:15px }
  .rwdbox__meta{ display:none }          /* จอเตี้ยขนาดนี้ เอาแค่ชื่อ คะแนน และปุ่มพอ */
}

/* การ์ดที่กดได้ ต้องบอกด้วยเคอร์เซอร์ว่ากดได้ */
.club__perk,.rwd__card{ cursor:pointer }


/* ============================================================
   จอแคบ — กันชิ้นส่วนทับกันและกันเนื้อหาถูกตัดหาย
   ทั้งหมดในบล็อกนี้มาจากการวัดของจริงที่ 320–1440px ไม่ได้กะเอา
   ============================================================ */

/* ---- บล็อกที่เริ่มที่ขอบบนจอ ต้องเผื่อที่ให้แถบเมนูที่ลอยอยู่ ----
   แถบเมนูเป็น position:fixed จึงไม่กินที่ในผัง หน้าที่ไม่มีภาพเปิดเรื่อง
   (หน้ารวมบทความ · หน้าผลค้นหา) บรรทัดแรกจึงไปอยู่ใต้แถบพอดี
   คิดจาก --bar-h เพื่อให้ขยับตามเองถ้าความสูงแถบเปลี่ยน */
/* ต้องเจาะจงกว่ากฎ .ap.is-open{padding-top:0} ที่อยู่ข้างบน ไม่งั้นโดนมันทับ */
.ap.is-open.ap--top{ padding-top:calc(var(--bar-h) + 26px) }

/* ---- แถบเมนูบนจอโทรศัพท์ ----
   ของเดิมตรึง "เรื่องราว" ไว้กลางแถบด้วย position:absolute
   ซึ่งไม่รู้จักความกว้างของโลโก้กับปุ่มฝั่งขวาเลย จอแคบ ๆ จึงทับกันเอง
   เอากลับมาเรียงตามปกติ ให้ flexbox แบ่งที่ให้ทุกชิ้นแทน */
@media(max-width:760px){
  .bar{ padding:0 10px }
  .center{
    position:static;transform:none;
    margin:0 auto 0 12px;gap:14px;min-width:0;
  }
  .right{ gap:6px;flex:0 0 auto }
  .brand{ margin-right:0 }
}
@media(max-width:430px){
  :root{ --bar-h:58px }
  .brand img{ width:40px;height:40px }
  .center{ margin-left:8px;gap:10px }
  .link{ font-size:15px }
  .cta{ height:34px;padding:0 12px;font-size:14px;border-width:1.4px }
  /* ต้องตั้ง flex-basis ด้วย ไม่งั้นปุ่มยังกว้าง 46px ตามค่า flex:0 0 46px เดิม */
  .iconbtn{ width:34px;height:34px }
  .smini,.smini.is-open,.smini:focus-within{ width:34px;height:34px }
  .smini__ic{ flex:0 0 34px;width:34px;height:34px }
  .iconbtn svg,.smini__ic svg{ width:18px;height:18px }
  .subbar a{ font-size:14px;padding:7px 11px }
}

/* ---- ตารางการ์ดบทความ ----
   โครงเดิมเป็นคอลัมน์ตายตัว 3 (หรือ 4 ในแบบเต็มหน้า) ไม่ว่าจอกว้างเท่าไร
   บนมือถือการ์ดจึงเหลือกว้างใบละร้อยกว่าพิกเซล ป้ายหมวดล้นออกนอกการ์ด
   และหัวเรื่องถูกบีบจนหายไปทั้งบรรทัด
   ยุบเป็น 2 คอลัมน์แล้วเหลือ 1 คอลัมน์ โดยให้ .ap__col สลายตัว (display:contents)
   การ์ดจึงขึ้นมาเป็นลูกของตารางโดยตรง แล้วเรียงใหม่ตาม order ที่ฝั่ง PHP ใส่มา
   (ถ้าไม่เรียงใหม่ ลำดับจะกลายเป็นไล่ทีละคอลัมน์ ไม่ใช่ไล่จากใหม่ไปเก่า) */
@media(max-width:900px){
  .ap__col{ display:contents }
  .ap__grid{
    display:grid;grid-template-columns:repeat(2,1fr);
    gap:clamp(14px,2.4vw,26px);align-items:start;
  }
  .ap__grid.is-full{ grid-template-columns:repeat(2,1fr) }
}
@media(max-width:560px){
  .ap__grid,
  .ap__grid.is-full{ grid-template-columns:1fr }
}

/* ---- ป้ายหมวดบนการ์ด ----
   กันไว้อีกชั้นเผื่อการ์ดแคบกว่าที่ป้ายต้องการ ไม่ว่าจอขนาดไหน
   ยอมให้ข้อความขึ้นบรรทัดใหม่ในป้ายดีกว่ายื่นออกไปนอกการ์ดแล้วโดนตัด */
.pcard__chip--inline{ max-width:100%;white-space:normal }
@media(max-width:560px){
  .pcard__body{ padding:18px 16px 20px }
  .pcard__chip{ padding:5px 14px;font-size:14.5px;margin-left:10px }
  .pcard:hover .pcard__chip{ padding:5px 16px }
  .ap__grid.is-full .pcard time{ font-size:12.5px }
}


/* ---- ลิงก์ยาว ๆ ในเนื้อบทความ ----
   บทความที่ยกมาจากเว็บเดิมมีพิกัด Google Maps เป็นลิงก์ยาวติดกันรวดเดียว
   เบราว์เซอร์ตัดบรรทัดกลางลิงก์ไม่ได้ พอจอแคบกว่าความยาวลิงก์
   ทั้งหน้าจึงเลื่อนไปทางขวาได้ (เห็นเป็นแถบขาวข้างขวาและเนื้อหาขยับ)
   สั่งให้ตัดคำได้เมื่อจำเป็นเท่านั้น คำไทย-อังกฤษปกติยังตัดตามหลักเดิม */
.art__body,.art__body p,.art__body li,.art__lead,.ap__crumb{ overflow-wrap:break-word }
.art__body a{ word-break:break-word }

/* จอแคบสุด (iPhone SE) ทุกชิ้นพอดีเป๊ะจนแทบไม่เหลือช่องไฟ ลดลงอีกนิดให้หายใจออก */
@media(max-width:360px){
  .center{ margin-left:6px;gap:8px }
  .link{ font-size:14px }
  .cta{ padding:0 10px;font-size:13px;height:32px }
  .iconbtn{ width:32px;height:32px }
  .smini,.smini.is-open,.smini:focus-within{ width:32px;height:32px }
  .smini__ic{ flex:0 0 32px;width:32px;height:32px }
}

/* แถบหมวดที่กางออกมาใต้เมนู — จอแคบต้องขึ้นสามแถว เพดานเดิม 130px ตัดแถวสุดท้ายพอดี
   เผื่อไว้ให้พอ ถ้าวันหน้าเพิ่มหมวดแล้วขึ้นสี่แถวก็ยังไม่โดนตัด */
@media(max-width:560px){
  .topbar.is-open .subbar{ max-height:260px }
}


/* เมนูที่ย้ายลงไปอยู่ในแถบหมวด เพราะแถบบนใส่ไม่ลงแล้ว
   โผล่เฉพาะจอที่แคบจนป้ายบนแถบบนถูกซ่อน จะได้ไม่มีเมนูซ้ำสองที่ */
.subbar__more{ display:none }
@media(max-width:499px){
  .subbar__more{ display:inline-flex;font-weight:700;color:var(--orange) }
}


/* ============================================================
   ปุ่มเลื่อนแบนเนอร์บนจอสัมผัส

   ปุ่มลูกศรถูกออกแบบให้ "โผล่ตอนเอาเมาส์ไปชี้" (opacity:0 แล้ว :hover เป็น 1)
   แต่มือถือไม่มีการชี้ ของเดิมจึงสั่ง display:none ไปเลยทั้งสามแบนเนอร์
   คนใช้มือถือเลยไม่มีปุ่มกดเปลี่ยนแบนเนอร์เลย รู้ได้ทางเดียวคือต้องเดาว่าปัดได้
   เปลี่ยนเป็นโชว์ค้างไว้ ย่อขนาดลงหน่อยและลดความทึบ จะได้ไม่บังภาพ
   ============================================================ */
@media (hover:none){
  .ads__frame .ads__arrow,
  .hl .hl__arrow,
  .tuhero .tuhero__arrow{ opacity:.82 }
}
@media (max-width:620px){
  .ads__arrow,.hl__arrow,.tuhero__arrow{ width:38px;height:38px }
  .ads__arrow svg,.hl__arrow svg,.tuhero__arrow svg{ width:16px;height:16px }
  .ads__arrow--prev,.hl__arrow--prev,.tuhero__arrow--prev{ left:8px }
  .ads__arrow--next,.hl__arrow--next,.tuhero__arrow--next{ right:8px }
  /* เว้นทางให้ปุ่ม ข้อความบนแบนเนอร์จะได้ไม่ไหลไปอยู่ใต้ปุ่ม */
  .hl__body{ padding-left:56px;padding-right:56px }
}

/* ข้อความ "เลื่อนลงเพื่อเปิดเล่ม" บนฉากเปิดหนังสือ
   ตั้งไว้ 18px ตายตัวทุกจอ — บนคอมพิวเตอร์กว้างแค่ 14% ของจอกำลังดี
   แต่บนมือถือกลายเป็นข้อความที่กินความกว้างครึ่งจอ เลยดูใหญ่ผิดส่วน
   ย่อลงตามจอ พร้อมลดระยะห่างตัวอักษรกับความยาวเส้นชี้ลงให้ได้สัดส่วนกัน */
@media (max-width:620px){
  .hint span{ font-size:13.5px;letter-spacing:.10em }
  .hint u{ height:34px;margin-top:10px;width:1.2px }
}
@media (max-width:380px){
  .hint span{ font-size:12.5px;letter-spacing:.08em }
  .hint u{ height:30px;margin-top:9px }
}

/* คำนำหน้าในรายการข้อมูลท้ายบทความ (เช่น "เบอร์ติดต่อ" · "เปิดทำการ")
   แอดมินพิมพ์เองได้ ส่วนไอคอนหน้าบรรทัดยังเป็นของระบบ */
.art__meta__k{ font-weight:700;color:var(--ink);margin-right:6px }

/* หัวข้อในเนื้อเรื่องสามระดับ — ส่วนหัว 1 / 2 / 3 ที่แอดมินเลือกจากตัวแก้บล็อก
   (เดิมมีระดับเดียวคือ .art__h3 ซึ่งยังใช้ได้กับของเก่าที่ไม่ได้เก็บระดับไว้) */
/* ไล่ขนาดลงมาเป็นขั้น น้ำหนักตัวอักษรเท่ากันทั้งสามระดับ
   (ถ้าน้ำหนักไม่เท่ากัน ระดับกลางจะดูเบากว่าระดับล่าง ซึ่งอ่านแล้วสับสนลำดับ) */
.art__hd{ color:var(--ink);font-weight:700 }
.art__hd--1{ margin:clamp(40px,4.6vw,62px) 0 clamp(16px,2vw,24px);font-size:clamp(26px,2.8vw,38px) }
.art__hd--2{ margin:clamp(34px,4vw,52px) 0 clamp(14px,1.8vw,22px);font-size:clamp(22px,2.2vw,30px) }
.art__hd--3{ margin:clamp(28px,3.2vw,42px) 0 clamp(12px,1.5vw,18px);font-size:clamp(18.5px,1.7vw,23px) }

/* ---- เนื้อเรื่องที่พิมพ์เองจากหลังบ้าน ----
   ตอนนี้แก้เนื้อเรื่องที่เดียว หัวข้อกับรูปจึงมาอยู่ใน body_th ทั้งหมด
   บทความเก่าที่นำเข้ามาก็ใช้ <h2>/<h3> เปล่า ๆ อยู่แล้ว จัดให้ขนาดเท่ากับหัวข้อของระบบ */
.art__body > h2{ font-weight:700;color:var(--ink);margin:clamp(40px,4.6vw,62px) 0 clamp(16px,2vw,24px);font-size:clamp(26px,2.8vw,38px) }
.art__body > h3{ font-weight:700;color:var(--ink);margin:clamp(34px,4vw,52px) 0 clamp(14px,1.8vw,22px);font-size:clamp(22px,2.2vw,30px) }
.art__body > h4{ font-weight:700;color:var(--ink);margin:clamp(28px,3.2vw,42px) 0 clamp(12px,1.5vw,18px);font-size:clamp(18.5px,1.7vw,23px) }
/* รายการจุดที่พิมพ์เอง (ไม่ใช่รายการข้อมูลที่มีไอคอน) */
.art__body ul:not(.art__meta),
.art__body ol{ margin:0 0 1.6em;padding-left:1.5em;font-size:clamp(15px,1.15vw,17.5px);line-height:2.05;color:#2f2f2f }
.art__body ul:not(.art__meta) li,
.art__body ol li{ margin-bottom:.5em }
/* รูปที่วางอิสระในเนื้อเรื่อง (บทความเก่าที่นำเข้ามาเป็นแบบนี้ทั้งหมด) */
.art__body > img{ width:100%;height:auto;display:block;border-radius:2px;margin:clamp(26px,3vw,40px) 0;box-shadow:0 14px 34px rgba(20,40,60,.14) }

/* ---- การตัดบรรทัดภาษาไทย ----
   ตัวกันตัดกลางคำอยู่ฝั่ง PHP แล้ว (helper th_join ใส่ WORD JOINER ให้)
   เคยลอง word-break:auto-phrase แต่ Chrome ยังไม่ใช้พจนานุกรมไทยกับค่านี้ จึงไม่ได้ผล
   เหลือไว้แค่ text-wrap ที่ช่วยเกลี่ยบรรทัดให้สวยขึ้น */
.pcard h3,.pcard__body p,
.art__hd,.art__lead,.art__body p,.art__body li,
.art__herobody h1,.art__herobody p,
.rwd__name,.rwd__meta,
.mag__info h3,.mag__info p,
.sec__h{ text-wrap:pretty }
/* หัวเรื่องสั้น ๆ ให้เฉลี่ยความยาวสองบรรทัดให้ใกล้กัน อ่านเป็นก้อนเดียวกว่า */
.pcard h3,.art__herobody h1,.mag__info h3,.rwd__name,.sec__h{ text-wrap:balance }

/* ---- แถบนำทาง (หน้าแรก › บทความ › ชื่อเรื่อง) บนมือถือ ----
   จอแคบ ลิงก์ในแถบถูกบีบจน "หน้าแรก" แตกเป็นสองบรรทัด
   ย่อตัวอักษรลงแล้วบังคับให้อยู่บรรทัดเดียว ชื่อเรื่องที่ยาวเกินให้ตัดเป็น … แทน */
@media(max-width:640px){
  .ap__crumb,.ap__crumb--inset{ flex-wrap:nowrap;gap:6px;font-size:13px;white-space:nowrap;min-width:0 }
  .ap__crumb > a,.ap__crumb > button{ flex-shrink:0 }
  .ap__crumb > span:last-child{ min-width:0;overflow:hidden;text-overflow:ellipsis }
}

/* ---- สโลแกนท้ายเว็บบนมือถือ ----
   ให้ "นิตยสารเพื่อการเดินทาง" กับ "โดยการท่องเที่ยวแห่งประเทศไทย" อยู่คนละบรรทัด
   และห้ามตัดกลางท่อน */
@media(max-width:640px){
  .foot__tagpart{ display:block;white-space:nowrap }
  /* ท่อนสุดท้ายเป็นบล็อกอยู่แล้ว <br> ที่ตามมาจะกลายเป็นบรรทัดว่างเกิน — ซ่อนไว้ */
  .foot__brandtext small .foot__tagpart ~ br{ display:none }
}

/* ---- เฟรมแรกก่อน site.js ทำงาน ----
   ฉากเปิดเล่มเริ่มที่หน้าปก ภาพเรื่องจากปกกับข้อความบทปกยังต้องมองไม่เห็น
   แต่ค่าพวกนี้ JS เป็นคนเขียนทีหลัง ช่วงรอไฟล์ JS คนอ่านจึงเห็นฉากตอนจบแวบขึ้นมา
   แล้วกระโดดกลับไปเป็นหนังสือ ตั้งค่าเริ่มต้นให้ตรงกับจุดเริ่มฉากไว้ตรงนี้
   (JS เขียนค่าจริงทับเป็นสไตล์ในบรรทัดอยู่แล้ว / เครื่องที่ปิด JS ไม่มีคลาส js จึงเห็นครบตามเดิม) */
.js .track .window{ opacity:0 }
.js .track .herocopy [data-r],
.js .track .cue{ opacity:0 }

/* เมนู "สิทธิประโยชน์" บนแถบบน — วัดจากของจริงแล้วสามเมนูกลางวางได้ไม่ชนปุ่มฝั่งขวา
   ตั้งแต่จอกว้าง 840px ขึ้นไป แคบกว่านั้นย้ายลงไปอยู่ในแถบหมวดเหมือน "อนุสาร อ.ส.ท." */
@media(max-width:839px){
  .center .benefits{ display:none }
  .subbar__more--benefits{ display:inline-flex;font-weight:700;color:var(--orange) }
}

/* ============================================================
   แถบเมนูบนพื้นสว่าง — ตัวอักษรเปลี่ยนเป็นสีเข้มเอง
   ปกติแถบเมนูโปร่ง ตัวอักษรขาววางบนภาพ ถ้าใต้แถบเป็นท้องฟ้าขาว หมอก หรือส่วนเนื้อหาพื้นขาว
   ตัวอักษรขาวจะจมหายไป site.js วัดความสว่างของสิ่งที่อยู่ใต้แถบแล้วใส่ .on-light ให้
   เปลี่ยนเฉพาะสีตัวอักษร ไม่เปลี่ยนพื้นแถบ (พื้นขาวแบบกระจกยังขึ้นเฉพาะตอนเอาเมาส์ไปชี้)
   ============================================================ */
.topbar.on-light .link,
.topbar.on-light .iconbtn,
.topbar.on-light .smini__ic,
.topbar.on-light .smini__in,
.topbar.on-light .langsw{ color:var(--ink);text-shadow:none;filter:none }
.topbar.on-light .smini__in::placeholder{ color:rgba(21,24,28,.45) }
.topbar.on-light .cta{ color:var(--ink);border-color:rgba(21,24,28,.72);background:rgba(255,255,255,.22);text-shadow:none }
.topbar.on-light .link:hover,
.topbar.on-light .link:focus-visible,
.topbar.on-light .link[aria-expanded="true"],
.topbar.on-light .smini__ic:hover{ color:var(--orange) }
.topbar.on-light .cta:hover,
.topbar.on-light .cta:focus-visible{ background:var(--orange);border-color:var(--orange);color:#fff }

/* มือถือ: ตอนเลื่อนลงแล้วแถบเมนูต้องทึบพอ ไม่ให้รูปหรือโปสเตอร์ด้านหลังทะลุขึ้นมาแย่งตัวอักษร */
@media (max-width:820px){
  .topbar.is-light .glass{ background:rgba(255,255,255,.94) }
}