@charset "utf-8";
/* ============================================================================
   TDAC User Guide (External / EN) – Template Stylesheet
   ----------------------------------------------------------------------------
   เขียนขึ้นใหม่แทนธีม Nicepage 8.6.2 ของโฟลเดอร์ 03-Html
   คงหน้าตาเดิมไว้ทั้งหมด เปลี่ยนเฉพาะเบื้องหลัง ไม่พึ่ง jQuery / เฟรมเวิร์กใด ๆ

   ของเดิมต่อการเปิดหนึ่งหน้า : nicepage.css 1.58MB + nicepage.js 434KB + jquery 87KB
   ของใหม่                    : ไฟล์นี้ + tdac.js

   สารบัญ
     01  ตัวแปรของธีม (design tokens)
     02  รีเซ็ตและค่าพื้นฐาน
     03  โครงหน้า (shell / section)
     04  ส่วนหัวและเมนู
     05  แบนเนอร์ฮีโร่
     06  โครงสองคอลัมน์ + สารบัญในหน้า (.doc / .toc)
     07  ป้ายหัวข้อ (.chip)
     08  ชิ้นส่วนเนื้อหา (lead / panel / steps / note)
     09  แท็บ (.tabs)
     10  แอคคอร์เดียน (FAQ + Version Update)
     11  วิดีโอ
     12  ส่วนท้าย
     13  ยูทิลิตี้
     14  โหมดพิมพ์ / ลดการเคลื่อนไหว
     15  แถบพื้นหลังเต็มความกว้างภายในโครงสองคอลัมน์

   หลักการที่ใช้ทั้งไฟล์
     - ความกว้างเป็นสัดส่วนหรือ min()/clamp() ไม่ตรึงเป็น px รายจอ
       (ปัญหาหลักของธีมเดิมคือ .u-sheet ถูกตรึงเป็น px ต่อ breakpoint จอกลางจึงพัง)
     - ขนาดตัวอักษรคุมด้วยตัวแปรชุดเดียวในหัวข้อ 01 ปรับที่เดียวมีผลทั้งเว็บ
     - ไม่มี !important เลยแม้แต่ที่เดียว
   ========================================================================== */


/* ==========================================================================
   01  ตัวแปรของธีม
   สีทุกตัวยกมาจากธีมเดิมตรง ๆ ไม่มีสีใหม่
   (ชื่อในวงเล็บคือชื่อคลาสเดิมของ Nicepage เพื่อให้ตามย้อนกลับไปเทียบได้)
   ========================================================================== */

:root {
  /* ---- สีหลัก ---- */
  --navy: #105392;          /* palette-1-dark-1  สีหลักของแบรนด์ หัวเว็บ/หัวข้อ */
  --navy-dark: #0d4478;     /* navy เข้มขึ้น ใช้ตอนกด */
  --navy-soft: #2d4862;     /* สีหัวเรื่องบนแบนเนอร์ฮีโร่ */
  --gold: #f1c50e;          /* palette-4-base  เมนูที่กำลังเปิด / CONTACT US */
  --gold-dark: #d9b10d;     /* palette-4-base ตอนกด */
  --coral: #db545a;         /* palette-2-base  กล่องหมายเหตุ */

  /* ---- พื้นหลัง ---- */
  --page: #ffffff;
  --band-hero: #e9f4fd;     /* palette-1-light-3  แถบ Welcome to Guide */
  --band-tint: #f5f7fa;     /* palette-5-light-3  พื้นส่วนที่ให้การ์ดลอยขึ้นมา */
  --band-grey: #f2f2f2;     /* grey-5  พื้นส่วน FAQ */
  --tab-idle: #e6f5ff;      /* palette-2-light-3  แท็บที่ยังไม่ถูกเลือก */
  --footer-bg: #333333;     /* grey-80 */

  /* ---- สีกลาง ---- */
  --ink: #111111;           /* ตัวอักษรเนื้อหา */
  --ink-soft: #4a5866;      /* ตัวอักษรรอง */
  --line: #cfe3f5;          /* เส้นขอบอ่อน */
  --line-strong: #478ac9;   /* palette-1-base  ขอบการ์ด */

  /* ---- เงา ---- */
  --shadow-sm: 0 1px 2px rgba(16, 83, 146, .05), 0 3px 12px rgba(16, 83, 146, .06);
  --shadow-md: 0 2px 6px rgba(16, 83, 146, .10), 0 10px 28px rgba(16, 83, 146, .14);

  /* ---- โครงหน้า ----
     --shell เป็นเพดานสำหรับจอกว้างมากเท่านั้น เนื้อหากางเต็มจอลบระยะขอบ
     ธีมเดิมตรึง .u-sheet ไว้ที่ 1140px ทำให้จอ 1920 เหลือพื้นที่ว่างสองข้างมหาศาล */
  --shell: 1560px;
  --gutter: 16px;
  --radius: 10px;
  --radius-lg: 14px;

  /* ---- ส่วนหัว ---- */
  --header-h: 64px;
  --logo-size: 42px;
  --brand-name: 1.75rem;      /* 28px */
  --brand-tagline: 0.75rem;   /* 12px */
  --nav-size: 0.9375rem;      /* 15px */

  /* ---- ตัวอักษร ----
     Titillium Web เป็นฟอนต์ที่ธีมเดิม "ประกาศไว้แต่ไม่เคยโหลด" หน้าเว็บของเดิม
     จึงตกไปใช้ sans-serif ของเครื่องจริง ๆ ที่นี่จึงประกาศ stack ให้ตรงกับผลที่เห็นจริง
     Bayon (ชื่อ TDAC) กับ Abel (tagline) โหลดจาก Google Fonts เหมือนเดิม */
  --font-body: Arial, "Helvetica Neue", Helvetica, "Segoe UI", sans-serif;
  --font-brand: "Bayon", Arial, sans-serif;
  --font-tagline: "Abel", Arial, sans-serif;

  /* ---- ขั้นขนาดตัวอักษร : ค่าตั้งต้นคือ "มือถือ" ----
     ธีมเดิมย่อเนื้อหาบนมือถือเหลือ 12px ซึ่งเล็กเกินอ่าน ที่นี่ตรึงพื้นล่างไว้ที่ 15px */
  --fs-hero: 1.25rem;       /* 20px  หัวแบนเนอร์ */
  --fs-h2: 1.0625rem;       /* 17px  ป้ายหัวข้อ / หัวการ์ด */
  --fs-h3: 0.9375rem;       /* 15px  หัวข้อย่อยในเนื้อหา */
  --fs-body: 0.9375rem;     /* 15px  เนื้อหา */
  --fs-small: 0.8125rem;    /* 13px  หมายเหตุ / ท้ายหน้า */

  --lh-body: 1.65;
  --space-section: 32px;    /* ระยะบน-ล่างของแต่ละ section */
}

