/* =====================================================================
   vstar-tones.css — โทนสี / ฟอนต์หัวข้อ / ขนาดตัวอักษร ที่ผู้ใช้เลือกเอง
   - ค่าที่เลือกอยู่บน <html>: data-vt-tone · data-vt-head · data-vt-size
     (ตั้งโดย lib/inc_tone.php ก่อนหน้าแสดงผล · เปลี่ยนจากเมนู "ปรับหน้าตา" ใน vstar-common.js)
   - ไม่มี attribute = โทนเดิม (classic) ตาม vstar-tokens.css ทุกอย่าง
   - แต่ละโทนกำหนดค่าใหม่ให้ชื่อตัวแปรเดิมของ vstar-tokens.css เท่านั้น
     (peach = ปุ่มหลัก · sage = สำเร็จ · butter = เน้น/ดาว · sky = ข้อมูล · rose = ผิดพลาด)
   - หน้าพิมพ์ (เกียรติบัตร ป้ายโต๊ะ บัตรสอบ) ไม่โหลดไฟล์นี้ จึงเป็นสีเดิมเสมอ
   - ตัวอักษรทุกคู่สีผ่าน WCAG AA (≥4.5:1) บน cream / paper ของโทนนั้น
   ===================================================================== */

/* ---------- แบบ 2 (light): ฟ้าไล่สีเทอร์ควอยซ์ → น้ำเงินสด (แบบ IBSONE) · พื้นเทาอ่อน การ์ดขาว ----------
   แบบ 6 (dark) ใช้ค่าชุดเดียวกันแล้วกลับสีทั้งหน้า (ดูท้ายไฟล์) */
