/* ธีมของเว็บโพย ย้ายมาจาก <style> ใน site/index.html เมื่อ 23 ต.ค. 2026 (RM-17) ให้ site/index.html กับ site/plan/index.html ใช้ร่วมกัน
   ต้องลิงก์ต่อจาก CSS bundle (index-*.css) และไม่อยู่ใน @layer จึงชนะ utility ของ Tailwind ได้โดยไม่ต้องเพิ่ม specificity เหมือนตอนเป็น <style> */
/* ขยายเฉพาะขนาดฟอนต์ (ไม่แตะระยะห่าง/ขนาดปุ่ม-การ์ด) — คูณ token ฟอนต์ของ Tailwind ทั้ง 4 ขนาดด้วย --font-scale ตัวเดียว ปรับเลขนี้เพื่อย่อ/ขยายฟอนต์ (1 = เท่าเดิม, 1.125 = +12.5%) */
:root {
  --font-scale: 1.2;
  --text-xs: calc(0.75rem * var(--font-scale));
  --text-sm: calc(0.875rem * var(--font-scale));
  --text-base: calc(1rem * var(--font-scale));
  --text-lg: calc(1.125rem * var(--font-scale));
}
/* ข้อความที่กำหนดเป็น px ตายตัว (เช่น "ดูเพิ่ม", ป้ายประเภททีม, ชิปต่าง ๆ) ไม่ผูกกับ token ด้านบน จึง override ให้คูณ --font-scale เหมือนกัน — selector [class*=] จับได้ทั้งแบบปกติและแบบ sm:/lg: */
[class*="text-[8px]"]  { font-size: calc(8px  * var(--font-scale)); }
[class*="text-[9px]"]  { font-size: calc(9px  * var(--font-scale)); }
[class*="text-[10px]"] { font-size: calc(10px * var(--font-scale)); }
[class*="text-[11px]"] { font-size: calc(11px * var(--font-scale)); }
[class*="text-[12px]"] { font-size: calc(12px * var(--font-scale)); }
[class*="text-[13px]"] { font-size: calc(13px * var(--font-scale)); }
[class*="text-[14px]"] { font-size: calc(14px * var(--font-scale)); }
[class*="text-[15px]"] { font-size: calc(15px * var(--font-scale)); }
/* footer คงขนาดเดิม ไม่ขยายตาม scale (ตั้ง scale ภายในกลับเป็น 1 ครอบทั้ง text-[11px] และ sm:text-xs ของ footer) */
#contact { --font-scale: 1; }
/* ธีมล็อบบี้ Guild War (RM-08 user เลือก 22 ต.ค. 2026 จากหน้าเปรียบเทียบ 4 แบบ)
   แบบอ้างอิงคือหน้าจอจริงในคลิปของช่อง Acid Aqua ล็อบบี้ VW9fF93XpaA เฟรม 11, หน้าต่างทีมป้องกันพันธมิตร เฟรม 13, หน้าจัดทีม 3x3Qaj7bmzU เฟรม 13
   รูปทั้งหมดมาจากไฟล์เกม สร้างด้วย theme-preview/build-assets.py */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, rgba(8, 10, 20, 0.35), rgba(8, 10, 20, 0.2) 40%, rgba(8, 10, 20, 0.7)),
    url("/assets/gw-lobby.webp") center top / cover no-repeat,
    #0b0e1a;
}
/* ทำ wrapper หน้าหลักโปร่งใสเพื่อให้เห็นพื้นหลัง (การ์ดเนื้อหายังทึบเหมือนเดิม) */
.min-h-screen.bg-background { background-color: transparent !important; }
/* logo บนหัวเว็บ (logo เป็นสีขาว ใช้โทนมืดธีมเดียว) */
.brand-logo { height: 40px; width: auto; display: block; align-self: center; }
/* จัดคำว่า 1Turn ให้อยู่กึ่งกลางหัวเว็บ logo คงอยู่ซ้าย ปุ่มคงอยู่ขวา */
.app-header-bar { position: relative; }
.brand-name { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; }
/* ล็อกธีมเดียว — ซ่อนปุ่มสลับโหมดสว่าง/มืดบนหัวเว็บ */
button[aria-label^="Switch to "] { display: none !important; }
/* สีพื้นผิวโทน Guild War ทีมศัตรูเป็นฝั่งแดง ทีมสู้ของเราเป็นฝั่งน้ำเงิน ตามล็อบบี้ในเกม */
.dark {
  --gw-gold: #f3d38a;
  --gw-gold-2: #d6a54c;
  --gw-ink: #2b1d05;
  --gw-cyan: #7fd6ff;
  --gw-line: rgba(226, 222, 240, 0.28);
  --background: #0b0e1a;
  --card: rgba(16, 19, 34, 0.8);
  --popover: rgba(20, 22, 34, 0.97);
  --secondary: rgba(255, 255, 255, 0.08);
  --secondary-foreground: oklch(98.5% 0 0);
  --muted: rgba(255, 255, 255, 0.06);
  --muted-foreground: #b9bccb;
  --accent: rgba(243, 211, 138, 0.14);
  --accent-foreground: oklch(98.5% 0 0);
  --border: rgba(226, 222, 240, 0.16);
  --input: rgba(255, 255, 255, 0.2);
  --ring: #f3d38a;
  --sidebar: rgba(16, 19, 34, 0.8);
  --sidebar-accent: rgba(255, 255, 255, 0.08);
  --sidebar-border: rgba(226, 222, 240, 0.16);
  --enemy: #e0525c;
  --enemy-subtle: #4a1218;
  --counter: #5b8fe8;
  --counter-subtle: #12264d;
}
/* หัวเว็บ แถบแบ่งน้ำเงินกับแดงแบบแถบบนของแผนที่สนามรบ ปิดด้วยเส้นทอง
   (แถวดาวใต้หัวเว็บเอาออกแล้วใน RM-10 เพราะหน้าตาไม่เข้ากับธีม) */
