/* 29/9/2026: เพิ่มมิติด้วยแสงและเงา คงโครงข้อมูลเดิม ยกตัวเฉพาะสิ่งที่กดได้ */
:root{--depth-accent:112,230,214;--depth-warm:228,191,119;--depth-surface:linear-gradient(145deg,#142631,#0d1922 48%,#09121b);--depth-edge:rgba(155,210,222,.16);--depth-header:87px;--depth-shadow:0 1px 0 #ffffff0c inset,0 18px 35px -22px #000,0 4px 8px #0003}
html{scroll-padding-top:150px}html,body{overflow-x:clip}
body{position:relative;isolation:isolate;background-color:#070e15;background-image:radial-gradient(ellipse at 85% 5%,rgba(var(--depth-accent),.08),transparent 38%),radial-gradient(ellipse at 10% 45%,rgba(var(--depth-warm),.025),transparent 40%)}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.12;background-image:linear-gradient(#829bad14 1px,transparent 1px),linear-gradient(90deg,#829bad14 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(#000,transparent 80%)}
.wrap{max-width:1200px}
.langbar{background:linear-gradient(180deg,#101b24f5,#081019eb);box-shadow:0 8px 28px #0004;border-bottom:1px solid #ffffff0c}
.langbar .in{max-width:1200px;padding-top:13px;padding-bottom:13px}.brand{--lk:60px}
.brand .bmark,.fbrand img{filter:drop-shadow(0 3px 7px #0008)}
.tabs{top:var(--depth-header);margin:14px 0 24px;border:1px solid #ffffff0d;border-radius:14px;background:linear-gradient(180deg,#15232cf2,#0b151eeb);backdrop-filter:blur(18px);box-shadow:0 8px 20px #0003}
.tabs .in{padding:7px;gap:5px}
.tabs button{border:1px solid transparent;border-radius:9px;padding:12px 17px;letter-spacing:.025em;font-family:var(--ui);color:#a9bec8;white-space:nowrap}
.tabs button[aria-selected="true"]{color:rgb(var(--depth-accent));border-color:rgba(var(--depth-accent),.3);background:linear-gradient(180deg,rgba(var(--depth-accent),.14),rgba(var(--depth-accent),.035));box-shadow:0 1px 0 #ffffff12 inset,0 4px 9px #0004}
.hero.yg-depth-hero{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(255px,1fr);column-gap:30px;text-align:left;padding:48px 42px 34px;margin:0 0 22px;position:relative;isolation:isolate;border:1px solid var(--depth-edge);border-radius:26px;overflow:hidden;background:radial-gradient(ellipse at 100% 25%,rgba(var(--depth-accent),.09),transparent 65%),linear-gradient(125deg,#152530,#0c1822 50%,#0a141d);box-shadow:0 1px 0 #ffffff12 inset,0 30px 60px -35px #000,0 8px 20px #0004}
.hero.yg-depth-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(112deg,#ffffff05,transparent 45%);border-radius:inherit}
.hero.yg-depth-hero::after{content:"";position:absolute;top:0;left:7%;right:7%;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--depth-accent),.7),transparent)}
.yg-depth-hero>:not(.yg-stage){grid-column:1;min-width:0}
.yg-depth-hero .eyebrow{margin-bottom:18px;letter-spacing:.19em;color:rgb(var(--depth-accent))}
.hero.yg-depth-hero h1{font-size:clamp(32px,3.75vw,48px);line-height:1.4;letter-spacing:-.02em;margin:0 0 20px;color:#ecf2f6;text-shadow:0 3px 12px #0004;background:none;-webkit-text-fill-color:currentColor}
.hero.yg-depth-hero h1 em{white-space:normal;color:#f0d393;background:none;-webkit-text-fill-color:currentColor}
.hero.yg-depth-hero .lede{font-size:16px;line-height:1.95;margin:0;max-width:55ch;color:#b0c4d0}
.hero.yg-depth-hero .herocta{justify-content:flex-start;align-items:center;gap:14px;margin:26px 0 22px}
.hero.yg-depth-hero .herocta .ghost{font-size:14px;padding:12px 20px}
.hero.yg-depth-hero .trustline{font-size:12.5px;line-height:1.9;margin:0;border-top:1px solid #ffffff0c;padding-top:18px;color:#97b0be}
.hero.yg-depth-hero .trustline b{color:#d8e5ed}.hero.yg-depth-hero .trustdate{font-size:11px;color:#819caa;margin-top:4px}
/* เวทีโลโก้เป็นงานตกแต่ง ไม่มีการแต่งตัวเลขสถิติ */
.yg-depth-hero .yg-stage{grid-column:2;grid-row:1 / span 6;position:relative;align-self:center;display:grid;place-items:center;width:100%;height:355px;perspective:1000px;isolation:isolate}
.yg-stage::before{content:"";position:absolute;width:92%;aspect-ratio:1;border-radius:50%;z-index:-1;background:radial-gradient(circle,rgba(var(--depth-accent),.13),transparent 68%);border:1px solid rgba(var(--depth-accent),.12);box-shadow:0 0 0 22px #ffffff02,0 0 0 23px #ffffff04}
.yg-stage::after{content:"";position:absolute;width:78%;height:38px;bottom:38px;border-radius:50%;z-index:-1;background:radial-gradient(ellipse,#0009,transparent 70%);filter:blur(6px)}
.yg-coin{--rx:0deg;--ry:0deg;position:relative;width:clamp(180px,20vw,240px);aspect-ratio:1;transform:rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;transition:transform .35s ease}
.yg-coin img{width:100%;height:100%;display:block;object-fit:contain;border-radius:50%;box-shadow:0 0 0 1px #ffffff26,8px 15px 0 -9px #051019,0 22px 38px -10px #000c,0 0 50px -18px rgba(var(--depth-warm),.5)}
.yg-coin::before{content:"";position:absolute;inset:-12%;border-radius:50%;pointer-events:none;border:1px solid rgba(var(--depth-warm),.26);border-left-color:transparent;border-bottom-color:transparent;transform:rotate(-25deg)}
.yg-scene-top,.yg-scene-bottom{position:absolute;padding:9px 15px;border:1px solid var(--depth-edge);border-radius:10px;background:linear-gradient(140deg,#22343fea,#101d27f5);box-shadow:0 8px 22px #0005,0 1px 0 #ffffff0d inset;font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.13em;color:#cfe1e8}
.yg-scene-top{top:14px;right:0;transform:rotate(4deg)}
.yg-scene-top::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;margin-right:9px;background:rgb(var(--depth-accent));box-shadow:0 0 9px rgba(var(--depth-accent),.6)}
.yg-scene-bottom{bottom:7px;left:4%;transform:rotate(-3deg);color:rgb(var(--depth-accent));font-size:10px;letter-spacing:.09em}
section{padding:48px 0;border-top-color:#ffffff0b}.eyebrow{color:rgb(var(--depth-accent));font-size:11px}h2{text-shadow:0 2px 8px #0003;line-height:1.45}.sub{color:#a7bbc7}
.step,.cell,.isnot .yes,.isnot .no,.picker,.split,.locked,.method,.tcard,.dbwrap,.fig,.lx-scope .panel{background:var(--depth-surface);border:1px solid var(--depth-edge);border-radius:16px;box-shadow:var(--depth-shadow)}
.step{padding:25px;position:relative;overflow:hidden}
.step::after{content:"";position:absolute;right:-20px;top:-40px;width:120px;height:120px;border:1px solid #ffffff06;border-radius:50%;pointer-events:none}
.step .no{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:11px;font-weight:700;color:rgb(var(--depth-accent));background:linear-gradient(135deg,rgba(var(--depth-accent),.18),rgba(var(--depth-accent),.025));border:1px solid rgba(var(--depth-accent),.2);box-shadow:0 2px 5px #0003}
.stats{border:0;padding:0;background:transparent;gap:14px;box-shadow:none}.cell{container-type:inline-size;min-width:0;padding:22px 16px;position:relative;overflow:hidden}
.cell::after{content:"";position:absolute;left:16px;right:16px;bottom:0;height:2px;background:linear-gradient(90deg,rgba(var(--depth-accent),.6),transparent)}
.cell .n{font-size:min(39px,23cqi);white-space:nowrap;color:#f0d393;font-variant-numeric:tabular-nums;line-height:1.35}
.cell .l{color:#c0d0d8}.cell .p{color:#849fac}
.fig{min-width:0}.fig .lx-v{color:#e3eff5;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.lx-scope .lg{position:relative;background:var(--depth-surface);border:1px solid var(--depth-edge);box-shadow:var(--depth-shadow);border-radius:13px}
.lx-scope .lg.on{background:linear-gradient(140deg,rgba(var(--depth-accent),.15),#101e27);border-color:rgba(var(--depth-accent),.65);box-shadow:0 1px 0 #ffffff15 inset,0 9px 24px -14px rgba(var(--depth-accent),.5)}
.lx-scope .lg.on::after{content:"";position:absolute;top:12px;right:12px;width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px rgba(var(--depth-accent),.6)}
.lx-scope .lg .d,.fig .k{color:#92aebb}.lx-scope .panel{overflow-x:auto}
.db thead,.lx-scope thead{background:#172935}.db tbody tr:nth-child(even),.lx-scope tbody tr:nth-child(even){background:#ffffff02}
.db tbody tr:hover,.lx-scope tbody tr:hover{background:rgba(var(--depth-accent),.07)}
.split-bar{box-shadow:0 2px 4px #0005 inset,0 1px 0 #ffffff0e;border-radius:9px}.split-bar .o,.split-bar .e{box-shadow:0 1px 0 #ffffff30 inset}
.ctabar{background:linear-gradient(120deg,#142e36,#101c27);border:1px solid rgba(var(--depth-accent),.23);box-shadow:var(--depth-shadow);border-radius:18px}
footer{border-top:1px solid #ffffff10;padding-top:38px}
.herocta a.solid,.dl a.solid{background:linear-gradient(135deg,#f4dda8,#c49b50);color:#201b0e;border:1px solid #f1d797;box-shadow:0 1px 0 #ffffff66 inset,0 8px 18px #0004;font-weight:700}
.ghost{background:linear-gradient(180deg,rgba(var(--depth-accent),.10),rgba(var(--depth-accent),.025));box-shadow:0 1px 0 #ffffff0d inset,0 5px 12px #0003}
/* ยกเมื่อชี้ ยุบเมื่อกด และมีกรอบคีย์บอร์ด เฉพาะสิ่งที่คลิกได้ */
button,a,summary,[role="button"],table.db th[data-sort]{touch-action:manipulation}
button,a,summary,.lx-scope .lg,table.db th[data-sort]{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background-color .18s ease,color .18s ease}
button:not(:disabled),a,summary,[role="button"],table.db th[data-sort]{cursor:pointer}
:is(button,a,[tabindex]):focus-visible{outline:2px solid rgb(var(--depth-accent));outline-offset:4px}
/* 29/9/2026: ช่องค้นหา รายการเลือก และ FAQ ต้องเห็น focus ชัดเท่ากับปุ่มเมื่อใช้คีย์บอร์ด */
.dbtools :is(input,select):focus-visible,summary:focus-visible{outline:2px solid rgb(var(--depth-accent));outline-offset:4px}
@media(hover:hover) and (pointer:fine){
  :is(button,summary,.herocta a,.dl a,.ctabar a,.chip):not(:disabled):hover{transform:translateY(-3px);box-shadow:0 1px 0 #ffffff25 inset,0 9px 18px #0005,0 0 0 1px rgba(var(--depth-accent),.4);filter:brightness(1.10)}
  .lx-scope .lg:not(:disabled):hover{transform:translateY(-4px);border-color:rgba(var(--depth-accent),.65);box-shadow:0 16px 28px -15px #000b,0 1px 0 #ffffff18 inset}
  .brand:hover{transform:translateY(-2px)}.fcol a:hover{color:rgb(var(--depth-accent));text-decoration:underline;text-underline-offset:5px}
  table.db th[data-sort]:hover{background:rgba(var(--depth-accent),.12);color:rgb(var(--depth-accent))}
}
:is(button,summary,.herocta a,.dl a,.ctabar a):not(:disabled):active{transform:translateY(1px) scale(.985);box-shadow:0 1px 5px #0006 inset}
button:disabled{cursor:default;opacity:.5}
.lx-scope .lg:not(:disabled):active{transform:translateY(1px) scale(.985);box-shadow:0 1px 5px #0006 inset}
.yg-reveal{opacity:1;transform:none}
@media(min-width:641px){.stats{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}}
/* 29/9/2026: สถิติ 6 ช่องจัดเป็น 3+3 บนแท็บเล็ต ป้องกันแถว 5+1 ที่เสียสมดุล */
@media(min-width:641px) and (max-width:1099px){#panel-stats .stats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1100px){#panel-stats .stats{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(max-width:960px){
  .hero.yg-depth-hero{padding:30px 28px;column-gap:18px;grid-template-columns:minmax(0,1.45fr) minmax(215px,1fr)}
  .hero.yg-depth-hero h1{font-size:36px}.yg-depth-hero .yg-stage{height:300px}.yg-coin{width:185px}.yg-scene-top{font-size:10px}.yg-scene-bottom{font-size:9px}
}
@media(max-width:700px){
  .brand{--lk:52px}.langbar .in{padding:10px 18px}.wrap{padding:0 16px}
  .tabs{margin:10px 0 16px;border-radius:12px}.tabs .in{padding:6px;gap:3px}.tabs button{padding:10px 12px;font-size:12px}.tabs::after{width:18px;border-radius:0 12px 12px 0}
  .hero.yg-depth-hero{grid-template-columns:minmax(0,1fr);padding:26px 22px;border-radius:20px;text-align:center}
  .yg-depth-hero .yg-stage{grid-column:1;grid-row:1;height:215px;width:min(100%,300px);justify-self:center;margin-bottom:22px}
  .yg-stage::before{width:68%}.yg-stage::after{bottom:25px;width:60%}.yg-coin{width:150px}
  .yg-scene-top{top:4px;right:0;padding:6px 10px}.yg-scene-bottom{bottom:0;left:0;padding:7px 10px}
  .hero.yg-depth-hero h1{font-size:clamp(28px,6.5vw,37px);line-height:1.5;margin-bottom:16px}
  .hero.yg-depth-hero .lede{font-size:14.5px;line-height:1.95}.hero.yg-depth-hero .herocta{justify-content:center;margin:22px 0;gap:12px}
  .hero.yg-depth-hero .herocta a{width:auto}.hero.yg-depth-hero .herocta .ghost{padding:11px 16px}
  .hero.yg-depth-hero .trustline{font-size:11.5px}.hero.yg-depth-hero .trustdate{font-size:10px}
  section{padding:34px 0}.steps{gap:12px}.step{padding:21px}.stats{gap:10px}.cell{padding:17px 12px}.cell .n{font-size:min(32px,23cqi)}.sub{font-size:15px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.yg-coin{transform:none!important}}