@media (min-width: 768px) {
  :root {
    --header-h: 72px;
    --logo-size: 48px;
    --brand-name: 2rem;         /* 32px */
    --brand-tagline: 0.8125rem; /* 13px */
    --nav-size: 1rem;           /* 16px */
    --fs-hero: 1.5rem;          /* 24px */
    --fs-h2: 1.125rem;          /* 18px */
    --space-section: 40px;
  }
}

@media (min-width: 1200px) {
  :root {
    --header-h: 84px;
    --logo-size: 56px;
    --brand-name: 2.25rem;      /* 36px  เท่าธีมเดิมบนจอกว้าง */
    --brand-tagline: 0.875rem;  /* 14px */
    --nav-size: 1.0625rem;      /* 17px */
    --fs-hero: 1.875rem;        /* 30px */
    --fs-h2: 1.1875rem;         /* 19px */
    --fs-h3: 1rem;              /* 16px */
    --fs-body: 1rem;            /* 16px */
    --fs-small: 0.875rem;       /* 14px */
    --space-section: 48px;
  }
}


/* ==========================================================================
   02  รีเซ็ตและค่าพื้นฐาน
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 16px;                 /* ไม่บีบเหลือ 15px เหมือนธีมเดิม
                                      คนที่ตั้งขนาดตัวอักษรใหญ่ในเบราว์เซอร์จะได้ผลตามที่ตั้ง */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);   /* กันหัวข้อโดนหัวเว็บบัง */
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  overflow-x: hidden;              /* กันแถบเลื่อนแนวนอนจากภาพตกแต่ง */
}

h1, h2, h3, h4, h5, h6 { margin: 0; line-height: 1.35; font-weight: 700; }
p { margin: 0 0 .75em; }
ul, ol { margin: 0 0 .75em; padding-left: 1.35em; }
li { margin: 0 0 .35em; }
img { max-width: 100%; height: auto; display: block; }
hr { border: 0; }

a { color: var(--navy); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

/* ลิงก์ข้ามไปเนื้อหาหลัก โผล่เฉพาะตอนกด Tab */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px 16px;
  background: var(--gold);
  color: var(--ink);
  font-weight: 700;
}
.skip-link:focus { left: 8px; top: 8px; }


/* ==========================================================================
   03  โครงหน้า
   ========================================================================== */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

@media (min-width: 768px) { .shell { padding-inline: 28px; } }
@media (min-width: 1200px) { .shell { padding-inline: 40px; } }


