/* ---- หน้าแรก: การ์ดเป็นทีวีจอแก้ว (CRT) คลาสสิก ตู้ไม้ + จอโค้ง + เส้นสแกน ---- */
.hsec .hgrid{grid-template-columns:repeat(auto-fill,minmax(270px,330px));gap:72px 36px;padding:62px 8px 22px;margin-top:4px}
body .hsec .hgrid button.hc{
  --wood1:#a3713f;--wood2:#6d4220;--wood3:#3a2111;
  container-type:inline-size;width:100%;aspect-ratio:31/20;
  display:grid;grid-template-columns:minmax(0,1fr) 19%;grid-template-rows:minmax(0,1fr);
  column-gap:3.4%;row-gap:0;align-items:stretch;justify-content:stretch;
  padding:4.6% 4.6% 5.6%;border:0;border-radius:16px 16px 10px 10px;overflow:visible;isolation:isolate;
  color:#fff;text-align:left;font-family:inherit;
  background:
    repeating-linear-gradient(90deg,rgba(0,0,0,.11) 0 1px,transparent 1px 4px,rgba(255,255,255,.04) 4px 5px,transparent 5px 10px),
    linear-gradient(180deg,var(--wood1) 0%,var(--wood2) 46%,var(--wood3) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 -3px 7px rgba(0,0,0,.55),inset 2px 0 0 rgba(255,255,255,.08),inset -2px 0 0 rgba(0,0,0,.35),0 2px 0 #1a0f07,0 20px 22px -12px rgba(0,0,0,.95);
  transition:transform .24s cubic-bezier(.2,.8,.3,1.3),box-shadow .24s}
body .hsec .hgrid button.hc:hover{transform:translateY(-6px) rotate(-.5deg);background:
    repeating-linear-gradient(90deg,rgba(0,0,0,.11) 0 1px,transparent 1px 4px,rgba(255,255,255,.04) 4px 5px,transparent 5px 10px),
    linear-gradient(180deg,var(--wood1) 0%,var(--wood2) 46%,var(--wood3) 100%);color:#fff}
body .hsec .hgrid button.hc.sel{box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 -3px 7px rgba(0,0,0,.55),0 0 0 2px rgba(255,208,125,.95),0 0 30px 3px rgba(255,170,60,.38),0 20px 22px -12px rgba(0,0,0,.95)}
body .hsec .hgrid button.hc:focus-visible{outline:2px solid #fff;outline-offset:4px}
/* ขาตั้ง */
body .hsec .hgrid button.hc::after,body .hsec .hgrid button.hc.add::after{content:'';display:block;position:absolute;z-index:-1;inset:auto 11% -8px 11%;height:9px;border-radius:0 0 5px 5px;
  background:linear-gradient(#2b1a0e,#120a04) left/17% 100% no-repeat,linear-gradient(#2b1a0e,#120a04) right/17% 100% no-repeat}
/* เสาอากาศก้างปลา */
body .hsec .hgrid button.hc .tva{position:absolute;left:50%;top:0;width:0;height:0;padding:0;z-index:-1;pointer-events:none}
body .hsec .hgrid button.hc .tva::before{content:'';position:absolute;left:-8cqw;top:-3.4cqw;width:16cqw;height:4.6cqw;border-radius:8cqw 8cqw 1.4cqw 1.4cqw;background:linear-gradient(180deg,#707070,#1d1d1d);box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
body .hsec .hgrid button.hc .tva i{position:absolute;left:0;bottom:0;width:max(2px,1.1cqw);height:19cqw;margin-left:max(-1px,-.55cqw);border-radius:2px;font-style:normal;transform-origin:50% 100%;
  background:linear-gradient(90deg,#f4f4f4,#9a9a9a 55%,#5a5a5a);box-shadow:0 0 2px rgba(0,0,0,.6)}
body .hsec .hgrid button.hc .tva i:nth-child(1){transform:rotate(-31deg)}
body .hsec .hgrid button.hc .tva i:nth-child(2){transform:rotate(27deg);height:16.5cqw}
body .hsec .hgrid button.hc .tva i::after{content:'';position:absolute;left:50%;top:-1.4cqw;width:2.6cqw;height:2.6cqw;margin-left:-1.3cqw;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#9b9b9b 70%)}
/* จอแก้ว */
body .hsec .hgrid button.hc .tvs{position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:center;padding:0;min-width:0;overflow:hidden;
  border-radius:7.5cqw/6.5cqw;background-size:cover;background-position:center 28%;background-repeat:no-repeat;
  box-shadow:0 0 0 .9cqw #0b0907,0 0 0 1.6cqw #54402e,0 0 0 2.2cqw #1b130c,inset 0 0 7cqw 1.4cqw rgba(0,0,0,.88),inset 0 0 1.2cqw rgba(255,255,255,.16);
  filter:saturate(1.15) contrast(1.06);transition:filter .25s}
body .hsec .hgrid button.hc .tvs::before{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;mix-blend-mode:multiply;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.34) 0 1px,rgba(0,0,0,0) 1px 3px),radial-gradient(ellipse at 50% 50%,rgba(255,255,255,0) 52%,rgba(0,0,0,.6) 100%)}
body .hsec .hgrid button.hc .tvs::after{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;
  background:linear-gradient(128deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.09) 20%,rgba(255,255,255,0) 36%),radial-gradient(ellipse 120% 80% at 50% -10%,rgba(255,255,255,.14),rgba(255,255,255,0) 60%)}
body .hsec .hgrid button.hc .tvn{position:absolute;inset:-12px;z-index:2;padding:0;pointer-events:none;opacity:.2;mix-blend-mode:overlay;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
body .hsec .hgrid button.hc:hover .tvs{filter:saturate(1.3) contrast(1.1) brightness(1.14)}
body .hsec .hgrid button.hc:hover .tvn,body .hsec .hgrid button.hc.sel .tvn{opacity:.3}
/* ชื่อเรื่อง (OSD) */
body .hsec .hgrid button.hc .tvt{position:relative;z-index:5;width:100%;padding:7cqw 2.6cqw 2.4cqw;text-align:center;font-weight:700;font-size:clamp(11px,6.3cqw,16px);line-height:1.25;overflow-wrap:anywhere;
  background:linear-gradient(0deg,rgba(0,0,0,.86),rgba(0,0,0,.4) 62%,rgba(0,0,0,0));
  text-shadow:1.2px 0 rgba(255,40,90,.65),-1.2px 0 rgba(40,210,255,.65),0 1px 6px rgba(0,0,0,.95)}
body .hsec .hgrid button.hc .aib{position:absolute;top:2.8cqw;left:3.2cqw;z-index:6;padding:.9cqw 2.2cqw;border-radius:4px;background:rgba(0,0,0,.5);color:#92ffa6;
  font-size:clamp(9px,4.4cqw,12px);font-weight:700;letter-spacing:.16em;text-shadow:0 0 6px rgba(120,255,150,.85);backdrop-filter:none;-webkit-backdrop-filter:none}
/* แผงปุ่มด้านข้าง */
body .hsec .hgrid button.hc .tvk{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:3.2cqw;padding:3.4cqw 0 3cqw;min-width:0;
  border-radius:3.4cqw;background:linear-gradient(180deg,#2d2620,#12100d);box-shadow:inset 0 2px 5px rgba(0,0,0,.85),0 1px 0 rgba(255,255,255,.14)}
body .hsec .hgrid button.hc .tvk::before{content:'';flex:none;width:2.6cqw;height:2.6cqw;border-radius:50%;background:#3a1b13;box-shadow:inset 0 1px 1px rgba(0,0,0,.6);transition:background .3s,box-shadow .3s}
body .hsec .hgrid button.hc.sel .tvk::before{background:#ff6445;box-shadow:0 0 6px 2px rgba(255,90,60,.85)}
body .hsec .hgrid button.hc .tvb{position:relative;flex:none;display:block;padding:0;width:11.2cqw;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,#1a1a1a 0 30%,transparent 32%),conic-gradient(from 0deg,#e2e2e2,#7b7b7b,#f3f3f3,#686868,#e2e2e2);
  box-shadow:0 2px 3px rgba(0,0,0,.75),inset 0 0 0 .5cqw rgba(0,0,0,.4);transform:rotate(var(--r,0deg));transition:transform .5s cubic-bezier(.2,.8,.3,1.2)}
body .hsec .hgrid button.hc .tvb::after{content:'';position:absolute;left:50%;top:7%;width:max(2px,.9cqw);height:26%;margin-left:max(-1px,-.45cqw);border-radius:1px;background:#c8c8c8;box-shadow:0 0 0 1px rgba(0,0,0,.5)}
body .hsec .hgrid button.hc .tvb+.tvb{width:8.4cqw;transform:rotate(calc(var(--r,0deg)*-1.6))}
body .hsec .hgrid button.hc:hover .tvb{transform:rotate(calc(var(--r,0deg) + 55deg))}
body .hsec .hgrid button.hc:hover .tvb+.tvb{transform:rotate(calc(var(--r,0deg)*-1.6 - 70deg))}
body .hsec .hgrid button.hc .tvg{flex:1;display:block;padding:0;width:74%;min-height:6cqw;border-radius:1.6cqw;
  background:repeating-linear-gradient(0deg,#050403 0 2px,#2e261f 2px 4px);box-shadow:inset 0 0 4px #000,0 1px 0 rgba(255,255,255,.1)}
/* ปุ่มถังขยะ */
body .hsec .hgrid button.hc .hdl{top:-12px;right:-10px;z-index:9}
/* การ์ด "สร้างหนัง AI" = ทีวีที่ปิดอยู่ */
body .hsec .hgrid button.hc.add{--wood1:#7a5532;--wood2:#503319;--wood3:#2b1b0e;background:
    repeating-linear-gradient(90deg,rgba(0,0,0,.11) 0 1px,transparent 1px 4px,rgba(255,255,255,.04) 4px 5px,transparent 5px 10px),
    linear-gradient(180deg,var(--wood1) 0%,var(--wood2) 46%,var(--wood3) 100%);color:#c3d3d1;border:0}
body .hsec .hgrid button.hc.add:hover{transform:translateY(-6px) rotate(.5deg);color:#fff;background:
    repeating-linear-gradient(90deg,rgba(0,0,0,.11) 0 1px,transparent 1px 4px,rgba(255,255,255,.04) 4px 5px,transparent 5px 10px),
    linear-gradient(180deg,var(--wood1) 0%,var(--wood2) 46%,var(--wood3) 100%)}
body .hsec .hgrid button.hc .tvs.off{flex-direction:column;align-items:center;justify-content:center;gap:1.6cqw;filter:none;
  background:radial-gradient(ellipse at 50% 42%,#2c3a3a 0,#0f1616 58%,#050808 100%);transition:background .35s}
body .hsec .hgrid button.hc.add:hover .tvs.off{filter:none;background:radial-gradient(ellipse at 50% 42%,#587270 0,#223131 58%,#071010 100%)}
body .hsec .hgrid button.hc .tvs.off .aiic{position:relative;z-index:5;padding:0;font-size:clamp(20px,11cqw,30px);line-height:1;filter:grayscale(.55) brightness(.85);transition:filter .3s,transform .3s}
body .hsec .hgrid button.hc.add:hover .tvs.off .aiic{filter:none;transform:scale(1.12)}
body .hsec .hgrid button.hc .tvs.off .tvt{width:auto;padding:0 2.6cqw;background:none;color:#9fb4b2;text-shadow:0 0 8px rgba(150,255,235,.25)}
body .hsec .hgrid button.hc.add:hover .tvs.off .tvt{color:#fff;text-shadow:1.2px 0 rgba(255,40,90,.55),-1.2px 0 rgba(40,210,255,.55),0 0 10px rgba(150,255,235,.6)}
@media (prefers-reduced-motion:no-preference){
  body .hsec .hgrid button.hc:hover .tvn,body .hsec .hgrid button.hc.sel .tvn{animation:tvGrain .8s steps(1) infinite}
  body .hsec .hgrid button.hc.sel .tvs{animation:tvFlick 5s linear infinite}
}
@keyframes tvGrain{0%{transform:translate(0,0)}20%{transform:translate(-9px,6px)}40%{transform:translate(8px,-10px)}60%{transform:translate(-11px,-4px)}80%{transform:translate(10px,9px)}100%{transform:translate(0,0)}}
@keyframes tvFlick{0%,90%,100%{opacity:1}92%{opacity:.9}94%{opacity:1}96%{opacity:.94}}

/* v2: ชื่อเรื่องกลางจอ + การ์ดสร้างเรื่องใหม่จางลงและมีเครื่องหมาย + */
body .hsec .hgrid button.hc .tvs{align-items:center}
body .hsec .hgrid button.hc .tvs:not(.off) .tvt{width:100%;padding:0 4cqw;background:none;font-size:clamp(14px,8.4cqw,22px);font-weight:800;line-height:1.3;letter-spacing:.01em;
  text-shadow:1.6px 0 rgba(255,40,90,.7),-1.6px 0 rgba(40,210,255,.7),0 2px 10px rgba(0,0,0,.95),0 0 18px rgba(0,0,0,.8)}
body .hsec .hgrid button.hc.add{opacity:.55;filter:saturate(.6);transition:transform .24s cubic-bezier(.2,.8,.3,1.3),opacity .25s,filter .25s}
body .hsec .hgrid button.hc.add:hover{opacity:1;filter:none}
body .hsec .hgrid button.hc .tvs.off{gap:2.4cqw}
body .hsec .hgrid button.hc .tvs.off .aiic{display:grid;place-items:center;width:17cqw;height:17cqw;padding:0 0 1.2cqw;border:max(1.5px,.7cqw) dashed rgba(190,220,215,.55);border-radius:50%;
  font-size:clamp(22px,13cqw,36px);font-weight:300;line-height:1;color:#c7dcd8;filter:none;text-shadow:0 0 10px rgba(150,255,235,.5);transition:transform .3s,border-color .3s,color .3s}
body .hsec .hgrid button.hc.add:hover .tvs.off .aiic{transform:rotate(90deg) scale(1.1);border-color:#fff;color:#fff;filter:none}
body .hsec .hgrid button.hc .tvs.off .tvt{font-size:clamp(11px,6cqw,15px);font-weight:600}

/* v3: มีรูปปกแล้ว -> ชื่อเรื่องลงด้านล่างจอ */
body .hsec .hgrid button.hc .tvs.img{align-items:flex-end}
body .hsec .hgrid button.hc .tvs.img .tvt{padding:8cqw 3cqw 2.6cqw;font-size:clamp(12px,6.6cqw,17px);font-weight:700;
  background:linear-gradient(0deg,rgba(0,0,0,.88),rgba(0,0,0,.45) 60%,rgba(0,0,0,0))}

/* v4: ป้ายหมวด (โหมด) บนจอ */
body .hsec .hgrid button.hc .tvh{position:absolute;top:2.8cqw;left:3.2cqw;right:3.2cqw;z-index:6;display:flex;align-items:center;gap:1.8cqw;padding:0;min-width:0}
body .hsec .hgrid button.hc .tvh .aib{position:static;flex:none}
body .hsec .hgrid button.hc .tvh .aim{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#ffe3a0;text-shadow:0 0 6px rgba(255,190,80,.85);letter-spacing:.06em}

/* v5: ป้ายหมวดอยู่ใต้ชื่อเรื่อง */
body .hsec .hgrid button.hc .tvc{position:relative;z-index:5;display:flex;flex-direction:column;align-items:center;gap:1.6cqw;width:100%;padding:0}
body .hsec .hgrid button.hc .tvc .tvt{padding-left:4cqw;padding-right:4cqw}
body .hsec .hgrid button.hc .tvc .aim{position:static;display:block;flex:none;max-width:88%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  padding:.9cqw 2.6cqw;border-radius:4px;background:rgba(0,0,0,.5);color:#ffe3a0;font-size:clamp(9px,4.3cqw,12px);font-weight:700;letter-spacing:.06em;text-shadow:0 0 6px rgba(255,190,80,.85)}
body .hsec .hgrid button.hc .tvs.img .tvc{padding:8cqw 0 2.8cqw;background:linear-gradient(0deg,rgba(0,0,0,.88),rgba(0,0,0,.45) 62%,rgba(0,0,0,0))}
body .hsec .hgrid button.hc .tvs.img .tvc .tvt{background:none;padding-top:0;padding-bottom:0}

/* ซ่อนปุ่มและหน้าต่าง "คุยกับ AI" */
#acpt,#acp{display:none!important}