html[data-vt-tone="light"],
html[data-vt-tone="dark"] {
  --vt-cream: #F2F4F7; --vt-paper: #FFFFFF; --vt-ink: #1A2233; --vt-ink-2: #5A6476; --vt-placeholder: #687284;
  --vt-line: #E3E7EE; --vt-line-2: #CDD4DF;

  --vt-peach: #8FB0F7;  --vt-peach-s: #E6EEFE;  --vt-peach-d: #2156E0;
  --vt-sage: #8FDCC8;   --vt-sage-s: #E0F6F0;   --vt-sage-d: #0E7A63;
  --vt-butter: #FFD15C; --vt-butter-s: #FFF5D6; --vt-butter-d: #7A5600;
  --vt-sky: #8ED8EA;    --vt-sky-s: #E1F6FB;    --vt-sky-d: #0A6C8C;
  --vt-lav: #B9B4F7;    --vt-lav-s: #EEEDFE;    --vt-lav-d: #4F46C8;
  --vt-rose: #F5A3A9;   --vt-rose-s: #FDEBEC;   --vt-rose-d: #C0283A;

  /* ปุ่มหลักไล่สีฟ้าเทอร์ควอยซ์ → น้ำเงิน (ตัวอักษรขาวผ่าน AA ตั้งแต่กลางปุ่ม) */
  --vt-btn-peach: linear-gradient(120deg, #0B7DB3 0%, #2563EB 55%, #1D45D6 100%);
  --vt-btn-sage: linear-gradient(180deg, #11876E 0%, #0E7A63 100%);
  --vt-btn-sky: linear-gradient(120deg, #0B7DB3 0%, #0A6C8C 100%);
  --vt-btn-rose: linear-gradient(180deg, #D32F43 0%, #BA2537 100%);
  --vt-btn-butter: linear-gradient(180deg, #FFDE85 0%, #FFD15C 100%);

  --vt-hero: linear-gradient(120deg, #DDF4FA 0%, #E3EBFE 55%, #DCE4FD 100%);
  --vt-head: linear-gradient(120deg, #E8F7FB 0%, #E8EEFE 100%);
  --vt-head-lilac: linear-gradient(135deg, #EEEDFE 0%, #E0DEFC 100%);
  --vt-head-mint: linear-gradient(135deg, #E3F7F1 0%, #CFF0E6 100%);

  --vt-clay: 0 1px 2px rgba(16, 24, 40, .06), 0 10px 24px -18px rgba(29, 69, 214, .28);
  --vt-clay-sm: 0 1px 2px rgba(16, 24, 40, .08);
  --vt-clay-lg: 0 16px 36px -18px rgba(29, 69, 214, .3), 0 2px 4px rgba(16, 24, 40, .06);
  --vt-clay-btn: 0 8px 18px -10px rgba(37, 99, 235, .7);
  --vt-inset: inset 0 1px 2px rgba(16, 24, 40, .06);
  --vt-focus-ring: 0 0 0 4px rgba(37, 99, 235, .22);

  --vt-r-lg: 18px; --vt-r: 14px; --vt-r-md: 10px; --vt-r-sm: 8px;
  --vt-mint-ink: #0B6652; --vt-coral-ink: #A21F30;
}

/* ---------- แบบ 4 (pink): ชมพูหรู · พื้นชมพูนวล ปุ่มกุหลาบเข้ม ทองชมพู เมนูข้างไวน์แดง ---------- */
html[data-vt-tone="pink"] {
  --vt-cream: #FAF2F4; --vt-paper: #FFFDFD; --vt-ink: #2B1A21; --vt-ink-2: #6B5560; --vt-placeholder: #7A6570;
  --vt-line: #F0DEE3; --vt-line-2: #E2C7CF;

  --vt-peach: #E6A9BC;  --vt-peach-s: #FBE8EE;  --vt-peach-d: #9E2F5B;
  --vt-sage: #A9C9B8;   --vt-sage-s: #E4EFE8;   --vt-sage-d: #3B6B53;
  --vt-butter: #E3C3A3; --vt-butter-s: #F8EDE3; --vt-butter-d: #7A4F33;
  --vt-sky: #B9B6DA;    --vt-sky-s: #EEEDF8;    --vt-sky-d: #4E4A8A;
  --vt-lav: #D2B5DD;    --vt-lav-s: #F4EAF7;    --vt-lav-d: #6C3E7E;
  --vt-rose: #E99A9A;   --vt-rose-s: #FCE7E7;   --vt-rose-d: #A3303A;

  --vt-btn-peach: linear-gradient(180deg, #B23C6A 0%, #9A2E59 100%);
  --vt-btn-sage: linear-gradient(180deg, #437660 0%, #3B6B53 100%);
  --vt-btn-sky: linear-gradient(180deg, #5A5699 0%, #4E4A8A 100%);
  --vt-btn-rose: linear-gradient(180deg, #B23A44 0%, #9A2F38 100%);
  --vt-btn-butter: linear-gradient(180deg, #F2DCC6 0%, #DDB592 100%);

  --vt-hero: linear-gradient(135deg, #FBE8EE 0%, #F4D3DE 100%);
  --vt-head: linear-gradient(135deg, #FCEEF2 0%, #F5DCE5 100%);
  --vt-head-lilac: linear-gradient(135deg, #F4EAF7 0%, #E9D7EF 100%);
  --vt-head-mint: linear-gradient(135deg, #EAF2ED 0%, #D9E8DF 100%);

  --vt-clay: inset 0 1px 0 rgba(255, 255, 255, .9), 0 14px 30px -22px rgba(120, 40, 70, .45);
  --vt-clay-sm: 0 1px 3px rgba(120, 40, 70, .12);
  --vt-clay-lg: 0 26px 50px -30px rgba(120, 40, 70, .5), 0 2px 6px -2px rgba(120, 40, 70, .12);
  --vt-clay-btn: 0 8px 16px -10px rgba(158, 47, 91, .7), inset 0 0 0 1px rgba(227, 195, 163, .4);
  --vt-inset: inset 0 1px 2px rgba(120, 40, 70, .08);
  --vt-focus-ring: 0 0 0 4px rgba(227, 169, 188, .45);

  --vt-r-lg: 18px; --vt-r: 14px; --vt-r-md: 10px; --vt-r-sm: 8px;
  --vt-mint-ink: #35604A; --vt-coral-ink: #8E2A33;
}

/* ---------- แบบ 5 (yt): แบบ YouTube · ขาว เทา แดง แบนเรียบ ---------- */
html[data-vt-tone="yt"] {
  --vt-cream: #F9F9F9; --vt-paper: #FFFFFF; --vt-ink: #0F0F0F; --vt-ink-2: #606060; --vt-placeholder: #6B6B6B;
  --vt-line: #E5E5E5; --vt-line-2: #D3D3D3;

  --vt-peach: #FF8A8A;  --vt-peach-s: #FFECEC;  --vt-peach-d: #CC0000;
  --vt-sage: #9CD3A8;   --vt-sage-s: #E6F4E9;   --vt-sage-d: #1E7B34;
  --vt-butter: #FFD54F; --vt-butter-s: #FFF6D6; --vt-butter-d: #7A5900;
  --vt-sky: #9EC1F7;    --vt-sky-s: #E8F0FE;    --vt-sky-d: #065FD4;
  --vt-lav: #C5B3F0;    --vt-lav-s: #F1ECFD;    --vt-lav-d: #5B3BB5;
  --vt-rose: #FF8A8A;   --vt-rose-s: #FFECEC;   --vt-rose-d: #B00020;

  --vt-btn-peach: linear-gradient(180deg, #E00000 0%, #CC0000 100%);
  --vt-btn-sage: linear-gradient(180deg, #23893C 0%, #1E7B34 100%);
  --vt-btn-sky: linear-gradient(180deg, #0B6BE6 0%, #065FD4 100%);
  --vt-btn-rose: linear-gradient(180deg, #C4002A 0%, #B00020 100%);
  --vt-btn-butter: linear-gradient(180deg, #FFE27F 0%, #FFD54F 100%);

  --vt-hero: linear-gradient(135deg, #F2F2F2 0%, #E9E9E9 100%);
  --vt-head: linear-gradient(135deg, #F7F7F7 0%, #EFEFEF 100%);
  --vt-head-lilac: linear-gradient(135deg, #F4F1FB 0%, #EAE4F7 100%);
  --vt-head-mint: linear-gradient(135deg, #EEF6F0 0%, #E1EFE5 100%);

  --vt-clay: none;
  --vt-clay-sm: none;
  --vt-clay-lg: 0 4px 32px rgba(0, 0, 0, .1);
  --vt-clay-btn: none;
  --vt-inset: none;
  --vt-focus-ring: 0 0 0 3px rgba(6, 95, 212, .3);

  --vt-r-lg: 12px; --vt-r: 12px; --vt-r-md: 8px; --vt-r-sm: 8px;
  --vt-mint-ink: #186A2C; --vt-coral-ink: #9A001C;
}
/* YouTube แบนเรียบ: การ์ดใช้เส้นขอบบางแทนเงา */
html.vt-theme[data-vt-tone="yt"] .card { border: 1px solid var(--vt-line) !important; }

/* ---------- โทนลุ่มลึก: พื้นงาช้าง เขียวมรกตเข้ม ทอง ---------- */
html[data-vt-tone="deep"] {
  --vt-cream: #F2EEE5; --vt-paper: #FFFDF8; --vt-ink: #1D2621; --vt-ink-2: #59625C; --vt-placeholder: #6B736C;
  --vt-line: #E6DFD0; --vt-line-2: #D3C8B0;

  --vt-peach: #8FB5A6;  --vt-peach-s: #E5EFE9;  --vt-peach-d: #0F4A3C;
  --vt-sage: #A7C7B4;   --vt-sage-s: #E3EEE8;   --vt-sage-d: #2B6650;
  --vt-butter: #D9BD7A; --vt-butter-s: #F6EEDB; --vt-butter-d: #765714;
  --vt-sky: #A9BCC4;    --vt-sky-s: #E8EEF0;    --vt-sky-d: #3A5C68;
  --vt-lav: #C7B2C9;    --vt-lav-s: #F1E9F1;    --vt-lav-d: #684769;
  --vt-rose: #D9A0A0;   --vt-rose-s: #F7E6E4;   --vt-rose-d: #973838;

  --vt-btn-peach: linear-gradient(180deg, #155A4A 0%, #0F4A3C 100%);
  --vt-btn-sage: linear-gradient(180deg, #2F6E57 0%, #275C49 100%);
  --vt-btn-sky: linear-gradient(180deg, #3F6370 0%, #34535E 100%);
  --vt-btn-rose: linear-gradient(180deg, #A03E3E 0%, #8A3232 100%);
  --vt-btn-butter: linear-gradient(180deg, #F1DCA6 0%, #D9B25E 100%);

  --vt-hero: linear-gradient(135deg, #F6EEDB 0%, #EFE3C6 100%);
  --vt-head: linear-gradient(135deg, #F5F0E4 0%, #EAE1CE 100%);
  --vt-head-lilac: linear-gradient(135deg, #F1E9F1 0%, #E6D9E7 100%);
  --vt-head-mint: linear-gradient(135deg, #E9F1EC 0%, #D6E5DC 100%);

  --vt-clay: inset 0 1px 0 rgba(255, 255, 255, .9), 0 14px 30px -24px rgba(13, 58, 48, .5);
  --vt-clay-sm: 0 1px 2px rgba(13, 58, 48, .1);
  --vt-clay-lg: 0 26px 50px -30px rgba(13, 58, 48, .55), 0 2px 6px -2px rgba(13, 58, 48, .12);
  --vt-clay-btn: 0 8px 16px -10px rgba(15, 74, 60, .7), inset 0 0 0 1px rgba(198, 160, 82, .35);
  --vt-inset: inset 0 1px 2px rgba(13, 58, 48, .08);
  --vt-focus-ring: 0 0 0 4px rgba(198, 160, 82, .3);

  --vt-r-lg: 16px; --vt-r: 12px; --vt-r-md: 8px; --vt-r-sm: 6px;
  --vt-mint-ink: #245A46; --vt-coral-ink: #8A3232;
}

/* ---------- ชุดฟอนต์ (หัวข้อ + เนื้อหา เปลี่ยนพร้อมกันทั้งหน้า) ----------
   แบบ 1 ไม่มี attribute = Mali + Sarabun · --font-family คือตัวแปรเดิมของ member/index/province_detail */
html[data-vt-font="plain"] {
  --vt-font: 'Sarabun', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --vt-font-head: 'Sarabun', sans-serif;
  --font-family: var(--vt-font);
}
html[data-vt-font="looped"] {
  --vt-font: 'Noto Sans Thai Looped', 'Sarabun', sans-serif;
  --vt-font-head: 'Noto Serif Thai', 'Sarabun', serif;
  --font-family: var(--vt-font);
}
html[data-vt-font="luxe"] {
  --vt-font: 'Anuphan', 'Sarabun', sans-serif;
  --vt-font-head: 'Trirong', 'Sarabun', serif;
  --font-family: var(--vt-font);
}

/* ---------- ขนาดตัวอักษร: ย่อ/ขยายเฉพาะพื้นที่เนื้อหา (CSS ส่วนใหญ่เป็น px) ---------- */
html[data-vt-size="s"] .app-content > .content-wrapper > .content-body,
html[data-vt-size="s"] .vt-shell { zoom: .93; }
html[data-vt-size="l"] .app-content > .content-wrapper > .content-body,
html[data-vt-size="l"] .vt-shell { zoom: 1.08; }
html[data-vt-size="xl"] .app-content > .content-wrapper > .content-body,
html[data-vt-size="xl"] .vt-shell { zoom: 1.16; }

/* ---------- navbar & sidebar: แทนค่าสีตายตัวของ vstar-theme.css (PASS 5) ---------- */
html.vt-theme[data-vt-tone] .header-navbar-shadow {
  background: linear-gradient(180deg, var(--vt-cream) 44%, transparent) !important;
}

/* ปกติ (เดิม): เมนูข้างเป็นครีมเข้มกว่าพื้นหน้าเว็บเล็กน้อย ให้เห็นขอบเขตชัด
   เมนูที่เลือกเป็นการ์ดกระดาษสว่างลอยขึ้นจากพื้นเมนู */
html.vt-theme:not([data-vt-tone]) body .main-menu.main-menu {
  background: linear-gradient(180deg, #F4E8D8 0%, #EFE0CD 100%) !important;
  border-right: 1px solid #E6D3BC !important;
}
html.vt-theme:not([data-vt-tone]) body .main-menu.main-menu .navbar-header { border-bottom-color: #E6D3BC !important; }
html.vt-theme:not([data-vt-tone]) body .main-menu.main-menu .navigation li:hover:not(.active) > a,
html.vt-theme:not([data-vt-tone]) body .main-menu.main-menu .navigation .menu-content li:hover:not(.active) a { background: rgba(255, 250, 243, .7) !important; }
html.vt-theme:not([data-vt-tone]) body .main-menu.main-menu .navigation > li.has-sub.open,
html.vt-theme:not([data-vt-tone]) body .main-menu.main-menu .navigation > li.has-sub.sidebar-group-active { background: rgba(255, 250, 243, .45) !important; }
html.vt-theme:not([data-vt-tone]) body .main-menu.main-menu .navigation > li.active > a,
html.vt-theme:not([data-vt-tone]) body .main-menu.main-menu .navigation .menu-content li.active > a,
html.vt-theme:not([data-vt-tone]) body .main-menu.main-menu .navigation .menu-content li.active a {
  background: var(--vt-paper) !important;
}

/* แบบ 2 / แบบ 6: เมนูข้างเทาฟ้า (เข้มกว่าพื้นหน้าเว็บเล็กน้อย) ปุ่มที่เลือกเป็นการ์ดขาว ตัวอักษรฟ้า */
html.vt-theme:is([data-vt-tone="light"], [data-vt-tone="dark"]) body .main-menu.main-menu {
  background: #E4E8EF !important;
  border-right: 1px solid #D6DCE6 !important;
  box-shadow: none !important;
}
html.vt-theme:is([data-vt-tone="light"], [data-vt-tone="dark"]) body .main-menu.main-menu .navbar-header { border-bottom-color: var(--vt-line) !important; }
html.vt-theme:is([data-vt-tone="light"], [data-vt-tone="dark"]) body .main-menu.main-menu .navbar-header .brand-text,
html.vt-theme:is([data-vt-tone="light"], [data-vt-tone="dark"]) body .main-menu.main-menu .navbar-header h2 { color: var(--vt-peach-d) !important; font-family: var(--vt-font-head) !important; }
html.vt-theme:is([data-vt-tone="light"], [data-vt-tone="dark"]) body .main-menu.main-menu .navigation li a,
html.vt-theme:is([data-vt-tone="light"], [data-vt-tone="dark"]) body .main-menu.main-menu .navigation li a span { color: var(--vt-ink) !important; }
html.vt-theme:is([data-vt-tone="light"], [data-vt-tone="dark"]) body .main-menu.main-menu .navigation li:hover:not(.active) > a,
html.vt-theme:is([data-vt-tone="light"], [data-vt-tone="dark"]) body .main-menu.main-menu .navigation .menu-content li:hover:not(.active) a { background: var(--vt-cream) !important; }
html.vt-theme:is([data-vt-tone="light"], [data-vt-tone="dark"]) body .main-menu.main-menu .navigation li:hover:not(.active) > a svg,
html.vt-theme:is([data-vt-tone="light"], [data-vt-tone="dark"]) body .main-menu.main-menu .navigation > li.has-sub.open > a svg,
html.vt-theme:is([data-vt-tone="light"], [data-vt-tone="dark"]) body .main-menu.main-menu .navigation > li.has-sub.sidebar-group-active > a svg { color: var(--vt-peach-d) !important; }
html.vt-theme:is([data-vt-tone="light"], [data-vt-tone="dark"]) body .main-menu.main-menu .navigation > li.has-sub.open,
html.vt-theme:is([data-vt-tone="light"], [data-vt-tone="dark"]) body .main-menu.main-menu .navigation > li.has-sub.sidebar-group-active { background: var(--vt-cream) !important; }
html.vt-theme:is([data-vt-tone="light"], [data-vt-tone="dark"]) body .main-menu.main-menu .navigation > li.active > a,
html.vt-theme:is([data-vt-tone="light"], [data-vt-tone="dark"]) body .main-menu.main-menu .navigation .menu-content li.active > a,
html.vt-theme:is([data-vt-tone="light"], [data-vt-tone="dark"]) body .main-menu.main-menu .navigation .menu-content li.active a {
  background: var(--vt-paper) !important; box-shadow: var(--vt-clay-sm) !important;
}
html.vt-theme:is([data-vt-tone="light"], [data-vt-tone="dark"]) body .main-menu.main-menu .navigation > li.active > a span,
html.vt-theme:is([data-vt-tone="light"], [data-vt-tone="dark"]) body .main-menu.main-menu .navigation .menu-content li.active a span { color: #1D45D6 !important; }
html.vt-theme:is([data-vt-tone="light"], [data-vt-tone="dark"]) body .main-menu.main-menu .navigation > li.active > a svg,
html.vt-theme:is([data-vt-tone="light"], [data-vt-tone="dark"]) body .main-menu.main-menu .navigation .menu-content li.active a svg { color: var(--vt-peach-d) !important; }
html.vt-theme:is([data-vt-tone="light"], [data-vt-tone="dark"]) body .main-menu.main-menu .navigation > li > a:after { color: var(--vt-line-2) !important; }

/* ลุ่มลึก: เมนูข้างเขียวมรกตเข้ม ตัวอักษรงาช้าง ไอคอนทอง */
html.vt-theme[data-vt-tone="deep"] body .main-menu.main-menu {
  background: #0D3A30 !important;
  border-right: 1px solid #0A2E26 !important;
  box-shadow: none !important;
  color: #E4EBE5 !important;
}
html.vt-theme[data-vt-tone="deep"] body .main-menu.main-menu .navbar-header { border-bottom: 1px solid rgba(215, 178, 102, .25) !important; }
html.vt-theme[data-vt-tone="deep"] body .main-menu.main-menu .navbar-header .brand-text,
html.vt-theme[data-vt-tone="deep"] body .main-menu.main-menu .navbar-header h2 { color: #E9CF95 !important; -webkit-text-fill-color: #E9CF95 !important; font-family: var(--vt-font-head) !important; }
html.vt-theme[data-vt-tone="deep"] body .main-menu.main-menu .modern-nav-toggle,
html.vt-theme[data-vt-tone="deep"] body .main-menu.main-menu .modern-nav-toggle svg { color: #C9D6CD !important; }
html.vt-theme[data-vt-tone="deep"] body .main-menu.main-menu .navigation .navigation-header,
html.vt-theme[data-vt-tone="deep"] body .main-menu.main-menu .navigation .navigation-header span { color: #D7B266 !important; }
html.vt-theme[data-vt-tone="deep"] body .main-menu.main-menu .navigation li a,
html.vt-theme[data-vt-tone="deep"] body .main-menu.main-menu .navigation .menu-content li a,
html.vt-theme[data-vt-tone="deep"] body .main-menu.main-menu .navigation li a span { color: #E4EBE5 !important; }
html.vt-theme[data-vt-tone="deep"] body .main-menu.main-menu .navigation li a i,
html.vt-theme[data-vt-tone="deep"] body .main-menu.main-menu .navigation li a svg { color: #D7B266 !important; }
html.vt-theme[data-vt-tone="deep"] body .main-menu.main-menu .navigation li:hover:not(.active) > a,
html.vt-theme[data-vt-tone="deep"] body .main-menu.main-menu .navigation .menu-content li:hover:not(.active) a { background: rgba(255, 255, 255, .07) !important; }
html.vt-theme[data-vt-tone="deep"] body .main-menu.main-menu .navigation li:hover:not(.active) > a svg { color: #E9CF95 !important; }
html.vt-theme[data-vt-tone="deep"] body .main-menu.main-menu .navigation > li.has-sub.open,
html.vt-theme[data-vt-tone="deep"] body .main-menu.main-menu .navigation > li.has-sub.sidebar-group-active { background: rgba(255, 255, 255, .05) !important; }
html.vt-theme[data-vt-tone="deep"] body .main-menu.main-menu .navigation > li.has-sub.open > a svg,
html.vt-theme[data-vt-tone="deep"] body .main-menu.main-menu .navigation > li.has-sub.sidebar-group-active > a svg { color: #E9CF95 !important; }
html.vt-theme[data-vt-tone="deep"] body .main-menu.main-menu .navigation > li.active > a,
html.vt-theme[data-vt-tone="deep"] body .main-menu.main-menu .navigation .menu-content li.active > a,
html.vt-theme[data-vt-tone="deep"] body .main-menu.main-menu .navigation .menu-content li.active a {
  background: #FFFDF8 !important; box-shadow: inset 0 0 0 1px #D7B266 !important;
}
html.vt-theme[data-vt-tone="deep"] body .main-menu.main-menu .navigation > li.active > a span,
html.vt-theme[data-vt-tone="deep"] body .main-menu.main-menu .navigation .menu-content li.active a span { color: #0D3A30 !important; }
html.vt-theme[data-vt-tone="deep"] body .main-menu.main-menu .navigation > li.active > a svg,
html.vt-theme[data-vt-tone="deep"] body .main-menu.main-menu .navigation .menu-content li.active a svg { color: #765714 !important; }
html.vt-theme[data-vt-tone="deep"] body .main-menu.main-menu .navigation > li > a:after { color: rgba(228, 235, 229, .45) !important; }
html.vt-theme[data-vt-tone="deep"] .sidenav-overlay.show { background: rgba(13, 58, 48, .4) !important; }

/* แบบ 4 ชมพูหรู: เมนูข้างไวน์แดง ตัวอักษรชมพูนวล ไอคอนทองชมพู */
html.vt-theme[data-vt-tone="pink"] body .main-menu.main-menu {
  background: #43192D !important;
  border-right: 1px solid #36121F !important;
  box-shadow: none !important;
  color: #F6E6EA !important;
}
html.vt-theme[data-vt-tone="pink"] body .main-menu.main-menu .navbar-header { border-bottom: 1px solid rgba(227, 180, 151, .25) !important; }
html.vt-theme[data-vt-tone="pink"] body .main-menu.main-menu .navbar-header .brand-text,
html.vt-theme[data-vt-tone="pink"] body .main-menu.main-menu .navbar-header h2 { color: #F2D3C2 !important; -webkit-text-fill-color: #F2D3C2 !important; font-family: var(--vt-font-head) !important; }
html.vt-theme[data-vt-tone="pink"] body .main-menu.main-menu .modern-nav-toggle,
html.vt-theme[data-vt-tone="pink"] body .main-menu.main-menu .modern-nav-toggle svg { color: #E9CFD7 !important; }
html.vt-theme[data-vt-tone="pink"] body .main-menu.main-menu .navigation .navigation-header,
html.vt-theme[data-vt-tone="pink"] body .main-menu.main-menu .navigation .navigation-header span { color: #E3B497 !important; }
html.vt-theme[data-vt-tone="pink"] body .main-menu.main-menu .navigation li a,
html.vt-theme[data-vt-tone="pink"] body .main-menu.main-menu .navigation .menu-content li a,
html.vt-theme[data-vt-tone="pink"] body .main-menu.main-menu .navigation li a span { color: #F6E6EA !important; }
html.vt-theme[data-vt-tone="pink"] body .main-menu.main-menu .navigation li a i,
html.vt-theme[data-vt-tone="pink"] body .main-menu.main-menu .navigation li a svg { color: #E3B497 !important; }
html.vt-theme[data-vt-tone="pink"] body .main-menu.main-menu .navigation li:hover:not(.active) > a,
html.vt-theme[data-vt-tone="pink"] body .main-menu.main-menu .navigation .menu-content li:hover:not(.active) a { background: rgba(255, 255, 255, .08) !important; }
html.vt-theme[data-vt-tone="pink"] body .main-menu.main-menu .navigation li:hover:not(.active) > a svg,
html.vt-theme[data-vt-tone="pink"] body .main-menu.main-menu .navigation > li.has-sub.open > a svg,
html.vt-theme[data-vt-tone="pink"] body .main-menu.main-menu .navigation > li.has-sub.sidebar-group-active > a svg { color: #F2D3C2 !important; }
html.vt-theme[data-vt-tone="pink"] body .main-menu.main-menu .navigation > li.has-sub.open,
html.vt-theme[data-vt-tone="pink"] body .main-menu.main-menu .navigation > li.has-sub.sidebar-group-active { background: rgba(255, 255, 255, .05) !important; }
html.vt-theme[data-vt-tone="pink"] body .main-menu.main-menu .navigation > li.active > a,
html.vt-theme[data-vt-tone="pink"] body .main-menu.main-menu .navigation .menu-content li.active > a,
html.vt-theme[data-vt-tone="pink"] body .main-menu.main-menu .navigation .menu-content li.active a {
  background: #FFFDFD !important; box-shadow: inset 0 0 0 1px #E3B497 !important;
}
html.vt-theme[data-vt-tone="pink"] body .main-menu.main-menu .navigation > li.active > a span,
html.vt-theme[data-vt-tone="pink"] body .main-menu.main-menu .navigation .menu-content li.active a span { color: #43192D !important; }
html.vt-theme[data-vt-tone="pink"] body .main-menu.main-menu .navigation > li.active > a svg,
html.vt-theme[data-vt-tone="pink"] body .main-menu.main-menu .navigation .menu-content li.active a svg { color: #9E2F5B !important; }
html.vt-theme[data-vt-tone="pink"] body .main-menu.main-menu .navigation > li > a:after { color: rgba(246, 230, 234, .45) !important; }
html.vt-theme[data-vt-tone="pink"] .sidenav-overlay.show { background: rgba(67, 25, 45, .4) !important; }

/* แบบ 5 YouTube: เมนูข้างเทาอ่อน (เข้มกว่าพื้นหน้าเว็บเล็กน้อย) ปุ่มที่เลือกเป็นการ์ดขาว ไอคอนแดง */
html.vt-theme[data-vt-tone="yt"] body .main-menu.main-menu {
  background: #EFEFEF !important;
  border-right: 1px solid #E2E2E2 !important;
  box-shadow: none !important;
}
html.vt-theme[data-vt-tone="yt"] body .main-menu.main-menu .navbar-header { border-bottom-color: #E2E2E2 !important; }
html.vt-theme[data-vt-tone="yt"] body .main-menu.main-menu .navbar-header .brand-text,
html.vt-theme[data-vt-tone="yt"] body .main-menu.main-menu .navbar-header h2 { color: #0F0F0F !important; -webkit-text-fill-color: #0F0F0F !important; font-family: var(--vt-font-head) !important; }
html.vt-theme[data-vt-tone="yt"] body .main-menu.main-menu .navigation li a,
html.vt-theme[data-vt-tone="yt"] body .main-menu.main-menu .navigation li a span,
html.vt-theme[data-vt-tone="yt"] body .main-menu.main-menu .navigation li a i,
html.vt-theme[data-vt-tone="yt"] body .main-menu.main-menu .navigation li a svg { color: #0F0F0F !important; }
html.vt-theme[data-vt-tone="yt"] body .main-menu.main-menu .navigation li:hover:not(.active) > a,
html.vt-theme[data-vt-tone="yt"] body .main-menu.main-menu .navigation .menu-content li:hover:not(.active) a { background: #E5E5E5 !important; }
html.vt-theme[data-vt-tone="yt"] body .main-menu.main-menu .navigation > li.has-sub.open,
html.vt-theme[data-vt-tone="yt"] body .main-menu.main-menu .navigation > li.has-sub.sidebar-group-active { background: rgba(255, 255, 255, .5) !important; }
html.vt-theme[data-vt-tone="yt"] body .main-menu.main-menu .navigation > li.has-sub.open > a svg,
html.vt-theme[data-vt-tone="yt"] body .main-menu.main-menu .navigation > li.has-sub.sidebar-group-active > a svg { color: #CC0000 !important; }
html.vt-theme[data-vt-tone="yt"] body .main-menu.main-menu .navigation > li.active > a,
html.vt-theme[data-vt-tone="yt"] body .main-menu.main-menu .navigation .menu-content li.active > a,
html.vt-theme[data-vt-tone="yt"] body .main-menu.main-menu .navigation .menu-content li.active a {
  background: #FFFFFF !important; box-shadow: 0 1px 2px rgba(0, 0, 0, .08) !important;
}
html.vt-theme[data-vt-tone="yt"] body .main-menu.main-menu .navigation > li.active > a span,
html.vt-theme[data-vt-tone="yt"] body .main-menu.main-menu .navigation .menu-content li.active a span { color: #0F0F0F !important; }
html.vt-theme[data-vt-tone="yt"] body .main-menu.main-menu .navigation > li.active > a svg,
html.vt-theme[data-vt-tone="yt"] body .main-menu.main-menu .navigation .menu-content li.active a svg { color: #CC0000 !important; }

/* ---------- แบบ 6 โทนเทาเข้ม ----------
   หน้าเดิมยังมีสีที่เขียนตายตัวหลายพันจุด จึงกลับสีทั้งหน้า (ทุกกล่องมืดพร้อมกัน ไม่มีกล่องขาวหลุด)
   contrast(.8) ทำให้มืดสุดเป็นเทาถ่าน (#1A) และสว่างสุดเป็นเทาอ่อน (#E6) ไม่ดำสนิท/ขาวจ้า
   ค่าก่อนกลับสี: พื้นหน้าเว็บ #E3E7EB → เทาถ่าน #2C2E31 · การ์ด #FAFAFB → #1D1D1E · เมนูข้าง #FFF → #1A1A1A
   รูปภาพ วิดีโอ และ canvas (ตัวอย่างเกียรติบัตร กราฟ) กลับสีคืนเป็นสีจริง · ตอนพิมพ์ปิดการกลับสี */
html[data-vt-tone="dark"] {
  --vt-cream: #E3E7EB; --vt-paper: #FAFAFB; --vt-line: #D3D8DE; --vt-line-2: #BEC5CE;
  background: #FFFFFF;
  filter: invert(1) hue-rotate(180deg) contrast(.8);
}
html[data-vt-tone="dark"] img,
html[data-vt-tone="dark"] video,
html[data-vt-tone="dark"] picture,
html[data-vt-tone="dark"] canvas,
html[data-vt-tone="dark"] iframe,
html[data-vt-tone="dark"] [style*="background-image"],
html[data-vt-tone="dark"] .vt-look__sw {
  /* ลำดับกลับกันกับของ <html> เพื่อให้ภาพกลับเป็นสีจริง (สีสดมากจะซีดลงเล็กน้อย) */
  filter: contrast(1.25) hue-rotate(180deg) invert(1);
}
@media print {
  html[data-vt-tone="dark"],
  html[data-vt-tone="dark"] img,
  html[data-vt-tone="dark"] video,
  html[data-vt-tone="dark"] picture,
  html[data-vt-tone="dark"] canvas,
  html[data-vt-tone="dark"] iframe,
  html[data-vt-tone="dark"] [style*="background-image"] { filter: none; }
}
/* เมนูข้างของแบบ 6: เข้มกว่าพื้นหน้าเว็บเล็กน้อย (ค่าก่อนกลับสี = สว่างกว่า) ปุ่มที่เลือกเป็นเทาอ่อนลง */
html.vt-theme[data-vt-tone="dark"] body .main-menu.main-menu {
  background: #FFFFFF !important;
  border-right: 1px solid #E3E7EB !important;
}
html.vt-theme[data-vt-tone="dark"] body .main-menu.main-menu .navigation li:hover:not(.active) > a,
html.vt-theme[data-vt-tone="dark"] body .main-menu.main-menu .navigation .menu-content li:hover:not(.active) a { background: #EEF0F3 !important; }
html.vt-theme[data-vt-tone="dark"] body .main-menu.main-menu .navigation > li.has-sub.open,
html.vt-theme[data-vt-tone="dark"] body .main-menu.main-menu .navigation > li.has-sub.sidebar-group-active { background: #F4F5F7 !important; }
html.vt-theme[data-vt-tone="dark"] body .main-menu.main-menu .navigation > li.active > a,
html.vt-theme[data-vt-tone="dark"] body .main-menu.main-menu .navigation .menu-content li.active > a,
html.vt-theme[data-vt-tone="dark"] body .main-menu.main-menu .navigation .menu-content li.active a { background: #DDE2E8 !important; box-shadow: none !important; }

/* ---------- กล่อง "ขั้นตอนการทำงาน" ในเมนูข้าง (cw_steps_zone.css) ให้สีไปทางเดียวกับโทน ---------- */
html[data-vt-tone] #cwSteps {
  --z-num-bg: var(--vt-peach-s); --z-num-ring: var(--vt-peach);
  --z-num-ink: color-mix(in srgb, var(--vt-peach-d) 85%, #000);
  --z-shadow: rgba(16, 24, 40, .22);
}
html[data-vt-tone="deep"] #cwSteps, html[data-vt-tone="pink"] #cwSteps { box-shadow: 0 8px 20px -12px rgba(0, 0, 0, .55) !important; }

/* ---------- เมนู "ปรับหน้าตา" (สร้างโดย vstar-common.js) ---------- */
.vt-look { position: relative; }
.vt-look__btn {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--vt-line-2, #E3D0B8);
  background: var(--vt-paper, #FFFAF3); color: var(--vt-ink, #4A3A2E);
  display: grid; place-items: center; cursor: pointer; margin-right: 8px;
}
.vt-look__btn svg { width: 20px; height: 20px; }
.vt-look__btn:hover { background: var(--vt-cream, #FBF3E8); }
.vt-look__btn:focus-visible { outline: 3px solid var(--vt-sage-d, #4A7560); outline-offset: 2px; }
.vt-look__panel {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 1050; width: 300px; max-width: calc(100vw - 24px);
  padding: 16px; border-radius: var(--vt-r, 24px); background: var(--vt-paper, #FFFAF3); color: var(--vt-ink, #4A3A2E);
  border: 1px solid var(--vt-line, #EEDFCB); box-shadow: var(--vt-clay-lg);
  font-family: var(--vt-font); font-size: 15px; line-height: 1.5;
}
.vt-look__panel[hidden] { display: none; }
.vt-look__title { font-family: var(--vt-font-head); font-weight: 700; font-size: 16px; margin: 0 0 10px; }
.vt-look__group { border: 0; margin: 0 0 14px; padding: 0; }
.vt-look__group:last-of-type { margin-bottom: 8px; }
.vt-look__group legend { font-size: 14px; font-weight: 600; color: var(--vt-ink-2, #75604F); margin-bottom: 6px; float: none; width: auto; padding: 0; }
.vt-look__opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.vt-look__opts--2 { grid-template-columns: repeat(2, 1fr); }
.vt-look__opts--4 { grid-template-columns: repeat(4, 1fr); }
.vt-look__opts--4 .vt-look__opt { padding: 6px 2px; white-space: nowrap; }
.vt-look__opt {
  min-height: 44px; padding: 6px 8px; border-radius: var(--vt-r-md, 18px); cursor: pointer;
  border: 1.5px solid var(--vt-line-2, #E3D0B8); background: var(--vt-paper, #FFFAF3); color: var(--vt-ink, #4A3A2E);
  font: 500 14px/1.4 var(--vt-font); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center;
}
.vt-look__opt:hover { border-color: var(--vt-ink-2, #75604F); }
.vt-look__opt[aria-checked="true"] { border-color: var(--vt-peach-d, #B04F2C); box-shadow: inset 0 0 0 1px var(--vt-peach-d, #B04F2C); font-weight: 700; }
.vt-look__opt:focus-visible { outline: 3px solid var(--vt-sage-d, #4A7560); outline-offset: 2px; }
.vt-look__sw { display: flex; gap: 3px; }
.vt-look__sw i { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.vt-look__reset { border: 0; background: none; padding: 4px 0; color: var(--vt-ink-2, #75604F); font: 500 14px var(--vt-font); text-decoration: underline; cursor: pointer; }
@media (max-width: 575.98px) {
  .vt-look__panel { position: fixed; left: 12px; right: 12px; top: 72px; width: auto; }
}