/* =====================================================================
   Design tokens — light + dark. ทุกสีในไฟล์นี้มาจากตัวแปรด้านล่าง
   ===================================================================== */
:root{
  --paper:#F6F5F1;  --paper-deep:#ECEAE2;  --card-bg:#FFFFFF;  --surface:#FFFFFF;
  --ink:#1C2321;    --ink-soft:#4F5650;    --ink-faint:#737A73;
  --heading:#1E2C3E; --accent:#2E4057;
  --solid:#1E2C3E;  --on-solid:#FFFFFF;
  --gold:#B8912C;   --gold-text:#8A6A12;   --gold-soft:#D9BE7A;
  --line:#DEDACD;   --line-soft:#EAE7DC;
  --hero-top:#FAF9F5; --hero-glow:rgba(46,64,87,0.08);
  --backdrop:rgba(20,26,24,0.78);
  --video-bg:#0B0F14; --ctl-bg:rgba(12,17,22,0.66);
  --shadow-sm:0 2px 10px -4px rgba(30,44,62,0.14);
  --shadow-md:0 16px 36px -16px rgba(30,44,62,0.30);
  --shadow-lg:0 28px 60px -20px rgba(30,44,62,0.42);
  --display:'PromptSelf','Prompt','Leelawadee UI','Noto Sans Thai',Tahoma,sans-serif;
  --sans:'SarabunSelf','Sarabun','Leelawadee UI','Noto Sans Thai',Tahoma,sans-serif;
  color-scheme:light;
}
[data-theme="dark"]{
  --paper:#0E1318;  --paper-deep:#18202A;  --card-bg:#151B22;  --surface:#1C2430;
  --ink:#E7EAE8;    --ink-soft:#A8B0AB;    --ink-faint:#8A938D;
  --heading:#EAF0F7; --accent:#9FB7D6;
  --solid:#D4AE4F;  --on-solid:#14181D;
  --gold:#D4AE4F;   --gold-text:#E2BF66;   --gold-soft:#8E7430;
  --line:#27303A;   --line-soft:#1F2730;
  --hero-top:#121920; --hero-glow:rgba(159,183,214,0.09);
  --backdrop:rgba(0,0,0,0.74);
  --video-bg:#05080B; --ctl-bg:rgba(12,17,22,0.72);
  --shadow-sm:0 2px 10px -4px rgba(0,0,0,0.5);
  --shadow-md:0 16px 36px -16px rgba(0,0,0,0.65);
  --shadow-lg:0 28px 60px -20px rgba(0,0,0,0.75);
  color-scheme:dark;
}

/* ===== Base ===== */
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-weight:400; font-size:17px; line-height:1.7;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background-color .3s ease, color .3s ease;
}
button{font-family:inherit; color:inherit;}
a{color:inherit;}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px;}
@media (min-width:640px){ .wrap{padding:0 32px;} }
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
.noscript{padding:16px; text-align:center; background:var(--paper-deep); color:var(--ink);}
:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}

.scroll-progress{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:200;
  background:linear-gradient(90deg,var(--gold-soft),var(--gold));
  transform:scaleX(0); transform-origin:left; pointer-events:none;
}

/* ===== Hero ===== */
.hero{
  position:relative; overflow:hidden;
  border-bottom:1px solid var(--line);
  padding:48px 0 44px;
  background:
    radial-gradient(1000px 420px at 88% -15%, var(--hero-glow), transparent 62%),
    linear-gradient(180deg, var(--hero-top) 0%, var(--paper) 100%);
}
@media (min-width:640px){ .hero{padding:68px 0 60px;} }
.hero-decor{position:absolute; top:-40px; right:-60px; width:360px; height:360px; color:var(--gold); pointer-events:none; opacity:.55;}
.hero-decor svg{width:100%; height:100%; transform-origin:80% 15%; animation:slowspin 120s linear infinite;}
@keyframes slowspin{to{transform:rotate(360deg);}}
@media (max-width:860px){ .hero-decor{display:none;} }

.hero-top{
  position:relative; display:flex; justify-content:space-between; align-items:center;
  gap:16px; margin-bottom:36px; font-size:14px; color:var(--ink-soft);
}
@media (min-width:640px){ .hero-top{margin-bottom:52px; font-size:15px;} }
.hero-top .uni{font-weight:600;}
.hero-top-right{display:flex; align-items:center; gap:12px; flex-shrink:0;}
.course-code{font-family:var(--display); font-weight:600; letter-spacing:.04em; color:var(--gold-text); white-space:nowrap; font-size:14px;}

.theme-toggle{
  display:grid; place-items:center; width:36px; height:36px; border-radius:50%;
  background:var(--surface); border:1px solid var(--line); color:var(--ink-soft); cursor:pointer;
  transition:border-color .2s ease, color .2s ease, transform .3s ease;
}
.theme-toggle:hover{border-color:var(--gold); color:var(--heading); transform:rotate(18deg);}
.theme-toggle .i-sun{display:none;}
[data-theme="dark"] .theme-toggle .i-sun{display:block;}
[data-theme="dark"] .theme-toggle .i-moon{display:none;}

h1{
  position:relative; font-family:var(--display); font-weight:600;
  font-size:clamp(32px,7vw,58px); line-height:1.3; letter-spacing:-.01em; color:var(--heading);
}
h1 .en{
  display:block; font-family:var(--sans); font-weight:400; font-size:.36em; line-height:1.5;
  color:var(--ink-soft); margin-top:12px; letter-spacing:.02em;
}
.hero-desc{position:relative; font-size:17px; color:var(--ink-soft); max-width:62ch; margin-top:22px;}
@media (min-width:640px){ .hero-desc{font-size:18px; margin-top:26px;} }

