/* Thai Language Studio — shared CSS for beginner lesson pages + session5.
   Covers hero, player, subtitle cards, quiz, country-picker, footer, reveal
   animation, and other rules that are byte-identical across this page group.
   Used by every such page via <link rel="stylesheet" href="assets/lesson-page.css">. */
:root{--sp1:       #6BB5B8;
  --sp2:       #C09F59;
  --sp3:       #B78BC7;
  --sp4:       #8FB6E0;
  --radius:    14px;
  --font-display: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-th:      'Sarabun', sans-serif;
  --font-rom:     'Inter', 'Helvetica Neue', Arial, sans-serif;}
.subtitle-box,.quiz-card,.country-card{box-shadow:0 1px 3px rgba(0,0,0,.04);}
body { background: var(--bg); color: var(--ivory); font-family: var(--font-body); font-weight: 300; line-height: 1.75; min-height: 100vh; }
.page { position: relative; z-index: 1; }
.wrap { max-width: 880px; margin: 0 auto; padding: 0 clamp(20px,5vw,48px); }
.nav-inner{max-width:1040px;margin:0 auto;padding:0 clamp(20px,5vw,52px);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.nav-left{display:flex;align-items:center;gap:14px}
.nav-back{display:flex;align-items:center;gap:7px;color:var(--ivory-sub);font-family:var(--font-rom);font-size:13px;text-decoration:none;transition:color .2s}
[data-lang]{display:none}
body.lang-cn [data-lang="cn"], body.lang-en [data-lang="en"], body.lang-th [data-lang="th"]{display:inline}
span[data-lang]{display:none}
body.lang-cn span[data-lang="cn"], body.lang-en span[data-lang="en"], body.lang-th span[data-lang="th"]{display:inline}
div[data-lang]{display:none}
body.lang-cn div[data-lang="cn"], body.lang-en div[data-lang="en"], body.lang-th div[data-lang="th"]{display:block}
p[data-lang]{display:none}
body.lang-cn p[data-lang="cn"], body.lang-en p[data-lang="en"], body.lang-th p[data-lang="th"]{display:block}
.hero { padding: clamp(52px,8vw,96px) 0 clamp(44px,6vw,72px); text-align: center; position: relative; }
.hero-eyebrow { font-family: var(--font-rom); font-size: 11px; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; color: var(--gold); margin-bottom: 22px; display: flex; align-items: center; justify-content: center; gap: 16px; }
.hero-eyebrow::before, .hero-eyebrow::after { content: ''; flex: none; width: 36px; height: 1px; background: var(--gold-dim); }
.hero-session { font-family: var(--font-display); font-size: clamp(38px,7vw,68px); font-weight: 700; font-style: normal; line-height: 1.05; color: var(--gold-soft); letter-spacing: -.01em; margin-bottom: 18px; }
.hero-title-cn { font-family: var(--font-th); font-size: clamp(16px,2.6vw,22px); font-weight: 300; letter-spacing: .04em; color: var(--ivory-dim); margin-bottom: 8px; }
.hero-title-en { font-family: var(--font-display); font-size: clamp(13px,1.8vw,16px); font-style: normal; font-weight: 600; letter-spacing: .12em; color: var(--ivory-sub); }
.hero-divider { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 40px auto; max-width: 320px; }
.hero-divider::before, .hero-divider::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-line), transparent); }
.hero-diamond { width: 8px; height: 8px; border: 1px solid var(--gold-dim); transform: rotate(45deg); flex: none; }
.section-label { display: flex; align-items: center; gap: 14px; margin-bottom: clamp(28px,4vw,44px); flex-wrap: wrap; }
.section-label span.label-text { font-family: var(--font-th); font-size: clamp(20px,3vw,26px); font-weight: 300; color: var(--gold-soft); white-space: nowrap; letter-spacing: .02em; }
.section-label::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--gold-line), transparent); }
section { padding: clamp(44px,7vw,80px) 0; }
section + section { border-top: 1px solid var(--gold-line); }
.section-intro { font-size: 14px; color: var(--ivory-dim); line-height: 1.8; margin-bottom: 24px; }
.player{display:inline-flex;align-items:center;gap:10px;background:rgba(61,140,143,.06);border:1px solid var(--gold-line);border-radius:100px;padding:5px 14px 5px 5px}
.play-pause{width:30px;height:30px;border-radius:50%;border:none;cursor:pointer;background:var(--gold);color:var(--bg-deep);display:grid;place-items:center;flex:none;transition:all .2s}
.play-pause:hover{background:var(--gold-soft);transform:scale(1.05)}
.play-pause.playing{background:var(--ivory);color:var(--bg-deep)}
.play-pause svg{width:13px;height:13px}
.player-info{min-width:120px}
.player-time{font-family:var(--font-rom);font-size:10.5px;color:var(--ivory-sub);white-space:nowrap;display:block}
.player-progress{width:100%;height:3px;background:rgba(61,140,143,.15);border-radius:100px;cursor:pointer;margin-top:4px;position:relative;display:block}
.player-progress-fill{height:100%;background:var(--gold);border-radius:100px;pointer-events:none;display:block}
.player.lg{padding:10px 22px 10px 10px}
.player.lg .play-pause{width:52px;height:52px}
.player.lg .play-pause svg{width:20px;height:20px}
.player.lg .player-info{min-width:170px}
.player.lg .player-time{font-size:12.5px}
.player-wrap{display:flex;justify-content:center;margin:8px 0 4px}
.player-row-label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-dim);margin-bottom:8px;text-align:center}
.subtitle-toggle-wrap{display:flex;justify-content:center;margin-top:26px}
.subtitle-toggle{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--gold);border:none;color:var(--bg-deep);
  font-family:var(--font-th);font-weight:300;font-size:15px;
  padding:13px 26px;border-radius:100px;cursor:pointer;transition:all .2s;
}
.subtitle-toggle:hover{background:var(--gold-soft)}
.subtitle-toggle svg{width:14px;height:14px;transition:transform .2s}
.subtitle-toggle.open svg{transform:rotate(180deg)}
.subtitle-box{display:none;margin-top:28px}
.subtitle-box.show{display:block}
.subtitle-intro{
  background:rgba(61,140,143,.08);border:1px solid var(--gold-line);border-radius:var(--radius);
  padding:20px 24px;margin-bottom:22px;
}
.subtitle-intro .line-th{margin-bottom:4px}
.subtitle-list{display:grid;gap:16px}
.subtitle-card{
  border-radius:var(--radius);border:1px solid var(--gold-line);
  background:rgba(61,140,143,.04);padding:18px 22px;
  transition:border-color .2s,background .2s;
}
.subtitle-card:hover{border-color:var(--gold-line);background:rgba(61,140,143,.08)}
.speaker-tag{
  display:inline-flex;align-items:center;gap:7px;margin-bottom:10px;
  font-family:var(--font-rom);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 12px 3px 4px;border-radius:100px;
}
.speaker-dot{width:8px;height:8px;border-radius:50%;flex:none}
.sp-teacher .speaker-dot{background:var(--sp1)}
.sp-teacher{color:var(--sp1)}
.sp-teenoi .speaker-dot{background:var(--sp2)}
.sp-teenoi{color:var(--sp2)}
.sp-chompoo .speaker-dot{background:var(--sp3)}
.sp-chompoo{color:var(--sp3)}
.sp-lily .speaker-dot{background:var(--gold)}
.sp-lily{color:var(--gold)}
.sp-thomas .speaker-dot{background:var(--sp4)}
.sp-thomas{color:var(--sp4)}
.sp-question .speaker-dot{background:var(--red)}
.sp-question{color:var(--red)}
.line-th{font-family:var(--font-th);font-size:clamp(17px,2.4vw,20px);font-weight:300;line-height:1.6;color:var(--ivory);margin-bottom:8px}
.line-cn{font-size:14.5px;color:var(--ivory-dim);margin-bottom:6px;line-height:1.7}
.line-en{font-family:var(--font-rom);font-size:13.5px;font-weight:400;color:var(--ivory-sub);margin-bottom:6px;line-height:1.7}
.line-paiboon{font-family:var(--font-rom);font-size:13px;font-weight:500;color:#3D8C8F;letter-spacing:.03em;line-height:1.7}
.subtitle-card.highlight{background:rgba(159,227,214,.08);border-color:var(--gold-dim)}
.question-card{margin-bottom:16px;background:rgba(240,131,140,.08);border-color:rgba(240,131,140,.3)}
.quiz-question{
  background:rgba(61,140,143,.08);border:1px solid var(--gold-line);border-radius:var(--radius);
  padding:22px 26px;margin-bottom:28px;
}
.quiz-question .line-th{font-size:clamp(18px,2.6vw,22px);margin-bottom:8px}
.question-audio-wrap{margin-bottom:14px}
.translate{font-family:var(--font-body);font-weight:300;color:var(--ivory-dim);margin-left:6px}
.section-label .translate{font-size:clamp(14px,2vw,17px)}
[data-lang="cn"].translate{font-family:var(--font-body)}
[data-lang="en"].translate{font-family:var(--font-rom)}
.submit-btn .translate{color:var(--bg-deep);opacity:.75}
.submit-btn:disabled .translate{color:rgba(58,64,68,.4);opacity:1}
.country-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:640px;margin:0 auto}
@media(max-width:520px){.country-grid{grid-template-columns:1fr}}
.country-card{
  position:relative;border-radius:var(--radius);overflow:hidden;
  border:3px solid transparent;cursor:pointer;background:#fff;
  transition:border-color .2s,transform .2s,box-shadow .2s;
}
.country-card:hover{transform:translateY(-2px)}
.country-card img{width:100%;height:auto;object-fit:contain;display:block}
.country-letter-badge{
  position:absolute;top:10px;left:10px;width:30px;height:30px;border-radius:50%;
  background:rgba(58,74,73,.72);backdrop-filter:blur(2px);color:#fff;
  font-family:var(--font-th);font-weight:400;font-size:15px;display:grid;place-items:center;
}
.country-select-mark{
  position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,.9);display:none;place-items:center;color:var(--gold);
}
.country-select-mark svg{width:18px;height:18px}
.country-card.selected{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.country-card.selected .country-select-mark{display:grid}
.country-card.correct{border-color:var(--green);box-shadow:0 0 0 1px var(--green)}
.country-card.correct .country-select-mark{display:grid;color:var(--green)}
.country-card.incorrect{border-color:var(--red);box-shadow:0 0 0 1px var(--red)}
.country-card.incorrect .country-select-mark{display:grid;color:var(--red)}
.country-card.locked{cursor:default}
.quiz-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:28px}
.submit-btn{background:var(--gold);border:none;color:var(--bg-deep);font-family:var(--font-rom);font-size:13px;font-weight:800;letter-spacing:.04em;padding:12px 26px;border-radius:100px;cursor:pointer;transition:all .2s;box-shadow:0 4px 14px rgba(159,227,214,.35)}
.submit-btn:hover{background:var(--gold-soft);box-shadow:0 6px 18px rgba(159,227,214,.45)}
.submit-btn:disabled{background:rgba(0,0,0,.06);color:rgba(58,64,68,.4);cursor:not-allowed;box-shadow:none}
.retry-btn{background:none;border:1px solid var(--gold-line);color:var(--gold-dim);font-family:var(--font-rom);font-size:12px;letter-spacing:.06em;padding:11px 22px;border-radius:100px;cursor:pointer;transition:all .2s;display:none}
.retry-btn:hover{border-color:var(--gold);color:var(--gold)}
.result-msg{font-size:13.5px;color:var(--ivory-dim);display:none}
.result-msg.show{display:block}
.result-msg.correct{color:var(--green)}
.result-msg.incorrect{color:var(--red)}
footer{border-top:1px solid var(--gold-line);padding:40px 0 48px;text-align:center}
footer p{font-size:12px;color:var(--ivory-sub);letter-spacing:.12em}
@media (prefers-reduced-motion: no-preference) {
  .reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
  .reveal.in{opacity:1;transform:none}
}
[data-lang="th"],[lang="th"],.lang-th,.th,.line-th{font-family:var(--font-th) !important;font-weight:300 !important;font-style:normal !important;}
.qa-card{border-radius:var(--radius);border:1px solid var(--gold-line);background:rgba(61,140,143,.04);padding:20px 24px;margin-bottom:14px}
.qa-q{font-family:var(--font-th);font-size:clamp(16px,2.2vw,18px);font-weight:300;color:var(--ivory);margin-bottom:12px}
.qa-toggle{display:inline-flex;align-items:center;gap:8px;background:none;border:1px solid var(--gold-line);color:var(--gold-dim);font-family:var(--font-rom);font-size:12px;font-weight:600;letter-spacing:.04em;padding:8px 16px;border-radius:100px;cursor:pointer;transition:all .2s}
.qa-toggle:hover{border-color:var(--gold);color:var(--gold)}
.qa-toggle svg{width:12px;height:12px;transition:transform .2s}
.qa-toggle.open svg{transform:rotate(180deg)}
.qa-answer{display:none;margin-top:14px;padding-top:14px;border-top:1px solid var(--gold-line)}
.qa-answer.show{display:block}
.qa-answer .line-th{color:var(--gold-soft)}