/* ==========================================================================
   04  ส่วนหัวและเมนู
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  /* ต้องสูงกว่า .nav-scrim (z-index: 50) ไม่ใช่แค่สูงกว่าเนื้อหาทั่วไป
     เพราะ .nav (ลิ้นชักเมนู, z-index: 60) วางซ้อนอยู่ "ข้างใน" ส่วนหัวนี้
     position:sticky ทำให้ส่วนหัวสร้าง stacking context ใหม่ของตัวเอง
     ตัวเลข z-index ของ .nav จึงมีผลแค่ภายในก้อนนี้ ไม่ได้ไปแข่งกับ .nav-scrim ที่ root โดยตรง
     ถ้า .site-header ยังเป็น 40 (ต่ำกว่า .nav-scrim) ทั้งก้อนรวมทั้งลิ้นชักเมนูจะจมใต้ฉากทึบ
     คลิกที่ลิงก์เมนูจะโดนฉากทึบบังแทน กดไม่ติดทั้งที่มองเห็นเมนูอยู่ (พบจากภาพหน้าจอผู้ใช้ 8 ก.ย. 2569) */
  z-index: 55;
  background: var(--navy);
  color: #fff;
}

.site-header__bar {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 16px;
}

/* ---- โลโก้และชื่อ ---- */
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  margin-right: auto;
}
.brand:hover { text-decoration: none; }

.brand__mark {
  width: var(--logo-size);
  height: var(--logo-size);
  object-fit: contain;
  flex: none;
}

.brand__text { display: flex; flex-direction: column; line-height: 1.05; }

.brand__name {
  font-family: var(--font-brand);
  font-size: var(--brand-name);
  letter-spacing: .02em;
}

.brand__tagline {
  font-family: var(--font-tagline);
  font-size: var(--brand-tagline);
  font-weight: 700;
  letter-spacing: .01em;
}

/* ---- ปุ่มเปิดลิ้นชัก (เห็นเฉพาะจอแคบ) ---- */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;               /* 44px คือขนาดขั้นต่ำที่นิ้วกดได้แม่น */
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.nav-toggle svg { width: 20px; height: 20px; fill: currentColor; }
.nav-toggle:hover { background: rgba(255, 255, 255, .12); }

.nav-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-end;
  width: 44px;
  height: 44px;
  margin: 4px 4px 8px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.nav-close svg { width: 18px; height: 18px; fill: currentColor; }

/* ---- รายการเมนู ---- */
.nav__list {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__link {
  display: block;
  padding: 8px 14px;
  border-bottom: 2px solid transparent;
  color: #fff;
  font-size: var(--nav-size);
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}
.nav__link:hover { color: var(--gold); text-decoration: none; }

/* หน้าที่กำลังเปิดอยู่ – สคริปต์ใส่ aria-current ให้เอง ดู markCurrentPage() ใน tdac.js */
.nav__link[aria-current="page"] {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

/* ---- โหมดลิ้นชักบนจอแคบ ----
   ตัดที่ 768px ไม่ใช่ 992px เพราะเมนูมีแค่ 2 อัน (HOW TO / FAQ & UPDATE)
   แท็บเล็ตแนวตั้งจึงมีที่พอวางเป็นแถบได้สบาย ไม่ต้องกดเปิดลิ้นชัก */
@media (max-width: 767.98px) {
  .nav {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 60;
    width: min(78vw, 320px);
    display: flex;
    flex-direction: column;
    padding: 8px 0 24px;
    background: var(--navy);
    transform: translateX(100%);
    /* visibility: hidden ตอนปิด จำเป็นสองเรื่อง
       1) ลิงก์ในลิ้นชักที่ถูกเลื่อนออกไปนอกจอยังกด Tab เข้าไปโฟกัสได้ถ้าไม่ปิด
       2) กล่องที่เลื่อนออกไปทางขวาทำให้เอกสารกว้างเกินจอ เกิดแถบเลื่อนแนวนอน
       หน่วงการซ่อนไว้เท่าเวลาเลื่อน ไม่งั้นจะหายวับก่อนเลื่อนเสร็จ */
    visibility: hidden;
    transition: transform .22s ease, visibility 0s linear .22s;
    overflow-y: auto;
  }
  [data-nav="open"] .nav {
    transform: translateX(0);
    visibility: visible;
    transition: transform .22s ease, visibility 0s;
  }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link {
    padding: 14px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    font-size: 1rem;
  }
  .nav__link[aria-current="page"] { border-bottom-color: rgba(255, 255, 255, .12); }

  .nav-scrim {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(0, 0, 0, .5);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease, visibility .22s ease;
  }
  [data-nav="open"] .nav-scrim { opacity: 1; visibility: visible; }
}

@media (min-width: 768px) {
  .nav-toggle, .nav-close, .nav-scrim { display: none; }
}


/* ==========================================================================
   05  แบนเนอร์ฮีโร่
   แถบฟ้าอ่อนเต็มความกว้าง มีหัวเรื่องอยู่กลาง — เหมือนธีมเดิมทุกประการ
   ========================================================================== */

.hero {
  background: var(--band-hero);
  padding-block: clamp(10px, 1.6vw, 20px);
  text-align: center;
}

.hero__title {
  color: var(--navy-soft);
  font-size: var(--fs-hero);
  letter-spacing: .01em;
}


/* ==========================================================================
   06  โครงสองคอลัมน์ + สารบัญในหน้า
   จอ ≥1200px : สารบัญเป็นแถบซ้ายที่ลอยตามการเลื่อนหน้า
   จอแคบกว่า  : สารบัญกลายเป็นกล่องวางไว้บนสุดก่อนเนื้อหา

   ทุกหัวข้อที่อยู่ในสารบัญต้องมี id ตรงกับ href ของ .toc__link
   ไม่งั้น setupToc() ใน tdac.js จะข้ามลิงก์นั้นไป
   ========================================================================== */

.doc { display: block; }

.toc {
  margin-bottom: 24px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-sm);
}

/* ---- หัวกล่องสารบัญ = ตัวเปิด-ปิด ----
   จอแคบ สารบัญกินพื้นที่หน้าจอแรกไปเกือบหมด เนื้อหาจึงตกไปอยู่ใต้เส้นพับ
   ใช้ <summary> ของเบราว์เซอร์ กดเปิด-ปิดได้แม้ปิด JavaScript
   จอ ≥1200px สคริปต์บังคับให้กางค้างไว้ และซ่อนลูกศรทิ้ง */
.toc__box { display: block; }
.toc__title::-webkit-details-marker { display: none; }

.toc__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  list-style: none;
  cursor: pointer;
  user-select: none;
  margin: 0 0 8px;
  padding: 10px 14px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--navy);
  color: #fff;
  font-size: var(--fs-small);
  font-weight: 700;
  text-align: center;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.toc__list { margin: 0; padding: 0 8px 8px; list-style: none; }