.hero-actions{position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:28px;}
.btn-primary{
  display:inline-flex; align-items:center; gap:9px; border:none; cursor:pointer;
  background:var(--solid); color:var(--on-solid);
  font-family:var(--display); font-weight:500; font-size:15px;
  padding:12px 24px; border-radius:100px;
  box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease;
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:var(--shadow-md);}
.btn-ghost{
  display:inline-flex; align-items:center; text-decoration:none;
  font-family:var(--display); font-weight:500; font-size:15px;
  padding:11px 22px; border-radius:100px; border:1px solid var(--line); color:var(--heading);
  transition:border-color .2s ease, background .2s ease;
}
.btn-ghost:hover{border-color:var(--gold); background:var(--paper-deep);}
.progress-chip{
  font-size:14px; font-weight:600; color:var(--gold-text);
  background:color-mix(in srgb, var(--gold) 13%, transparent);
  padding:6px 14px; border-radius:100px;
}
.progress-chip[hidden]{display:none;}

.hero-anim{animation:fadeUp .75s cubic-bezier(.22,1,.36,1) both; animation-delay:calc(var(--i,0) * 100ms);}
@keyframes fadeUp{from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:none;}}

/* ===== Chapter grid ===== */
main.wrap{padding:44px 24px 56px;}   /* main.wrap: ต้องมี .wrap ด้วย ไม่งั้น .wrap ที่เป็น class จะชนะและตัด padding แนวตั้งทิ้ง */
@media (min-width:640px){ main.wrap{padding:60px 32px 72px;} }
.chapter-grid{display:grid; grid-template-columns:1fr; gap:16px;}
@media (min-width:560px){ .chapter-grid{grid-template-columns:repeat(2,1fr); gap:18px;} }
@media (min-width:980px){ .chapter-grid{grid-template-columns:repeat(4,1fr); gap:20px;} }

/* scroll-reveal: ใช้เฉพาะเมื่อ JS ทำงาน และผู้ใช้ไม่ได้ปิดแอนิเมชัน */
.js .reveal{opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1); transition-delay:var(--d,0ms);}
.js .reveal.in{opacity:1; transform:none;}

.card-wrap{display:flex;}
.chapter-card{
  position:relative; overflow:hidden; width:100%;
  background:var(--card-bg); border:1px solid var(--line); border-radius:14px;
  padding:0; cursor:pointer; text-align:left;
  display:flex; flex-direction:column;
  transition:border-color .25s ease, transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease, background-color .3s ease;
}
.chapter-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--gold-soft),var(--gold));
  transform:scaleX(0); transform-origin:left; transition:transform .3s ease; z-index:2;
}
.chapter-card:hover,.chapter-card:focus-visible{border-color:transparent; transform:translateY(-5px); box-shadow:var(--shadow-md); outline:none;}
.chapter-card:hover::before,.chapter-card:focus-visible::before{transform:scaleX(1);}
.c-top{display:flex; justify-content:space-between; align-items:center;}
.c-icon{
  width:40px; height:40px; display:grid; place-items:center; border-radius:11px;
  color:var(--accent); background:var(--paper-deep); transition:background .25s ease, color .25s ease;
}
.c-icon svg{width:20px; height:20px;}
.chapter-card:hover .c-icon{background:var(--solid); color:var(--on-solid);}
.c-done{
  font-size:12.5px; font-weight:600; color:var(--gold-text);
  background:color-mix(in srgb, var(--gold) 14%, transparent); padding:2px 10px; border-radius:100px;
}
.c-num{font-family:var(--display); font-weight:500; color:var(--gold-text); font-size:14px; letter-spacing:.02em;}
.c-title{font-family:var(--display); font-weight:600; color:var(--heading); font-size:19px; line-height:1.4;}
.c-desc{font-size:15px; color:var(--ink-soft); line-height:1.65; flex:1;}
.c-progress{display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--ink-soft);}
.c-progress .bar{flex:1; height:5px; border-radius:100px; background:var(--line-soft); overflow:hidden;}
.c-progress .bar i{display:block; height:100%; width:0; border-radius:100px; background:linear-gradient(90deg,var(--gold-soft),var(--gold)); transition:width .6s cubic-bezier(.22,1,.36,1);}
.c-play{
  display:flex; align-items:center; gap:7px; font-size:14px; font-weight:600; color:var(--accent);
  border-top:1px solid var(--line-soft); padding-top:12px;
}
.c-play svg{transition:transform .2s ease;}
.chapter-card:hover .c-play svg{transform:translateX(4px);}