header.sticky {
  background: linear-gradient(90deg, rgba(38, 72, 150, 0.88) 0%, rgba(14, 16, 28, 0.9) 38%, rgba(14, 16, 28, 0.9) 62%, rgba(140, 30, 40, 0.88) 100%);
  border-bottom: 1px solid rgba(243, 211, 138, 0.4);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}
.brand-name { color: #f6ecd2; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7); }
/* ช่องค้นหาเป็นแคปซูลมืดขอบขาวแบบปุ่มรองในล็อบบี้ */
[data-slot="input"] {
  border-radius: 9999px;
  background: rgba(8, 10, 18, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.5);
}
[data-slot="input"]:focus {
  border-color: var(--gw-gold);
  box-shadow: 0 0 0 2px rgba(243, 211, 138, 0.25);
}
/* ชิปตัวกรองที่เลือกอยู่เป็นแคปซูลทองแบบปุ่ม "เข้าสมรภูมิ" */
[role="group"] [data-slot="badge"] { border-radius: 9999px; }
[role="group"] [data-slot="badge"][data-variant="default"] {
  background: linear-gradient(180deg, #fbe7ad 0%, var(--gw-gold) 45%, var(--gw-gold-2) 100%);
  color: var(--gw-ink);
  border: 1px solid #fff2c8;
  box-shadow: 0 0 10px rgba(243, 211, 138, 0.35);
}
/* การ์ดเป็นคอลัมน์ขอบบางแบบหน้าจัดทีม มีเพชรเล็กกลางขอบบนกับขอบล่าง */
[data-slot="card"] {
  position: relative;
  overflow: visible;
  background: linear-gradient(180deg, rgba(24, 26, 44, 0.86), rgba(12, 14, 26, 0.86));
  border: 1px solid var(--gw-line);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(243, 211, 138, 0.18), 0 4px 18px rgba(0, 0, 0, 0.35);
  --tw-ring-shadow: 0 0 #0000;
}
[data-slot="card"]::before,
[data-slot="card"]::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 9px;
  height: 9px;
  background: #1a1c2c;
  border: 1px solid rgba(243, 211, 138, 0.7);
  transform: translateX(-50%) rotate(45deg);
  pointer-events: none;
  z-index: 1;
}
[data-slot="card"]::before { top: -5px; }
[data-slot="card"]::after { bottom: -5px; }
[data-slot="card"][role="button"]:hover { border-color: rgba(243, 211, 138, 0.55); }
/* กล่องทีม ฝั่งศัตรูโทนแดง ฝั่งเราโทนน้ำเงิน (class เดิมใน bundle มีค่า /30 จึงต้อง !important) */
[class*="bg-enemy-subtle"] {
  background: linear-gradient(90deg, rgba(110, 22, 32, 0.42), rgba(52, 12, 18, 0.32)) !important;
  border-color: rgba(224, 82, 92, 0.38) !important;
}
[class*="bg-counter-subtle"] {
  background: linear-gradient(90deg, rgba(22, 46, 104, 0.45), rgba(10, 22, 52, 0.32)) !important;
  border-color: rgba(91, 143, 232, 0.4) !important;
}
/* กล่องรายละเอียดพื้นมืดแบบหน้าต่างข้อมูลอัศวินในเกม (คลิป 3x3Qaj7bmzU เฟรม 20) มีดาวเพชรบนหัว
   RM-08 รอบแก้ 23 ต.ค. เดิมเป็นครีม #ece3cf แบบหน้าต่างทีมป้องกันพันธมิตร มี feedback ว่าแสบตา
   user เลือกแบบนี้จากของจริง 3 แบบในหน้าเปรียบเทียบ (theme-preview/dialog-*.css)
   ตั้งตัวแปรสีใหม่ในกล่องนี้ ตัวหนังสือทุกตัวที่ใช้สีจากตัวแปรจึงเปลี่ยนตาม */
[data-slot="dialog-overlay"] {
  background: rgba(4, 5, 10, 0.72);
  backdrop-filter: blur(2px);
}
[data-slot="dialog-content"] {
  --background: #2a2927;
  --foreground: #ece6da;
  --card: #211f1e;
  --card-foreground: #ece6da;
  --popover: #2a2927;
  --popover-foreground: #ece6da;
  --muted: rgba(255, 255, 255, 0.06);
  --muted-foreground: #b8b1a4;
  --secondary: rgba(255, 255, 255, 0.1);
  --secondary-foreground: #ece6da;
  --accent: rgba(243, 211, 138, 0.14);
  --accent-foreground: #ece6da;
  --border: rgba(236, 230, 218, 0.16);
  --input: rgba(236, 230, 218, 0.25);
  --enemy: #e0525c;
  --counter: #5b8fe8;
  color-scheme: dark; /* แถบเลื่อนในกล่องเป็นสีมืด ไม่งั้นเบราว์เซอร์วาดรางสีขาวด้านขวา */
  background: var(--background);
  color: var(--foreground);
  border: 1px solid #8a857c;
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 18px 48px rgba(0, 0, 0, 0.6);
  --tw-ring-shadow: 0 0 #0000;
  overflow: visible;
}
/* ช่องกรอกในกล่องเข้มกว่าพื้นกล่องหนึ่งระดับ ไม่ใช้แคปซูลของหน้าหลัก */
[data-slot="dialog-content"] [data-slot="input"],
[data-slot="dialog-content"] textarea {
  background: #1a1918;
  border: 1px solid rgba(236, 230, 218, 0.3);
  box-shadow: none;
  color: #ece6da;
}
[data-slot="dialog-content"] [class*="bg-enemy-subtle"] {
  background: linear-gradient(90deg, rgba(224, 82, 92, 0.18), rgba(224, 82, 92, 0.06)) !important;
  border-color: rgba(224, 82, 92, 0.35) !important;
}
[data-slot="dialog-content"] [class*="bg-counter-subtle"] {
  background: linear-gradient(90deg, rgba(91, 143, 232, 0.18), rgba(91, 143, 232, 0.06)) !important;
  border-color: rgba(91, 143, 232, 0.35) !important;
}
[data-slot="dialog-content"]::before {
  content: "";
  position: absolute;
  top: -24px;
  left: 50%;
  width: 46px;
  height: 46px;
  transform: translateX(-50%);
  background: url("/assets/popup-star.webp") center / contain no-repeat;
  z-index: 2;
  pointer-events: none;
}
/* แถบหัวเข้มกว่าเนื้อกล่องหนึ่งระดับ ใช้เฉพาะหัวแบบเต็มขอบที่มีเส้นใต้ (กล่องรายละเอียดทีมสู้ กล่องแก้ไข picker)
   หน้าต่างเล็กอย่างเข้าโหมดผู้ดูแลมีหัวอยู่ใน padding ถ้าทาสีจะเป็นกล่องลอย จึงคงพื้นเดียวกับเนื้อกล่อง */
[data-slot="dialog-header"][class*="border-b"] {
  background: #1d1c1b;
  color: #f3e9cf;
  border-bottom: 1px solid rgba(236, 230, 218, 0.18);
  border-radius: 9px 9px 0 0;
  --muted-foreground: #c9bfa6;
}
[data-slot="dialog-header"][class*="border-b"] [data-slot="dialog-title"] { color: #f6ecd2; }
[data-slot="dialog-header"][class*="border-b"] button,
[data-slot="dialog-header"][class*="border-b"] ~ [data-slot="dialog-close"] { color: #f3e9cf; }
/* การ์ดหลักเป็นกระจกฝ้า ให้พื้นหลังล็อบบี้ซึมผ่านบาง ๆ ดูเป็นฉากเดียวกัน */
[data-slot="card"] {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
/* ทีมกันบ้าน (RM-11 user เลือกแบบ B "ทีมป้องกันพันธมิตร" คู่กับสีขอบการ์ด 23 ต.ค. 2026)
   แบบอ้างอิงคือหน้าต่างทีมป้องกันพันธมิตรในเกม (คลิป VW9fF93XpaA เฟรม 13) ปรับเป็นพื้นมืดชุดเดียวกับกล่องรายละเอียด
   element มาจาก bundle ใช้ attribute data-hdb-* (banner หน้าหลัก) กับ data-hd-* (หน้าทีมกันบ้าน) ไม่มี inline style จึงไม่ต้อง !important
   กลุ่มทดสอบพับด้วย data-hd-open ที่สคริปต์ท้ายไฟล์สลับให้  ต้นฉบับของรอบเปรียบเทียบอยู่ที่ theme-preview/hd-*.css */
[data-home-def-banner] {
  display: flex; align-items: center; gap: 12px; padding: 9px 16px; border-radius: 10px; cursor: pointer;
  color: #f3e9cf;
  background: linear-gradient(180deg, #34322f, #232220);
  border: 1px solid #8a857c;
  box-shadow: inset 0 0 0 1px rgba(214, 165, 76, 0.28), 0 8px 22px rgba(0, 0, 0, 0.45);
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}
[data-home-def-banner]:hover { border-color: #d6a54c; box-shadow: inset 0 0 0 1px rgba(214, 165, 76, 0.5), 0 0 18px rgba(214, 165, 76, 0.22); transform: translateY(-1px); }
[data-home-def-test] { border-color: rgba(201, 194, 178, 0.6); }
[data-hdb-icon] { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex-shrink: 0; border-radius: 999px; color: #d6a54c; background: rgba(214, 165, 76, 0.12); border: 1px solid rgba(214, 165, 76, 0.55); }
[data-hdb-text] { display: flex; align-items: baseline; gap: 10px; min-width: 0; flex: 1; }
[data-hdb-title] { font-weight: 700; font-size: 14.5px; flex-shrink: 0; }
[data-hdb-sub] { font-size: 11px; color: #b8b1a4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
[data-hdb-stats] { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; font-size: 12px; font-weight: 600; }
[data-hdb-stat] { padding: 2px 10px; border-radius: 999px; background: rgba(10, 10, 10, 0.55); color: #ece6da; }
[data-hdb-stat] b { margin-left: 4px; }
[data-hdb-stat="final"] b { color: #f3d38a; }
[data-hdb-stat="test"] b { color: #c9c2b2; }
[data-hdb-testset] { padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; cursor: pointer; background: linear-gradient(180deg, #f6ecd2, #e2cf9f); border: 1px solid #b98d3e; color: #3a2a0c; }
[data-hdb-chev] { color: #d6a54c; }
/* หัวเรื่องของหน้าเป็นชื่อหน้าต่าง กลางจอ มีจุดกับเพชรประดับสองข้างแบบหัวหน้าต่างในเกม */
[data-hd-title] { justify-content: center; gap: 12px; font-size: 16px; color: #f3e9cf; }
[data-hd-title]::before,
[data-hd-title]::after { content: "◦ ◦ ◈"; font-size: 12px; letter-spacing: 3px; color: rgba(236, 230, 218, 0.55); font-weight: 400; }
[data-hd-title]::after { content: "◈ ◦ ◦"; }
[data-hd-title] svg { color: #d6a54c; }
/* โหมดแก้ไขมีป้าย "แตะปุ่มดินสอ..." ต่อท้ายชื่อ บนจอแคบป้ายตกบรรทัดแล้วลายขวาไปต่อท้ายป้าย จึงไม่แสดงลายตอนแก้ไข (RM-12) */
[data-hd-title]:has([data-slot="badge"])::before,
[data-hd-title]:has([data-slot="badge"])::after { content: none; }
/* แถวปุ่มโหมดแก้ไขในหน้ารายละเอียดคอมโบ เดิม shrink-0 ใน parent ที่ justify-end จึงล้นออกซ้ายบนจอแคบ ให้หดแล้วตัดขึ้นบรรทัดใหม่แทน (RM-12 มีมาก่อน RM-11) */
@media (max-width: 640px) {
  main .flex.shrink-0.flex-wrap.justify-end { flex-shrink: 1; min-width: 0; }
}
/* หัวกลุ่มเป็นแถบไล่เทากลางสว่าง ชื่อกลาง ป้ายจำนวนชิดขวา ปุ่มแสดง/ซ่อนชิดซ้าย */
[data-hd-box] { display: flex; flex-direction: column; gap: 14px; }
[data-hd-box] + [data-hd-box] { margin-top: 6px; }
[data-hd-sec] {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 7px 12px; border-radius: 6px;
  font-size: 13.5px; font-weight: 700; color: #f3e9cf;
  background: linear-gradient(90deg, rgba(236, 230, 218, 0.05), rgba(236, 230, 218, 0.17) 50%, rgba(236, 230, 218, 0.05));
}
[data-hd-sec="test"] { color: #d8d2c4; cursor: pointer; user-select: none; }
[data-hd-dot] { width: 7px; height: 7px; flex-shrink: 0; transform: rotate(45deg); background: #d6a54c; }
[data-hd-sec="test"] [data-hd-dot] { background: #9b968c; }
[data-hd-count] { position: absolute; right: 10px; padding: 1px 9px; border-radius: 999px; background: rgba(10, 10, 10, 0.55); color: #ece6da; font-size: 11.5px; font-weight: 600; }
[data-hd-line] { display: none; }
[data-hd-chev] { position: absolute; left: 12px; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: #d8d2c4; }
[data-hd-chev]::before { content: "แสดง"; }
[data-hd-open] [data-hd-chev]::before { content: "ซ่อน"; }
[data-hd-chev]::after { content: ""; width: 6px; height: 6px; margin-top: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 0.2s; }
[data-hd-open] [data-hd-chev]::after { margin-top: 3px; transform: rotate(-135deg); }
[data-hd-box="test"]:not([data-hd-open]) > [data-hd-cards] { display: none; }
/* ปุ่มสลับไฟนอล/ทดสอบในโหมดแก้ไข (RM-13 user เลือกแบบสวิตช์ 23 ต.ค. 2026) ชิดขวาใต้การ์ด ป้ายบอกสถานะปัจจุบัน รางสีทองตอนเป็นไฟนอล
   ปุ่มเป็น role="switch" มี span ของทั้งสองสถานะ (data-hd-opt) แสดงเฉพาะสถานะที่เป็นอยู่ แบบอื่นที่ไม่ได้เลือกอยู่ที่ theme-preview/hdt-*.css */
[data-hd-edit] { position: relative; }
[data-hd-toggle] {
  position: relative; align-self: flex-end; display: inline-flex; align-items: center; padding: 4px 50px 4px 4px; cursor: pointer;
  border: 0; background: none; color: #d8d2c4; font-size: 12.5px; font-weight: 700;
}
[data-hd-toggle]:focus-visible { outline: 2px solid #d6a54c; outline-offset: 2px; border-radius: 6px; }
[data-hd-opt] { display: none; }
[data-hd-toggle="final"] [data-hd-opt="final"],
[data-hd-toggle="test"] [data-hd-opt="test"] { display: inline; }
[data-hd-opt]::before { content: "ทีม"; }
[data-hd-toggle="final"] [data-hd-opt="final"] { color: #f3d38a; }
[data-hd-toggle]::before {
  content: ""; position: absolute; right: 4px; top: 50%; width: 38px; height: 20px; margin-top: -10px; border-radius: 999px;
  background: #3a3835; box-shadow: inset 0 0 0 1px #8a857c; transition: background 0.2s;
}
[data-hd-toggle]::after {
  content: ""; position: absolute; right: 24px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 999px;
  background: #c9c2b2; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); transition: right 0.2s, background 0.2s;
}
[data-hd-toggle]:hover::before { box-shadow: inset 0 0 0 1px #d6a54c; }
[data-hd-toggle="final"]::before { background: linear-gradient(180deg, #f6dc95, #d6a54c); box-shadow: none; }
[data-hd-toggle="final"]::after { right: 7px; background: #2b1d05; }
/* แยกกลุ่มด้วยสีขอบการ์ด ไฟนอลขอบทองเรือง ทดสอบขอบเทาเส้นประ */
[data-hd-group="final"] [data-slot="card"] {
  border-color: rgba(243, 211, 138, 0.8);
  box-shadow: 0 0 0 1px rgba(243, 211, 138, 0.22), 0 0 20px rgba(243, 211, 138, 0.16), 0 4px 18px rgba(0, 0, 0, 0.35);
}
[data-hd-group="test"] [data-slot="card"] { border-style: dashed; border-color: rgba(170, 178, 198, 0.45); }
[data-hd-group="test"] [data-slot="card"]::before,
[data-hd-group="test"] [data-slot="card"]::after { border-color: rgba(170, 178, 198, 0.6); }
/* ปุ่มทางเข้าหน้าวางแผนโจมตี /plan (RM-17) สคริปต์ท้าย site/index.html แทรกต่อท้าย banner ทีมกันบ้านใน div ห่อเดียวกัน
   RM-19 user เลือกแบบหน้าต่างแดงฝั่งศัตรูขอบทอง 23 ต.ค. 2026 แทนแถบน้ำเงินเดิม ไอคอนดาบไขว้ ข้อความ "วางแผนโจมตี" อย่างเดียว
   แบบที่ไม่ได้เลือกอยู่ที่ theme-preview/pl-*.css */
[data-plan-link] {
  display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 9px 16px; border-radius: 10px; text-decoration: none;
  color: #f6ecd2; font-size: 14.5px; font-weight: 700;
  background: linear-gradient(180deg, #7c2029, #4b1219);
  border: 1px solid #d6a54c;
  box-shadow: inset 0 0 0 1px rgba(243, 211, 138, 0.25), 0 8px 22px rgba(0, 0, 0, 0.45);
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}
[data-plan-link]:hover { border-color: #f3d38a; box-shadow: inset 0 0 0 1px rgba(243, 211, 138, 0.45), 0 0 18px rgba(224, 82, 92, 0.3); transform: translateY(-1px); }
[data-plan-icon] { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex-shrink: 0; border-radius: 999px; color: #f3d38a; background: rgba(243, 211, 138, 0.12); border: 1px solid rgba(243, 211, 138, 0.6); }
[data-plan-label] { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-plan-chev] { flex-shrink: 0; color: #f3d38a; }
/* RM-19 banner กับปุ่มอยู่แถวเดียวกัน ฝั่งละครึ่ง ตั้งแต่จอ 820px เพราะ banner ต้องกว้าง 374px ชื่อจึงไม่ถูกตัด (วัดบนหน้าจริง 23 ต.ค. รวมแถบเลื่อน 15px)
   จอแคบกว่านั้นเป็น 2 แถว  ปุ่ม [data-hdb-testset] ของคอมโบชุดทดสอบแยกใบทำให้ต้องกว้าง 454px ถ้าโผล่ ชื่อ banner ถูกตัดเป็น … แทนการล้นกล่อง */
@media (min-width: 820px) {
  :has(> [data-home-def-banner] + [data-plan-link]) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: stretch; }
  :has(> [data-home-def-banner] + [data-plan-link]) > [data-plan-link] { margin-top: 0; }
  :has(> [data-plan-link]) > [data-home-def-banner] [data-hdb-title] { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* คำอธิบายรองหดจนหมดก่อน ชื่อจึงค่อยหด ถ้าหดเท่ากันชื่อจะถูกตัดทั้งที่ยังมีที่ */
  :has(> [data-plan-link]) > [data-home-def-banner] [data-hdb-sub] { flex-shrink: 1000; }
}
@media (max-width: 560px) {
  [data-plan-link] { gap: 10px; padding: 8px 12px; }
  [data-home-def-banner] { gap: 10px; padding: 8px 12px; }
  [data-hdb-sub] { display: none; }
  [data-hdb-title] { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  [data-hdb-stats] { gap: 6px; font-size: 11.5px; }
  [data-hdb-stat] { padding: 2px 8px; }
  [data-hd-title]::before,
  [data-hd-title]::after { letter-spacing: 1px; }
}