.toc__item { margin: 0; }

.toc__link {
  display: block;
  padding: 7px 10px 7px 14px;
  border-left: 3px solid var(--gold);
  border-radius: 0 6px 6px 0;
  color: var(--navy);
  font-size: 0.875rem;      /* 14px ตรึงไว้ ไม่ผูกกับ --fs-body
                               ธีมนี้ขยาย --fs-body บนจอกว้าง สารบัญจะโตตามจนล้น */
  font-weight: 700;
  line-height: 1.4;
}
.toc__link + .toc__link { margin-top: 2px; }
.toc__item + .toc__item { margin-top: 4px; }

.toc__link:hover {
  background: var(--navy);
  color: #fff;
  text-decoration: none;
}

/* ลูกศรบอกสถานะพับ/กาง */
.toc__title::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .18s ease;
}
.toc__box[open] > .toc__title::after { transform: translateY(2px) rotate(-135deg); }
/* ตอนพับ หัวกล่องคือทั้งกล่อง จึงมนทั้งสี่มุมและไม่เหลือช่องว่างข้างล่าง */
.toc__box:not([open]) > .toc__title { margin: 0; border-radius: var(--radius); }
.toc__title:hover { background: var(--navy-dark); }

/* หัวข้อที่กำลังอ่านอยู่ – สคริปต์ใส่ aria-current ให้ตามตำแหน่งที่เลื่อนถึง */
.toc__link[aria-current="location"] {
  background: var(--navy);
  color: #fff;
}

/* หัวข้อย่อย (ระดับ 2) */
.toc__sub { margin: 4px 0 0; padding: 0 0 0 14px; list-style: none; }
.toc__sub .toc__link {
  border-left-color: var(--line);
  color: var(--ink-soft);
  font-size: 0.8125rem;     /* 13px */
  font-weight: 400;
}
/* ต้องเขียนซ้ำตรงนี้ เพราะกฎด้านบนมีน้ำหนักเท่ากับกฎของสถานะที่อยู่ก่อนหน้า
   ถ้าไม่เขียน ตัวอักษรจะเป็นสีเทาอยู่บนพื้นน้ำเงินจนอ่านแทบไม่ออก */
