/* ============================================================
   ค่าเล่าเรียน — ตารางเทียบตามระดับชั้น
   วางต่อท้าย css/styles.css หรือโหลดเป็นไฟล์แยก
   ใช้ CSS variable ของ styles.css ได้ถ้ามี (มี fallback ให้ทุกตัว)
   ============================================================ */

.tt-section { background: var(--cream, #F8F5EE); }

.tt-card {
  background: #fff;
  border: 1px solid var(--line, #EAE3D4);
  border-radius: 24px;
  padding: clamp(28px, 4vw, 56px) clamp(20px, 3.4vw, 48px) clamp(32px, 4vw, 60px);
}

/* ---------- head ---------- */
.tt-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  flex-wrap: wrap;
}
.tt-head__text { max-width: 660px; }
.tt-title {
  /* เท่ากับ h3 อื่นในหน้าเดียวกัน (.rd-doc-card h3) ให้สัดส่วนหัวข้อในหน้าสมดุลกัน */
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.28;
  margin: 14px 0 0;
  color: var(--ink, #29251F);
  text-wrap: pretty;
}
.tt-lede {
  margin: 14px 0 0;
  color: var(--ink-2, #756E64);
  font-size: clamp(15px, 1.5vw, 16.5px);
  line-height: 1.75;
  text-wrap: pretty;
}

.tt-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  font-size: 14px;
  color: var(--ink-2, #756E64);
}
.tt-legend li { display: inline-flex; align-items: center; gap: 8px; }
.tt-key {
  width: 20px; height: 20px;
  border-radius: 6px;
  font-weight: 800; font-size: 12px;
  display: grid; place-items: center;
}
.tt-key--yes { background: #E6ECE7; color: #44604E; }
.tt-key--add { background: #FBF3DC; color: #8A6406; }
.tt-key--na  { background: #F5F2EA; color: #B3ABA0; }

/* ---------- table ---------- */
.tt-scroll {
  margin-top: 40px;
  overflow-x: auto;
  /* ห้ามเพิ่ม overflow-y ที่นี่ (แม้จะ "visible" เฉยๆ ก็ไม่ได้ผล) — ตาม CSS Overflow spec ถ้าแกนหนึ่ง
     (overflow-x) non-visible อีกแกนจะถูกบังคับเป็น auto ไปด้วยเสมอ ทำให้กล่องนี้กลายเป็น nearest
     scrolling ancestor ของ thead แทน viewport แล้ว position:sticky ก็ใช้งานไม่ได้จริง (ลองมาแล้ว —
     กล่องนี้ไม่มี overflow แนวตั้งจริงให้ sticky ยึด) เลยเปลี่ยนไปใช้ js/tuition-sticky-head.js จำลอง
     sticky header ด้วย position:fixed ผ่าน scroll listener แทน ไม่ต้องพึ่ง overflow-y ของกล่องนี้เลย
     ตารางเลยยัง scroll ไปกับหน้าปกติ ไม่มี scrollbar ภายในซ้อน */
  -webkit-overflow-scrolling: touch;
  position: relative; /* กัน .sr-only (position:absolute ไม่มี top/left) หนีไปอิง containing block
    ที่สูงกว่านี้ (viewport) แล้วดันความกว้างของทั้งหน้าให้ swipe ซ้าย-ขวาได้บนมือถือ */
}
.tt-table {
  width: 100%;
  min-width: 840px;
  border-collapse: collapse;
  font-size: 15.5px;
  color: var(--ink, #29251F);
}
.tt-table thead th {
  padding: 16px 12px;
  background: #FDFBF6;
  border-bottom: 2px solid var(--line, #EAE3D4);
  text-align: center;
  font-weight: 800;
  vertical-align: bottom;
}
/* sticky หัวตารางจริงทำผ่าน js/tuition-sticky-head.js (position:fixed ghost header, ดูคอมเมนต์ที่
   .tt-scroll ว่าทำไม CSS position:sticky ใช้ไม่ได้ตรงนี้) — thead ตัวจริงอยู่ใน flow ปกติ */
.tt-table thead th:first-child { background: #fff; border-bottom-color: transparent; width: 34%; }
.tt-table thead th:nth-child(2) { border-top-left-radius: 14px; }
.tt-table thead th:last-child  { border-top-right-radius: 14px; }
/* ค้างคอลัมน์แรก (ชื่อรายการ) ไว้ตอน scroll แนวนอน — ให้เห็นว่าแถวนี้คือรายการอะไรเสมอ */
.tt-table tbody th[scope="row"],
.tt-group th {
  position: sticky;
  left: 0;
  z-index: 1;
  background: #fff;
  box-shadow: 2px 0 6px -3px rgba(41,37,31,.15);
}
/* ghost header ลอย (สร้างโดย js/tuition-sticky-head.js) — "track" คือส่วนที่เลื่อนตาม scrollLeft
   จริงของ .tt-scroll, "corner" คือคอลัมน์แรก (ช่องว่างมุมซ้าย) ที่ไม่เลื่อนตาม ทับอยู่บน track เสมอ
   เหมือนคอลัมน์ sticky ของแถวข้อมูลด้านล่าง */
.tt-sticky-clip {
  position: fixed;
  overflow: hidden;
  z-index: 55; /* ต่ำกว่า .nav (z-index:60) เผื่อขอบชนกันพอดี ไม่ให้ทับ nav */
  display: none;
  pointer-events: none;
}
.tt-sticky-clip__track { position: absolute; top: 0; left: 0; z-index: 1; }
.tt-sticky-clip__corner { position: absolute; top: 0; left: 0; z-index: 2; overflow: hidden; background: #fff; }
.tt-sticky-clip__track table,
.tt-sticky-clip__corner table { border-collapse: collapse; margin: 0; }
@media (max-width: 720px) {
  .tt-sticky-clip { display: none !important; }
}

/* หน้า admission-details-fees.html: บังคับคอลัมน์เท่ากันทุกคอลัมน์ (colgroup กำหนด width ตรง)
   เพื่อให้แถวราคา .tt-price-tr ในตารางเดียวกันจัดคอลัมน์ตรงกับ matrix ด้านล่างเป๊ะ — ไม่ใช้ค่า 34% ข้างบน
   6 ระดับชั้น (L1-L6) แน่นกว่าเดิม (4 ระดับ) เลยบีบ padding/font ของหัวตาราง+เซลล์ให้เล็กลงเฉพาะตัวนี้ */
.tt-table--fixed { table-layout: fixed; min-width: 980px; font-size: 13.5px; }
.tt-table--fixed thead th:first-child { width: auto; }
.tt-table--fixed thead th { padding: 13px 3px; }
.tt-table--fixed thead th .tt-lvl { font-size: 16px; }
.tt-table--fixed thead th .tt-sub { font-size: 11.5px; margin-top: 1px; }
.tt-table--fixed tbody th[scope="row"] { padding: 11px 10px 11px 0; }
.tt-table--fixed tbody td { padding-top: 11px; padding-bottom: 11px; }
.tt-lvl { display: block; font-size: 17px; }
.tt-sub { display: block; font-size: 13px; color: #9B9489; font-weight: 500; margin-top: 2px; }

.tt-group th {
  padding: 28px 0 10px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #44604E;
  text-align: left;
}
.tt-group--add th { color: #8A6406; }

.tt-table tbody th[scope="row"] {
  padding: 13px 18px 13px 0;
  text-align: left;
  font-weight: 400;
  border-bottom: 1px solid #F2EDE2;
}
.tt-table tbody td {
  text-align: center;
  border-bottom: 1px solid #F2EDE2;
  font-weight: 800;
}
.tt-table tbody tr:last-child th,
.tt-table tbody tr:last-child td { border-bottom: 0; }

.is-yes { color: #44604E; }
.is-add { color: #8A6406; background: #FDF9EE; }
.is-na  { color: #C4BDB2; font-weight: 400; }

/* ---------- note ---------- */
.tt-note {
  margin-top: 40px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: #FBF3DC;
  border: 1px solid #F3E2B0;
  border-radius: 16px;
  padding: 20px 24px;
}
.tt-note__icon {
  flex: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--gold, #E5A910);
  color: #2A2200;
  font-weight: 800; font-size: 14px;
  display: grid; place-items: center;
}
.tt-note p { margin: 0; font-size: 15px; line-height: 1.75; color: #5A4509; text-wrap: pretty; }
.tt-note a { color: #8A6406; }
.tt-note a:hover { color: #C8910A; }

/* ---------- installment intro (ก่อนตัวอย่างงวด — เกริ่นงวดสูงสุด/ดอกเบี้ย 0%) ---------- */
.tt-inst-intro { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.tt-inst-intro__eyebrow { font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--yellow-deep); }
.tt-inst-intro p { margin: 6px 0 0; font-size: 14.5px; color: var(--ink); max-width: 70ch; line-height: 1.7; }
.tt-pill-inline {
  display: inline-block; background: var(--green-tint, #E6ECE7); color: var(--green-dark, #354D3D);
  border-radius: 100px; padding: 2px 12px; font-weight: 700; white-space: nowrap;
}

/* ---------- installment (ผ่อนชำระ ดอกเบี้ย 0%) — illustration, ไม่มีกล่อง/พื้นหลังทึบ ---------- */
.tt-inst { margin-top: 16px; }
.tt-inst__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
@media (max-width: 640px) { .tt-inst__grid { grid-template-columns: 1fr; } }
.tt-inst__grid h5 { margin: 0 0 10px; font-size: 13px; font-weight: 800; color: var(--ink); }
.tt-inst__flow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tt-inst__pill {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-soft, #F1ECE0); border-radius: 100px;
  padding: 6px 16px 6px 6px; font-size: 12.5px; font-weight: 700; color: var(--ink);
}
.tt-inst__pill .n {
  width: 36px; height: 36px; border-radius: 50%;
  background: #fff; color: var(--green-dark, #354D3D);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  line-height: 1; box-shadow: var(--sh-sm, 0 2px 8px rgba(64,52,20,.06));
}
.tt-inst__pill .n b { font-size: 14px; font-weight: 800; }
.tt-inst__pill .n i { font-style: normal; font-size: 7px; font-weight: 700; letter-spacing: .02em; margin-top: 1px; }
.tt-inst__arrow { color: var(--line-2, #DED5C2); font-size: 15px; }

/* ---------- price row: แถวราคาต่อระดับชั้น ต่อจาก thead ทันที (คนละ tbody, id ad-live-price-tbody)
   ให้อยู่ในตารางเดียวกันเลย คอลัมน์ตรงกับ matrix ด้านล่างโดยอัตโนมัติ (เฉพาะหน้า admission-details-fees.html) ---------- */
.tt-price-tr th,
.tt-price-tr td {
  padding: 14px 3px;
  text-align: center;
  border-bottom: 2px solid #F3E2B0;
  background: #FBF3DC;
}
.tt-table tbody tr.tt-price-tr th[scope="row"] {
  text-align: left;
  font-size: 12px;
  font-weight: 800;
  color: #8A6406;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: #FBF3DC;
  box-shadow: 2px 0 6px -3px rgba(41,37,31,.15);
}
.tt-price-tr .tt-price-amt { display: block; font-size: 21px; font-weight: 800; color: #8A6406; font-variant-numeric: tabular-nums; line-height: 1.1; white-space: nowrap; }
.tt-price-tr .tt-price-unit { display: block; font-size: 10.5px; color: #9B9489; margin-top: 2px; white-space: nowrap; }

/* ---------- a11y helper (ถ้ามีใน styles.css แล้วให้ลบทิ้ง) ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- mobile: level switcher + stacked list (replaces the table) ----------
   สร้างโดย js/tuition-mobile.js จาก DOM ของ .tt-table เอง (อ่าน thead[data-lvl] +
   tbody แล้วสร้าง UI นี้) ไม่ได้ผูกกับ CFG ตรงๆ เพื่อให้ progressive-enhancement
   fallback (ไม่มี CFG) ก็ได้ผลลัพธ์เดียวกัน */
.tt-mobile { display: none; }

/* filter ระดับชั้น: grid 3 คอลัมน์ 2 แถว เห็นครบทั้ง 6 ระดับ ไม่ต้อง scroll แนวนอน */
.tt-lvl-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 24px;
}
.tt-lvl-btn {
  border: 1px solid var(--line, #EAE3D4); background: #fff; color: var(--ink-2, #756E64);
  border-radius: 12px; padding: 9px 6px; font: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer; text-align: center; display: flex; flex-direction: column; gap: 1px; line-height: 1.3;
}
.tt-lvl-btn small { font-size: 10.5px; font-weight: 500; color: #9B9489; }
.tt-lvl-btn.is-active { background: var(--ink, #29251F); color: #fff; border-color: var(--ink, #29251F); }
.tt-lvl-btn.is-active small { color: #C4BDB2; }

/* แถบระบุระดับชั้นที่กำลังดู (badge + ชื่อ + ราคาถ้ามี) — sticky แทน filter ตอน scroll
   ลงไปดูรายการยาวๆด้านล่าง เพราะเตี้ยกว่า filter grid มาก กินพื้นที่จอน้อยกว่า
   top ถูกตั้งจาก JS (js/tuition-mobile.js sync กับความสูง .nav จริง ไม่ hardcode) */
.tt-lvl-band {
  position: sticky; top: 68px; z-index: 5;
  margin: 16px -20px 0; padding: 10px 20px;
  background: #FBF3DC; border-top: 1px solid #F3E2B0; border-bottom: 1px solid #F3E2B0;
  display: flex; align-items: center; gap: 10px;
}
.tt-lvl-band:empty { display: none; }
.tt-lvl-band__badge {
  flex: none; min-width: 34px; height: 34px; padding: 0 6px; border-radius: 10px;
  background: var(--ink, #29251F); color: #fff; display: grid; place-items: center;
  font-size: 11px; font-weight: 800; white-space: nowrap;
}
.tt-lvl-band__txt { flex: 1; min-width: 0; }
.tt-lvl-band__name { display: block; font-size: 12.5px; font-weight: 800; color: var(--ink, #29251F); }
.tt-lvl-band__sub { display: block; font-size: 10.5px; color: #9B9489; margin-top: 1px; }
.tt-lvl-band__price {
  flex: none; font-size: 18px; font-weight: 800; color: #8A6406; text-align: right;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tt-lvl-band__price small { display: block; font-size: 9.5px; font-weight: 500; color: #9B9489; }

.tt-mobile-legend { display: flex; justify-content: flex-end; gap: 14px; font-size: 12.5px; color: var(--ink-2, #756E64); margin: 16px 0 4px; flex-wrap: wrap; }
.tt-mobile-legend span { display: inline-flex; align-items: center; gap: 5px; }

/* หัวข้อหมวด (การเรียนการสอน / วิชาเสริมพิเศษ / ...) — เทาเข้ม ตัวหนา ระยะห่างตัวอักษรปกติ
   เหมือนข้อความทั่วไป (ไม่ไล่สีเขียว/ทอง ไม่ถ่างตัวอักษรแบบ label เดิม) */
.tt-grp-title { font-size: 13px; font-weight: 800; color: #4A443B; margin: 20px 0 6px; }
.tt-grp-title:first-of-type { margin-top: 10px; }
/* รายการย่อยไม่ทำเป็นกล่อง/ตารางอีกต่อไป — indent เข้าไปแทน คั่นด้วย spacing เตี้ยๆ พอ
   ให้ยังเห็นเป็นรายการในหมวดเดียวกัน ไม่ต้องมีเส้น/กรอบต่อแถว */
.tt-grp-box { display: flex; flex-direction: column; gap: 1px; }
.tt-row-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0; margin-left: 14px; font-size: 13.5px; }
.tt-status { flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; }
.tt-status.is-yes { color: #44604E; }
.tt-status.is-add { color: #8A6406; }
.tt-status.is-na { color: #C4BDB2; font-weight: 400; }
.tt-status .tt-status__g { width: 15px; height: 15px; border-radius: 4px; font-size: 10px; display: grid; place-items: center; flex: none; }
.tt-status.is-yes .tt-status__g { background: #E6ECE7; }
.tt-status.is-add .tt-status__g { background: #FBF3DC; }
.tt-status.is-na .tt-status__g { background: #F5F2EA; }

/* ---------- mobile ---------- */
@media (max-width: 720px) {
  .tt-scroll { display: none; }
  .tt-legend { display: none; }
  .tt-mobile { display: block; }
}