/* ============================================================
   ค่าเล่าเรียน — ตารางเทียบตามระดับชั้น
   วางต่อท้าย 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 {
  font-size: clamp(26px, 3.4vw, 42px);
  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;
  -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;
}
.tt-table thead th:first-child { background: transparent; 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; }
.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; }

/* ---------- note variant: ตารางค่าเทอม (เฉพาะหน้า admission-details-fees.html) ---------- */
.tt-note--price { display: block; }
.tt-fee-table { width: 100%; max-width: 460px; border-collapse: collapse; font-size: 15px; }
.tt-fee-table th, .tt-fee-table td { text-align: left; padding: 9px 4px; border-bottom: 1px solid #F3E2B0; }
.tt-fee-table th { font-size: 12.5px; font-weight: 800; color: #8A6406; text-transform: uppercase; letter-spacing: .04em; }
.tt-fee-table td { color: #5A4509; }
.tt-fee-table tr:last-child td { border-bottom: 0; }
.tt-fee-table th:last-child, .tt-fee-table td:last-child { text-align: right; font-weight: 800; }
.tt-fee-hint { margin: 14px 0 0; font-size: 13px; color: #8A6406; }

/* ---------- 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 ---------- */
@media (max-width: 720px) {
  .tt-scroll { margin-inline: -20px; padding-inline: 20px; }
  .tt-table { font-size: 14.5px; min-width: 720px; }
  .tt-legend { gap: 14px; font-size: 13.5px; }
}