.toc__sub .toc__link:hover,
.toc__sub .toc__link[aria-current="location"] { color: #fff; }

@media (min-width: 1200px) {
  .doc {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
  }
  .doc__side { position: sticky; top: calc(var(--header-h) + 16px); }
  /* จอกว้างมีที่พอ ให้กางค้างไว้เสมอ ไม่ต้องมีปุ่มพับ */
  .toc__title { cursor: default; }
  .toc__title::after { display: none; }
  .toc__title:hover { background: var(--navy); }
  .toc { margin-bottom: 0; max-height: calc(100vh - var(--header-h) - 48px); overflow-y: auto; }
}


/* ==========================================================================
   07  ป้ายหัวข้อ (.chip) และเส้นคั่น
   ป้ายเม็ดยาขอบฟ้ามีไอคอนเครื่องบินนำหน้า — องค์ประกอบเด่นของหน้าเดิม
   ========================================================================== */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding: 8px 22px 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0%, var(--band-hero) 100%);
  box-shadow: var(--shadow-sm);
  color: var(--navy);
  font-size: var(--fs-h2);
  font-weight: 700;
}

.chip__icon {
  width: 30px;
  height: 30px;
  object-fit: contain;
  flex: none;
}


/* ==========================================================================
   08  ชิ้นส่วนเนื้อหา
   ========================================================================== */

/* ---- บล็อกเปิดหน้า : เส้นฟ้าตั้งด้านซ้าย หัวข้อกับเนื้อความเป็นตัวเอียง ---- */
.lead {
  display: grid;
  gap: 24px;
  align-items: start;
}

/* ตอนยุบเหลือคอลัมน์เดียว วิดีโอถูกตรึงไว้ที่ 560px จึงชิดซ้ายและเหลือช่องว่างข้างขวา
   จัดกลางไว้ ไม่งั้นแท็บเล็ตแนวตั้งจะดูเอียงไปข้างเดียว */
.lead > .video-card { margin-inline: auto; }

@media (min-width: 992px) {
  .lead { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 32px; }
  /* 25 ส.ค. 2569 : วิดีโอเคยเริ่มเสมอหัวข้อ ทำให้ขอบบนขวาโล่ง
     ผู้ใช้ขอให้ลงมาอยู่ระดับ **บรรทัดแรกของย่อหน้า** ไม่ใช่ระดับหัวข้อ
     ค่าจึงผูกกับความสูงจริงของหัวข้อ : ขนาดตัวอักษร × line-height 1.35 + ระยะใต้หัวข้อ 4px + เผื่อ leading 4px
     คิดเองแบบนี้แล้วตรงบรรทัดแรกทุกช่วงจอ ไม่ต้องไล่แก้เมื่อขนาดตัวอักษรเปลี่ยนตาม breakpoint */
  .lead > .video-card { margin-inline: 0; margin-top: calc(var(--fs-h3) * 1.35 + 8px); }
}

.lead__body {
  padding-left: 18px;
  border-left: 3px solid var(--line-strong);
}

.lead__head {
  margin: 0 0 4px;
  color: var(--navy);
  font-size: var(--fs-h3);
  font-style: italic;
  letter-spacing: .02em;
}

.lead__text {
  margin: 0 0 20px;
  font-style: italic;
}
.lead__text:last-child { margin-bottom: 0; }

/* ---- การ์ดขอบฟ้า ---- */
.panel {
  padding: 20px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-md);
}

.panel__title {
  margin: 0 0 14px;
  color: var(--navy);
  font-size: var(--fs-h2);
}

.panel-grid {
  display: grid;
  gap: 24px;
}

@media (min-width: 992px) {
  .panel-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- หัวข้อย่อยสีน้ำเงินในเนื้อหา ---- */
.subhead {
  margin: 18px 0 6px;
  color: var(--navy);
  font-size: var(--fs-h3);
}
.subhead:first-child { margin-top: 0; }

/* ---- รายการขั้นตอน ---- */
/* 25 ส.ค. 2569 : เดิมเขียน counter-reset: none ที่นี่
   ตามสเปก เบราว์เซอร์ตั้ง counter-reset: list-item ให้ <ol> ทุกอันเพื่อให้เริ่มนับใหม่ที่ 1
   การเขียน none ทับ = สั่งไม่ให้รีเซ็ต เลขจึงไล่ต่อจากรายการก่อนหน้าในหน้าเดียวกัน
   (ที่เครื่องผู้ใช้เห็นการ์ด Submit เริ่มที่ 3 เพราะนับต่อจาก .arrow-list สองข้อด้านบน)
   Chrome บางรุ่นไม่แสดงอาการนี้ แต่เบราว์เซอร์ที่ทำตามสเปกแสดง จึงสั่งรีเซ็ตให้ชัดเจนไปเลย */
.steps {
  margin: 0;
  padding-left: 1.4em;
  counter-reset: list-item 0;
}
.steps > li { margin-bottom: .5em; }
.steps ul { margin: .35em 0 .35em 0; padding-left: 1.1em; list-style: none; }
.steps ul > li::before { content: "– "; color: var(--ink-soft); }

/* รายการหัวข้อย่อยแบบลูกศร (► Individual submission) */
.arrow-list { margin: 0 0 .75em; padding-left: 1.1em; list-style: none; }
.arrow-list > li { position: relative; padding-left: 1.1em; }
.arrow-list > li::before {
  content: "►";
  position: absolute;
  left: 0;
  color: var(--line-strong);
  font-size: .75em;
  line-height: 2;
}

/* ---- กล่องหมายเหตุ (Remark) ---- */
.note {
  margin-top: 24px;
  padding: 14px 18px;
  border-left: 3px solid var(--coral);
  background: #fff;
  color: var(--coral);
  font-size: var(--fs-small);
  font-style: italic;
}
.note__title { display: block; margin-bottom: 6px; font-weight: 700; font-style: italic; }
.note ol, .note ul { margin: 0; padding-left: 1.3em; }
.note li { margin-bottom: .25em; }
.note strong { color: var(--coral); }


/* ==========================================================================
   09  แท็บ
   ปุ่มแท็บเป็น <button> จริง ไม่ใช่ <a href="#tab-xxxx"> เหมือนธีมเดิม
   ตอนกดจึงไม่กระโดดหน้าและไม่ทิ้ง #tab-... ค้างไว้ในแถบที่อยู่
   ถ้าปิด JavaScript ทุกแผงจะกางออกมาให้อ่านครบ (ดู .tabs__panel ท้ายหัวข้อนี้)
   ========================================================================== */

.tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 -1px;
  padding: 0;
  list-style: none;
}