/* ===== About ===== */
.about{padding:0 24px 56px;}
@media (min-width:640px){ .about{padding:0 32px 72px;} }
.about-card{
  background:var(--card-bg); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-sm);
  padding:32px 24px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:22px;
}
@media (min-width:700px){ .about-card{flex-direction:row; align-items:flex-start; text-align:left; padding:40px 44px; gap:36px;} }
.about-photo{
  position:relative; width:112px; height:112px; border-radius:50%; flex-shrink:0; overflow:hidden;
  background:var(--video-bg); border:3px solid var(--paper-deep); box-shadow:var(--shadow-sm);
}
@media (min-width:640px){ .about-photo{width:128px; height:128px;} }
.about-photo img{position:relative; z-index:1; width:100%; height:100%; object-fit:cover; display:block;}
.about-photo-fallback{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--display); font-weight:600; font-size:34px; color:var(--gold-soft);
  background:radial-gradient(circle at 30% 20%, rgba(184,145,44,.2), transparent 60%), var(--video-bg);
}
.about-body{flex:1; min-width:0;}
.about-eyebrow{font-size:14px; color:var(--gold-text); font-weight:600; margin-bottom:4px;}
.about-body h2{font-family:var(--display); font-weight:600; color:var(--heading); font-size:26px; line-height:1.4; margin-bottom:4px;}
.about-role{font-size:15px; color:var(--ink-soft); margin-bottom:14px;}
.about-bio{font-size:16px; color:var(--ink-soft); line-height:1.75; max-width:64ch; margin:0 auto 18px;}
@media (min-width:700px){ .about-bio{margin:0 0 18px;} }
.about-links{display:flex; flex-wrap:wrap; justify-content:center; gap:10px;}
@media (min-width:700px){ .about-links{justify-content:flex-start;} }
.about-links:empty{display:none;}
.about-link{
  display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--accent);
  border:1px solid var(--line); border-radius:100px; padding:7px 16px; text-decoration:none;
  transition:border-color .2s ease, background .2s ease;
}
.about-link:hover{border-color:var(--gold); background:var(--paper-deep);}

/* ===== Footer ===== */
footer{border-top:1px solid var(--line); padding:36px 24px 48px; text-align:center; color:var(--ink-soft); font-size:15px;}
footer .credit{margin-top:4px; color:var(--ink-faint);}
footer .footnote{margin-top:14px; font-size:13.5px; color:var(--ink-faint);}
.link-btn{background:none; border:none; cursor:pointer; text-decoration:underline; font-size:inherit; color:var(--accent);}
.link-btn:hover{color:var(--gold-text);}

/* =====================================================================
   Modal
   ===================================================================== */
.modal-backdrop{
  position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center;
  padding:16px; background:var(--backdrop); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .25s ease;
}
.modal-backdrop.open{display:flex;}
.modal-backdrop.show{opacity:1;}
.modal{
  position:relative; width:100%; max-width:1080px; max-height:94vh; overflow-y:auto;
  background:var(--paper); border-radius:18px; box-shadow:var(--shadow-lg);
  transform:translateY(18px) scale(.97); transition:transform .3s cubic-bezier(.22,1,.36,1), background-color .3s ease;
}
.modal-backdrop.show .modal{transform:none;}
.modal-close{
  position:absolute; top:14px; right:14px; z-index:6; width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  background:var(--surface); border:1px solid var(--line); color:var(--ink-soft);
  transition:background .2s ease, color .2s ease, transform .25s ease, border-color .2s ease;
}
.modal-close:hover{background:var(--solid); color:var(--on-solid); border-color:var(--solid); transform:rotate(90deg);}

/* bottom-sheet บนมือถือ */
@media (max-width:640px){
  .modal-backdrop{align-items:flex-end; padding:0;}
  .modal{max-width:none; max-height:96vh; max-height:96dvh; border-radius:22px 22px 0 0; transform:translateY(48px);}
}

/* ---- ขั้นที่ 1: รายการตอน ---- */
.modal-list{padding:44px 24px 28px; display:none;}
@media (min-width:640px){ .modal-list{padding:52px 52px 40px;} }
.modal-list-num{font-family:var(--display); font-weight:500; color:var(--gold-text); font-size:15px; margin-bottom:8px;}
.modal-list h2{font-family:var(--display); font-weight:600; color:var(--heading); font-size:25px; line-height:1.4; margin-bottom:10px; padding-right:40px;}
@media (min-width:640px){ .modal-list h2{font-size:30px;} }
.modal-list p{font-size:16px; color:var(--ink-soft); max-width:60ch; margin-bottom:26px;}
.episode-list{display:flex; flex-direction:column; border-top:1px solid var(--line);}
.episode-item{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  background:none; border:none; border-bottom:1px solid var(--line); border-radius:8px;
  padding:16px 10px; cursor:pointer; transition:background .15s ease, padding-left .15s ease;
}
@media (min-width:640px){ .episode-item{gap:18px; padding:18px 12px;} }
.episode-item:hover,.episode-item:focus-visible{background:var(--paper-deep); padding-left:16px; outline:none;}
.episode-item .ep-num{font-family:var(--display); font-weight:500; color:var(--gold-text); font-size:15px; width:42px; flex-shrink:0;}
.episode-item .ep-title{flex:1; font-size:16px; line-height:1.5;}
.episode-item .ep-state{font-size:13.5px; font-weight:600; color:var(--ink-faint); white-space:nowrap;}
.episode-item .ep-state.done{color:var(--gold-text);}
.episode-item .ep-state.resume{color:var(--accent);}

/* ---- ขั้นที่ 2: เครื่องเล่น ---- */
.modal-body{display:none;}
.modal-topbar{padding:16px 64px 0 22px;}
@media (min-width:860px){ .modal-topbar{padding:20px 64px 0 36px;} }
.modal-back{background:none; border:none; cursor:pointer; font-size:15px; font-weight:600; color:var(--ink-soft); padding:6px 0; transition:color .2s ease;}
.modal-back:hover{color:var(--heading);}

.player-layout{display:grid; grid-template-columns:1fr; gap:22px; padding:10px 20px 28px;}
@media (min-width:860px){
  .player-layout{grid-template-columns:auto minmax(0,1fr); gap:0 40px; padding:10px 36px 34px;}
}