.tabs__btn {
  padding: 8px 18px;
  border: 1px solid var(--navy);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  background: var(--tab-idle);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--fs-small);
  font-weight: 700;
  cursor: pointer;
}
.tabs__btn:hover { background: #d7ecff; }

.tabs__btn[aria-selected="true"] {
  background: var(--navy);
  color: #fff;
}

.tabs__panels { border-top: 1px solid var(--navy); padding-top: 16px; }

/* ---- จอแคบกว่า 768px ----
   แท็บแบบแฟ้มเอกสารพึ่งเส้นใต้เส้นเดียวร่วมกับ .tabs__panels (margin-bottom: -1px)
   พอปุ่มขึ้นบรรทัดที่สอง บรรทัดแรกจะลอยไม่มีเส้นปิดข้างล่าง แล้วเส้นคั่นตัดผ่านกลางปุ่ม
   จอแคบจึงเปลี่ยนเป็นปุ่มสี่เหลี่ยมมนเต็มช่อง วางเป็นตารางที่พับบรรทัดได้เอง
   140px คือความกว้างขั้นต่ำที่ทำให้จอ 320px ได้สองช่องพอดี */
@media (max-width: 767.98px) {
  .tabs__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 6px;
    margin: 0 0 14px;
  }
  .tabs__list > li { display: flex; }
  .tabs__btn {
    flex: 1;              /* ปุ่มอยู่ใน <li> ตัวที่ยืดเต็มช่องตารางคือ li จึงต้องสั่งปุ่มอีกชั้น */
    padding: 11px 10px;
    border-bottom: 1px solid var(--navy);
    border-radius: 6px;
    text-align: center;
  }
}

.tabs__panel[hidden] { display: none; }


/* ==========================================================================
   10  แอคคอร์เดียน
   ใช้ <details>/<summary> ของเบราว์เซอร์เอง กดเปิด-ปิดได้แม้ผู้ใช้ปิด JavaScript
   รองรับคีย์บอร์ดและโปรแกรมอ่านหน้าจอในตัว ไม่ต้องมีโค้ดควบคุม
   ========================================================================== */

/* ---- แต่ละข้อเป็นการ์ดของตัวเอง ----
   ของเดิมเป็นแถวเรียงกันคั่นด้วยเส้นผมเส้นเดียว 33 ข้อติดกันจึงกลืนเป็นพืด
   แยกเป็นการ์ดมีขอบและเงา อ่านง่ายขึ้นและบอกได้ทันทีว่าข้อไหนกำลังเปิดอยู่ */
.accordion { display: grid; gap: 8px; }

.accordion__item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--page);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.accordion__item:hover { border-color: var(--line-strong); }

/* ข้อที่เปิดอยู่ — ขอบน้ำเงินเข้มและเงาลอยขึ้น แยกตัวออกจากข้ออื่นชัดเจน */
.accordion__item[open] {
  border-color: var(--navy);
  box-shadow: var(--shadow-md);
}