.modal-video{
  --vh-video:min(64vh,560px);
  position:relative; overflow:hidden; background:var(--video-bg);
  width:min(100%, calc(var(--vh-video) * 9 / 16)); aspect-ratio:9/16; margin:0 auto;
  border-radius:14px; align-self:start;
}
@media (min-width:860px){
  .modal-video{--vh-video:min(74vh,700px); width:calc(var(--vh-video) * 9 / 16); height:var(--vh-video); aspect-ratio:auto; margin:0;}
}
/* มือถือแนวนอน: พื้นที่แนวตั้งน้อย ให้วางสองคอลัมน์ */
@media (orientation:landscape) and (max-height:560px){
  .player-layout{grid-template-columns:auto minmax(0,1fr); gap:0 28px; padding:6px 24px 20px;}
  .modal-video{--vh-video:min(74vh,420px); width:calc(var(--vh-video) * 9 / 16); height:var(--vh-video); aspect-ratio:auto; margin:0;}
}
.modal-video video{width:100%; height:100%; display:block; object-fit:contain; background:var(--video-bg);}
.modal-video:fullscreen{width:100%; height:100%; border-radius:0; aspect-ratio:auto;}

.video-overlay{
  position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; padding:0 22px; text-align:center; color:rgba(246,245,241,.9); background:rgba(11,15,20,.62);
}
.overlay-text{font-size:14px; line-height:1.6;}
.spinner{width:32px; height:32px; border-radius:50%; border:2.5px solid rgba(246,245,241,.25); border-top-color:var(--gold-soft); animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.overlay-btn{
  background:var(--gold); color:#14181D; border:none; cursor:pointer;
  padding:9px 20px; border-radius:100px; font-family:var(--display); font-weight:500; font-size:14px; line-height:1.3;
  transition:background .2s ease, transform .15s ease;
}
.overlay-btn:hover{background:var(--gold-soft); transform:translateY(-1px);}
.overlay-btn.secondary{background:transparent; color:#fff; border:1px solid rgba(255,255,255,.4);}
.overlay-btn.secondary:hover{background:rgba(255,255,255,.12);}

.end-card{background:rgba(8,12,16,.86); z-index:3;}
.end-title{font-family:var(--display); font-weight:600; font-size:20px; color:#fff; line-height:1.4;}
.end-sub{font-size:14.5px; color:rgba(255,255,255,.75); max-width:24ch;}
.end-actions{display:flex; flex-direction:column; gap:10px; margin-top:6px; width:100%; max-width:230px;}
.end-actions .overlay-btn{width:100%;}
.end-actions .overlay-btn[hidden]{display:none;}

/* ปุ่มควบคุมของเรา: แถวบนสุดของวิดีโอ ไม่ชนแถบควบคุมเดิมด้านล่าง; ซ่อนเองเมื่อเล่นแล้วไม่ขยับเมาส์ */
.vctl{transition:opacity .25s ease, background .2s ease;}
.modal-video.idle .vctl{opacity:0; pointer-events:none;}
.modal-video.idle{cursor:none;}
.fullscreen-btn,.speed-btn,.quality-btn{
  position:absolute; top:10px; z-index:4; display:flex; align-items:center; gap:6px; height:32px;
  background:var(--ctl-bg); color:#fff; border:1px solid rgba(255,255,255,.22);
  border-radius:100px; cursor:pointer; backdrop-filter:blur(4px);
  font-family:var(--display); font-weight:500; font-size:12.5px;
}
.fullscreen-btn:hover,.speed-btn:hover,.quality-btn:hover{background:rgba(12,17,22,.88);}
.fullscreen-btn{left:10px; width:32px; justify-content:center;}
.speed-btn{left:50px; padding:0 12px;}
.speed-btn.slow{background:rgba(184,145,44,.92); border-color:transparent; color:#14181D;}
.quality-btn{right:10px; padding:0 12px;}

.speed-menu,.quality-menu{
  position:absolute; top:48px; z-index:5; display:none; overflow:hidden;
  background:var(--surface); color:var(--ink); border:1px solid var(--line);
  border-radius:12px; box-shadow:var(--shadow-md); max-width:calc(100% - 20px);
}
.speed-menu{left:10px; width:184px;}
.quality-menu{right:10px; width:228px;}
.speed-menu.open,.quality-menu.open{display:block;}
.speed-menu button,.quality-menu button{
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px; width:100%; text-align:left;
  background:none; border:none; border-bottom:1px solid var(--line-soft); padding:10px 14px; font-size:14.5px; cursor:pointer;
  transition:background .15s ease;
}
.speed-menu button:last-child,.quality-menu button:last-child{border-bottom:none;}
.speed-menu button:hover,.quality-menu button:hover{background:var(--paper-deep);}
.speed-menu button.active,.quality-menu button.active{font-weight:600; color:var(--heading); background:color-mix(in srgb, var(--gold) 12%, transparent);}
.speed-menu button small,.quality-menu button small{display:block; font-size:12px; color:var(--ink-faint); font-weight:400; line-height:1.4;}
.speed-menu button{align-items:baseline;}
.quality-menu button span:first-child{min-width:0;}
.q-tag{font-size:11px; font-weight:600; flex-shrink:0; color:var(--gold-text); background:color-mix(in srgb, var(--gold) 14%, transparent); padding:2px 8px; border-radius:6px;}
.q-tag-auto{color:var(--accent); background:color-mix(in srgb, var(--accent) 14%, transparent);}

.toast{
  position:absolute; top:50px; left:10px; right:10px; z-index:5; display:flex; align-items:flex-start; gap:8px;
  background:rgba(12,17,22,.92); color:#fff; font-size:13px; line-height:1.5; padding:9px 13px; border-radius:12px;
  opacity:0; transform:translateY(-8px); pointer-events:none; backdrop-filter:blur(4px);
  transition:opacity .25s ease, transform .25s ease;
}
.toast.show{opacity:1; transform:none;}
.toast .dot{width:7px; height:7px; border-radius:50%; flex-shrink:0; margin-top:6px;}
.toast.down .dot{background:#E2A33D;}
.toast.up .dot{background:#6FBF8B;}
.toast.resume{top:auto; bottom:64px; align-items:center; justify-content:space-between;}
.toast.resume.show{pointer-events:auto;}
.toast.resume button{background:none; border:none; cursor:pointer; color:var(--gold-soft); font-weight:600; font-size:13px; text-decoration:underline; white-space:nowrap;}

/* ---- แผงข้อมูลข้างวิดีโอ ---- */
.modal-info{min-width:0;}
@media (min-width:860px){ .modal-info{padding-top:6px;} }
.modal-num{font-family:var(--display); font-weight:500; color:var(--gold-text); font-size:15px; margin-bottom:6px;}
.modal-info h2{font-family:var(--display); font-weight:600; color:var(--heading); font-size:23px; line-height:1.4;}
@media (min-width:860px){ .modal-info h2{font-size:28px;} }
.modal-chapter{font-size:15px; color:var(--ink-faint); margin:6px 0 20px;}

.info-actions{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px;}
.info-actions button{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:9px 14px; font-size:14px; font-weight:600; color:var(--ink-soft);
  transition:border-color .2s ease, color .2s ease, background .2s ease, transform .15s ease;
}
.info-actions button:hover:not(:disabled){border-color:var(--gold); color:var(--heading); transform:translateY(-1px);}
.info-actions button:disabled{opacity:.35; cursor:default;}
.info-actions .copy-btn.copied{border-color:var(--gold); color:var(--gold-text);}

.playlist-head{font-family:var(--display); font-weight:500; font-size:14px; letter-spacing:.03em; color:var(--ink-faint); margin-bottom:8px;}
.playlist{display:flex; flex-direction:column; gap:4px;}
.pl-item{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer;
  background:transparent; border:1px solid transparent; border-radius:12px; padding:10px 12px;
  transition:background .15s ease, border-color .15s ease;
}
.pl-item:hover{background:var(--paper-deep);}
.pl-item.current{background:var(--paper-deep); border-color:var(--gold);}
.pl-idx{
  width:28px; height:28px; border-radius:50%; flex-shrink:0; display:grid; place-items:center;
  font-family:var(--display); font-weight:500; font-size:13.5px; color:var(--ink-soft); border:1px solid var(--line);
}
.pl-item.done .pl-idx{background:var(--gold); border-color:var(--gold); color:#14181D;}
.pl-item.current .pl-idx{background:var(--solid); border-color:var(--solid); color:var(--on-solid);}
.pl-title{flex:1; font-size:15.5px; line-height:1.45;}
.pl-tag{font-size:13px; font-weight:600; color:var(--gold-text); white-space:nowrap;}

.shortcuts{display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:24px; padding-top:18px; border-top:1px solid var(--line-soft); font-size:13.5px; color:var(--ink-faint);}
.shortcuts span{display:inline-flex; align-items:center; gap:5px;}
kbd{
  font-family:var(--display); font-weight:500; font-size:12px; line-height:1;
  padding:4px 7px; border:1px solid var(--line); border-bottom-width:2px; border-radius:6px;
  background:var(--surface); color:var(--ink-soft);
}
@media (hover:none){ .shortcuts{display:none;} }

/* ===== ลดแอนิเมชันตามที่ผู้ใช้ตั้งค่าในระบบ ===== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation:none !important; transition-duration:.01ms !important; transition-delay:0ms !important;}
  .js .reveal{opacity:1; transform:none;}
}
.modal:focus{outline:none;}

/* กรอบวิดีโอแคบ (เช่นมือถือแนวนอน): ปุ่มควบคุมเหลือแค่ไอคอน ไม่ให้ทับกัน */
.modal-video{container-type:inline-size;}
@container (max-width:250px){
  .quality-btn span{display:none;}
  .quality-btn{width:32px; padding:0; justify-content:center;}
}
@container (max-width:190px){
  .speed-btn span{display:none;}
  .speed-btn{width:32px; padding:0; justify-content:center;}
}
/* กฎสำรองสำหรับเบราว์เซอร์ที่ยังไม่รองรับ container query */
@media (orientation:landscape) and (max-height:560px){
  .quality-btn span,.speed-btn span{display:none;}
  .quality-btn,.speed-btn{width:32px; padding:0; justify-content:center;}
}


/* ===== ภาพปกของแต่ละตอน ===== */
.c-body{padding:24px 22px 20px; display:flex; flex-direction:column; gap:12px; flex:1;}
.c-strip{display:flex; gap:3px; height:0; overflow:hidden; background:var(--paper-deep); transition:height .5s cubic-bezier(.22,1,.36,1);}
.c-strip.on{height:104px;}
.c-thumb{flex:1; min-width:0; position:relative;}
.c-thumb img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.22,1,.36,1);}
.chapter-card:hover .c-thumb img{transform:scale(1.1);}

.pl-thumb,.ep-thumb{position:relative; flex-shrink:0; overflow:hidden; border-radius:6px; background:var(--paper-deep);}
.pl-thumb{width:28px; height:50px;}
.ep-thumb{width:32px; height:57px;}
.pl-thumb img,.ep-thumb img{width:100%; height:100%; object-fit:cover; display:block;}

/* จอเตี้ย (เช่นโน้ตบุ๊ก 1366x768): ซ่อนรายการปุ่มลัดเพื่อไม่ให้หน้าต่างต้องเลื่อน */
@media (max-height:820px){ .shortcuts{display:none;} }

/* =====================================================================
   เพิ่มความเต็มให้หน้าเว็บ: ปุ่มค้นหา · กำแพงภาพปก · ดูล่าสุด · FAQ · คอนเฟตตี
   ===================================================================== */
.section-head{display:flex; align-items:baseline; gap:12px; margin-bottom:16px;}
.section-head h2{font-family:var(--display); font-weight:600; font-size:22px; line-height:1.4; color:var(--heading);}
.section-head span{font-size:14.5px; color:var(--ink-faint);}

/* ---- ปุ่มค้นหา ---- */
.search-btn{
  display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 12px 0 14px; cursor:pointer;
  background:var(--surface); border:1px solid var(--line); border-radius:100px; color:var(--ink-soft);
  font-size:14px; font-weight:600; transition:border-color .2s ease, color .2s ease;
}
.search-btn:hover{border-color:var(--gold); color:var(--heading);}
@media (max-width:560px){ .search-btn .sb-text,.search-btn kbd{display:none;} .search-btn{padding:0; width:36px; justify-content:center;} }
@media (hover:none){ .search-btn kbd{display:none;} }

/* ---- กำแพงภาพปก (เฉพาะจอกว้าง และเฉพาะเมื่อมีภาพปกจริง) ---- */
.cover-wall{display:none;}
@media (min-width:1100px){
  .cover-wall.on{
    display:flex; gap:12px; position:absolute; z-index:1; top:96px; bottom:0;
    right:max(32px, calc((100vw - 1180px) / 2 + 32px)); width:clamp(300px,30vw,400px);
    -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
            mask-image:linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
    animation:fadeIn 1s ease both;
  }
  .hero.has-wall .hero-decor{display:none;}
  .hero.has-wall .hero-top{z-index:2;}
}
@keyframes fadeIn{from{opacity:0;} to{opacity:1;}}
.cw-col{flex:1; min-width:0; overflow:hidden;}
.cw-track{display:flex; flex-direction:column; gap:12px; animation:cwUp 90s linear infinite; will-change:transform;}
.cw-col:nth-child(2) .cw-track{animation-direction:reverse; animation-duration:110s;}
.cw-col:nth-child(3) .cw-track{animation-duration:75s;}
@keyframes cwUp{from{transform:translateY(0);} to{transform:translateY(calc(-50% - 6px));}}
.cw-item{aspect-ratio:9/16; border-radius:12px; overflow:hidden; background:var(--paper-deep); box-shadow:var(--shadow-sm); cursor:pointer; flex-shrink:0;}
.cw-item img{width:100%; height:100%; object-fit:cover; display:block;}
.cover-wall:hover .cw-track{animation-play-state:paused;}
body.modal-open .cw-track{animation-play-state:paused;}   /* ประหยัดเครื่องตอนดูวิดีโอ */

/* ---- ดูล่าสุด ---- */
.recent{margin-bottom:44px; animation:fadeUp .6s cubic-bezier(.22,1,.36,1) both;}
.recent[hidden]{display:none;}
.recent-row{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px;}
@media (max-width:640px){
  .recent-row{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 -24px; padding:2px 24px 10px; scrollbar-width:none;}
  .recent-row::-webkit-scrollbar{display:none;}
  .recent-card{flex:0 0 78%; scroll-snap-align:start;}
}
.recent-card{
  display:flex; align-items:center; gap:14px; text-align:left; cursor:pointer;
  background:var(--card-bg); border:1px solid var(--line); border-radius:14px; padding:10px 14px 10px 10px;
  transition:border-color .2s ease, transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease;
}
.recent-card:hover{border-color:var(--gold); transform:translateY(-3px); box-shadow:var(--shadow-md);}
.rc-thumb{position:relative; flex-shrink:0; width:50px; height:89px; border-radius:9px; overflow:hidden; background:var(--paper-deep); display:grid; place-items:center; color:var(--accent);}
.rc-thumb svg{width:22px; height:22px; opacity:.7;}
.rc-thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:none;}
.rc-thumb.has img{display:block;}
.rc-info{display:flex; flex-direction:column; gap:3px; min-width:0; flex:1;}
.rc-id{font-family:var(--display); font-weight:500; font-size:13.5px; color:var(--gold-text);}
.rc-title{font-size:15.5px; line-height:1.4; font-weight:600; color:var(--heading); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.rc-meta{display:flex; align-items:center; gap:8px; margin-top:4px; font-size:13px; color:var(--ink-faint);}
.rc-bar{flex:1; height:4px; border-radius:100px; background:var(--line-soft); overflow:hidden;}
.rc-bar i{display:block; height:100%; border-radius:100px; background:linear-gradient(90deg,var(--gold-soft),var(--gold));}
.rc-txt{white-space:nowrap;}

/* ---- คำถามที่พบบ่อย ---- */
.faq{padding:0 24px 56px;}
@media (min-width:640px){ .faq{padding:0 32px 64px;} }
.faq-list{display:flex; flex-direction:column; gap:10px; max-width:860px;}
.faq-item{background:var(--card-bg); border:1px solid var(--line); border-radius:14px; transition:border-color .2s ease, box-shadow .2s ease;}
.faq-item[open]{border-color:var(--gold); box-shadow:var(--shadow-sm);}
.faq-item summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 20px; font-family:var(--display); font-weight:500; font-size:16px; line-height:1.5; color:var(--heading);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:""; flex-shrink:0; width:9px; height:9px; margin-right:4px;
  border-right:2px solid var(--ink-faint); border-bottom:2px solid var(--ink-faint);
  transform:rotate(45deg) translateY(-2px); transition:transform .25s ease, border-color .2s ease;
}
.faq-item[open] summary::after{transform:rotate(-135deg) translateY(-2px); border-color:var(--gold);}
.faq-item summary:hover{color:var(--accent);}
.faq-a{padding:0 20px 18px; font-size:16px; line-height:1.75; color:var(--ink-soft); animation:fadeUp .35s ease both;}
.faq-a kbd{font-size:11.5px;}

/* ---- หน้าต่างค้นหา ---- */
.palette-backdrop{
  position:fixed; inset:0; z-index:150; display:flex; align-items:flex-start; justify-content:center;
  padding:12vh 16px 16px; background:var(--backdrop); backdrop-filter:blur(3px); opacity:0; transition:opacity .15s ease;
}
.palette-backdrop[hidden]{display:none;}
.palette-backdrop.show{opacity:1;}
.palette{
  width:100%; max-width:600px; max-height:70vh; display:flex; flex-direction:column; overflow:hidden;
  background:var(--paper); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-lg);
  transform:translateY(-8px); transition:transform .2s cubic-bezier(.22,1,.36,1);
}
.palette-backdrop.show .palette{transform:none;}
.palette-input{display:flex; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid var(--line); color:var(--ink-faint);}
.palette-input input{flex:1; min-width:0; background:none; border:none; outline:none; font-family:var(--sans); font-size:18px; color:var(--ink);}
.palette-input input::placeholder{color:var(--ink-faint);}
.palette-list{overflow-y:auto; padding:8px;}
.pal-item{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer;
  background:none; border:1px solid transparent; border-radius:12px; padding:9px 12px;
}
.pal-item.active{background:var(--paper-deep); border-color:var(--gold);}
.pal-thumb{position:relative; flex-shrink:0; width:26px; height:46px; border-radius:6px; overflow:hidden; background:var(--paper-deep);}
.pal-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.pal-badge{
  flex-shrink:0; min-width:46px; height:46px; display:grid; place-items:center; border-radius:10px; padding:0 8px;
  font-family:var(--display); font-weight:500; font-size:13px; color:var(--gold-text);
  background:color-mix(in srgb, var(--gold) 14%, transparent);
}
.pal-text{display:flex; flex-direction:column; min-width:0; flex:1;}
.pal-title{font-size:16px; line-height:1.4; color:var(--heading); font-weight:600;}
.pal-sub{font-size:13.5px; color:var(--ink-faint); line-height:1.4;}
.palette-empty,.palette-more{padding:18px 14px; text-align:center; font-size:14.5px; color:var(--ink-faint);}
.palette-foot{display:flex; gap:18px; padding:10px 18px; border-top:1px solid var(--line); font-size:13px; color:var(--ink-faint);}
.palette-foot span{display:inline-flex; align-items:center; gap:5px;}
@media (hover:none){ .palette-foot{display:none;} }

/* ---- คอนเฟตตีตอนดูจบบท ---- */
.confetti{position:fixed; inset:0; width:100vw; height:100vh; pointer-events:none; z-index:300;}


/* ---- บรรทัดอาจารย์ที่ปรึกษา + หน้าต่างติดต่อ ---- */
.about-advisor{font-size:15px; color:var(--ink-soft); margin:-6px 0 14px;}
.contact-backdrop{
  position:fixed; inset:0; z-index:160; display:flex; align-items:center; justify-content:center;
  padding:16px; background:var(--backdrop); backdrop-filter:blur(3px); opacity:0; transition:opacity .18s ease;
}
.contact-backdrop[hidden]{display:none;}
.contact-backdrop.show{opacity:1;}
.contact-dialog{
  position:relative; width:100%; max-width:340px; text-align:center; padding:30px 26px 24px;
  background:var(--paper); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow-lg);
  transform:translateY(10px) scale(.97); transition:transform .25s cubic-bezier(.22,1,.36,1);
}
.contact-backdrop.show .contact-dialog{transform:none;}
.contact-dialog h3{font-family:var(--display); font-weight:600; font-size:19px; line-height:1.4; color:var(--heading); margin-bottom:16px; padding:0 18px;}
.contact-close{
  position:absolute; top:12px; right:12px; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; cursor:pointer;
  background:var(--surface); border:1px solid var(--line); color:var(--ink-soft); transition:background .2s ease, color .2s ease;
}
.contact-close:hover{background:var(--solid); color:var(--on-solid);}
/* QR ต้องมีพื้นขาวเสมอ แม้อยู่โหมดมืด ไม่งั้นแอปสแกนไม่ติด */
.contact-qr{background:#fff; padding:14px; border-radius:16px; width:fit-content; margin:0 auto 14px; box-shadow:var(--shadow-sm);}
.contact-qr[hidden]{display:none;}
.contact-qr img{display:block; width:min(220px,62vw); height:auto;}
.contact-value{font-family:var(--display); font-weight:500; font-size:17px; color:var(--heading); word-break:break-all; user-select:all; margin-bottom:16px;}
.contact-value:empty{display:none;}
.contact-actions{display:flex; flex-direction:column; gap:9px;}
.contact-btn{
  display:block; width:100%; padding:11px 16px; border-radius:100px; cursor:pointer; text-decoration:none; text-align:center;
  font-family:var(--display); font-weight:500; font-size:15px; line-height:1.3;
  background:var(--surface); color:var(--heading); border:1px solid var(--line);
  transition:border-color .2s ease, background .2s ease, transform .15s ease;
}
.contact-btn:hover{border-color:var(--gold); transform:translateY(-1px);}
.contact-btn.primary{background:var(--solid); color:var(--on-solid); border-color:var(--solid);}
.contact-note{margin-top:14px; font-size:13.5px; line-height:1.6; color:var(--ink-faint);}
.contact-note:empty{display:none;}


/* ---- รูปโปรไฟล์กดดูภาพเต็ม + แผง "เครื่องมือที่ใช้สร้างสื่อ" ---- */
.about-photo-wrap{position:relative; flex-shrink:0; border-radius:50%;}
.zoom-badge{
  position:absolute; right:2px; bottom:2px; width:30px; height:30px; border-radius:50%; display:none; place-items:center;
  background:var(--solid); color:var(--on-solid); border:2px solid var(--card-bg); box-shadow:var(--shadow-sm);
  transition:transform .2s ease;
}
.about-photo-wrap.zoomable{cursor:zoom-in;}
.about-photo-wrap.zoomable .zoom-badge{display:grid;}
.about-photo-wrap.zoomable:hover .zoom-badge,.about-photo-wrap.zoomable:focus-visible .zoom-badge{transform:scale(1.12);}
.about-photo-wrap.zoomable .about-photo{transition:box-shadow .2s ease, border-color .2s ease;}
.about-photo-wrap.zoomable:hover .about-photo{border-color:var(--gold);}

.photo-backdrop{
  position:fixed; inset:0; z-index:160; display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(8,11,14,.86); backdrop-filter:blur(4px); opacity:0; transition:opacity .2s ease;
}
.photo-backdrop[hidden]{display:none;}
.photo-backdrop.show{opacity:1;}
.photo-dialog{position:relative; margin:0; max-width:100%; text-align:center; transform:scale(.96); transition:transform .25s cubic-bezier(.22,1,.36,1);}
.photo-backdrop.show .photo-dialog{transform:none;}
.photo-dialog img{display:block; max-width:min(92vw,760px); max-height:80vh; width:auto; height:auto; margin:0 auto; object-fit:contain; border-radius:16px; box-shadow:var(--shadow-lg); background:#000;}
.photo-dialog figcaption{margin-top:12px; font-family:var(--display); font-weight:500; font-size:15px; color:rgba(255,255,255,.85);}
.photo-close{
  position:absolute; top:-14px; right:-14px; z-index:2; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; cursor:pointer;
  background:var(--surface); color:var(--ink); border:1px solid var(--line); transition:background .2s ease, color .2s ease;
}
.photo-close:hover{background:var(--solid); color:var(--on-solid);}
@media (max-width:600px){ .photo-close{top:8px; right:8px;} }

.about-tools{flex:1 1 100%; border-top:1px solid var(--line-soft); padding-top:22px; text-align:left;}
.about-tools[hidden]{display:none;}
.tools-title{font-family:var(--display); font-weight:500; font-size:14px; letter-spacing:.03em; color:var(--ink-faint); margin-bottom:12px;}
.tools-list{list-style:none; display:flex; flex-wrap:wrap; gap:10px;}
.tools-list li{display:flex; flex-direction:column; gap:1px; padding:10px 16px; border:1px solid var(--line); border-radius:14px; background:var(--paper);}
.tools-list .t-name{font-family:var(--display); font-weight:600; font-size:15.5px; color:var(--heading); line-height:1.4;}
.tools-list .t-role{font-size:13.5px; color:var(--ink-faint); line-height:1.45;}
@media (min-width:700px){ .about-card{flex-wrap:wrap;} }
/* จอกว้าง: วางเป็นคอลัมน์ที่สามทางขวา เติมพื้นที่ว่างของการ์ด */
@media (min-width:1200px){
  .about-tools{flex:0 0 290px; border-top:none; padding-top:0; border-left:1px solid var(--line-soft); padding-left:32px;}
  .tools-list{flex-direction:column; flex-wrap:nowrap; gap:8px;}
}

/* ลำดับขั้นตอนการผลิต: ใส่เลข 1,2,3,... หน้ารายการเครื่องมืออัตโนมัติ */
.tools-list{counter-reset:step;}
.tools-list li{counter-increment:step; position:relative; padding-left:50px;}
.tools-list li::before{
  content:counter(step); position:absolute; left:14px; top:11px; width:24px; height:24px; border-radius:50%;
  display:grid; place-items:center; background:var(--solid); color:var(--on-solid);
  font-family:var(--display); font-weight:500; font-size:12.5px; line-height:1;
}

.about-bio:empty{display:none;}
.about-role:empty{display:none;}

.hero-credit{position:relative; margin-top:16px; font-size:15.5px; color:var(--ink-soft);}
.hero-credit[hidden]{display:none;}
.hero-credit b{color:var(--gold-text); font-weight:600;}
footer .credit[hidden]{display:none;}