.accordion__q {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-left: 4px solid transparent;
  color: var(--navy);
  font-weight: 700;
  line-height: 1.45;
  cursor: pointer;
  list-style: none;
  transition: background .18s ease, border-color .18s ease;
}
.accordion__q::-webkit-details-marker { display: none; }
.accordion__q:hover { background: #f7fbff; }

.accordion__item[open] .accordion__q {
  background: var(--band-hero);
  border-left-color: var(--gold);
}

/* min-width: 0 จำเป็น — ค่าเริ่มต้นของ flex item คือ auto ซึ่งไม่ยอมหดต่ำกว่าคำที่ยาวที่สุด
   คำถามบางข้อมี submitId ยาวติดกันไม่มีช่องว่าง จอ 320px จะดันปุ่ม + ทะลุขอบการ์ดออกไป */
.accordion__q-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ---- ปุ่มพับเป็นวงกลมมีลูกศร ลง / ขึ้น วาดด้วย CSS ----
   ลูกศรชี้ลง = ยังพับอยู่ กดแล้วพลิกขึ้น = กางอยู่
   วาดจากขอบสองด้านของกล่องเปล่าแล้วหมุน 45 องศา ไม่ใช้ไฟล์รูปและไม่ใช้ svg
   (ของเดิมเป็นรูป icon-answer.png ซึ่งซ้ำกับลูกศรที่วางไว้หน้าคำตอบ ผู้ใช้สั่งให้เอารูปนั้นออก
    ตัวที่ถอดออกคือ "ลูกศรหน้าคำตอบ" ส่วนปุ่มพับยังเป็นลูกศรตามที่ผู้ใช้สั่งเมื่อ 24 ส.ค. 2569) */
.accordion__icon {
  position: relative;
  flex: none;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--tab-idle);
  color: var(--navy);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.accordion__icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  border-radius: 1px;
  transform: translate(-50%, -60%) rotate(45deg);
  transition: transform .18s ease;
}
.accordion__item[open] .accordion__icon {
  border-color: var(--navy);
  background: var(--navy);
  color: #fff;
}
.accordion__item[open] .accordion__icon::before {
  transform: translate(-50%, -40%) rotate(-135deg);
}

/* ---- คำตอบ ----
   เดิมมีรูปลูกศร icon-answer.png วางไว้ข้างหน้าและใช้ flex สองคอลัมน์
   ถอดรูปออกแล้ว (ผู้ใช้สั่ง 24 ส.ค. 2569) จึงเหลือบล็อกเดียว */
.accordion__a {
  padding: 16px 18px 18px 20px;
  color: var(--ink);
}
.accordion__a > :last-child { margin-bottom: 0; }

.accordion__body { min-width: 0; }
.accordion__body > :last-child { margin-bottom: 0; }
.accordion__body ul,
.accordion__body ol { padding-left: 1.35em; }

/* หัวข้อรุ่น (Version Update) ใช้แอคคอร์เดียนชุดเดียวกัน แต่หัวข้อเป็นตัวหนา */
.accordion--release .accordion__q { font-weight: 700; }

/* ชื่อส่วนของระบบภายในบันทึกการปรับปรุงแต่ละรุ่น
   เช่น Submit Arrival Card / Update Arrival Card / Batch File */
.release__head {
  margin: 14px 0 4px;
  color: var(--navy);
  font-weight: 700;
}
.release__head:first-child { margin-top: 0; }


/* ==========================================================================
   11  วิดีโอ
   ========================================================================== */

.video-grid {
  display: grid;
  gap: 28px;
  justify-items: center;
}

@media (min-width: 768px) {
  .video-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.video-card { width: 100%; max-width: 560px; }

.video-card__title {
  display: block;
  margin: 0 auto 14px;
  padding: 8px 20px;
  width: fit-content;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0%, var(--band-hero) 100%);
  box-shadow: var(--shadow-sm);
  color: var(--navy);
  font-size: var(--fs-h3);
  font-weight: 700;
  text-align: center;
}

/* กรอบอัตราส่วน 16:9 — ไม่ต้องคำนวณ padding-top เหมือนวิธีเดิม */
.video-card__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius);
  background: #000;
  box-shadow: var(--shadow-md);
}
.video-card__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ==========================================================================
   12  ส่วนท้าย
   ========================================================================== */

.site-footer {
  padding-block: 22px;
  background: var(--footer-bg);
  color: #fff;
  text-align: center;
}

.site-footer a { color: #fff; }

.site-footer__contact {
  margin-bottom: 6px;
  font-size: var(--fs-h3);
  font-weight: 700;
}
.site-footer__contact strong { color: var(--gold); }

.site-footer__meta {
  font-size: var(--fs-small);
  line-height: 1.7;
  opacity: .92;
}


/* ==========================================================================
   13  ยูทิลิตี้
   ========================================================================== */

/* ซ่อนจากสายตาแต่ยังอ่านออกด้วยโปรแกรมอ่านหน้าจอ */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }


/* ==========================================================================
   14  โหมดพิมพ์ / ลดการเคลื่อนไหว
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* ต้องตั้ง iteration-count: 1 ด้วย ไม่งั้น animation ที่เป็น infinite จะกลายเป็นกะพริบถี่ ๆ
     แทนที่จะหยุดนิ่ง เพราะรอบละ .01ms แล้ววนไม่จบ */
  * { transition-duration: .01ms; animation-duration: .01ms; animation-iteration-count: 1; }

}

@media print {
  .site-header, .nav-scrim, .toc, .skip-link { display: none; }
  .hero { padding-block: 8px; background: #fff; }
  .doc { display: block; }
  .panel, .video-card__frame { box-shadow: none; }

  /* กางทุกแผงแท็บออกมาให้ครบตอนพิมพ์
     หมายเหตุ : คำตอบใน <details> ที่ยังไม่ได้กางจะ "ไม่ติดไปด้วย" เพราะเบราว์เซอร์
     ซ่อนเนื้อในของ details ที่ไม่มี open ไว้เอง และ CSS สั่งให้แสดงไม่ได้
     ถ้าต้องการพิมพ์คำตอบทั้งหมด ให้กางข้อที่ต้องการก่อนสั่งพิมพ์ */
  .accordion { gap: 6px; }
  .accordion__item { border: 1px solid #999; box-shadow: none; }
  .accordion__icon { display: none; }   /* ปุ่มพับไม่มีความหมายบนกระดาษ */
  .tabs__panel[hidden] { display: block; }
  .tabs__list { display: none; }
}


/* ==========================================================================
   15  แถบพื้นหลังเต็มความกว้างภายในโครงสองคอลัมน์

   ปัญหา : สารบัญซ้ายมือกับเนื้อหาต้องอยู่ในกริดเดียวกันตลอดทั้งหน้า
           แต่หน้าเดิมมีแถบพื้นสีสลับกันแบบกินเต็มความกว้างจอ
           ถ้าเอาสีไปใส่ที่ <section> รอบกริด กริดก็จะขาดเป็นท่อน ๆ

   วิธีแก้ : ใช้ box-shadow สองข้างเป็นตัวลากสีออกไปนอกกรอบ
           เลือกวิธีนี้เพราะ box-shadow ไม่นับเป็นพื้นที่ของเอกสาร
           จึงไม่ทำให้เกิดแถบเลื่อนแนวนอน ต่างจากการใช้ ::before ที่ยืด left/right
           ออกไปข้างละ 100vw ซึ่งดันความกว้างของเอกสารจริง ๆ (เคยลองแล้วพัง)

   ระยะ 50vw ครอบคลุมเสมอ เพราะเงาก็อปปี้กล่องทั้งใบมาวาง ระยะเลื่อนจึงต้อง
   ไม่เกินความกว้างกล่อง ไม่งั้นจะเหลือช่องว่างตรงกลาง — กล่องเนื้อหาแคบสุด
   (จอ 1200px มีสารบัญข้างซ้าย) ยังกว้างราว 830px เทียบกับ 50vw = 600px

   หมายเหตุ : .block ต้องไม่เป็น positioned element ไม่งั้นเงาจะไปทับสารบัญ
   ========================================================================== */

.doc__main { min-width: 0; }

.block { padding-block: var(--space-section); }

/* 25 ส.ค. 2569 : บล็อกที่ต่อกันเคยเอา padding ล่างของอันบนบวกกับ padding บนของอันล่าง
   ช่องว่างจริงจึงเป็นสองเท่า (96px บนจอกว้าง) กลุ่มข้อความดูขาดจากกัน
   ตัด padding บนของบล็อกที่ตามหลังทิ้ง แล้วคุมระยะด้วย margin ค่าเดียว
   ยกเว้นบล็อกที่มีแถบสีพื้นหลัง เพราะแถบต้องมีที่หายใจของตัวเอง */
/* บล็อกเปิดหน้าเป็นสองคอลัมน์ที่จบไม่พร้อมกัน (ข้อความยาวกว่าวิดีโอ)
   ระยะ 48px เต็มจึงทำให้ท้ายบล็อกดูโล่งกว่าช่วงอื่นของหน้า
   ลดเหลือสองในสามเฉพาะบล็อกนี้ ป้ายหัวข้อถัดไปจะได้เกาะกลุ่มกับเนื้อความด้านบน */
#about { padding-bottom: calc(var(--space-section) * .67); }

.block + .block:not(.block--tint):not(.block--grey) {
  padding-top: 0;
  margin-top: 0;
}

.block--tint {
  background: var(--band-tint);
  box-shadow: -50vw 0 0 var(--band-tint), 50vw 0 0 var(--band-tint);
}

.block--grey {
  background: var(--band-grey);
  box-shadow: -50vw 0 0 var(--band-grey), 50vw 0 0 var(--band-grey);
}