@charset "UTF-8";

/* ============================================================
 *  Design tokens — mode-agnostic
 * ============================================================ */
:root {
    /* ── ฟอนต์ · เฟส 2 ─────────────────────────────────────────────
       ดูเหตุผลเต็มใน git log และ .claude/verify/ */
    --v2-f-thai: "IBM Plex Sans Thai", system-ui, sans-serif;
    --v2-f-dis: var(--v2-f-thai);
    --v2-f-mono: "JetBrains Mono", "IBM Plex Sans Thai", ui-monospace, Menlo, monospace;
    --v2-f-serif: "Instrument Serif", "IBM Plex Sans Thai", Georgia, serif;

    /* accent — identical in dark + light */
    --v2-yellow: #ffd60a;
    --v2-yellow-2: #ffb400;
    --v2-yellow-ink: #1a1500;
    --v2-ok: #6fe4a8;
    --v2-warn: #ffaa5a;
    --v2-danger: #ff7a6a;
    --v2-info: #4dd0ff;

    /* บนธีมสว่าง ค่าเดียวกันนี้ใช้เป็นพื้นและเส้นได้ แต่ใช้เป็นสีตัวอักษรไม่ผ่าน
       จึงมีชุด -text แยกไว้ ในธีมมืดทั้งสองชุดเป็นสีเดียวกัน */
    --v2-yellow-text: var(--v2-yellow);
    --v2-ok-text:     var(--v2-ok);
    --v2-danger-text: var(--v2-danger);
    --v2-info-text:   var(--v2-info);
    --v2-warn-text:   var(--v2-warn);
    --v2-violet: #7a5bff;

    /* ── มุมโค้ง · เฟส 1 ───────────────────────────────────────────
       ดูเหตุผลเต็มใน git log และ .claude/verify/ */
    /*  A120 · สเกลเดิม 6/10/14/22 ถูก Panel A แก้ทับ "แค่สองตัว" (sm 10→12,
        lg 22→20) และแก้เฉพาะใน body.v2-dash  ผลคือ
          · สเกลจริงฝั่ง authed เป็น 6 / 12 / 14 / 20 → ช่องว่าง 6, **2**, 6
            คู่ 12/14 ห่างกัน 2px คือ "ต่างกันแต่ดูเหมือนกัน" ซึ่งกวนตาที่สุด
          · ฝั่ง guest ไม่ได้รับ override เลย ยังเป็น 6/10/14/22
            authed กับ public จึงมุมโค้งคนละสเกลกันมาตลอด
        ตั้งใหม่เป็นจังหวะ 4px เท่ากันหมด และย้ายมาไว้ที่ฐานเพื่อให้ทั้งสองฝั่ง
        ใช้ชุดเดียว บล็อก override ที่ body.v2-dash จึงถูกลบทิ้ง (ไม่ใช่ทับ) */
    --v2-r-xs: 8px;    /* ป้าย · badge · chip */
    --v2-r-sm: 12px;   /* ปุ่ม · ช่องกรอก · แถวในลิสต์ */
    --v2-r-md: 16px;   /* การ์ด · widget */
    --v2-r-lg: 20px;   /* แผงใหญ่ · modal · hero */
    --v2-r-xl: var(--v2-r-lg);
    --v2-r-pill: 999px;

    /* ── ขนาดตัวอักษร · เฟส 1 ─────────────────────────────────────
       ดูเหตุผลเต็มใน git log และ .claude/verify/ */
    --v2-fs-11: 11px;  --v2-fs-12: 12px;  --v2-fs-13: 13px;  --v2-fs-14: 14px;
    --v2-fs-16: 16px;  --v2-fs-20: 20px;  --v2-fs-26: 26px;  --v2-fs-34: 34px;
    --v2-fs-44: 44px;  --v2-fs-56: 56px;

    /* ── ขนาดที่ไหลตามจอ · เฟส 3 ──────────────────────────────────
       ดูเหตุผลเต็มใน git log และ .claude/verify/ */
    --v2-fs-fluid-1: clamp(23px, 2.7vw, 29px);          /* หัวข้อรอง · Δ สูงสุด 3px */
    --v2-fs-fluid-2: clamp(29px, 3.3vw + 7px, 49px);    /* หัวข้อ section · Δ สูงสุด 7px */
    --v2-fs-fluid-3: clamp(34px, 4.5vw + 10px, 68px);   /* หัวข้อหน้า · Δ สูงสุด 8px */
    --v2-fs-fluid-4: clamp(56px, 10vw, 120px);          /* hero */

    /* ── ระยะห่าง · เฟส 3 ─────────────────────────────────────────
       7 ขั้นบนกริด 4px  ค่าที่ต่ำกว่า 3px และสูงกว่า 32px ไม่แตะ */
    --v2-sp-1: 4px;   --v2-sp-2: 8px;   --v2-sp-3: 12px;  --v2-sp-4: 16px;
    --v2-sp-5: 20px;  --v2-sp-6: 24px;  --v2-sp-7: 32px;

    /*  A123 · เฟส 2 · ไวยากรณ์ความหนาแน่น — แผนที่ .claude/PLAN-unify.md
        ‼ ราก R2: สเกลข้างบนบอกว่า "ห่างได้เท่าไหร่" ไม่เคยบอกว่า
          "ของประเภทนี้ห่างเท่าไหร่" มันเป็นพจนานุกรม ไม่ใช่ไวยากรณ์
          คนที่นั่งดู /orders แล้วเห็นว่าโปร่งไปก็ใส่ 10px 4px เพราะจอบอกอย่างนั้น
          และเขาไม่ผิด ถ้าไม่มีกฎว่าแถวลิสต์ใช้ระดับไหน เขาจะเลือกจากตาทุกครั้ง
          ผลคือค่าระยะนอกสเกล 35 ค่า = สเกลจริง 42 ขั้น ไม่ใช่ 7
        กฎคู่ที่ต้องอ่านพร้อมกัน: padding-inline ของกล่องที่มีมุมโค้ง ต้องไม่
        น้อยกว่า border-radius ของมัน — ตัดเคส 10px/4px บนกล่องมุม 16 ออกแต่แรก */
    --v2-d-compact: var(--v2-sp-3) var(--v2-sp-4);   /* 12/16 · แถวลิสต์ แถวตาราง */
    --v2-d-cozy:    var(--v2-sp-4) var(--v2-sp-5);   /* 16/20 · การ์ดเนื้อหา */
    --v2-d-roomy:   var(--v2-sp-5);                  /* 20    · แผงฟอร์มชั้นนอก */
    --v2-rail:      1280px;                          /* รางเดียวทั้งเว็บ */
    --v2-rail-form: 720px;                           /* คอลัมน์ฟอร์มกว้างสุด */

    /* ── จังหวะ · เฟส 4 ───────────────────────────────────────────
       ดูเหตุผลเต็มใน git log และ .claude/verify/ */
    --v2-t-fast: 140ms;   /* hover · สีพื้น · เส้นขอบ */
    --v2-t-base: 240ms;   /* เปิด-ปิด · เลื่อน */
    --v2-t-slow: 400ms;   /* แผงใหญ่ · overlay */

    /* ── ระยะบรรทัด · เฟส 2 ───────────────────────────────────────
       ดูเหตุผลเต็มใน git log และ .claude/verify/ */
    --v2-lh-flat: 1;
    --v2-lh-tight: 1.3;   /* หัวเรื่อง — ต่ำสุดที่ไทยรับได้ */
    --v2-lh-ui: 1.5;      /* ปุ่ม · ป้าย · แถว */
    --v2-lh-body: 1.7;    /* เนื้อความ */

    /* motion + blur */
    --v2-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --v2-blur: saturate(160%) blur(26px);
    --v2-blur-strong: saturate(180%) blur(40px);
}

/* ============================================================
 *  Dark mode tokens (default v2 direction)
 *  Palette aligned with smm-panel v4 handoff.
 * ============================================================ */
html.dark {
    /* legacy aliases — kept but retuned to v2 palette */
    --main-bg: #0f0f12;
    --second-bg: #08080b;
    /*  A124 · --main-border มีค่าเท่ากับ --v2-line เป๊ะทั้งสองธีมมาตลอด
        (rgba(255,255,255,.10) / rgba(18,18,20,.10)) สอง token ชื่อคนละอย่าง
        ค่าเดียวกัน ใช้รวมกัน 138 จุด — ชี้เป็น alias ที่จุดนิยาม
        แทนไล่แก้ทีละจุด ความเสี่ยงศูนย์ และตระกูลสีเส้นลดจาก 6 เหลือ 5 */
    --main-border: var(--v2-line);
    --text-white: #ffffff;
    --text-color: #f7f7f8;
    --main-color: #ffd60a;
    --main-color-hover: #ffe24a;
    --main-color-trans: rgba(255, 214, 10, 0.14);
    --tp-color-red: #ff7a6a;
    --tp-color-green: #6fe4a8;
    --tp-color-orange: #ffaa5a;
    --border-radius: var(--v2-r-md);

    /* v2 extensions */
    --v2-bg: #0a0a0c;
    --v2-bg-soft: #08080b;
    --v2-bg-grad:
        radial-gradient(1200px 800px at 15% -10%, rgba(255, 210, 0, 0.14), transparent 55%),
        radial-gradient(900px 700px at 100% 20%, rgba(255, 180, 60, 0.08), transparent 55%),
        radial-gradient(800px 700px at 50% 120%, rgba(120, 90, 255, 0.10), transparent 55%),
        #08080b;

    --v2-ink: #f7f7f8;
    --v2-ink-dim: rgba(247, 247, 248, 0.72);
    /* 0.48 clears 4.5 against the page but lands at 4.18–4.45 on the raised
       panels, which is where these labels actually sit. 0.56 fixed most of them
       and left the Trustpilot line at 4.44 on the lightest panel of all; 0.62
       clears every surface in the theme. */
    --v2-ink-mute: rgba(247, 247, 248, 0.62);
    --v2-ink-soft: rgba(247, 247, 248, 0.30);

    --v2-line: rgba(255, 255, 255, 0.10);
    --v2-line-strong: rgba(255, 255, 255, 0.18);

    /*  A120 · ขาวล้วน → ขาวอมน้ำเงิน  (เจ้าของสั่ง 2026-08-11)
        พื้นทึบของธีมมืดตั้งใจให้อมน้ำเงิน (คอมเมนต์ที่ html.dark body.v2-dash
        เขียนไว้เองว่า "เทาอมน้ำเงินเย็น ทำให้เหลืองแสบขึ้น") — --v2-surface
        มี B−R = +10, --v2-sidebar +13, --v2-well +8
        แต่ glass เป็น "ขาวล้วน" ทาทับ ซึ่ง **ลบความอมน้ำเงินทิ้ง** ผลลัพธ์
        ออกมา R=G เป๊ะ คือเทากลาง วัดบน /addfunds ได้ glass +4 · glass-2 +4
        การ์ดสองใบคอลัมน์ขวาจึงคนละ hue กับแผงใหญ่ซ้าย ไม่ใช่แค่คนละความสว่าง
        ตาอ่านว่า "ใบขวาอมน้ำตาล" ทั้งที่ไม่มีสีน้ำตาลอยู่เลย
        200,214,255 คือขาวที่เอียงไปทางเดียวกับพื้นทึบ ค่า alpha คงเดิมทุกตัว
        หลังแก้ (คำนวณบนพื้นหน้า rgb(12,12,16)): +7 / +8 / +11 */
    --v2-glass: rgba(200, 214, 255, 0.05);
    --v2-glass-2: rgba(200, 214, 255, 0.08);
    --v2-glass-3: rgba(200, 214, 255, 0.13);

    --v2-yellow: #ffd60a;
    --v2-yellow-2: #ffb400;
    --v2-yellow-soft: rgba(255, 214, 10, 0.14);
    --v2-yellow-glow: rgba(255, 214, 10, 0.40);

    --v2-ok: #6fe4a8;
    --v2-danger: #ff7a6a;
    --v2-warn: #ffaa5a;
    --v2-ok-soft: rgba(111, 228, 168, 0.15);
    --v2-danger-soft: rgba(255, 122, 106, 0.15);
    --v2-warn-soft: rgba(255, 170, 90, 0.15);

    --v2-nav-bg: rgba(12, 12, 16, 0.60);
    --v2-side-bg: rgba(14, 14, 18, 0.65);
    --v2-topbar-bg: rgba(14, 14, 18, 0.55);

    /* ── ความลึก · เฟส 1 · 3 ระดับ ────────────────────────────
       ดูเหตุผลเต็มใน git log และ .claude/verify/ */
    --v2-elev-1: 0 0 0 1px rgba(255, 255, 255, 0.07);
    --v2-elev-2: 0 0 0 1px rgba(255, 255, 255, 0.10), 0 6px 18px rgba(0, 0, 0, 0.55);
    --v2-elev-3: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 16px 40px rgba(0, 0, 0, 0.65);
    --v2-shadow-1: var(--v2-elev-2);
    --v2-shadow-2: var(--v2-elev-3);

    color-scheme: dark;
}

/* ============================================================
 *  Light mode tokens (warm paper · darker yellow for contrast)
 *  Matches both `<html>` (no class) and `<html class="light">`.
 *  Palette mirrored from smm-panel v4 (bg #f6f5f0, yellow #ffc800).
 * ============================================================ */
html,
html.light {
    /* legacy aliases — kept but retuned */
    --main-bg: #ffffff;
    --second-bg: #f6f5f0;
    --main-border: var(--v2-line);
    --text-white: #ffffff;
    --text-color: #121214;
    --main-color: #ffc800;
    --main-color-hover: #ff9f00;
    --main-color-trans: rgba(255, 200, 0, 0.22);
    --tp-color-red: #d2432d;
    --tp-color-green: #18a06a;
    --tp-color-orange: #fd7e14;
    --border-radius: var(--v2-r-md);

    /* v2 extensions */
    --v2-bg: #f6f5f0;
    --v2-bg-soft: #ececf1;
    --v2-bg-grad:
        radial-gradient(1200px 800px at 15% -10%, rgba(255, 210, 0, 0.24), transparent 55%),
        radial-gradient(900px 700px at 100% 20%, rgba(255, 180, 60, 0.14), transparent 55%),
        radial-gradient(800px 700px at 50% 120%, rgba(120, 90, 255, 0.10), transparent 55%),
        #f6f5f0;

    --v2-ink: #121214;
    --v2-ink-dim: rgba(18, 18, 20, 0.72);
    /* 0.52 measured 3.6:1 on white — under AA everywhere it is used, which is
       eyebrows, form labels, table keys and every muted value on the site. It is
       one token rather than one element, so it is fixed here: 0.60 measures
       4.9:1. The dark counterpart is 0.48 and already clears 4.5 against the
       darker panel, so it is left alone. */
    --v2-ink-mute: rgba(18, 18, 20, 0.60);
    --v2-ink-soft: rgba(18, 18, 20, 0.32);

    --v2-line: rgba(18, 18, 20, 0.10);
    --v2-line-strong: rgba(18, 18, 20, 0.20);

    --v2-glass: rgba(255, 255, 255, 0.55);
    --v2-glass-2: rgba(255, 255, 255, 0.70);
    --v2-glass-3: rgba(255, 255, 255, 0.85);

    --v2-yellow: #ffc800;
    --v2-yellow-2: #ff9f00;
    --v2-yellow-soft: rgba(255, 200, 0, 0.22);
    --v2-yellow-glow: rgba(255, 200, 0, 0.35);

    --v2-ok: #18a06a;
    --v2-danger: #d2432d;
    --v2-warn: #d97706;

    /* ink versions of the accents, for light surfaces only — measured on white:
       ดูเหตุผลเต็มใน git log และ .claude/verify/ */
    /* one step darker than the 4.61:1-on-white value this started at: the
       wallet figure sits on a yellow-tinted chip, not on white, where #8f6400
       reached only 4.24 once the font drops to 18px at mobile. #7d5700 is
       5.23 there and 6.49 on white. */
    --v2-yellow-text: #7d5700;
    /* ok measured 4.43 against its own mint fill rather than white, which is the
       surface that matters — one step darker clears it at 5.25 */
    --v2-ok-text:     #0c6d42;
    --v2-danger-text: #b5332a;
    --v2-info-text:   #0a6e93;
    --v2-warn-text:   #8a4d05;
    --v2-ok-soft: rgba(24, 160, 106, 0.14);
    --v2-danger-soft: rgba(210, 67, 45, 0.14);
    --v2-warn-soft: rgba(217, 119, 6, 0.14);

    --v2-nav-bg: rgba(255, 255, 255, 0.70);
    --v2-side-bg: rgba(255, 255, 255, 0.75);
    --v2-topbar-bg: rgba(255, 255, 255, 0.65);

    --v2-elev-1: 0 0 0 1px rgba(18, 18, 20, 0.08);
    --v2-elev-2: 0 0 0 1px rgba(18, 18, 20, 0.08), 0 6px 18px rgba(18, 18, 20, 0.08);
    --v2-elev-3: 0 0 0 1px rgba(18, 18, 20, 0.10), 0 16px 40px rgba(18, 18, 20, 0.14);
    --v2-shadow-1: var(--v2-elev-2);
    --v2-shadow-2: var(--v2-elev-3);

    color-scheme: light;
}

/* A39 — Panel A token set, scoped to the authed shell  (2026-08-03)
   A120 · บล็อกนี้เคยตั้ง --v2-r-sm: 12 และ --v2-r-lg: 20 ทับเฉพาะฝั่ง authed
   ค่าทั้งสองย้ายไปอยู่ในสเกลฐานแล้ว ทั้งเว็บจึงใช้ชุดเดียวกัน — ลบ ไม่ใช่ทับ */

html body.v2-dash {
    /* ── ธีมสว่าง · พื้นกระดาษอุ่น การ์ดขาว ไม่มีเส้นขอบ ใช้เงานุ่ม ── */
    --v2-surface: #ffffff;
    --v2-surface-2: #faf9f6;
    --v2-well: #f4f4f0;

    --v2-sidebar: #141410;
    --v2-on-sidebar: #f7f7f3;
    --v2-on-sidebar-dim: rgba(247, 247, 243, 0.55);

    --v2-hero: #141410;
    --v2-on-hero: #f7f7f3;
    --v2-on-hero-dim: rgba(247, 247, 243, 0.66);
    --v2-hero-btn: #ffd60a;
    --v2-hero-btn-ink: #1a1500;

    --v2-acc-line: #e8c200;
}

html.dark body.v2-dash {
    /* ── ธีมมืด · เทาอมน้ำเงินเย็น ทำให้เหลืองแสบขึ้น ── */
    --v2-surface: #1a1c24;
    --v2-surface-2: #22252f;
    --v2-well: #111319;

    --v2-sidebar: #151822;
    --v2-on-sidebar: #f7f7f3;
    --v2-on-sidebar-dim: rgba(247, 247, 243, 0.58);

    --v2-hero: #ffd60a;
    --v2-on-hero: #1a1500;
    --v2-on-hero-dim: rgba(26, 21, 0, 0.72);
    --v2-hero-btn: #16160f;
    --v2-hero-btn-ink: #ffd60a;

    --v2-acc-line: rgba(255, 214, 10, 0.42);
}

/* A44 — Panel A token set, part 2: the kit's tone and elevation  (2026-08-03)
   ‼ --v2-elev is a NEW name, and --v2-elev-2 is deliberately NOT touched.
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
html body.v2-dash {
    /* ธีมสว่าง · ไม่มีวงแหวน ดีไซน์ 2a ใช้เงานุ่มแทนเส้นขอบ */
    --v2-elev:
        0 1px 2px rgba(20, 21, 15, 0.05),
        0 10px 28px -14px rgba(20, 21, 15, 0.18);
    --v2-info-soft: rgba(10, 110, 147, 0.12);
}

html.dark body.v2-dash {
    /* ธีมมืด · ยังมีวงแหวนขาวบาง เพราะพื้นการ์ดกับพื้นหลังต่างกันน้อยเกินกว่าจะแยกด้วยเงาอย่างเดียว */
    --v2-elev:
        0 0 0 1px rgba(255, 255, 255, 0.075),
        0 14px 32px -16px rgba(0, 0, 0, 0.8);
    --v2-info-soft: rgba(77, 208, 255, 0.14);
}

/* ============================================================
 *  body baseline — Thai-first font stack, global bg gradient
 * ============================================================ */
body {
    font-family: var(--v2-f-thai);
    font-weight: 400;
    font-size: 14px;
    line-height: var(--v2-lh-body);
    /* 320, not 375. Paired with overflow-x:hidden below, a 375 floor does not
       ดูเหตุผลเต็มใน git log และ .claude/verify/ */
    min-width: 320px;
    color: var(--v2-ink);
    background: var(--v2-bg-grad);
    background-color: var(--v2-bg);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
 *  v2 utilities — shared across all restyled pages
 *  Prefix `.v2-` to keep isolated from legacy class names.
 * ============================================================ */

/* typography helpers */
.v2-dis {
    font-family: var(--v2-f-dis);
    font-weight: 700;
    line-height: var(--v2-lh-tight);
}
.v2-mono {
    font-family: var(--v2-f-mono);
    letter-spacing: 0.02em;
}
.v2-serif-i {
    font-family: var(--v2-f-serif);
    font-style: italic;
    font-weight: 400;
    color: var(--v2-yellow);
}
.v2-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-2);
    font-family: var(--v2-f-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--v2-ink-mute);
    font-weight: 500;
}
.v2-eyebrow::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--v2-yellow);
    box-shadow: 0 0 12px var(--v2-yellow-glow);
}

/* max-width wrapper */
.v2-wrap {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 var(--v2-sp-6);
}

/* section spacing */
.v2-section {
    padding: 96px 0;
    position: relative;
    z-index: 2;
}
.v2-section-head {
    display: flex;
    flex-direction: column;
    gap: var(--v2-sp-3);
    margin-bottom: 48px;
    max-width: 680px;
}
.v2-section-head h2 {
    font-family: var(--v2-f-dis);
    font-size: var(--v2-fs-fluid-2);
    font-weight: 700;
    line-height: var(--v2-lh-tight);
    margin: 0;
    color: var(--v2-ink);
}
.v2-section-head h2 i {
    font-family: var(--v2-f-serif);
    font-style: italic;
    color: var(--v2-yellow);
    font-weight: 400;
}
.v2-section-head p {
    font-size: 16px;
    color: var(--v2-ink-dim);
    margin: 0;
    line-height: var(--v2-lh-body);
}

/* frosted glass surfaces */
.v2-glass {
    background: var(--v2-glass-2);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-lg);
    backdrop-filter: var(--v2-blur);
    -webkit-backdrop-filter: var(--v2-blur);
    box-shadow: var(--v2-shadow-1);
    position: relative;
}
.v2-glass-strong {
    background: var(--v2-glass-3);
    border: 1px solid var(--v2-line-strong);
    border-radius: var(--v2-r-xl);
    backdrop-filter: var(--v2-blur-strong);
    -webkit-backdrop-filter: var(--v2-blur-strong);
    box-shadow: var(--v2-shadow-2);
}

/* generic card (denser than glass) */
.v2-card {
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-md);
    padding: var(--v2-sp-5);
    backdrop-filter: var(--v2-blur);
    -webkit-backdrop-filter: var(--v2-blur);
    color: var(--v2-ink);
}
.v2-card-hd {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    gap: var(--v2-sp-3);
}
.v2-card-hd h3 {
    font-family: var(--v2-f-dis);
    font-size: 16px;
    margin: 0;
    font-weight: 600;
    color: var(--v2-ink);
}

/* pill buttons (marketing / hero CTAs) */
.v2-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-2);
    height: 52px;
    padding: 0 var(--v2-sp-6);
    border-radius: var(--v2-r-pill);
    font-family: var(--v2-f-dis);
    font-weight: 600;
    font-size: 14px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform var(--v2-t-fast) var(--v2-ease), background var(--v2-t-base), box-shadow var(--v2-t-base);
    text-decoration: none !important;
    line-height: 1;
    white-space: nowrap;
}
.v2-pill-y {
    background: var(--v2-yellow);
    color: var(--v2-yellow-ink);
}
.v2-pill-y:hover {
    transform: translateY(-1px);
    background: #ffe24a;
    color: var(--v2-yellow-ink);
    box-shadow: 0 12px 40px -10px var(--v2-yellow-glow);
}
.v2-pill-g {
    background: var(--v2-glass-2);
    border-color: var(--v2-line-strong);
    color: var(--v2-ink);
    backdrop-filter: var(--v2-blur);
    -webkit-backdrop-filter: var(--v2-blur);
}
.v2-pill-g:hover {
    background: var(--v2-glass-3);
    color: var(--v2-ink);
}
.v2-pill-sm {
    height: 40px;
    padding: 0 var(--v2-sp-4);
    font-size: 13px;
}

/* compact buttons (in-app) */
.v2-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-2);
    padding: var(--v2-sp-2) var(--v2-sp-3);
    border-radius: var(--v2-r-sm);
    font-family: var(--v2-f-dis);
    font-weight: 600;
    font-size: 13px;
    border: 1px solid var(--v2-line);
    background: var(--v2-glass);
    color: var(--v2-ink);
    cursor: pointer;
    text-decoration: none !important;
    transition: background var(--v2-t-fast), transform var(--v2-t-fast) var(--v2-ease), border-color var(--v2-t-fast);
    line-height: var(--v2-lh-tight);
}
.v2-btn:hover {
    background: var(--v2-glass-2);
    color: var(--v2-ink);
    border-color: var(--v2-line-strong);
}
.v2-btn-y {
    background: var(--v2-yellow);
    color: var(--v2-yellow-ink);
    border-color: transparent;
}
.v2-btn-y:hover {
    background: #ffe24a;
    color: var(--v2-yellow-ink);
    border-color: transparent;
}
.v2-btn-sm {
    padding: var(--v2-sp-1) var(--v2-sp-2);
    font-size: 12px;
}
.v2-btn-danger {
    color: var(--v2-danger);
}
.v2-btn-block {
    display: flex;
    width: 100%;
    justify-content: center;
}

/* form fields */
.v2-field {
    display: flex;
    flex-direction: column;
    gap: var(--v2-sp-1);
}
.v2-field + .v2-field {
    margin-top: 14px;
}
.v2-field > label {
    font-family: var(--v2-f-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--v2-ink-mute);
    text-transform: uppercase;
    font-weight: 500;
}
.v2-field input:not([type="checkbox"]):not([type="radio"]),
.v2-field select,
.v2-field textarea {
    width: 100%;
    padding: var(--v2-sp-3) var(--v2-sp-3);
    border-radius: var(--v2-r-sm);
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    color: var(--v2-ink);
    font: inherit;
    font-family: var(--v2-f-thai);
    font-size: 14px;
    outline: none;
    transition: border-color var(--v2-t-fast), background var(--v2-t-fast);
    line-height: var(--v2-lh-tight);
}
.v2-field input:focus,
.v2-field select:focus,
.v2-field textarea:focus {
    border-color: var(--v2-yellow);
    background: var(--v2-glass-2);
}
.v2-field .hint {
    font-size: 12px;
    color: var(--v2-ink-mute);
}
.v2-field .err {
    font-size: 12px;
    color: var(--v2-danger);
}

/* status chip */
.v2-status {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-1);
    padding: var(--v2-sp-1) var(--v2-sp-2);
    border-radius: var(--v2-r-pill);
    font-family: var(--v2-f-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
}
.v2-status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.v2-status.done { color: var(--v2-ok); background: var(--v2-ok-soft); }
.v2-status.run { color: var(--v2-yellow); background: var(--v2-yellow-soft); }
.v2-status.pend { color: var(--v2-ink-mute); background: var(--v2-glass-2); }
.v2-status.part { color: var(--v2-warn); background: var(--v2-warn-soft); }
.v2-status.fail { color: var(--v2-danger); background: var(--v2-danger-soft); }
.v2-status.cancel { color: var(--v2-ink-soft); background: var(--v2-glass); }

/* table */
.v2-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.v2-tbl thead th {
    font-family: var(--v2-f-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--v2-ink-mute);
    text-transform: uppercase;
    text-align: left;
    padding: var(--v2-sp-2) var(--v2-sp-3);
    border-bottom: 1px solid var(--v2-line);
    font-weight: 500;
}
.v2-tbl tbody td {
    padding: var(--v2-sp-3) var(--v2-sp-3);
    border-bottom: 1px dashed var(--v2-line);
    color: var(--v2-ink-dim);
}
.v2-tbl tbody tr:hover td {
    background: var(--v2-glass);
    color: var(--v2-ink);
}
.v2-tbl tbody td b {
    color: var(--v2-ink);
    font-weight: 600;
}
.v2-tbl .mono {
    font-family: var(--v2-f-mono);
    color: var(--v2-ink-mute);
    font-size: 12px;
}

/* stat cards */
.v2-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--v2-sp-3);
}
@media (max-width: 900px) {
    .v2-stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
.v2-stat {
    padding: var(--v2-sp-5);
    border-radius: var(--v2-r-md);
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    position: relative;
    overflow: hidden;
    backdrop-filter: var(--v2-blur);
    -webkit-backdrop-filter: var(--v2-blur);
}
.v2-stat .l {
    font-family: var(--v2-f-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--v2-ink-mute);
    text-transform: uppercase;
}
.v2-stat .n {
    font-family: var(--v2-f-dis);
    font-size: 26px;
    font-weight: 700;
    margin-top: 6px;
    line-height: 1;
    color: var(--v2-ink);
}
.v2-stat .d {
    font-size: 12px;
    margin-top: 6px;
    color: var(--v2-ink-dim);
}
.v2-stat .d.ok { color: var(--v2-ok); }
.v2-stat .d.dn { color: var(--v2-danger); }

/* floating orbs background (body-level decoration) */
.v2-orb.y1 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, var(--v2-yellow), transparent 60%);
    top: -100px;
    left: -100px;
    opacity: 0.35;
}
.v2-orb.p1 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, var(--v2-violet), transparent 60%);
    top: 40%;
    right: -150px;
    opacity: 0.30;
}
.v2-orb.c1 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, var(--v2-info), transparent 60%);
    bottom: -150px;
    left: 30%;
    opacity: 0.20;
}
html.light .v2-orb {
    opacity: 0.45;
}
html.light .v2-orb.p1 { opacity: 0.20; }
html.light .v2-orb.c1 { opacity: 0.14; }

/* small utility atoms */
.v2-hidden { display: none !important; }
.v2-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;
}
.v2-row { display: flex; gap: var(--v2-sp-3); flex-wrap: wrap; }
.v2-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--v2-sp-3); }
.v2-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--v2-sp-3); }
.v2-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--v2-sp-3); }
@media (max-width: 900px) {
    .v2-grid-3, .v2-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
    .v2-grid-2, .v2-grid-3, .v2-grid-4 { grid-template-columns: 1fr; }
}

a {
    text-decoration: none !important;
    color: var(--text-color);
}

a,
[type="checkbox"] {
    cursor: pointer;
}

a:hover {
    color: var(--main-color);
}

li {
    list-style-type: none;
}

button,
input {
    background-color: transparent;
    line-height: 0;
    border: 0;
    padding: 0;
}

button:focus,
input:focus {
    outline: 0 !important;
    border: none !important;
}

b,
strong {
    font-weight: 800;
    line-height: var(--v2-lh-body);
    transition: all var(--v2-t-fast) var(--v2-ease);
}


::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

::-webkit-scrollbar-review-img {
    background: var(--main-border);
    border-radius: var(--v2-r-xs);
}

::-webkit-scrollbar-track {
    background: var(--second-bg);
}

.primary-color {
    color: var(--main-color) !important;
    font-weight: 500;
}

.alert {
    border: none !important;
}

/* A48 · เดิมสองกฎนี้ไม่มีตัวจำกัด scope และมี !important ของตัวเอง จึงชนะบล็อก
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
body#outside .alert.alert-success {
    color: #09b797 !important;
    background: #2dfad431 !important;
}

body#outside .alert.alert-danger {
    color: #ee5b5b !important;
    background: #ee5b5b41 !important;
}

.badge {
    background: var(--main-color) !important;
    color: #fff;
    font-weight: 300;
    font-size: 12px;
}

.h-section {
    margin: 100px 0;
}

.h-section.section-50 {
    margin: 50px 0 100px 0;
}

.h-section.section-0 {
    margin: 50px 0;
}

.h-section.hs-bg {
    background:
        radial-gradient(
            50% 50% at 50% 50%,
            rgb(255 224 49 / 15%) 0%,
            var(--second-bg) 100%
        ),
        linear-gradient(
            180deg,
            var(--second-bg) 0%,
            var(--second-bg) 57.28%,
            var(--second-bg) 97.75%
        );
}

.c-pointer {
    cursor: pointer;
}

.p-relative {
    position: relative;
}

.p-absolute {
    position: absolute;
}

.transition {
    transition: all var(--v2-t-fast) var(--v2-ease);
}

.hidden {
    display: none !important;
}

input[type="checkbox"] {
    display: none;
}

input[type="checkbox"] + label {
    display: block;
    position: relative;
    padding-left: var(--v2-sp-7);
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 20px;
    color: #ddd;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

input[type="checkbox"] + label:last-child {
    margin-bottom: 0;
}

input[type="checkbox"] + label:before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--main-color);
    border-radius: var(--v2-r-sm);
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0.6;
    -webkit-transition:
        all 0.12s,
        border-color 0.08s;
    transition:
        all var(--v2-t-fast),
        border-color var(--v2-t-fast);
}

input[type="checkbox"]:checked + label:before {
    width: 10px;
    top: -5px;
    left: 10px;
    border-radius: 0;
    opacity: 1;
    border-top-color: transparent;
    border-left-color: transparent;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.btn {
    position: relative;
    display: flex;
    justify-content: center;
    padding: var(--v2-sp-3) var(--v2-sp-6);
    align-items: center;
    gap: var(--v2-sp-2);
    border-radius: var(--v2-r-md);
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    white-space: nowrap;
    box-shadow: none !important;
    outline: 0 !important;
}

.btn:hover,
.btn:focus {
    box-shadow: none !important;
    outline: 0 !important;
}
/* A56 · `color: var(--text-color) !important` เคยอยู่ในกฎข้างบนนี้แบบไม่มี scope
   --text-color เป็นสีขาว พอ hover ปุ่มหลัก (พื้นเหลืองอ่อน) ตัวหนังสือเลยขาวบนเหลือง
   วัดได้ contrast 1.23 — ป้ายบนปุ่มที่ถูกกดบ่อยที่สุดในเว็บหายไปตอนเอาเมาส์ไปชี้
   ‼ ผูกกับ guest เท่านั้น guest ได้ค่าเดิมเป๊ะ ห้ามถอด body#outside ออก
   ฝั่ง authed ตกไปใช้ของบล็อก Panel A: --v2-yellow-ink บน #ffe24a */
/* A76 · กัน "อ่านต่อ" ในการ์ดบทความออกจากกลุ่มนี้
   ‼ ที่ A75 ปุ่มนั้นถูกถอดหน้าตาปุ่มออกให้เป็นลิงก์สีเน้นแล้ว พอ hover กฎนี้จะยัด
     --text-color (#121214) กลับมาทับสีเน้น — ลิงก์เปลี่ยนเป็นสีหมึกดำตอนเอาเมาส์ไปชี้
   ‼ ปุ่มจริงฝั่ง guest ที่อื่นต้องได้ค่าเดิม ห้ามถอด body#outside ออก (ดู A56 ข้างบน) */
body#outside .btn:hover:not(.blog-card .btn),
body#outside .btn:focus:not(.blog-card .btn) {
    color: var(--text-color) !important;
}

/* A76 · ถอด `!important` ออกจาก font-size
   ‼ ค่าเดิม 14px เท่ากับ `.btn` บรรทัดบนอยู่แล้ว — `!important` ไม่ได้กันอะไรเลย
     แต่มันฆ่ากฎที่ตั้งใจเขียนทีหลังทิ้งหมด: `body#dash .btn.btn-sm { font-size: 12px }`
     (1,2,1) แพ้ !important ของ (0,1,0) มาตลอด และตอนนี้กฎนั้นถูกลบทิ้งแล้วเพราะซ้ำ
   ‼ `.btn-sm` ในธีมนี้มีแค่สองที่: blog.twig:30 (ปุ่มอ่านบทความ) กับ addfunds.twig:193
     ทั้งคู่ยังได้ 14px เท่าเดิมจาก `.btn` ยกเว้นการ์ดบทความที่ตั้งค่าเองที่ A75 */
.btn-sm {
    font-size: 14px;
    padding: var(--v2-sp-1) var(--v2-sp-3);
}

.btn-rounded {
    background: var(--main-border);
    border-radius: var(--border-radius);
}

.btn-border {
    border: 1px solid var(--main-border) !important;
}

.btn-100 {
    display: block;
    width: 100%;
}

.btn-100.btn-icon {
    display: flex;
}

.btn-dark,
.btn-dark:hover,
.btn-dark:focus {
    background: var(--main-bg) !important;
}

.btn-primary {
    background: #fed130;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #000000;
    border-radius: var(--v2-r-md);
    transition: var(--v2-t-base) all;
}

.btn-primary:hover,
.btn-primary:focus {
    background: #ddbc1b;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    outline: 0 !important;
    transition: var(--v2-t-base) all;
}
/* A56 · `color: #fff !important` เคยอยู่ในกฎข้างบนนี้แบบไม่มี scope
   พื้นปุ่มหลักตอน hover เป็นเหลืองอ่อน (#ffe24a) ตัวหนังสือขาวบนนั้นวัดได้ contrast 1.29
   ป้ายบนปุ่มที่ถูกกดบ่อยที่สุดในเว็บหายไปตอนเอาเมาส์ไปชี้ — และเป็นแบบนี้บน live มาตลอด
   ‼ ผูกกับ guest เท่านั้น ห้ามถอด body#outside ออก
   ฝั่ง authed ตกไปใช้ --v2-yellow-ink ของบล็อก Panel A */
/* A76 · กันการ์ดบทความออกเช่นกัน — #fff บนพื้นการ์ดขาว วัดได้ contrast 1.0
   ลิงก์ "อ่านต่อ" จะหายไปเลยตอน hover หรือตอนโฟกัสด้วยคีย์บอร์ด */
body#outside .btn-primary:hover:not(.blog-card .btn-primary),
body#outside .btn-primary:focus:not(.blog-card .btn-primary) {
    color: #fff !important;
}

.btn-secondary {
    background: #ffd400;
    color: #fff !important;
    border: 1px solid #27303e;
    box-shadow:
        0px 1.182px 2.365px 0px rgb(19 27 38),
        0px 0px 0px 1.182px #27303e;
}

.btn-secondary:hover,
.btn-secondary:focus {
    background: #ddbc1b;
    color: #fff !important;
    border: 1px solid #27303e;
    box-shadow:
        0px 1.182px 2.365px 0px rgb(19 27 38),
        0px 0px 0px 1.182px #27303e;
}

.light .btn-secondary,
.light .btn-secondary:hover,
.light .btn-secondary:focus {
    background: var(--main-bg);
    color: var(--text-color) !important;
    border: 1px solid #ffc107;
    box-shadow:
        0px 1.182px 2.365px 0px rgb(19 27 38),
        0px 0px 0px 1.182px #27303e;
}

.btn-signup {
    background:
        radial-gradient(
            397.75% 81.29% at 109.6% 34.26%,
            #01993e 0%,
            #038234 99.99%,
            #29cb69 100%
        ),
        #11c456;
    box-shadow:
        0px 1.182px 2.365px 0px rgb(49 155 91),
        0px 0px 0px 1.182px #23a055;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    border-radius: var(--v2-r-md);
}

.btn-signup:hover,
.btn-signup:focus {
    background:
        radial-gradient(
            397.75% 81.29% at 109.6% 34.26%,
            #29cb69 0%,
            #038234 99.99%,
            #01993e 100%
        ),
        #01993e;
    box-shadow:
        0px 1.182px 2.365px 0px rgb(49 155 91),
        0px 0px 0px 1.182px #23a055;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
    outline: 0 !important;
}

.btn-danger {
    background: #bb2d3b;
    border: 1px solid #bb2d3b20;
    color: #fff;
}

.btn-danger:hover,
.btn-danger:focus {
    background: #e83042;
    color: #fff !important;
}

.btn-lg {
    font-size: 14px;
    padding: var(--v2-sp-4) 34px;
    font-weight: 500;
}

.btn-outline {
    padding: var(--v2-sp-3) var(--v2-sp-7);
    border: 1px solid var(--main-bg);
    color: var(--main-bg) !important;
    background: transparent;
}

.btn-purple {
    background: linear-gradient(
            90deg,
            var(--c1, rgb(214, 71, 89)),
            var(--c2, rgb(175, 0, 158)) 51%,
            var(--c1, rgb(148, 40, 139))
        )
        var(--x, 0) / 200%;
    color: #fff;
}

.hm-wrapper .btn.btn-outline:hover {
    background: rgba(255, 255, 255, 0.3);
    color: #fff !important;
}

.form-group {
    position: relative;
}

.form-group label {
    color: var(--text-color);
    width: 100%;
}

.form-control,
.form-select {
    padding: var(--v2-sp-3) var(--v2-sp-6);
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--v2-r-md);
    border: 1px solid var(--main-border);
    background: var(--second-bg);
    color: var(--text-color);
    height: 55px;
    width: 100%;
}

/* A77 · ‼ กฎนี้เคยไม่มี scope และเป็น `!important` สองบรรทัด มันจึงชนะ
     `body#dash .form-control:focus` (1,1,1) ของ A54 ทุกครั้ง — **วงแหวนโฟกัสเหลือง
     ที่ A54 เขียนไว้ไม่เคยขึ้นจอเลยสักครั้งบนฝั่ง authed** วัดบนหน้าจริงตอนโฟกัส
     ช่องลิงก์: `box-shadow` = `none` และได้ `border: 1px solid var(--main-color)`
     แถมมาแทน ทั้งที่บล็อกฐานตั้ง `border: 0` ไว้ — ขนาดกล่องจึงขยับ 1px ตอนโฟกัส
     ซึ่งเป็นอาการที่ A54 เขียนกำกับไว้เองว่าห้ามให้เกิด
   ‼ ผูกกับ guest แทนที่จะลบ ตามท่าเดียวกับ A46 / A54 / A56 — guest ได้ค่าเดิมเป๊ะ
     `.form-control` ฝั่ง guest ถูกกฎ !important ที่บรรทัด ~16766 ทับอยู่แล้ว
     ส่วน `.form-select:focus` ฝั่ง guest ยังใช้กฎนี้จริง จึงต้องเก็บไว้
   ‼ ฝั่ง dash ไม่หลุดไปโดนเงาฟ้าของ bootstrap เพราะ `body#dash .form-select:focus`
     (บรรทัด ~17491) เป็น !important และอยู่ทีหลัง */
/* ‼ แยกสองตัวออกจากกัน เพราะ `.form-control` ฝั่ง guest ถูกกฎที่ ~16766 ทับ
     ทั้ง background และ box-shadow ไปแล้ว (เป็น !important และอยู่ทีหลัง)
     ถ้าเขียนรวมกลุ่มไว้เหมือนเดิม สองบรรทัดนั้นคือ declaration ที่ตายแล้ว
     เหลือที่ยังทำงานจริงบน `.form-control` คือความกว้าง/ชนิดเส้น กับสีตัวอักษร */
body#outside .form-control:focus {
    border: 1px solid var(--main-color) !important;
    color: var(--text-color);
}
body#outside .form-select:focus {
    box-shadow: none !important;
    background: var(--main-bg);
    border: 1px solid var(--main-color) !important;
    color: var(--text-color);
}

.form-control:disabled,
.form-control[readonly] {
    background-color: var(--main-bg);
}

select.form-control {
    border: none;
}

.form-group label {
    padding-bottom: var(--v2-sp-1);
}

.form-group .forget-pass {
    position: absolute;
    right: 13px;
    top: 47px;
    background: var(--main-color);
    width: 32px;
    height: 32px;
    border-radius: var(--v2-r-pill);
    text-align: center;
    line-height: 32px;
}

.form-group .forget-pass:hover {
    background: var(--main-color-hover);
}

.form-group .forget-pass a {
    color: #fff;
}

body.stop-body {
    overflow: hidden;
}

.head-out {
    position: fixed;
    top: 0px;
    background-color: transparent;
    width: 100%;
    z-index: 1030;
}

.head-out.fixed {
    border-bottom: 1px solid var(--main-border);
    background: rgb(242 242 242 / 80%);
}

.dark .head-out.fixed {
    border-bottom: 1px solid var(--main-border);
    background-color: rgb(4, 10, 24, 0.7);
}

.home-logo img {
    max-height: 50px;
}

.hm-wrapper {
    display: block;
    position: fixed;
    top: -1px;
    left: -1px;
    width: calc(100% + 2px);
    padding: 77px 0 var(--v2-sp-2) 0;
    height: auto;
    transition: var(--v2-t-fast) var(--v2-ease);
    transform: translateY(-101%);
    opacity: 0.4;
    background: var(--second-bg);
    z-index: 0;
    border-radius: 0 0 var(--v2-r-md) var(--v2-r-md);
}

@media (max-width: 991.98px) {
    .light .hm-wrapper {
        background: #ddd;
    }
}

.hm-wrapper.active {
    transform: translateY(0);
    opacity: 1;
}

.sm-header {
    display: block;
    padding: var(--v2-sp-3) 0;
    transition: var(--v2-t-fast) var(--v2-ease);
}

.menu-btn {
    height: 48px;
    width: 48px;
    border-radius: var(--border-radius);
    background-color: rgb(255 180 49 / 15%);
    color: var(--main-color);
    outline: none;
    border: none;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.b-menu-close {
    height: 48px;
    width: 48px;
    border-radius: var(--border-radius);
    background-color: var(--main-bg);
    color: var(--text-color);
    outline: none;
    border: none;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 2000;
}

.home-fade {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-x: hidden;
    pointer-events: none;
}

.home-fade > div {
    position: relative;
    width: 100%;
}

.hf-glow {
    position: absolute;
    width: 1176px;
    height: 850px;
    left: -669px;
    top: -886px;
    background: linear-gradient(180deg, rgba(255, 31, 0, 0), var(--main-color));
    -webkit-filter: blur(239.122px);
    filter: blur(239.122px);
    -webkit-transform: rotate(-58.53deg);
    transform: rotate(-58.53deg);
}

.dark-mode.dark {
    display: block;
}

.light .dark-mode.light,
.dark-mode.light {
    display: none;
}

.dark .dark-mode.dark {
    display: none;
}

.dark .dark-mode.light {
    display: block;
}

.header-menu {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    gap: var(--v2-sp-2);
    padding: var(--v2-sp-2) 0 var(--v2-sp-5) 0;
}

.header-menu .hm-item {
    position: relative;
    display: flex;
    justify-content: flex-start;
}

.header-menu .hm-item .hm-link {
    font-weight: 400;
    font-size: 26px;
    line-height: 125%;
    color: var(--text-color) !important;
    padding: var(--v2-sp-2) 0;
    transition: var(--v2-t-fast) var(--v2-ease);
    text-decoration: none;
    display: inline-block;
    text-align: left;
}

.header-menu .hm-item .hm-link:hover {
    opacity: 0.7;
}

.header-menu .hm-item .hm-link.active {
    opacity: 1;
}

.header-menu .hm-item .hm-link.active::before {
    opacity: 1;
}

.home-header {
    margin-top: -86px;
    padding-top: 86px;
    position: relative;
    background:
        url(https://storage.perfectcdn.com/nb2br9/oe2oqi31hs6djxcp.svg),
        var(--second-bg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.home-header .home-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.57;
}

.home-header .header-content {
    position: relative;
    z-index: 5;
}

.home-header .home-images {
    position: relative;
}

.home-hero--image {
    position: absolute;
    z-index: 2;
}

.home-header .home-hero--image.left {
    top: 150px;
    transform-origin: center center;
    left: 40px;
}

.home-header .home-hero--image.left img {
    animation: heartBeat 1.5s infinite ease-in-out;
}

.home-header .home-hero--image.right {
    top: 290px;
    transform-origin: center center;
    right: 40px;
}

.home-header .home-hero--image .emoji {
    position: absolute;
    top: -18px;
    right: 0px;
    width: 35px;
    height: 35px;
    transform: rotate(-20deg);
    font-size: 34px;
}

.login-card .btn {
    width: 100%;
}

.login-card .form-control .login-card .form-control:focus {
    border-radius: var(--v2-r-md)!important;
    border: 1px solid #303c58 !important;
    background: #09101e !important;
}

.login-card {
    border: 1px solid var(--main-border);
    background:
        radial-gradient(
            77.87% 74.89% at 99.57% 106.76%,
            rgba(30, 54, 119, 0.2) 0%,
            rgba(6, 11, 26, 0.2) 100%
        ),
        var(--main-bg);
    box-shadow:
        0 1.182px 2.365px 0 rgb(19 27 38),
        0 0 0 1.182px #000;
    border-radius: var(--v2-r-md);
    margin: 35px 0 0 0;
    padding: var(--v2-sp-5) var(--v2-sp-4);
}

.light .login-card {
    background: var(--main-bg);
    box-shadow: var(--v2-elev-1),
        0 0 0 1.182px #faebeb;
}

.login-card .lgn-btn {
    background: var(--second-bg);
    width: 55px;
    height: 55px;
    border-radius: var(--v2-r-md);
    text-align: center;
    line-height: 50px;
    border: 1px solid var(--main-border);
    cursor: pointer;
}

.login-card .login-remember-me input {
    display: none;
}

.login-card .login-remember-me input:checked + .lgn-btn {
    background: var(--main-color);
    border-color: var(--main-border);
    color: #fff;
}

.login-card .btn-primary {
    height: 55px;
}

@media (max-width: 991.98px) {
    .login-card {
        padding: var(--v2-sp-4) 0;
    }
    .login-card .btn-primary {
        min-width: 130px;
    }
}

.card {
    border-radius: var(--border-radius);
    background: #fff;
    box-shadow: var(--v2-elev-1),
        0px 0px 0px 1.182px #f7f8f9;
}

.dark .card {
    border-radius: var(--border-radius);
    background: var(--main-bg);
    box-shadow:
        0px 1.182px 2.365px 0px rgb(19 27 38),
        0px 0px 0px 1.182px #1a2433;
}

.card.card-shadow {
    position: relative;
    overflow: hidden;
}

.card-shadow::before {
    content: "";
    position: absolute;
    top: 95%;
    right: 80%;
    width: 60%;
    height: 50%;
    transform: translate(100%, 60%) scale(1);
    transition: var(--v2-t-fast) var(--v2-ease);
    background: linear-gradient(
        120deg,
        var(--main-color) 0%,
        var(--main-color-trans) 100%
    );
    border-radius: var(--v2-r-pill);
    filter: blur(60px);
    z-index: 0;
}

.card .form-control::placeholder {
    color: var(--text-color);
}

.body-scroll {
    height: 500px;
    overflow-y: scroll;
}

.card.order-filter {
    position: relative;
    overflow: hidden !important;
}

.card.order-filter .card-body::before,
.card.order-filter .card-body::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 10;
}

.card.order-filter .card-body::before {
    -webkit-box-shadow: var(--v2-elev-3);
    box-shadow: var(--v2-elev-3);
    left: -40px;
    top: 0;
    width: 40px;
}

.card.order-filter .card-body::after {
    -webkit-box-shadow: var(--v2-elev-3);
    box-shadow: var(--v2-elev-3);
    right: -40px;
    top: 0;
    width: 40px;
}

.dark .card.order-filter .card-body::before {
    -webkit-box-shadow: 10px 0px 70px rgb(49, 156, 255, 0.15);
    box-shadow: 10px 0px 70px rgb(49, 156, 255, 0.15);
}

.dark .card.order-filter .card-body::after {
    -webkit-box-shadow: 10px 0px 70px rgb(49, 156, 255, 0.15);
    box-shadow: 10px 0px 70px rgb(49, 156, 255, 0.15);
}

.card.order-filter .card-body {
    padding: 0.5rem 1.25rem 0.5rem 1.25rem;
}

.ns-name {
    background: var(--main-color);
    border-radius: var(--border-radius);
    padding: var(--v2-sp-4);
    text-align: center;
    color: #000000;
}

.ns-info {
    padding-top: var(--v2-sp-2);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--v2-sp-2);
    flex-wrap: wrap;
}

.ns-info > .ns-item {
    flex: 0 0 calc(50% - 5px);
}

.ns-info .ns-item {
    display: flex;
    gap: var(--v2-sp-4);
    padding: var(--v2-sp-2);
    align-items: center;
    border-radius: var(--border-radius);
    border: 1px solid var(--main-border);
    background: var(--second-bg);
}

.ns-info .ns-item .icon {
    width: 35px;
    height: 35px;
    line-height: 35px;
    border-radius: var(--v2-r-sm);
    background: var(--main-color);
    color: #000;
    text-align: center;
}

.ns-info .ns-item .text {
    color: var(--text-color);
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
}

@media only screen and (min-width: 992px) {
    .head-out.fixed {
        border: 1px solid var(--main-border);
        border-top: none;
        border-left: none;
        border-right: none;
        background: rgb(242 242 242 / 80%);
        -webkit-backdrop-filter: blur(15px);
        backdrop-filter: blur(15px);
    }

    .dark .head-out.fixed {
        background-color: rgb(4, 10, 24, 0.7);
        backdrop-filter: blur(30px);
    }

    .head-out.fixed .header-menu .hm-item .hm-link {
        padding: var(--v2-sp-5) var(--v2-sp-5);
    }

    .hm-wrapper {
        display: block;
        bottom: inherit;
        background-color: transparent;
        position: relative;
        border-radius: 0;
        padding: 0;
        width: 100%;
        transform: none;
        overflow: inherit;
        opacity: 1 !important;
    }

    .sm-header {
        display: none;
    }

    .b-menu-close {
        display: none;
    }

    .header-btn.without-icon {
        background-color: transparent;
        padding: var(--v2-sp-3) var(--v2-sp-7);
    }

    .header-btn.without-icon .icon {
        display: none;
    }

    .header-menu {
        display: inline-flex;
        align-items: center;
        flex-direction: row;
        padding: var(--v2-sp-2) 0 var(--v2-sp-2) 0;
    }

    .header-menu .hm-item .hm-link {
        padding: 34px var(--v2-sp-5);
        display: block;
        font-size: 20px;
    }

    .home-header {
        margin-top: -127px;
        padding-top: 127px;
        padding-bottom: 50px;
    }

    .home-header .header-content {
        padding: 150px 0 125px 0;
    }
}

.home-content-badge {
    display: flex;
    padding: var(--v2-sp-1) var(--v2-sp-4) var(--v2-sp-1) var(--v2-sp-1);
    align-items: center;
    gap: var(--v2-sp-2);
    border-radius: var(--v2-r-pill);
    border: 1px solid var(--main-border);
    background: var(--main-bg);
    width: max-content;
}

.home-content-badge .icon {
    background: var(--main-color-trans);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: var(--main-color);
    font-size: 16px;
    font-style: normal;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-content-badge .text {
    color: var(--text-color);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 14.4px;
    text-align: start;
    padding: 0;
    margin: 0;
}

.home-content h2 {
    font-size: 44px;
    font-weight: 600;
    font-style: normal;
    line-height: 54px;
    color: var(--text-color);
}

.home-content p {
    max-width: 850px;
    margin: auto;
    font-size: 14px;
    line-height: 26px;
    color: #9db0d9;
}

.light .home-content p {
    color: #28344e;
}

.home-content small {
    font-family: var(--v2-f-serif);
    font-style: italic;
    font-size: 26px;
    color: var(--main-color);
}

.home-content h2 span {
    background-image: -webkit-gradient(
        linear,
        left top,
        right top,
        from(#126fc5),
        to(var(--main-color))
    );
    background-image: -webkit-linear-gradient(
        left,
        #126fc5 0%,
        var(--main-color) 100%
    );
    background-image: -o-linear-gradient(
        left,
        #126fc5 0%,
        var(--main-color) 100%
    );
    background-image: linear-gradient(
        to right,
        #126fc5 0%,
        var(--main-color) 100%
    );
    background-size: 200% auto;
    font-weight: 700;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: 3s linear infinite textclip;
    position: relative;
    display: inline-block;
}


.dark .dark-mode i {
    color: #ffc107;
}

.dark-mode i {
    font-size: 20px;
    color: #133bbe;
    line-height: 18px;
}

.lg-card {
    background: transparent;
    background-size: cover !important;
    background-position: center !important;
    overflow: hidden !important;
    box-shadow: none !important;
    border-radius: var(--v2-r-lg)!important;
}

.lg-card .lg-card-body {
    background: var(--main-color-trans) !important;
}

.lg-card.c-1 {
    background-image: url(https://storage.perfectcdn.com/nb2br9/f5kyk56mlq4ioa6x.png);
    background-repeat: no-repeat;
}

.lg-card.c-2 {
    background-image: url(https://storage.perfectcdn.com/nb2br9/bcts64l6urt73nj8.png);
    background-repeat: no-repeat;
}

.lg-card h3 {
    font-size: 34px;
    font-weight: 600;
    padding-bottom: var(--v2-sp-4);
}

.lg-card p {
    font-size: 20px;
    line-height: 26px;
    font-weight: 400;
}

@media (min-width: 992px) {
    .lg-card .lg-card-body {
        background-color: transparent;
        backdrop-filter: none !important;
        padding: 55px var(--v2-sp-6) 55px var(--v2-sp-6);
        text-align: center;
    }
}

.features-card {
    background-color: var(--main-bg);
    border: 1px solid var(--main-border);
    border-radius: var(--v2-r-lg);
    flex-direction: column;
    display: flex;
    gap: var(--v2-sp-6);
    padding: var(--v2-sp-5);
}

.features-box {
    display: grid;
    gap: var(--v2-sp-4);
}

@media (min-width: 992px) {
    .features-box {
        grid-template-columns: repeat(3, 1fr);
    }
}

.features-box--item {
    border-radius: var(--v2-r-lg);
    background: var(--main-bg);
    border: 1px solid var(--main-border);
    display: flex;
    flex-direction: column;
    gap: var(--v2-sp-2);
    padding: var(--v2-sp-5) var(--v2-sp-7);
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.features-box--item .fbi-bg i {
    position: absolute;
    top: -40px;
    right: -10px;
    font-size: 175px;
    opacity: 0.1;
    transform: rotate(-15deg);
    z-index: 1;
    color: #1b95cf;
    -webkit-background-clip: text;
    background-clip: text;
}

.features-box--item:hover .features-box--icon {
    -webkit-animation: 0.7s cubic-bezier(0.455, 0.03, 0.515, 0.955) both
        flip-diagonal-1-bck;
    animation: 0.7s cubic-bezier(0.455, 0.03, 0.515, 0.955) both
        flip-diagonal-1-bck;
}

@-webkit-keyframes flip-diagonal-1-bck {
    0% {
        -webkit-transform: translateZ(0) rotate3d(1, 1, 0, 0deg);
        transform: translateZ(0) rotate3d(1, 1, 0, 0deg);
    }
    100% {
        -webkit-transform: translateZ(-260px) rotate3d(1, 1, 0, -360deg);
        transform: translateZ(-260px) rotate3d(1, 1, 0, -360deg);
    }
}
@keyframes flip-diagonal-1-bck {
    0% {
        -webkit-transform: translateZ(0) rotate3d(1, 1, 0, 0deg);
        transform: translateZ(0) rotate3d(1, 1, 0, 0deg);
    }
    100% {
        -webkit-transform: translateZ(-260px) rotate3d(1, 1, 0, -360deg);
        transform: translateZ(-260px) rotate3d(1, 1, 0, -360deg);
    }
}

.features-box--icon {
    clip-path: polygon(
        92.32051% 40%,
        93.79385% 43.1596%,
        94.69616% 46.52704%,
        95% 50%,
        94.69616% 53.47296%,
        93.79385% 56.8404%,
        92.32051% 60%,
        79.82051% 81.65064%,
        77.82089% 84.50639%,
        75.35575% 86.97152%,
        72.5% 88.97114%,
        69.3404% 90.44449%,
        65.97296% 91.34679%,
        62.5% 91.65064%,
        37.5% 91.65064%,
        34.02704% 91.34679%,
        30.6596% 90.44449%,
        27.5% 88.97114%,
        24.64425% 86.97152%,
        22.17911% 84.50639%,
        20.17949% 81.65064%,
        7.67949% 60%,
        6.20615% 56.8404%,
        5.30384% 53.47296%,
        5% 50%,
        5.30384% 46.52704%,
        6.20615% 43.1596%,
        7.67949% 40%,
        20.17949% 18.34936%,
        22.17911% 15.49361%,
        24.64425% 13.02848%,
        27.5% 11.02886%,
        30.6596% 9.55551%,
        34.02704% 8.65321%,
        37.5% 8.34936%,
        62.5% 8.34936%,
        65.97296% 8.65321%,
        69.3404% 9.55551%,
        72.5% 11.02886%,
        75.35575% 13.02848%,
        77.82089% 15.49361%,
        79.82051% 18.34936%
    );
    border-radius: var(--v2-r-lg);
    background: rgb(212 255 49 / 15%);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: var(--main-color);
}

.features-box--title {
    color: var(--text-color);
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 25px;
    letter-spacing: 0px;
    margin: 0;
}

.features-box--text {
    color: #9eabc5;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    margin: 0;
}

.light .features-box--text {
    color: #28344e;
}

.features-rates {
    border-radius: var(--v2-r-md);
    background: var(--main-bg);
    display: inline-flex;
    padding: var(--v2-sp-6) 35px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 39px;
    margin-bottom: 35px;
}

.features-rate {
    display: flex;
    flex-direction: column;
    gap: var(--v2-sp-4);
}

.features-rates--seperator {
    width: 1px;
    align-self: stretch;
    background: var(--main-border);
}

.features-rate--stars {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--v2-sp-1);
    color: var(--main-color);
    font-size: 16px;
}

.features-rate--text {
    color: var(--text-color);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
}

.features-topcard {
    border-radius: var(--v2-r-lg);
    background-size: cover;
    background-position: center;
    position: relative;
}

.features-topcard--image {
    position: absolute;
    right: 45px;
    bottom: 40px;
    z-index: 2;
    user-select: none;
    pointer-events: none;
    max-width: 450px;
}

.features-topcard--message {
    border-radius: var(--v2-r-lg);
    background: #0e181e;
    box-shadow: var(--v2-elev-3);
    padding: var(--v2-sp-3) var(--v2-sp-4);
    max-width: 200px;
    width: 100%;
    color: #ffffff;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    position: absolute;
}

.section-title--title {
    font-weight: 600;
}

.section-title--badge {
    display: flex;
    padding: var(--v2-sp-1) var(--v2-sp-4) var(--v2-sp-1) var(--v2-sp-1);
    align-items: center;
    gap: var(--v2-sp-2);
    border-radius: var(--v2-r-pill);
    border: 1px solid var(--main-color);
    background: rgb(228 255 49 / 15%);
    width: max-content;
}

.section-title--badge .icon {
    background: var(--main-color);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: var(--text-white);
    font-size: 20px;
    font-style: normal;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-title--badge .text {
    color: var(--main-color);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 14.4px;
    text-align: start;
    padding: 0;
    margin: 0;
}

.features .section-title {
    align-items: flex-start;
    justify-content: flex-start;
    margin-bottom: 30px;
}

.features .section-title--content {
    align-items: flex-start;
    text-align: start;
    margin: 0;
}

.section-title--content {
    display: flex;
    gap: var(--v2-sp-5);
    flex-direction: column;
    max-width: var(--st-max-width, 750px);
    margin: 0 auto;
    width: 100%;
}

@media only screen and (max-width: 991.98px) {
    .hm-wrapper .row.row-btn {
        display: unset !important;
    }
    .home-header {
        padding: 175px 0 50px 0;
    }

    .hm-wrapper .dark-mode {
        display: none !important;
    }

    .home-content h2,
    .brands-left .bl-content h3,
    .home-heads h3 {
        font-size: 26px;
        line-height: 32px;
        font-weight: 600;
    }
    .hf-glow {
        position: absolute;
        height: 650px;
        left: 0;
        top: -950px;
    }
    .home-lang {
        display: none;
    }
    .h-section {
        margin: 0 0 50px 0 !important;
        overflow: hidden;
    }
    .home-content .home-text {
        display: none;
    }
    .header-content {
        text-align: center;
    }
    .home-content .d-flex {
        justify-content: center;
    }
    .payment-box {
        margin-bottom: 15px;
    }
    .home-area-text,
    .home-area-text .home-heads {
        text-align: center;
    }
}

@keyframes textclip {
    to {
        background-position: 200% center;
    }
}

@keyframes rotate {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes floating {
    0% {
        box-shadow: var(--v2-elev-1);
        -webkit-transform: translatey(0px);
        transform: translatey(0px);
    }

    50% {
        box-shadow: var(--v2-elev-1);
        -webkit-transform: translatey(-20px);
        transform: translatey(-20px);
    }

    100% {
        box-shadow: var(--v2-elev-1);
        -webkit-transform: translatey(0px);
        transform: translatey(0px);
    }
}

@keyframes key-animation {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes dropdown-active {
    0% {
        opacity: 0;
        transform: translateY(-50px);
        max-height: 0;
    }

    100% {
        opacity: 1;
        transform: translateY(0) skewY(0);
    }
}

@keyframes floating {
    0% {
        box-shadow: var(--v2-elev-1);
        -webkit-transform: translatey(0px);
        transform: translatey(0px);
    }

    50% {
        box-shadow: var(--v2-elev-1);
        -webkit-transform: translatey(-20px);
        transform: translatey(-20px);
    }

    100% {
        box-shadow: var(--v2-elev-1);
        -webkit-transform: translatey(0px);
        transform: translatey(0px);
    }
}

.floating {
    -webkit-animation-name: floating;
    animation-name: floating;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    margin-top: 5px;
    box-shadow: none !important;
}

.brands-area {
    width: 100%;
    margin: -105px auto 0;
    z-index: 2;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--second-bg);
    padding: var(--v2-sp-6);
    height: 100px;
    overflow: hidden;
}

.brands-area::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    height: 1px;
    max-width: 1000px;
    width: 100%;
    background: linear-gradient(
        90deg,
        var(--main-bg) 0%,
        var(--main-color) 53%,
        var(--main-bg) 100%
    );
    z-index: 1;
}

.brands-top-active {
    display: flex;
    padding-left: var(--v2-sp-5);
    padding-top: var(--v2-sp-5);
    gap: var(--v2-sp-7);
    overflow: hidden;
    position: relative;
}

.brands-top-active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 50px;
    height: 100%;
    background: linear-gradient(
        90deg,
        var(--second-bg) 0%,
        rgba(4, 10, 24, 0) 100%
    );
    z-index: 5;
}

.brands-top-active::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(4, 10, 24, 0) 0% 0%,
        var(--second-bg) 100%
    );
    z-index: 5;
}

.brands-item {
    background:
        radial-gradient(
            68.6% 68.6% at 57.8% 96.86%,
            rgba(56, 75, 110, 0.2) 0%,
            rgba(5, 9, 16, 0.2) 100%
        ),
        linear-gradient(0deg, var(--second-bg) 0%, var(--second-bg) 100%),
        var(--second-bg);
    border: 1px solid var(--main-border);
    box-shadow:
        0px 1.182px 2.365px 0px rgb(19 27 38),
        0px 0px 0px 1.182px #000000;
    border-radius: var(--v2-r-md);
    padding: var(--v2-sp-5) var(--v2-sp-4);
    transition: var(--v2-t-base) all;
    display: flex;
    justify-content: center;
    gap: var(--v2-sp-5);
    min-width: 75px;
    z-index: 1;
    white-space: nowrap;
    line-height: 1px;
    position: relative;
    user-select: none;
    pointer-events: none;
}

.light .brands-item {
    background:
        radial-gradient(
            68.6% 68.6% at 57.8% 96.86%,
            rgb(255 255 255 / 20%) 0,
            rgb(207 215 228 / 20%) 100%
        ),
        linear-gradient(0deg, #e7e8e9 0, #fff 100%), var(--second-bg);
    box-shadow: var(--v2-elev-1),
        0 0 0 1.182px #faebeb;
}

.brands-item span {
    font-size: 16px;
    font-weight: 600;
}

.brands-item .brands-icon {
    font-size: 34px;
}

.select2-selection__icon .fab.fa-instagram,
.nwo-categories .fab.fa-instagram,
.brands-icon .fab.fa-instagram {
    background: radial-gradient(
        circle at 30% 107%,
        #fdf497 0,
        #fdf497 5%,
        #fd5949 45%,
        #d6249f 60%,
        #285aeb 90%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.select2-selection__icon .fab.fa-twitter,
.nwo-categories .fab.fa-twitter,
.brands-icon .fab.fa-twitter {
    background: #1da1f2;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.select2-selection__icon .fab.fa-youtube,
.nwo-categories .fab.fa-youtube,
.brands-icon .fab.fa-youtube {
    background: #ff0042;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.select2-selection__icon .fab.fa-whatsapp,
.nwo-categories .fab.fa-whatsapp,
.brands-icon .fab.fa-whatsapp {
    background: #25d366;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.select2-selection__icon .fab.fa-android,
.nwo-categories .fab.fa-android,
.brands-icon .fab.fa-android {
    background: #3ddc84;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.select2-selection__icon .fab.fa-facebook-f,
.nwo-categories .fab.fa-facebook-f,
.brands-icon .fab.fa-facebook-f {
    background: #207eff;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.select2-selection__icon .fab.fa-soundcloud,
.nwo-categories .fab.fa-soundcloud,
.brands-icon .fab.fa-soundcloud {
    background: #ff5836;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.select2-selection__icon .fab.fa-spotify,
.nwo-categories .fab.fa-spotify,
.brands-icon .fab.fa-spotify {
    background: #1db954;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.select2-selection__icon .fab.fa-tiktok,
.nwo-categories .fab.fa-tiktok,
.brands-icon .fab.fa-tiktok {
    background: #ff0042;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.select2-selection__icon .fab.fa-twitch,
.nwo-categories .fab.fa-twitch,
.brands-icon .fab.fa-twitch {
    background: #4b367c;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.select2-selection__icon .fab.fa-telegram-plane,
.nwo-categories .fab.fa-telegram-plane,
.brands-icon .fa-telegram-plane {
    background: #2b9fd2;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.select2-selection__icon .fab.fa-snapchat-ghost,
.nwo-categories .fab.fa-snapchat-ghost,
.brands-icon .fab.fa-snapchat-ghost {
    background: #fffc00;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.select2-selection__icon .fab.fa-discord,
.nwo-categories .fab.fa-discord,
.brands-icon .fab.fa-discord {
    background: #1090f3;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.select2-selection__icon .fab.fa-reddit-alien,
.nwo-categories .fab.fa-reddit-alien,
.brands-icon .fab.fa-reddit-alien {
    background: #f43708;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.select2-selection__icon .fab.fa-linkedin-in,
.nwo-categories .fab.fa-linkedin-in,
.brands-icon .fab.fa-linkedin-in {
    background: #0077b0;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.select2-selection__icon .fab.fa-steam,
.nwo-categories .fab.fa-steam,
.brands-icon .fab.fa-steam {
    background: #00adee;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.select2-selection__icon .fab.fa-pinterest,
.nwo-categories .fab.fa-pinterest,
.brands-icon .fab.fa-pinterest {
    background: #ff5858;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.select2-selection__icon .fab.fa-tumblr,
.nwo-categories .fab.fa-tumblr,
.brands-icon .fab.fa-tumblr {
    background: #1c3764;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.m-counter {
    background: linear-gradient(
        90deg,
        var(--second-bg) 0%,
        var(--main-bg) 50%,
        var(--second-bg) 100%
    );
    padding: 50px 0;
}

.infoDetail {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--v2-sp-2);
}

.infoDetail .item {
    display: flex;
    align-items: center;
    justify-content: center;
}

.infoDetail .item .icon {
    margin-right: 15px;
}

.infoDetail .item .text {
    font-size: 26px;
    color: var(--main-color);
    font-weight: bold;
}

.infoDetail .item .text small {
    display: block;
    font-size: 20px;
    font-weight: 400;
    color: var(--text-color);
}

.blob {
    background: #000;
    border-radius: 50%;
    margin-right: 5px;
    height: 12px;
    width: 12px;
    transform: scale(1);
    -webkit-animation: pulse-black 2s infinite;
    animation: pulse-black 2s infinite;
    display: inline-block;
}

.blob.blob-red {
    background: rgba(11, 255, 67, 1);
    box-shadow: 0 0 0 0 rgba(11, 255, 67, 1);
    -webkit-animation: pulse-green 2s infinite;
    animation: pulse-green 1.5s infinite;
}

@-webkit-keyframes pulse-green {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(11, 255, 67, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(11, 255, 67, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(11, 255, 67, 0);
    }
}

@media (max-width: 991.98px) {
    .home-header .header-content {
        padding-top: var(--v2-sp-6);
    }
    .mob-logo img {
        width: 175px;
    }
    .infoDetail {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: var(--v2-sp-5);
    }
    .infoDetail .item {
        justify-content: flex-start;
    }
}

.loginArea {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loginArea .card {
    min-width: 450px;
}

.loginArea .bgdegrade {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 50%;
    z-index: -1;
}

.loginArea .bgdegrade::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top left, var(--main-color), #191b29);
    z-index: 1;
    opacity: 0.9;
}

.bgdegrade a.logo {
    position: absolute;
    z-index: 9;
    margin-left: 20px;
    top: 20px;
}

.bgdegrade a.logo img {
    width: 234px;
    height: auto;
    object-fit: cover;
}

.loginArea .bgdegrade img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.loginArea .bgico {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.loginArea .bgico .logMenu ul {
    padding: 0;
    margin: 0;
}

.loginArea .bgico .logMenu ul li {
    padding: var(--v2-sp-3);
    position: relative;
    padding-right: var(--v2-sp-6);
    text-align: right;
    list-style: none;
}

.loginArea .bgico .logMenu ul li.active::before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: var(--main-color);
    border-radius: var(--v2-r-sm) 0 0 var(--v2-r-sm);
}

.loginArea .bgico .logMenu ul li a {
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: var(--v2-sp-2);
    flex-direction: row-reverse;
}

.loginHead {
    margin-bottom: 20px;
}

.loginHead h1 {
    font-size: 26px;
    color: var(--v2-ink);
}

.loginHead p {
    text-align: center;
    font-size: 16px;
    color: var(--v2-ink-dim);
}

@media (max-width: 991.98px) {
    .loginArea {
        align-items: flex-start;
        padding: var(--v2-sp-5);
        padding-top: 100px;
    }
    .loginArea .bgdegrade {
        width: 100%;
    }
    .loginArea .bgico {
        left: 0;
        top: 20px;
        bottom: inherit;
        right: 0;
        width: 100%;
        justify-content: center;
    }
    .loginArea .bgico .logMenu ul {
        display: flex;
        z-index: 99;
        position: relative;
    }
    .loginArea .bgico .logMenu ul li {
        padding: 0 var(--v2-sp-1) !important;
    }
    .loginArea .bgico .logMenu ul li a {
        color: #fff;
        padding: var(--v2-sp-3) var(--v2-sp-3);
        font-size: 14px;
        font-weight: 500;
        text-transform: inherit;
        flex-direction: row;
        opacity: 0.7;
        background: #ffffff15;
        border-radius: var(--border-radius);
        border: 1px solid transparent;
        gap: var(--v2-sp-1);
    }
    .loginArea .card {
        min-width: 90vw;
    }
}

/*! APP */

.main-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040;
    width: 100vw;
    height: 100vh;
    background-color: var(--main-bg);
    transition: opacity var(--v2-t-fast) linear;
    opacity: 0.8;
}

.tooltip {
    z-index: 5000;
}

.tooltip-inner {
    color: #fff;
    background: var(--main-color);
    border: none;
    font-size: 13px;
    border-radius: var(--v2-r-xs);
    padding: var(--v2-sp-1) var(--v2-sp-2);
    -webkit-box-shadow: var(--v2-elev-1);
    box-shadow: var(--v2-elev-1);
    opacity: 1;
}

.modal-content {
    border-radius: var(--border-radius);
}

.rotate-360 {
    animation: 10s linear infinite rotate;
}

.dark .tooltip-inner {
    -webkit-box-shadow: var(--v2-elev-1);
    box-shadow: var(--v2-elev-1);
}

.modal-open .modal {
    -webkit-backdrop-filter: blur(10px) !important;
    z-index: 9999;
}

input:-webkit-autofill,
input:-webkit-autofill:active,
input:-webkit-autofill:focus,
input:-webkit-autofill:hover {
    transition:
        background-color 0s 600000s,
        color 0s 600000s !important;
    -webkit-text-fill-color: var(--text-color) !important;
    -webkit-transition-delay: 9999s;
}

.app-body,
.home-body {
    background-color: var(--main-bg);
}

.app {
    background:
        url(https://storage.perfectcdn.com/nb2br9/n5nz011oke8j3jt4.png), #f7f8f9;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    min-height: 100vh;
    min-width: 100%;
    overflow: hidden;
}

.dark .app {
    background:
        url(https://storage.perfectcdn.com/nb2br9/go6hpqplfkbtp6kb.png),
        var(--second-bg);
}

.app .card.no-border {
    border: none;
}

.app .btn.btn-primary {
    -webkit-box-shadow: none;
    box-shadow: none;
    width: 100%;
}

.app-widget {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--v2-sp-3) var(--v2-sp-5);
    font-size: 16px;
    margin-bottom: 12px;
    border-radius: var(--border-radius);
    background: #fff;
    box-shadow: var(--v2-elev-1),
        0px 0px 0px 1.182px #f7f8f9;
    border: 1px solid rgba(0, 0, 0, 0.125);
}

.dark .app-widget {
    border-radius: var(--border-radius);
    background: var(--main-bg);
    box-shadow:
        0px 1.182px 2.365px 0px rgb(19 27 38),
        0px 0px 0px 1.182px #1a2433;
}

.app-widget .btn {
    padding: var(--v2-sp-2) var(--v2-sp-6);
    border-radius: var(--v2-r-sm);
    width: max-content !important;
    min-width: 130px;
}

.app-widget small {
    font-size: 16px;
}

.app-widget span {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-2);
}

.app-widget .fa-telegram-plane {
    color: #2b9fd2;
    font-size: 20px;
}

.app-widget .fa-robot {
    color: #3ddc84;
    font-size: 20px;
}






.btn.btn-favorite {
    height: 46px;
    width: 46px !important;
    padding: 0px !important;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}










@media (min-width: 991.98px) {
}




















.header {
    background: rgb(237, 239, 242, 0.7);
    border-radius: var(--border-radius);
    padding: var(--v2-sp-4);
    z-index: 1019;
    right: 0px;
    blur: blur(25px);
}

.dark .header {
    background: rgb(9, 16, 30, 0.7);
}

.header .row {
    min-height: 50px;
}

.page {
    padding: var(--v2-sp-1) 0px 40px 320px;
}

/* Fix for fixed header overlapping content */
/* A95 · ‼ `.header` เป็น position:fixed สูง 58 อยู่ที่ top:14 → ก้นอยู่ที่ 72
   ระยะหลบที่ควรมีเจ้าเดียวคือ `body#dash .container-fluid { padding-top: 92px }`
   = 72 + ช่องว่าง 20 ซึ่งวัดบนเดสก์ท็อป 1392 แล้วตรงเป๊ะ
   บล็อกที่เคยอยู่ตรงนี้คือระยะหลบชั้นที่สอง:
     `.page .container-fluid { padding-top }` ทั้งสี่ที่ (0,2,0) แพ้ (1,1,1)! เสมอ = ตาย
     `.page { padding-top }` สองที่ ไม่ตาย — มันบวกทับ 92 อีก 32
   วัดบนมือถือจริง 390x844: ช่องว่างใต้หัว 52px ทุกหน้า ควรเป็น 20 เท่าเดสก์ท็อป
   ‼ `.page` มีเฉพาะฝั่ง authed (layout.twig บรรทัด 198 อยู่ในสาขา user['auth'])
     ลบแล้วหน้า guest ไม่กระทบ */



.mobHid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

@media (max-width: 640px) {
    .app-widget {
        padding: var(--v2-sp-2);
    }
    .app-widget .btn {
        padding: var(--v2-sp-2) var(--v2-sp-2);
    }
}

@media (max-width: 1199.98px) {
    .header {
        left: 0px;
        padding: var(--v2-sp-4) var(--v2-sp-4);
        position: fixed;
        right: 0;
        top: 0;
        border-radius: 0;
    }
    .m-top {
        margin-top: 20px;
    }
    .page {
        padding-left: 0px;
        padding-top: 80px; /* Add padding for fixed header in mobile */
    }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    .header {
        left: 300px;
    }
    .page {
        padding-left: 315px;
    }
}

@media (max-width: 1399.98px) {
    .page .container-fluid {
        padding: 0 var(--v2-sp-4);
    }
}

.alert {
    border: none;
    padding: var(--v2-sp-4) var(--v2-sp-5);
    font-size: 14px;
    line-height: 21px;
    border-radius: var(--border-radius);
}

.alert.alert-danger {
    color: #fff;
    background: #ee5b5b;
}

.alert.alert-success {
    color: #01b780;
    background: rgba(1, 183, 128, 0.25);
}

.alert.alert-secondary {
    background: rgba(135, 135, 135, 0.25);
    color: #9f9f9f;
}

.alert.alert-primary {
    background: rgba(34, 200, 254, 0.25);
    color: #22c8fe;
}

.alert.alert-warning {
    background: rgba(237, 206, 28, 0.12);
    color: #edb51c;
}

.panel-body {
    background: var(--main-bg);
    border-radius: var(--border-radius);
    font-size: 13px;
}

@media (max-width: 992px) {
    .app-body {
        -webkit-transition: 0.25s ease;
        transition: var(--v2-t-base) var(--v2-ease);
        z-index: 1234;
        position: fixed;
        left: 0px;
        width: 100%;
        top: 0px;
        height: 100%;
        overflow: scroll;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    .app-body .home-header {
        top: 0px;
        position: -webkit-sticky;
        position: sticky;
    }
    .app-body.menu-active {
        position: fixed;
        height: 100%;
        border-radius: var(--v2-r-lg);
        -webkit-transform: scale(0.8) translateX(calc(100% - 100px));
        transform: scale(0.8) translateX(calc(100% - 100px));
        overflow: hidden;
        -webkit-box-shadow: var(--v2-elev-3);
        box-shadow: var(--v2-elev-3);
        opacity: 0.9;
    }
}






.pt-info {
    margin-top: 30px;
}

h4.modal-title {
    font-size: 14px;
}

.modal-body {
    font-weight: 400;
}

.pagination .page-item {
    margin: 0 2px;
}

.pagination .page-item.active .page-link::before {
    content: "";
    bottom: 0;
    height: 3px;
    width: 14px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background-color: #253cff;
}

.pagination .page-item:first-child {
    border-right: 1px solid var(--v2-line);
}

.pagination .page-item:first-child .page-link {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    font-weight: 400;
}

.pagination .page-item:last-child {
    border-left: 1px solid var(--v2-line);
}

.pagination .page-item:last-child .page-link {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    font-weight: 400;
}

.pagination .page-item .page-link {
    background: var(--main-bg);
    border: none;
    margin: 0;
    height: 50px;
    padding: 0;
    min-width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 15;
    line-height: 18px;
    position: relative;
}
/* A55 · สีตัวเลขหน้าเคยเป็น `color: var(--text-color) !important` อยู่ในกฎข้างบนนี้
   โดยไม่มี scope — (0,3,0) ก็จริง แต่ !important ทำให้มันชนะกฎธรรมดาทุกตัวรวมถึง
   ของ Panel A ที่ (1,4,1) หน้าที่กำลังอยู่เลยได้ตัวหนังสือสีเดียวกับพื้น contrast = 1
   ‼ ย้ายมาผูกกับ guest เท่านั้น ฝั่ง guest ได้ค่าเดิมเป๊ะ ห้ามถอด body#outside ออก
   นี่คือคู่แข่งที่ A15 หาไม่เจอตอนเขียนว่า "ยกน้ำหนักสองรอบแล้วยังแพ้" */
body#outside .pagination .page-item .page-link { color: var(--text-color) !important; }

.pagination .page-item .page-link:focus {
    z-index: 2;
}

.pagination .page-item.active .page-link {
    background-color: var(--main-color);
    color: var(--text-white);
}

.blog-txt {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nwo-categories .swiper-slide {
    width: auto !important;
}

.nwo-categories .swiper-wrapper {
    position: relative;
}

.dark .nwo-categories .swiper-wrapper::before,
.dark .nwo-categories .swiper-wrapper::after {
    -webkit-box-shadow: var(--v2-elev-3);
    box-shadow: var(--v2-elev-3);
}

.nwo-categories .swiper-wrapper {
    justify-content: center;
}

/* A70 · กฎฐานสามตัวของ .nwo-cat-btn ถูกลบ
   ‼ ตัวที่กัดคือ `height: 45px` — บล็อก body#dash ตั้ง width: 100% แต่**ไม่ได้ตั้ง height**
     ความสูงจึงยังมาจากที่นี่ การ์ดถูกบีบเหลือ 45px และไอคอนที่สั่งไว้ 40px หดเหลือ 17px
     (มันเป็น flex item ในคอลัมน์ที่ความสูงถูกล็อก จึงโดน flex-shrink)
     เห็นตอนวัดบนหน้าจริง ไม่ใช่ตอนอ่านโค้ด
   ‼ `.nwo-cat-btn` มีเฉพาะบนหน้า neworder ซึ่งเป็นหน้า authed — ไม่มีฝั่ง guest ให้ต้องรักษา
     กฎฐานที่ไม่มี scope พวกนี้จึงเป็นของเหลือจากธีมเดิมล้วน ๆ
   ค่าปัจจุบันทั้งหมดอยู่ในหัวข้อ "Category picker (nwo-categories)" */

.s-light,
.light .s-dark {
    display: none;
}

.s-dark,
.light .s-light {
    display: block;
}



@media (min-width: 992px) {
    .service-wrapper {
        flex-direction: column;
    }
}

@media (min-width: 992px) {
}

@media (max-width: 992px) {
    .nwo-categories .swiper-wrapper {
        justify-content: flex-start;
    }
}

.dropdown-menu {
    background: var(--second-bg);
    border: 1px solid var(--main-border);
    border-radius: var(--v2-r-md);
    padding: var(--v2-sp-2) 0;
    -webkit-animation: 0.3s cubic-bezier(0.25, 0.1, 0.15, 1.34) forwards
        dropdown-active;
    animation: 0.3s cubic-bezier(0.25, 0.1, 0.15, 1.34) forwards dropdown-active;
    margin-top: 60px;
}

.dropdown-menu .dropdown-item {
    color: var(--text-color);
    padding: var(--v2-sp-1) var(--v2-sp-6);
    font-size: 14px;
}

.dropdown-menu .dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.order-box {
    border: 1px solid var(--main-border);
    border-radius: var(--border-radius);
    display: flex;
    justify-content: space-between;
    background: var(--second-bg);
    margin: 15px 0;
    font-size: 14px;
}

.order-box-left {
    width: -webkit-fill-available;
}

.ob-top {
    padding: var(--v2-sp-3) var(--v2-sp-4);
    display: grid;
    font-size: 14px;
    color: var(--v2-ink);
    grid-template-columns: 30fr 1fr;
    border-bottom: 1px solid var(--main-border);
    justify-content: space-between;
    align-items: center;
}

.ob-top span {
    text-overflow: ellipsis;
}


.ob-bottom {
    padding: var(--v2-sp-3) var(--v2-sp-4);
    gap: var(--v2-sp-2);
    color: var(--text-color);
    display: flex;
    justify-content: space-between;
}

.order-box-right {
    padding: var(--v2-sp-2);
    display: flex;
    border-left: 1px solid var(--main-border);
    flex-direction: column;
    gap: var(--v2-sp-1);
}

.order-box .btn {
    font-size: 12px;
    padding: 2px var(--v2-sp-2);
    border-radius: var(--border-radius);
    width: 110px;
    text-align: center;
    background: var(--main-bg);
    border: 1px solid var(--main-border);
    color: var(--text-white);
}

.ord-btn-1,
.ord-btn-1:hover,
.ord-btn-1:focus {
    background: var(--main-color) !important;
    border-color: var(--main-color) !important;
    color: #fff !important;
}

.ord-btn-2,
.ord-btn-2:hover,
.ord-btn-2:focus {
    background: var(--second-bg) !important;
    border-color: var(--main-border) !important;
    color: var(--text-color) !important;
}

.order-box .order-id {
    background: var(--main-color-trans);
    padding: var(--v2-sp-1) var(--v2-sp-4);
    border-radius: var(--border-radius);
    font-size: 13px;
    color: var(--main-color);
}

#notification,
#error-search {
    visibility: hidden;
    min-width: 250px;
    background: var(--main-bg);
    border: 1px solid var(--main-border);
    color: var(--text-color);
    text-align: center;
    border-radius: var(--border-radius);
    padding: var(--v2-sp-4);
    position: fixed;
    bottom: 30px;
    left: 50%;
    z-index: 5;
    transform: translate(-50%, -50%);
}

#notification.show i,
#error-search.show i {
    background: var(--main-color-trans);
    border-radius: var(--v2-r-pill);
    line-height: 1;
    display: flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
}

#notification.show,
#error-search.show {
    visibility: visible;
    -webkit-animation:
        0.5s fadein,
        0.5s 2.5s fadeout;
    animation:
        0.5s fadein,
        0.5s 2.5s fadeout;
    display: flex;
    gap: var(--v2-sp-2);
    justify-content: center;
    align-items: center;
}

#notification.show i,
#error-search.show i {
    color: var(--main-color);
    flex-direction: column;
}

.order-actions .btn-default,
.order-actions .btn-default:hover,
.order-actions .btn-default:focus {
    background: #fe7e7e;
    color: #fff;
    padding: var(--v2-sp-1) var(--v2-sp-5);
    width: auto;
}

.order-actions .btn-primary,
.order-actions .btn-primary:hover,
.order-actions .btn-primary:focus {
    background: #2ba948 !important;
    color: #fff !important;
    padding: var(--v2-sp-1) var(--v2-sp-5) !important;
    border-radius: var(--v2-r-sm)!important;
    width: auto;
}

.modal-order-content {
    display: flex;
    flex-direction: column;
}

.modal-order-content span {
    align-items: flex-start;
    text-align: left;
    color: var(--text-color);
    overflow: hidden;
    padding: var(--v2-sp-1) var(--v2-sp-4);
}

.modal-order-content span {
    border-bottom: 1px solid var(--main-border);
}

.modal-order-content span {
    text-overflow: ellipsis;
}

.modal-order-content strong {
    color: var(--main-color);
}

.modal-order-detail {
    display: grid;
    grid-template-columns: 5fr 4fr 4fr;
}

.modal-order-detail span {
    border-right: 1px solid var(--main-border);
    display: flex;
    flex-flow: nowrap;
    flex-direction: column;
}

.modal-order-detail span:last-child {
    border-right: none;
}

.modal-order-detail span {
    border-bottom: none;
}

.modal-open .modal {
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

.modal-body.order-modal {
    padding: var(--v2-sp-4) 0 0 0;
}

textarea.form-control {
    border-radius: var(--v2-r-md);
}

.neworder-group {
    position: relative;
}

.neworder-group input {
    padding-left: 50px;
}

.neworder-group i {
    position: absolute;
    left: 20px;
    top: 20px;
}

.dash-widget {
    height: 100%;
    flex: 1;
    position: relative;
    background-image: url();
    background-position: center top;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: var(--v2-sp-5);
    overflow: hidden;
}

.dw-item {
    display: flex;
    flex-direction: row;
    gap: var(--v2-sp-4);
    align-items: center;
}

.dw-first {
    display: flex;
    flex-direction: column;
    gap: var(--v2-sp-1);
}

.dw-icon {
    background: var(--main-color);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #000000 !important;
    width: 48px;
    height: 48px;
    border-radius: var(--v2-r-md);
    text-align: center;
    font-size: 26px;
    line-height: 48px;
}

.dw-title {
    color: #9eabc5;
}

.dw-value {
    color: var(--text-color);
    font-size: 26px;
    font-style: normal;
    font-weight: 800;
    line-height: 30px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: var(--v2-sp-2);
}

.dw-value a {
    color: #edb51c;
    font-size: 20px;
}

@media only screen and (max-width: 991.98px) {
    .dash-widget {
        flex-direction: column;
        align-items: start;
        gap: var(--v2-sp-6);
        padding: 0 var(--v2-sp-1);
    }
    .order-box {
        border: 1px solid var(--main-border);
        border-radius: var(--border-radius);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        background: var(--main-bg);
        margin: 10px 0;
    }

    .order-box-left {
        width: -webkit-fill-available;
    }

    .ob-top {
        padding: var(--v2-sp-3) var(--v2-sp-4);
        display: block;
        font-size: 14px;
        color: var(--text-color);
        grid-template-columns: 20fr 1fr;
        border-bottom: 1px solid var(--main-border);
        align-items: center;
        justify-content: space-between;
        text-align: center;
    }

    .ob-top .order-status {
        margin-top: 10px;
    }

    .ob-bottom {
        padding: var(--v2-sp-3) var(--v2-sp-4);
        display: block;
        gap: var(--v2-sp-2);
        word-wrap: break-word;
    }

    .order-box-right {
        padding: var(--v2-sp-2);
        display: flex;
        flex-direction: unset;
        gap: var(--v2-sp-2);
        justify-content: space-between;
        border-top: 1px solid var(--main-border);
    }

    .order-box .btn {
        padding: var(--v2-sp-1) var(--v2-sp-4);
        border-radius: var(--border-radius);
        text-align: center;
        width: -webkit-fill-available;
    }
}

@media (max-width: 992px) {
    .ns-info {
        flex-direction: column;
    }
    .ns-info .ns-item {
        width: 100%;
    }
}

@media (min-width: 992px) {
    .d-hidden {
        display: none !important;
    }
}

.nav {
    position: relative;
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 2px;
    max-width: 100%;
    overflow-x: auto;
    align-items: center;
    list-style: none;
    margin: 0 0 15px 0;
    border-radius: var(--border-radius);
    background: #fff;
    box-shadow: var(--v2-elev-1),
        0px 0px 0px 1.182px #f7f8f9;
    color: var(--text-color) !important;
    padding: var(--v2-sp-2);
    width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.125);
}

.dark .nav {
    background: var(--main-bg);
    color: #fff !important;
    box-shadow:
        0px 1.182px 2.365px 0px rgb(19 27 38),
        0px 0px 0px 1.182px #27303e;
    border: none;
}

.nav-item {
    width: 100%;
}

/* A66 · `color` ของสองกฎนี้ถูกจำกัดขอบเขตเป็น body#outside
   ‼ เหตุผล: `.nav-link.active { color: #000 !important }` (specificity 20 + important)
     ทับทุกกฎสีของแท็บทั้งไฟล์ รวมถึงของ v2 ที่ L1138/L1140 ซึ่งตายมาตลอด
     ตอนที่แท็บที่เลือกยังเป็นแคปซูลเหลือง ตัวอักษรดำจึงถูกอยู่แล้ว ไม่มีใครเห็นปัญหา
     พอ A66 เปลี่ยนแท็บที่เลือกให้ใช้พื้นเดียวกับการ์ด **ธีมมืดได้ดำบนเข้ม = 1.24:1**
     วัดได้บนหน้าจริงหลัง deploy ไม่ใช่จากการอ่านโค้ด
   ‼ ไม่ได้ลบทิ้ง เพราะฝั่ง guest ยังใช้ค่าเดิมอยู่ — ย้ายไปไว้ใต้ body#outside
     ค่าที่ guest ได้จึงเท่าเดิมทุกพิกเซล ส่วน body#dash ตกไปใช้กฎ v2 ที่เขียนไว้แล้ว
   ‼ ห้ามแก้ด้วยการใส่ !important ทับ — นั่นคือการเพิ่มหนี้เพื่อชนะหนี้ */
.nav-link {
    cursor: pointer;
    display: flex;
    padding: var(--v2-sp-2) var(--v2-sp-3);
    justify-content: center;
    align-items: center;
    text-decoration: none;
    gap: var(--v2-sp-2);
    outline: none;
    border-radius: var(--v2-r-md);
    border: 1px solid rgba(0, 0, 0, 0);
    background-color: rgba(0, 0, 0, 0);
    font-size: 14px;
    font-weight: 500;
    line-height: 160%;
    white-space: nowrap;
}
body#outside .nav-link { color: var(--text-color) !important; }
body#outside .nav-link.active { color: #000000 !important; }

.nav-link:hover {
    background: #00000030;
}

.light .nav-link:hover {
    background: var(--second-bg);
}

.light .nav-link:focus {
    color: var(--text-color);
}

.nav-link.active {
    border-radius: var(--v2-r-md);
    background: var(--main-color);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.nav-link .icon {
    font-size: 20px;
}

@media (max-width: 991.98px) {
    .nav,
    .nav-item {
        width: 100%;
    }
}

.tab-content > .active {
    -webkit-animation: 0.3s ease-in-out key-animation;
    animation: 0.3s ease-in-out key-animation;
}

.select2-container {
    width: 100% !important;
}

.select2.select2-container .select2-selection {
    -webkit-border-radius: var(--v2-r-md);
    -moz-border-radius: var(--v2-r-md);
    border-radius: var(--v2-r-md);
    padding: var(--v2-sp-3) var(--v2-sp-6);
    color: var(--text-color);
    display: flex;
    background: var(--second-bg);
    outline: 0;
    transition: var(--v2-t-fast) var(--v2-ease);
    align-items: center;
    border: 1px solid var(--main-border);
    width: 100%;
}

.select2.select2-container .select2-selection .select2-selection__rendered {
    line-height: 32px;
    padding-right: 33px;
    color: var(--text-color);
    border: 0;
    width: 100%;
    display: flex;
}

.select2.select2-container .select2-selection .select2-selection__arrow {
    -webkit-border-radius: 0 var(--border-radius) var(--border-radius) 0;
    -moz-border-radius: 0 var(--border-radius) var(--border-radius) 0;
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    height: 100%;
    width: 26px;
}

.select2.select2-container.select2-container--open
    .select2-selection.select2-selection--single {
    background: var(--second-bg);
    border-radius: var(--v2-r-md);
}

.select2.select2-container.select2-container--open
    .select2-selection.select2-selection--single
    .select2-selection__arrow {
    -webkit-border-radius: 0 var(--border-radius) 0 0;
    -moz-border-radius: 0 var(--border-radius) 0 0;
}

.select2.select2-container.select2-container--open
    .select2-selection.select2-selection--multiple {
    border: 0 solid #34495e;
}

.select2.select2-container.select2-container--focus .select2-selection {
    border: 1px solid var(--main-border);
    border-radius: var(--v2-r-md);
    display: flex;
    align-items: center;
}

.select2-container .select2-dropdown {
    border-radius: var(--v2-r-md)!important;
    background: var(--second-bg);
    border: 0;
    margin-top: 8px !important;
    overflow: hidden;
}

.select2-container .select2-dropdown .select2-results ul {
    background: 0 0;
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    max-height: 286px;
    padding: var(--v2-sp-1);
}

.select2-results__option[aria-selected] {
    cursor: pointer;
    transition: var(--v2-t-base);
    padding: var(--v2-sp-1);
    font-size: 12px;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: var(--main-bg) !important;
    padding: var(--v2-sp-1);
}

.select2-container .select2-dropdown .select2-results ul::-webkit-scrollbar {
    width: 6px;
}

.select2-container
    .select2-dropdown
    .select2-results
    ul::-webkit-scrollbar-track {
    background: 0;
}

.select2-container
    .select2-dropdown
    .select2-results
    ul::-webkit-scrollbar-thumb {
    background-color: var(--main-border);
    border-radius: var(--v2-r-md);
}

.select2-container
    .select2-dropdown
    .select2-results
    ul
    .select2-results__option--highlighted[aria-selected] {
    background-color: var(--main-border) !important;
    transition: var(--v2-t-base);
    color: var(--text-color);
    border-radius: var(--v2-r-sm);
}

.select2-results__option {
    color: var(--text-color) !important;
    font-size: 14px !important;
}

.select2-results__option a {
    color: var(--text-color) !important;
    padding: var(--v2-sp-1) !important;
}

.select2-container--open .select2-dropdown--below {
    border: 1px solid var(--main-border);
    -webkit-box-shadow: 0 5px 35px rgb(49, 156, 255, 0.15);
    box-shadow: 0 5px 35px rgb(49, 156, 255, 0.15);
}

.select2-search--dropdown {
    display: none !important;
}

.modal-content {
    background: var(--main-bg);
    box-shadow:
        0px 1.182px 2.365px 0px rgb(19 27 38),
        0px 0px 0px 1.182px #1a2433;
    border-radius: var(--border-radius);
}

.light .modal-content {
    box-shadow: var(--v2-elev-1),
        0px 0px 0px 1.182px #4e678d;
}

.modal-header {
    border-color: var(--main-border);
}

.modal-header .close {
    color: var(--text-color);
    opacity: 0.7;
    text-shadow: none;
}

.lang-wrapper {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: var(--v2-sp-2);
    width: 100%;
}

.lang-wrapper .lang-item {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-2);
    background: var(--second-bg);
    border: 1px solid var(--main-border);
    border-radius: var(--v2-r-md);
    width: 100%;
    padding: var(--v2-sp-3) var(--v2-sp-2);
    transition: var(--v2-t-base) all;
    color: var(--text-color);
}

.lang-wrapper .lang-item i {
    font-size: 26px;
    border-radius: var(--v2-r-pill);
}

.lang-wrapper .lang-item:hover {
    border-color: var(--main-color);
}

.lang-wrapper .lang-item.active {
    border-color: var(--main-color);
}

.currency-wrapper {
    display: grid;
    align-items: center;
    gap: var(--v2-sp-2);
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
}

.currency-wrapper .currency-item {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-2);
    background: var(--second-bg);
    border: 1px solid var(--main-border);
    border-radius: var(--v2-r-pill);
    width: 100%;
    padding: var(--v2-sp-3) var(--v2-sp-2);
    transition: var(--v2-t-base) all;
    color: var(--text-color);
}

.currency-wrapper .currency-item .cSymbol {
    background: var(--main-color);
    width: 50px;
    text-align: center;
    border-radius: var(--v2-r-pill);
}

.currency-wrapper .currency-item:hover {
    border-color: var(--main-color);
}

.currency-wrapper .currency-item.active {
    border-color: var(--main-color);
}

.dd-custom .dropdown-menu {
    right: 15px !important;
    left: 15px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: translate3d(0, 80px, 0) !important;
    background: var(--main-bg);
    color: #fff !important;
    border: 1px solid var(--main-border);
    box-shadow:
        0 0.182px 2.365px 0 rgb(19 27 38),
        0 0 0 0.182px #27303e;
    border-radius: var(--border-radius);
    padding: 0;
    overflow: hidden;
    transition: var(--v2-t-fast);
    margin-top: 0;
}

.light .dd-custom .dropdown-menu {
    background: var(--main-bg);
    color: #fff !important;
    border: 1px solid var(--second-bg);
    box-shadow:
        0 0.182px 2.365px 0 var(--second-bg),
        0 0 0 0.182px var(--second-bg);
}

.dd-custom .dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-2);
    color: var(--text-color);
    padding: var(--v2-sp-2) var(--v2-sp-4);
    border-bottom: 1px solid var(--main-border);
    font-size: 14px;
}

.dd-custom .dropdown-item:focus,
.dd-custom .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.03);
}

.updates-box {
    background:
        radial-gradient(
            397.75% 81.29% at 109.6% 34.26%,
            #0d1117 0%,
            #0e1621 99.99%,
            #0e131b 100%
        ),
        #070a0e;
    color: #fff !important;
    border: 1px solid var(--main-bg);
    border-radius: var(--border-radius);
    padding: var(--v2-sp-4) var(--v2-sp-5);
    position: relative;
    overflow: hidden;
    margin-bottom: 15px;
}

.updates-box.disabled::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 55%;
    width: 100%;
    height: 100%;
    transform: translate(3%, 40%) scale(1);
    transition: var(--v2-t-fast) var(--v2-ease);
    background: linear-gradient(
        216deg,
        rgb(255, 255, 255, 0) 0%,
        rgb(214, 45, 45, 1) 100%
    );
    border-radius: var(--v2-r-pill);
    filter: blur(80px);
    z-index: 1;
}

.updates-box.enabled::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 55%;
    width: 100%;
    height: 100%;
    transform: translate(3%, 40%) scale(1);
    transition: var(--v2-t-fast) var(--v2-ease);
    background: linear-gradient(
        216deg,
        rgb(255, 255, 255, 0) 0%,
        rgb(41, 203, 105, 1) 100%
    );
    border-radius: var(--v2-r-pill);
    filter: blur(80px);
    z-index: 1;
}

.updates-box.decrease::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 55%;
    width: 100%;
    height: 100%;
    transform: translate(3%, 40%) scale(1);
    transition: var(--v2-t-fast) var(--v2-ease);
    background: linear-gradient(
        216deg,
        rgb(255, 255, 255, 0) 0%,
        rgb(28, 240, 255, 1) 100%
    );
    border-radius: var(--v2-r-pill);
    filter: blur(80px);
    z-index: 1;
}

.updates-box.increased::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 55%;
    width: 100%;
    height: 100%;
    transform: translate(3%, 40%) scale(1);
    transition: var(--v2-t-fast) var(--v2-ease);
    background: linear-gradient(
        216deg,
        rgb(255, 255, 255, 0) 0%,
        rgb(255, 154, 0, 1) 100%
    );
    border-radius: var(--v2-r-pill);
    filter: blur(80px);
    z-index: 1;
}

.ub-first {
    display: flex;
    flex-direction: column;
}

.ub-first .ub-header {
    font-size: 13px;
    color: #898e96;
}

.ub-first .ub-service {
    font-size: 14px;
}

.updates-box .ub-last {
    font-size: 13px;
}

.updates-box.disabled .ub-last {
    color: rgb(214, 45, 45, 1);
}

.updates-box.enabled .ub-last {
    color: rgb(41, 203, 105, 1);
}

.updates-box.decrease .ub-last {
    color: rgb(28, 240, 255, 1);
}

.updates-box.increased .ub-last {
    color: rgb(255, 154, 0, 1);
}

.alert strong {
    font-weight: 600;
}

.alert p {
    margin-bottom: 5px;
}

.sb-wrapper {
    display: grid;
    align-items: center;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--v2-sp-2);
    margin-bottom: 15px;
}

@media (max-width: 991.98px) {
    .sb-wrapper {
        grid-template-columns: repeat(1, 1fr);
    }
}

.service-badge {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-1);
    border: 1px solid var(--main-border);
    background: var(--main-bg);
    color: var(--text-color);
    padding: var(--v2-sp-1);
    border-radius: var(--v2-r-md);
}

.dark .service-badge {
    background:
        radial-gradient(
            397.75% 81.29% at 109.6% 34.26%,
            #0d1117 0%,
            #0e1621 99.99%,
            #0e131b 100%
        ),
        #070a0e;
    color: #fff !important;
    border: 1px solid #27303e;
    box-shadow:
        0px 1.182px 0.365px 0px rgb(19 27 38),
        0px 0px 0px 0.182px #27303e;
}

.service-badge .sb-icon {
    width: 20px;
}

.panel-body.service-desc {
    background: var(--main-bg);
    border-radius: var(--border-radius);
    font-size: 14px;
    padding: var(--v2-sp-2);
    margin-bottom: 5px;
    position: relative;
    overflow: hidden;
}

.panel-body.service-desc:before {
    content: "";
    position: absolute;
    top: 50%;
    right: 5%;
    width: 90%;
    height: 50%;
    transform: translate(100%, -60%) scale(1);
    transition: var(--v2-t-fast) var(--v2-ease);
    background: linear-gradient(
        150deg,
        var(--main-color) 0%,
        var(--main-color-trans) 100%
    );
    border-radius: var(--v2-r-pill);
    filter: blur(100px);
    z-index: 0;
}

.faq-ss-tabs .home-ss-tab {
    position: relative;
    cursor: pointer;
    padding: var(--v2-sp-3) var(--v2-sp-5);
    -webkit-transition: 0.2s ease;
    transition: var(--v2-t-base) var(--v2-ease);
    margin-bottom: 14px;
    background:
        radial-gradient(
            68.6% 68.6% at 57.8% 96.86%,
            rgba(56, 75, 110, 0.2) 0%,
            rgba(5, 9, 16, 0.2) 100%
        ),
        linear-gradient(0deg, var(--second-bg) 0%, var(--second-bg) 100%),
        var(--second-bg);
    border: 1px solid var(--main-border);
    box-shadow:
        0px 1.182px 2.365px 0px rgb(19 27 38),
        0px 0px 0px 1.182px #000000;
    border-radius: var(--v2-r-md);
}

.faq-ss-tabs .home-ss-tab h4 {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 0;
}

.faq-ss-tabs .home-ss-tab .fa-angle-up {
    display: none;
}

.faq-ss-tabs .home-ss-tab .ss-tab-head {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.faq-ss-tabs .home-ss-tab.active {
    border-radius: var(--v2-r-md);
}

.faq-ss-tabs .home-ss-tab.active .fa-angle-up {
    display: block;
}

.faq-ss-tabs .home-ss-tab.active .fa-angle-down {
    display: none;
}

.faq-ss-tabs .home-ss-tab .ss-tab-head .right-p {
    color: var(--text-color);
    font-size: 16px;
    background: #194670;
    width: 24px;
    height: 24px;
    line-height: 28px;
    text-align: center;
    border-radius: 100%;
}

.light .faq-ss-tabs .home-ss-tab .ss-tab-head .right-p {
    background: #dcdee1;
}

.faq-ss-tabs .home-ss-tab .ss-tab-content {
    display: none;
    padding-top: var(--v2-sp-3);
    color: var(--text-color);
    font-size: 14px;
    line-height: 170%;
    padding-bottom: var(--v2-sp-2);
}

.section-top {
    display: flex;
    justify-content: center;
    text-align: center;
}

.section-header {
    display: flex;
    align-items: center;
    max-width: 600px;
    width: 100%;
    flex-direction: column;
    gap: var(--v2-sp-4);
    margin-bottom: 40px;
}

.section-header h5 {
    font-size: 26px;
}

.section-header p {
    color: #9db0d9;
}

.light .section-header p {
    color: #28344e;
}

.sh-label {
    border-radius: var(--v2-r-pill);
    display: inline-flex;
    padding: 1px;
    overflow: hidden;
    position: relative;
    background:
        radial-gradient(
            77.87% 74.89% at 99.57% 106.76%,
            var(--second-bg) 0%,
            rgba(6, 11, 26, 0.2) 100%
        ),
        var(--second-bg);
}

.light .sh-label {
    background: none;
}

.sh-content {
    position: relative;
    z-index: 10;
    background:
        radial-gradient(
            68.6% 68.6% at 57.8% 96.86%,
            rgba(49, 156, 255, 0.2) 0%,
            rgba(5, 9, 16, 0.2) 100%
        ),
        linear-gradient(0deg, var(--second-bg) 0%, var(--second-bg) 100%),
        var(--second-bg);
    border-radius: var(--v2-r-pill);
    padding: var(--v2-sp-1) var(--v2-sp-4) var(--v2-sp-1) var(--v2-sp-1);
    display: flex;
    align-items: center;
    gap: var(--v2-sp-4);
    color: var(--text-color);
    font-size: 14px;
    font-weight: 500;
    line-height: 25px;
    text-align: center;
}

.sh-content > .icon {
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background:
        radial-gradient(
            42.73% 42.73% at 50% 96.36%,
            var(--main-color-hover) 0%,
            var(--main-color) 100%
        ),
        rgba(1, 179, 255, 0.2);
    padding: var(--v2-sp-1);
    color: #fff;
    width: 32px;
    height: 32px;
    font-size: 14px;
    margin: 0;
}

.sh-glow {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: rgb(49 156 255 / 50%);
    filter: blur(20px);
    -webkit-filter: blur(20px);
    position: absolute;
    z-index: 5;
    transform: translate(-50%, -50%);
}

.payments-area {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--v2-sp-7);
}

.p-cards {
    position: relative;
    z-index: 10;
    background:
        radial-gradient(
            68.6% 68.6% at 57.8% 96.86%,
            rgba(56, 75, 110, 0.2) 0%,
            rgba(5, 9, 16, 0.2) 100%
        ),
        linear-gradient(0deg, var(--second-bg) 0%, var(--second-bg) 100%),
        var(--second-bg);
    border-radius: var(--v2-r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--v2-sp-4);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    line-height: 25px;
    text-align: center;
    height: 80px;
    border: 1px solid var(--main-border);
}

.p-cards img {
    max-height: 50px;
}

.home-card {
    background-image: url(../img/home-card-bg.png);
    background-position: center center;
    background-size: cover;
    border-radius: var(--v2-r-md);
    padding: 65px 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.home-card .hc-1 {
    max-width: 500px;
}

.home-card .hc-1 p {
    font-size: 14px;
    line-height: 24px;
    font-weight: 400;
}

.c-reviews .slick-track {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-7);
}

.review-item {
    background:
        radial-gradient(
            68.6% 68.6% at 57.8% 96.86%,
            rgba(56, 75, 110, 0.2) 0%,
            rgba(5, 9, 16, 0.2) 100%
        ),
        linear-gradient(0deg, var(--second-bg) 0%, var(--second-bg) 100%),
        var(--second-bg);
    border: 1px solid var(--main-border);
    padding: var(--v2-sp-5) var(--v2-sp-7) var(--v2-sp-2) var(--v2-sp-7);
    border-radius: var(--v2-r-lg);
    position: relative;
    max-width: 400px;
}

.light .review-item,
.light .faq-ss-tabs .home-ss-tab,
.light .p-cards,
.light .sh-content {
    background:
        radial-gradient(
            68.6% 68.6% at 57.8% 96.86%,
            rgb(255 255 255 / 20%) 0,
            rgb(254 254 254 / 20%) 100%
        ),
        linear-gradient(0deg, #e7e8e9 0, #fff 100%), var(--main-bg);
    box-shadow: none;
}

.review-item .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: var(--v2-sp-1);
    color: var(--text-color);
    border-bottom: 1px solid var(--main-border);
}

.review-item .head .r-user {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-2);
}

.review-item .head .r-user .avatar {
    background: var(--main-bg);
    width: 42px;
    height: 42px;
    border-radius: var(--v2-r-pill);
    font-size: 26px;
    line-height: 46px;
    text-align: center;
}

.review-item .head .r-user .name {
    font-weight: 600;
    font-size: 16px;
}

.review-item .head .r-user .name span {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--main-color);
}

.review-item .head .rate {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-1);
    font-size: 20px;
    color: #f47133;
}

.review-item .text p {
    color: #9eabc5;
}

.light .review-item .text p {
    color: #28344e;
}

.noaOuFeCard {
    background: var(--main-bg) !important;
    background-image: url(https://storage.perfectcdn.com/nb2br9/wnzd32gb6o6t33c3.png) !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center right !important;
    box-shadow: none !important;
    border: 1px solid var(--main-border);
}

.light .noaOuFeCard {
    background-image: url(https://storage.perfectcdn.com/nb2br9/q7u9hkbe187ur5in.png) !important;
}

.noaOuFeIt .icon {
    background: var(--main-color);
    clip-path: polygon(
        92.32051% 40%,
        93.79385% 43.1596%,
        94.69616% 46.52704%,
        95% 50%,
        94.69616% 53.47296%,
        93.79385% 56.8404%,
        92.32051% 60%,
        79.82051% 81.65064%,
        77.82089% 84.50639%,
        75.35575% 86.97152%,
        72.5% 88.97114%,
        69.3404% 90.44449%,
        65.97296% 91.34679%,
        62.5% 91.65064%,
        37.5% 91.65064%,
        34.02704% 91.34679%,
        30.6596% 90.44449%,
        27.5% 88.97114%,
        24.64425% 86.97152%,
        22.17911% 84.50639%,
        20.17949% 81.65064%,
        7.67949% 60%,
        6.20615% 56.8404%,
        5.30384% 53.47296%,
        5% 50%,
        5.30384% 46.52704%,
        6.20615% 43.1596%,
        7.67949% 40%,
        20.17949% 18.34936%,
        22.17911% 15.49361%,
        24.64425% 13.02848%,
        27.5% 11.02886%,
        30.6596% 9.55551%,
        34.02704% 8.65321%,
        37.5% 8.34936%,
        62.5% 8.34936%,
        65.97296% 8.65321%,
        69.3404% 9.55551%,
        72.5% 11.02886%,
        75.35575% 13.02848%,
        77.82089% 15.49361%,
        79.82051% 18.34936%
    );
    width: 82px;
    height: 82px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    color: #fff;
    margin-bottom: 30px;
}

.noaOuFeIt .title {
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    color: var(--text-color);
    margin-bottom: 10px;
}

.noaOuFeIt .text {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: rgba(255, 255, 255, 0.5);
    max-width: 230px;
    margin-bottom: 20px;
}

.light .noaOuFeIt .text {
    color: #28344e;
}

footer {
    border-top: 1px solid var(--main-border);
}

footer .footerTop {
    background: -webkit-gradient(
        linear,
        left top,
        right top,
        from(var(--main-color-hover)),
        to(var(--main-color))
    );
    background: -webkit-linear-gradient(
        left,
        var(--main-color-hover) 0%,
        var(--main-color) 100%
    );
    background: -o-linear-gradient(
        left,
        var(--main-color-hover) 0%,
        var(--main-color) 100%
    );
    background: linear-gradient(
        to right,
        var(--main-color-hover) 0%,
        var(--main-color) 50%,
        var(--main-color-hover) 100%
    );
    padding: var(--v2-sp-6) 0;
    position: relative;
}

footer .footerTop .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

footer .footerTop .info {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-4);
}

footer .footerTop .info .text {
    color: #fff;
    font-size: 14px;
}

footer .footerTop .info .icon i {
    display: flex;
    font-size: 56px;
    color: #fff;
}

footer .footerTop .info .text span {
    display: block;
    font-weight: 600;
    font-size: 26px;
    color: #fff;
}

.footerTop .action {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-2);
}

.footerTop .action > :is(a, button) {
    color: #fff;
    font-size: 26px;
    position: relative;
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    border: 2px dashed #fff;
    transition: var(--v2-t-base);
    cursor: pointer;
}

.footerTop .action > :is(a, button):hover {
    background: #fff;
    border: 2px solid #fff;
    color: var(--main-color);
}

.footerTop .action > a.footWhatsapp {
    width: auto;
    border-radius: var(--v2-r-lg);
    padding: var(--v2-sp-1) var(--v2-sp-5);
    font-size: 16px;
    border-style: solid;
    background: #fff;
    color: var(--main-color);
    gap: var(--v2-sp-5);
    font-weight: 600;
}

.footerTop .action > a.footWhatsapp > i {
    font-size: 20px;
}

footer .footTop {
    padding: var(--v2-sp-7) 0 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

footer .footTop .alert {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-4);
    max-width: 513px;
    padding-left: 0;
}

footer .footTop .alert .icon {
    min-width: 60px;
    height: 60px;
    border-radius: 100%;
    background: var(--main-color);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}

footer .footTop .alert .text {
    color: var(--text-color);
    font-size: 16px;
}

footer .footTop .alert span {
    color: #a7afd0;
}

footer .footTop .action {
    display: flex;
    align-items: center;
}

footer .footTop .action .footLogo img {
    height: 40px;
}

footer .footTop .action .socialMedias {
    margin-left: 25px;
    border-left: 1px solid var(--v2-line);
    padding: var(--v2-sp-2) 0;
    padding-left: var(--v2-sp-6);
    display: flex;
    align-items: center;
    gap: var(--v2-sp-2);
}

footer .footTop .action .socialMedias .item {
    min-width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--main-color);
    border-radius: 100%;
    color: #fff;
    font-size: 20px;
}

footer .footBottom {
    background: var(--main-bg);
}

footer .footBottom .container .copyright {
    /* was #a7afd0, a lavender-grey from the stock theme: 2.17:1 on the light
       footer. --v2-ink-mute follows the theme and clears AA in both. */
    color: var(--v2-ink-mute);
    padding: var(--v2-sp-4) 0;
    text-align: center;
}

footer .footBottom .footer-alt {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

footer .footBottom .footer-alt .footer-links {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-4);
}

section.counts {
    position: relative;
    background: -webkit-gradient(
        linear,
        left top,
        right top,
        from(var(--main-color-hover)),
        to(var(--main-color))
    );
    background: -webkit-linear-gradient(
        left,
        var(--main-color-hover) 0%,
        var(--main-color) 100%
    );
    background: -o-linear-gradient(
        left,
        var(--main-color-hover) 0%,
        var(--main-color) 100%
    );
    background: linear-gradient(
        to right,
        var(--main-color-hover) 0%,
        var(--main-color) 50%,
        var(--main-color-hover) 100%
    );
    padding: var(--v2-sp-6) 0;
}

section.counts::after {
    content: "";
    position: absolute;
    left: calc(50% - 20px);
    bottom: -14px;
    width: 40px;
    height: 15px;
    background: var(--main-color);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    z-index: 2;
}

.usCount {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.usCount .item {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-4);
}

.usCount .item .icon {
    min-width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    border: 1px dashed #fff;
    font-size: 26px;
    color: #fff;
}

.usCount .item .text {
    color: #9db0d9;
    font-size: 16px;
    line-height: 25px;
}

.usCount .item .text span {
    display: block;
    color: #fff;
    font-weight: 500;
    font-size: 26px;
}

.whyUsCards .card {
    padding: var(--v2-sp-7) var(--v2-sp-7) var(--v2-sp-1) var(--v2-sp-7);
    position: relative;
    overflow: hidden;
    width: 100%;
}

.whyUsCards .card .icon {
    position: absolute;
    right: -15px;
    top: -15px;
    min-width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: var(--v2-sp-2);
    padding-top: var(--v2-sp-2);
    background: var(--main-color);
    border-radius: 100%;
    font-size: 26px;
    color: #fff;
    font-weight: 700;
    z-index: 1;
}

.whyUsCards .card .icon::before {
    content: "";
    position: absolute;
    left: -7px;
    top: -7px;
    right: -7px;
    bottom: -7px;
    border-radius: 100%;
    border: 2px dashed var(--main-color-hover);
    z-index: -1;
}

.whyUsCards .card .title {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 5px;
}

.whyUsCards .card p {
    color: #9eabc5;
    font-size: 14px;
}

.rank-card {
    position: relative;
    overflow: hidden;
}

.rank-card .card-body {
    z-index: 2;
}

.rank-card:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url(../img/rank-bg.svg);
    background-repeat: no-repeat;
    background-position: bottom 0 right 0;
    z-index: 1;
}

.rank-card .progress {
    background-color: var(--second-bg);
    border-radius: var(--v2-r-sm);
    height: 10px;
    width: 100%;
    position: relative;
}

.rank-card .progress-bar {
    background-color: var(--main-color);
}

#currentRank {
    background: var(--main-color-trans);
    padding: var(--v2-sp-1) var(--v2-sp-2) var(--v2-sp-1) var(--v2-sp-1);
    border-radius: var(--v2-r-pill);
    color: var(--main-color);
}

#currentRank i {
    background: var(--main-color);
    color: #fff;
    padding: var(--v2-sp-1);
    border-radius: var(--v2-r-pill);
}

#currentRank span {
    color: var(--text-color);
}

#currentRank span strong {
    color: var(--main-color);
}

#nextRank {
    color: var(--main-color);
}

#nextRank i {
    color: #fff;
}

#nextRank span {
    color: var(--text-color);
}

#nextRank span strong {
    color: var(--main-color);
}

.rank-card .rank-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.signup-area {
    background:
        url(https://storage.perfectcdn.com/nb2br9/oe2oqi31hs6djxcp.svg) center
            center/cover no-repeat,
        center center/cover no-repeat #0d1117;
    min-height: 100vh;
}

.signup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgb(2, 2, 3, 0.3);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: var(--v2-sp-4);
    z-index: 9999;
}

.light .signup-header {
    background: rgb(243, 243, 244, 0.3);
}

.account_status_wraper .account_status_btn.active,
.signup-badge .icon {
    background: var(--main-color);
}

.signup-content {
    background: var(--main-bg);
    border: 1px solid var(--main-border);
    border-radius: var(--v2-r-md);
    padding: var(--v2-sp-6);
    margin-top: 15px;
}

.signup-badge {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-4);
    margin-top: 100px;
}

.signup-badge .icon {
    width: 45px;
    height: 45px;
    font-size: 26px;
    text-align: center;
    border-radius: var(--v2-r-sm);
    color: var(--text-white);
}

.signup-badge .text {
    display: flex;
    flex-direction: column;
}

.signup-badge .text span {
    font-size: 16px;
    font-weight: 600;
}

.card.card-addfunds,
.card.card-tickets {
    display: flex;
    padding: var(--v2-sp-2);
    align-items: center;
    gap: var(--v2-sp-4);
    flex-direction: row;
}

.card.card-addfunds > .fal,
.card.card-tickets > .fal {
    color: var(--main-color);
    padding: var(--v2-sp-2);
    border-radius: var(--v2-r-sm);
    background: var(--main-color-trans);
}

.card.card-addfunds .btn,
.card.card-tickets .btn {
    width: max-content;
    margin-left: auto;
    border-radius: var(--v2-r-sm);
}

.panel-body.border-solid {
    background: var(--main-bg);
    border-radius: var(--border-radius);
    font-size: 13px;
    padding: var(--v2-sp-2);
    margin-bottom: 5px;
    position: relative;
    overflow: hidden;
}

.panel-body.border-solid:before {
    content: "";
    position: absolute;
    top: 50%;
    right: 5%;
    width: 90%;
    height: 50%;
    transform: translate(100%, -60%) scale(1);
    transition: var(--v2-t-fast) var(--v2-ease);
    background: linear-gradient(
        150deg,
        var(--main-color) 0%,
        var(--main-color-trans) 100%
    );
    border-radius: var(--v2-r-pill);
    filter: blur(100px);
    z-index: 0;
}

.addBalanceBtn {
    background: var(--second-bg);
    position: relative;
}

.addBalance {
    display: grid;
    border-radius: var(--v2-r-sm);
    grid-template-columns: repeat(4, 1fr);
    gap: var(--v2-sp-2);
}

.addBalanceBtn {
    padding: var(--v2-sp-5) var(--v2-sp-4);
    border-radius: var(--v2-r-sm);
    text-align: center;
    border: 1px solid var(--main-border);
    color: var(--text-color);
    font-weight: 600;
}

.addBalanceBtn:focus,
.addBalanceBtn:hover {
    border: 1px solid var(--main-color) !important;
}

.addBalanceBtn span {
    background: var(--main-color);
    position: absolute;
    right: 7px;
    width: auto;
    height: 24px;
    top: 7px;
    line-height: 24px;
    font-size: 12px;
    border-radius: var(--v2-r-xs);
    padding: 0 var(--v2-sp-1);
    color: var(--text-white);
}


.order-item-top {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px dashed var(--main-border);
    padding-bottom: var(--v2-sp-2);
}

.oit-first {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-2);
}

.oit-first .order-id {
    background: var(--main-border);
    min-width: 100px;
    height: 30px;
    line-height: 30px;
    border-radius: var(--v2-r-sm);
    text-align: center;
    color: var(--text-color);
}

.oit-last {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-2);
}

.oit-last .btn-danger,
.oit-last .btn-success,
.oit-last .btn-primary {
    width: 40px !important;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: var(--v2-r-sm);
}

.order-item-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
}

.order-item-bottom .oib-first {
    display: flex;
    align-items: center;
}

.order-item-bottom .oib-first .link {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-1);
    color: #22c8fe;
    background: #22c8fe31;
    padding: var(--v2-sp-1) var(--v2-sp-2);
    border-radius: var(--v2-r-sm);
}

.order-item-bottom .oib-first .link strong {
    max-width: 200px;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.order-item-bottom .oib-first .item {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-1);
    color: var(--text-color);
    background: #191a1e;
    padding: var(--v2-sp-1) var(--v2-sp-2);
    border-radius: var(--v2-r-sm);
    white-space: nowrap;
}

.order-item-bottom .oib-first .item .primary-color {
    color: var(--main-color-hover) !important;
}

.order-item-bottom .oib-last {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--v2-sp-2);
}

.order-item-bottom .oib-last .btn {
    font-size: 14px;
    padding: 0 var(--v2-sp-4);
    height: 35px;
    line-height: 35px;
}

.order-item-bottom .oib-last .btn-success {
    border-radius: var(--v2-r-sm);
}

.order-item-bottom .sib-last .btn.btn-primary {
    border-radius: var(--v2-r-sm);
}

.order-status {
    min-width: max-content;
}

.order-status .os-widget {
    padding: var(--v2-sp-1) var(--v2-sp-2);
    border-radius: var(--v2-r-sm);
    font-size: 13px;
}


.os-widget.processing {
    background: #4a5cf621;
    border: 1px solid #4a5cf6;
    color: #4a5cf6;
}

.os-widget.partial {
    background: #6a7b9121;
    border: 1px solid #6a7b91;
    color: #6a7b91;
}

.os-widget.pending {
    background: #ffc10721;
    border: 1px solid #ffc107;
    color: #ffc107;
}

.os-widget.inprogress {
    background: #f5830021;
    border: 1px solid #f58300;
    color: #f58300;
}


.order-actions {
    display: flex;
    gap: var(--v2-sp-1);
}

.order-actions .btn,
.order-actions .btn:hover,
.order-actions .btn:focus {
    height: 30px !important;
    line-height: 30px !important;
    text-align: center;
    font-size: 13px !important;
    border-radius: var(--v2-r-sm);
}

#notify {
    visibility: hidden;
    width: 100%;
    background: var(--main-color);
    border-bottom: 1px solid var(--main-color-hover);
    color: var(--text-white);
    text-align: center;
    padding: var(--v2-sp-7) var(--v2-sp-4);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* A58 · สองกฎ `#notify.show i` (สี่เหลี่ยมขาว 30px) ถูกลบ — มันเป็น (1,1,1) ซึ่งชนะ
   กฎแผ่นไอคอนตัวใหม่ที่ (1,0,2) ลบคู่แข่งแทนการเพิ่มน้ำหนัก ตามกฎของเฟสนี้
   ‼ ห้ามเขียน `#notify.show i` กลับมา — ถ้าจะแต่งไอคอน ให้แก้ `body#dash #notify i` */

#notify.show {
    visibility: visible;
    -webkit-animation:
        0.5s fadein,
        0.5s 2.5s fadeout;
    animation:
        0.5s fadein,
        0.5s 2.5s fadeout;
    display: flex;
    gap: var(--v2-sp-2);
    justify-content: center;
    align-items: center;
}

#notify #notifyText {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-2);
}

.card-heads {
    border: 1px solid var(--main-border);
    padding: var(--v2-sp-6) var(--v2-sp-2);
    border-radius: var(--border-radius);
    text-align: center;
    margin-bottom: 15px;
}

#notify,
.dw-icon,
.service-cat-side {
    background: var(--main-color);
}

.service-cat-side {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--v2-sp-4) var(--v2-sp-7);
    background-repeat: no-repeat;
    background-position: right center;
    border-radius: var(--v2-r-md);
    margin-bottom: 14px;
}

.child-item,
.service-item {
    padding: var(--v2-sp-2);
    box-sizing: border-box;
    font-size: 14px;
    font-weight: 400;
    position: relative;
    background: var(--main-border);
    border-radius: var(--border-radius);
    margin-bottom: 10px;
    border: 1px solid #273452;
}

.services-item-top {
    border-color: #273452 !important;
}

.light .services-item-top,
.light .service-item {
    border-color: #b4bbcc !important;
}

.order-item {
    padding: var(--v2-sp-4) var(--v2-sp-2);
    box-sizing: border-box;
    font-size: 16px;
    position: relative;
    background: var(--second-bg);
    border-radius: var(--border-radius);
    margin-bottom: 20px;
    border: 1px solid var(--main-border);
}

.order-item:nth-child(odd) {
    border-color: #273452;
}

.order-item:nth-child(even) {
    background: #111112;
    border-color: #273452;
}

.light .order-item:nth-child(even),
.light .order-item:nth-child(odd) {
    border-color: #b4bbcc;
}

.order-item:nth-child(even) .oit-first .order-id {
    background: var(--main-bg);
}

.order-item:nth-child(even) .order-item-top,
.order-item:nth-child(odd) .order-item-top {
    border-color: #273452;
}

.light .order-item:nth-child(even) .order-item-top,
.light .order-item:nth-child(odd) .order-item-top {
    border-color: #b4bbcc;
}

.order-item:nth-child(even) .order-item-bottom .oib-first .item {
    background: var(--main-bg);
}

.order-item:hover {
    border-color: var(--main-color);
    box-shadow: 0px 14px 25px var(--main-color-trans);
    cursor: pointer;
}


.sit-first .services-id {
    background: var(--main-color);
    width: 60px;
    height: 30px;
    line-height: 30px;
    border-radius: var(--v2-r-sm);
    text-align: center;
    color: var(--text-white);
}

.hit-first .history-id,
.tit-first .ticket-id {
    background: var(--main-border);
    width: 60px;
    height: 30px;
    line-height: 30px;
    border-radius: var(--v2-r-sm);
    text-align: center;
    color: var(--text-color);
}

.sit-last .services-rate {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-2);
    color: #09b797;
    background: #2dfad431;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: var(--v2-r-sm);
    padding: 0 var(--v2-sp-2);
}

.sit-last .btn-favorite .fas.fa-star {
    width: 40px;
    height: 30px;
    line-height: 30px;
    background: var(--main-color);
    text-align: center;
    border-radius: var(--v2-r-sm);
    color: var(--main-color-hover) !important;
    background-clip: unset;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
}

.sit-last .favorite {
    width: 40px;
    height: 30px;
    line-height: 30px;
    background: var(--main-border);
    text-align: center;
    border-radius: var(--v2-r-sm);
    color: var(--text-color);
}

.sit-last .favorite.active {
    background: var(--main-color);
}


.order-item-bottom .oib-first .link,
.services-item-bottom .sib-first .min,
.updates-item-bottom .uib-first .decreased {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-1);
    color: var(--v2-info-text);
    background: var(--main-bg);
    padding: var(--v2-sp-1) var(--v2-sp-2);
    border-radius: var(--v2-r-sm);
}

.services-item-bottom .sib-first .max,
.updates-item-bottom .uib-first .removed {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-1);
    color: var(--v2-danger-text);
    background: var(--main-bg);
    padding: var(--v2-sp-1) var(--v2-sp-2);
    border-radius: var(--v2-r-sm);
}

.history-item-bottom .hib-first .date,
.services-item-bottom .sib-first .avg,
.ticket-item-bottom .tib-first .date {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-1);
    color: var(--text-color);
    background: var(--main-border);
    padding: var(--v2-sp-1) var(--v2-sp-2);
    border-radius: var(--v2-r-sm);
}

.services-item-bottom .sib-first .avg strong {
    color: #b9ddff;
}

.history-item-bottom .hib-last,
.order-item-bottom .oib-last,
.services-item-bottom .sib-last,
.ticket-item-bottom .tib-last,
.updates-item-bottom .uib-last {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--v2-sp-2);
}

.order-item-bottom .oib-last .btn,
.services-item-bottom .sib-last .btn {
    font-size: 14px;
    padding: 0 var(--v2-sp-4);
    height: 35px;
    line-height: 35px;
}

.order-item-bottom .sib-last .btn.btn-primary,
.services-item-bottom .sib-last .btn.btn-primary {
    border-radius: var(--v2-r-sm);
}

.s-count {
    background: var(--main-color-hover);
    padding: 2px var(--v2-sp-2);
    border-radius: var(--v2-r-sm);
    font-size: 13px;
    font-weight: 400;
    color: var(--text-white);
}

.service-cat-side .service-cat-header {
    font-weight: 500;
    font-size: 16px;
    /* เคยเป็น 23px — เขียนไว้ตอน font-size ยังเป็น 16px (= 1.44) พอมีกฎอื่น
       ตั้ง 20px ทีหลัง อัตราส่วนตกเหลือ 1.15 เงียบ ๆ (2026-08-02) */
    line-height: var(--v2-lh-tight);
    color: #fff;
    margin-bottom: 0;
}

#notify #notifyText,
.child-item-bottom .cib-first,
.cit-first,
.cit-last,
.history-item-bottom .hib-first,
.hit-first,
.hit-last,
.oit-first,
.oit-last,
.services-item-bottom .sib-first,
.sit-first,
.sit-last,
.ticket-item-bottom .tib-first,
.tit-first,
.tit-last,
.uit-first,
.uit-last,
.updates-item-bottom .uib-first {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-2);
}

.order-item-bottom .oib-first {
    gap: var(--v2-sp-4);
}

.service-search .textbox,
.service-search .textbox:focus {
    width: 100%;
    height: 52px;
    background-color: var(--second-bg);
    outline: 0;
    color: var(--text-color);
    font-weight: 400;
    font-size: 14px;
    line-height: 14px;
    border-radius: var(--border-radius);
    padding: 0 var(--v2-sp-6);
    border: 1px solid var(--main-border) !important;
}

.api-box,
.api-code,
.api-item,
.api-list,
.api-list .api-item,
.api-top-item,
.ns-box,
pre[class*="language-"] {
    display: flex;
}

.payment-history {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: var(--v2-sp-2);
}

.api-item,
.api-list,
.api-top-item {
    background: var(--second-bg);
}

.api-title {
    font-size: 20px;
    color: var(--text-color);
    margin-top: 10px;
    margin-bottom: 10px;
}

.api-box {
    flex-direction: column;
}

.api-top-item {
    padding: var(--v2-sp-2);
    border: 1px solid var(--main-border);
    justify-content: space-between;
    align-items: center;
    color: var(--text-color);
    border-radius: var(--v2-r-sm);
}

.api-top-item a {
    color: var(--text-color);
    margin-left: 10px;
}

.api-code {
    flex-direction: column;
    margin-bottom: 10px;
}

.api-item,
.api-list .api-item {
    padding: var(--v2-sp-2) var(--v2-sp-4);
    color: var(--text-color);
}

.api-item {
    justify-content: space-between;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    font-weight: 700;
    border: 1px solid var(--main-border);
    border-bottom: 0;
}

.api-list {
    flex-direction: column;
    overflow: hidden;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    border: 1px solid var(--main-border);
    border-top: 0;
}

.api-list .api-item,
.panel-top {
    justify-content: space-between;
}

.ns-box,
code {
    flex-direction: column;
}

.api-list .api-item {
    border-top: 1px solid var(--main-border);
    background: 0;
    border-radius: 0;
    font-size: 14px;
    font-weight: 400;
    border-left: 0;
    border-right: 0;
}

.api-baslik {
    background: var(--text-color) !important;
    border-radius: var(--border-radius) var(--border-radius) 0 0 !important;
}

.ns-box,
pre {
    background: var(--text-color);
    border-radius: var(--border-radius);
    padding: var(--v2-sp-2);
}

pre {
    color: var(--text-color);
    overflow: auto;
}

.api-item b {
    width: 50%;
    color: var(--text-color);
}

.ns-box {
    margin-bottom: 20px;
    border: 1px solid var(--main-border);
}

pre[class*="language-"] {
    color: var(--main-color);
    background: var(--main-color-trans);
    margin: 0;
    overflow: auto;
}

/* A85 · D4 · ถอด `margin-top: -20px` ออก
   ‼ มันเป็นการปะแผลของอาการที่ต้นเหตุอยู่ในเทมเพลต: `<code>` ถูกย่อหน้าด้วย tab
     และ `pre` เป็น `white-space: pre` จึงเรนเดอร์ tab นั้นออกมาเป็นช่องว่างจริง
     การดันขึ้น 20px ทำให้บรรทัดแรกไปทับขอบบนของกล่องแทน ไม่ได้แก้การเยื้อง
     แก้ที่ api.twig แล้ว (A85) — <pre><code> ติดกันไม่มีช่องว่างคั่น */
code {
    padding: 0;
}

@media print {
    code[class*="language-"],
    pre[class*="language-"] {
        text-shadow: none;
    }
}

:not(pre) > code[class*="language-"] {
    padding: 0.1em;
    border-radius: 0.3em;
    white-space: normal;
}

.updates-item-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--v2-sp-2);
}


.oit-last .btn-danger,
.oit-last .btn-primary,
.uit-last .btn-primary,
.uit-last .btn-success {
    width: 40px !important;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: var(--v2-r-sm);
}

.oit-first .order-id,
.uit-first .updates-id {
    background: var(--main-border);
    min-width: 100px;
    height: 30px;
    line-height: 30px;
    border-radius: var(--v2-r-sm);
    text-align: center;
    color: var(--text-color);
}

.updates-wrapper {
    max-height: 400px;
    overflow: auto;
}

.updates-item {
    padding: var(--v2-sp-2);
    box-sizing: border-box;
    font-size: 14px;
    border-radius: var(--border-radius);
    margin-bottom: 10px;
    border: 1px solid var(--main-border);
    overflow: hidden;
}

.updates-item-bottom .uib-first .added {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-1);
    color: #09b797;
    background: #2dfad431;
    padding: var(--v2-sp-1) var(--v2-sp-2);
    border-radius: var(--v2-r-sm);
}

.updates-item-bottom .uib-first .increased {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-1);
    color: #ffc107;
    background: #ffc10731;
    padding: var(--v2-sp-1) var(--v2-sp-2);
    border-radius: var(--v2-r-sm);
}

.updates-item {
    background: var(--main-bg);
    position: relative;
}

.nameservers {
    align-items: center;
    display: flex;
    gap: 50px;
}

.nameservers .fa-globe {
    font-size: 56px;
}

.nameservers ul {
    padding-left: 0;
}

.nameservers .fa-dot-circle {
    color: var(--main-color);
    font-size: 12px;
    padding-right: var(--v2-sp-1);
}

.card.card-child {
    background:
        url(https://storage.perfectcdn.com/nb2br9/zc7r7fbxxxli8pfg.svg) bottom 0
            right 0 no-repeat,
        bottom 0 right 0 no-repeat var(--main-color);
    margin-top: 60px;
}

.child-support {
    position: relative;
    padding: 35px var(--v2-sp-6);
}

.child-support h4 {
    max-width: 400px;
    color: var(--text-white);
    line-height: 32px;
}

.child-support .btn-secondary {
    width: max-content;
}

.child-support .cs-image {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 175px;
}

.lg-none-copy {
    display: none;
}

#service_description {
    display: none !important;
}

#order_quantity small {
    font-size: 14px;
}

.history-item {
    padding: var(--v2-sp-2);
    box-sizing: border-box;
    font-size: 14px;
    position: relative;
    background: var(--second-bg);
    border-radius: var(--border-radius);
    border: 1px solid var(--main-border);
    width: 100%;
}

.child-item-top,
.history-item-top,
.order-item-top,
.services-item-top,
.ticket-item-top,
.updates-item-top {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px dashed var(--main-border);
    padding-bottom: var(--v2-sp-2);
}

.child-item-bottom,
.history-item-bottom,
.order-item-bottom,
.services-item-bottom,
.ticket-item-bottom,
.updates-item-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--v2-sp-2);
    font-size: 13px;
    font-weight: 600;
}

.order-item-bottom {
    padding-top: var(--v2-sp-4);
}

.history-status .os-widget {
    padding: var(--v2-sp-1) var(--v2-sp-2);
    border-radius: var(--v2-r-xs);
    font-size: 16px;
    min-width: 100px;
    text-align: center;
    font-weight: 600;
}

.os-widget.canceled {
    background: #ff000021;
    border: 1px solid red;
    color: red;
}

.os-widget.completed {
    background: #28a74521;
    border: 1px solid #28a745;
    color: #28a745;
}

.tickets-uploader {
    padding: var(--v2-sp-2) var(--v2-sp-4);
    border-radius: var(--v2-r-sm);
    background: var(--second-bg);
    transition: var(--v2-t-slow) var(--v2-ease) !important;
    border: 1px solid var(--main-border);
    color: var(--text-color);
    width: max-content;
}

.files-label {
    color: var(--text-color);
    font-size: 13px;
}

.ticket-search {
    height: 52px;
    position: relative;
}

.ticket-search .textbox,
.ticket-search .textbox:focus {
    width: 100%;
    height: 52px;
    background-color: var(--second-bg);
    outline: 0;
    color: var(--text-color);
    font-weight: 400;
    font-size: 14px;
    line-height: 14px;
    border-radius: var(--border-radius);
    padding: 0 var(--v2-sp-6);
    border: 1px solid var(--main-border) !important;
}

.service-search .input-group-btn,
.ticket-search .input-group-btn {
    position: absolute;
    right: 20px;
    top: 3px;
}

.payment-history,
.ticket-list {
    max-height: 450px;
    overflow-x: auto;
    gap: var(--v2-sp-2);
}

.ticket-list {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
}

.ticket-item {
    padding: var(--v2-sp-2);
    box-sizing: border-box;
    font-size: 14px;
    position: relative;
    border-radius: var(--border-radius);
    border: 1px solid var(--main-border);
}

.ticket-body,
.ticket-item {
    background: var(--second-bg);
}

.ticket-status .os-widget {
    padding: var(--v2-sp-1) var(--v2-sp-2);
    border-radius: var(--v2-r-xs);
    font-size: 13px;
}

/* A90 · D2 · กฎ `.ticket-detail-box` ทั้งชุดถูกลบ — คลาสนี้ไม่มีใน .twig ไฟล์ไหนแล้ว
   (viewticket.twig เป็นที่เดียวที่เคยใช้ ตอนนี้เป็น `.vt-sla` การ์ดเดียว) */
.updates-item-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--v2-sp-2);
}

.ticket-header {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-6);
}

.ticket-header .item.item-title {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: var(--v2-sp-1);
}

.ticket-header .item.item-title .title {
    color: var(--text-color);
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.ticket-header .item.item-title .value {
    color: #9eabc5;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.ticket-header .ticket-id-title {
    background: var(--second-bg);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
    padding: var(--v2-sp-2) var(--v2-sp-3);
    min-height: 35px;
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-2);
    border-radius: var(--v2-r-sm);
}

.ticket-header .text {
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
}

.ticket-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--v2-sp-6);
    display: flex;
    flex-direction: column;
    gap: var(--v2-sp-7);
    border-radius: var(--v2-r-md);
    max-height: 500px;
    margin: 15px 0;
}

.ticket-body .ticket-message.ticket-message-support {
    align-self: flex-end;
}

.ticket-body .ticket-message-box {
    border-radius: var(--v2-r-md) var(--v2-r-md) var(--v2-r-md) 0;
    border: 1px solid var(--main-color);
    background: var(--main-color-trans);
    padding: var(--v2-sp-3) var(--v2-sp-5);
    color: var(--main-color);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: 0.4px;
}

.light .ticket-body .ticket-message-box {
    background: var(--main-color);
    color: var(--text-white);
}

.light .ticket-body .ticket-message.ticket-message-support .ticket-message-box {
    background: #fafafa;
}

.ticket-body .ticket-message.ticket-message-support .ticket-message-box {
    border: 1px solid var(--main-border);
    background: var(--second-bg);
    border-radius: var(--v2-r-md) var(--v2-r-md) 0;
    color: var(--text-color);
}

.ticket-body .ticket-message-info {
    padding-top: var(--v2-sp-1);
    display: flex;
    gap: var(--v2-sp-2);
    align-items: center;
    justify-content: space-between;
    color: #9eabc5;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 32px;
}

.ticket-body .ticket-message {
    max-width: 450px;
    width: 100%;
}

.ticket-body .ticket-message-info .ticket-owner.support {
    color: var(--text-color);
    font-weight: 600;
}

.ticket-body .ticket-message-info .ticket-owner .verified {
    color: #e2b719;
}

.ticket-footer .message-send {
    width: 100%;
    display: flex;
    gap: var(--v2-sp-2);
    align-items: center;
}

.ticket-footer .message-send textarea {
    flex: 1;
    min-height: 1lh;
    resize: none;
    padding-top: var(--v2-sp-4);
    padding-bottom: var(--v2-sp-4);
    border: 1px solid var(--main-border);
    border-radius: var(--v2-r-md);
    outline: 0;
    box-shadow: none;
    background: var(--main-bg);
}

.ticket-footer .message-send .tickets-uploader {
    padding: var(--v2-sp-4);
    border-radius: var(--v2-r-md);
}

.files-wrapper a {
    color: var(--main-color);
}

.ticket-footer .message-send .files-label {
    display: none;
}

.page-outside {
    padding-top: 125px;
}

.card.blog-card {
    overflow: hidden;
    border-radius: var(--border-radius);
}

.card.blog-card .blog-content {
    padding: var(--v2-sp-6);
    display: flex;
    flex-direction: column;
    gap: var(--v2-sp-2);
}

.card.blog-card .blog-date,
.card.blog-card .blog-title .card.blog-card h2,
.card.blog-card h2 {
    line-height: var(--v2-lh-tight);
    margin-bottom: 0;
}

.card.blog-card .blog-date {
    font-size: 12px;
    font-weight: 400;
    color: #9eabc5;
    padding: var(--v2-sp-2) 0;
}

.blog-single .card .blog-image .btn {
    position: absolute;
    z-index: 3;
    left: 20px;
    top: 20px;
    padding: 0;
    width: 52px;
    min-height: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    font-size: 20px;
}

.outside-switcher .switcher-item {
    margin: 0 auto;
    font-size: 26px;
    position: relative;
    height: 45px;
    width: 45px;
    border-radius: var(--v2-r-md);
    transition: var(--v2-t-slow) var(--v2-ease);
    background: var(--main-color-hover);
    color: var(--text-white);
}

.outside-switcher .switcher-item.light-btn {
    background: var(--main-color);
}

.outside-switcher .light-btn,
.dark .outside-switcher .dark-btn {
    display: none;
}

.dark .outside-switcher .light-btn,
.outside-switcher .dark-btn {
    display: block;
}

.card.card-support {
    background: url(https://storage.perfectcdn.com/nb2br9/oe45zwczhq29d91a.png);
    background-repeat: no-repeat;
    background-position: right top;
    padding: var(--v2-sp-5) 0;
    overflow: hidden;
}

.light .services-item-bottom .sib-first .avg strong {
    color: #000;
}

.dh-icon {
    width: 24px;
    height: 24px;
    border-radius: var(--v2-r-xs);
    text-align: center;
    background: var(--main-color);
    color: var(--text-white);
}

.aff-item {
    background: var(--second-bg);
    border-radius: var(--v2-r-md);
    padding: var(--v2-sp-2) var(--v2-sp-4);
    margin-bottom: 10px;
}

.aff-item span.aff-bold {
    font-weight: 600;
}

.rp-left-title {
    font-size: 26px;
}

.rp-left-text {
    color: #9db0d9;
}

.sign-d {
    background: url(https://storage.perfectcdn.com/nb2br9/31cztlog78uuycr1.png);
    border-radius: var(--v2-r-md);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 35px var(--v2-sp-6) 250px var(--v2-sp-6);
    margin-bottom: 20px;
}

.badgearea {
    display: flex;
    gap: var(--v2-sp-2);
}

.tg-1 {
    position: absolute;
    right: -100px;
    top: -15px;
    width: 100px;
}

.tg-2 {
    position: absolute;
    left: -100px;
    bottom: -100px;
    width: 75px;
}

.pnd-ord-nav {
    background: transparent !important;
    box-shadow: none !important;
    margin: 0 !important;
}

.pnd-ord-nav {
    gap: var(--v2-sp-2);
}

.pnd-ord-nav li a {
    background-color: var(--main-bg);
    color: var(--text-color);
    border: 1px solid var(--main-border);
    padding: var(--v2-sp-3) var(--v2-sp-5);
    font-size: 14px;
    outline: none;
    border-radius: var(--v2-r-sm);
    cursor: pointer;
    -webkit-transition: 0.15s ease;
    transition: var(--v2-t-fast) var(--v2-ease);
    min-height: 40px;
    display: inline-block;
    margin-bottom: 4px;
    width: 100%;
    text-decoration: none;
}

.pnd-ord-nav li a.active {
    background-color: var(--main-color);
    color: var(--text-white);
    border-color: var(--main-color);
}

.home-articles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--v2-sp-6);
}

.home-articles > a:hover h2 {
    color: var(--main-color) !important;
}

.home-articles > a h2 {
    font-size: 34px;
}

.home-articles .card.card-shadow::before {
    top: 60%;
}

.blog-body {
    padding: var(--v2-sp-2);
}

.blog-body .blog-image {
    position: relative;
}

.blog-body .bb-img {
    border-radius: var(--v2-r-sm);
    width: 100%;
    height: 275px;
    margin-bottom: 15px;
}

.blog-body .blog-date {
    display: flex;
    align-items: center;
    position: absolute;
    top: 10px;
    right: 10px;
    gap: var(--v2-sp-1);
    background: var(--main-bg);
    color: var(--text-color);
    padding: var(--v2-sp-1) var(--v2-sp-2);
    border-radius: var(--v2-r-sm);
    font-size: 13px;
    box-shadow: var(--v2-elev-3);
}

.blog-body .blog-area-text {
    color: var(--text-color);
    font-weight: 400;
    font-size: 14px;
    margin-bottom: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
}

.blog-body h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-color);
}

.blog-three {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: var(--v2-sp-2);
}

.blog-three > a:hover h2 {
    color: var(--main-color) !important;
}

.blog-three .blog-body {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-4);
}

.blog-three .blog-body .bb-img {
    border-radius: var(--v2-r-sm);
    width: 200px;
    height: auto;
    margin-bottom: 0;
}

.blog-three .blog-body .ba-text {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.payment-list {
    display: grid;
    justify-content: space-between;
    grid-template-columns: 1fr 1fr;
    gap: var(--v2-sp-2);
    padding: var(--v2-sp-5) 0;
    border-bottom: 1px solid var(--main-border);
    margin-bottom: 15px;
}
.payment-bottom {
    display: flex;
    gap: var(--v2-sp-1);
}

.payment-icon {
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: var(--v2-sp-1);
}

.payment-box {
    display: flex;
    flex-direction: column;
    position: relative;
    cursor: pointer;
}

.payment-top.active:first-child {
    border-color: var(--main-color);
    background: var(--main-color-trans);
}

.payment-alt {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--v2-sp-2);
    background: #171717;
    padding: var(--v2-sp-1);
    border-radius: var(--v2-r-sm);
    margin: 15px 0 0 0;
}

.payment-top.active > .payment-top {
    border-color: var(--main-color);
    background: var(--main-color-trans);
}

.payment-top {
    background: #000000;
    border: 1px solid #2e2e2e;
    border-radius: var(--border-radius);
    padding: var(--v2-sp-4) var(--v2-sp-2) var(--v2-sp-2) var(--v2-sp-2);
}
.payment-bottom {
    padding: var(--v2-sp-1) var(--v2-sp-2);
    height: fit-content;
    justify-content: center;
    text-align: center;
    font-size: 13px;
}

.payment-icon {
    margin: auto;
}

.payment-icon img {
    height: 34px;
    width: 170px;
}

.payment-alt img {
    width: 24px;
    height: 24px;
}

.pay-best {
    background: #24e04f;
    color: #070800;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    justify-content: center;
    width: max-content;
    padding: 0 var(--v2-sp-2);
    border-radius: var(--v2-r-xs);
    position: absolute;
    left: 0;
    right: 0;
    top: -11px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.full-bg {
    background-image: url(https://storage.perfectcdn.com/nb2br9/wt1yhe5ct4o17erb.png);
    background-size: cover;
    background-position: center;
    height: 500px;
}

.full-card {
    padding-top: 150px;
    text-align: center;
}

h3.fullc-title {
    font-size: 44px;
    font-weight: 600;
    color: var(--text-white);
}

.fullc-text {
    font-size: 20px;
    color: var(--text-white);
    line-height: 26px;
}

.full-card .btn {
    width: max-content;
    margin: 35px auto 0 auto;
}

.home-boost-box {
    background-color: var(--main-color);
    background-image: url(https://storage.perfectcdn.com/nb2br9/fs58xj2uar4pxpix.png);
    background-size: cover;
    background-position: center;
    padding: 150px 250px 150px 150px;
    border-radius: calc(var(--border-radius) * 4);
    position: relative;
    cursor: pointer;
    width: max-content;
    margin-left: auto;
}

.home-boost-box::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: calc(100% + 15px);
    border-radius: calc(var(--border-radius) * 4);
    background: linear-gradient(
        to left,
        #ffc107 0%,
        rgba(255, 255, 255, 0) 100%
    );
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    -o-transform: rotate(5deg);
    transform: rotate(5deg);
    -webkit-transform-origin: bottom right;
    -ms-transform-origin: bottom right;
    transform-origin: bottom right;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all var(--v2-t-base) var(--v2-ease) 0s;
    opacity: 0.42;
    z-index: 1;
}

.home-boost-box:hover::after {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    height: calc(100% + 0px);
}

@media (min-width: 599.98px) {
    .payment-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1280.98px) {
    .payment-list {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 599.98px) {
    .full-card {
        padding-top: 125px;
    }
    h3.fullc-title {
        font-size: 26px;
    }
    .fullc-text {
        font-size: 14px;
        line-height: 18px;
    }
    .payment-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .payment-top {
        padding: var(--v2-sp-4) var(--v2-sp-1) var(--v2-sp-2) var(--v2-sp-1);
    }
    .payment-icon img {
        height: 24px;
        width: 117px;
    }
    .payment-alt {
        gap: var(--v2-sp-1);
    }
    .payment-alt img {
        width: 20px;
        height: 20px;
    }
}

@media screen and (max-width: 991.98px) {
    .pnd-ord-nav {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 991.98px) {
    .page-outside {
        min-height: 750px;
    }
    .order-item-bottom .oib-first .item {
        font-size: 14px;
    }
}

@media (min-width: 991.98px) {
    .api-top {
        grid-template-columns: 1fr 1fr;
        display: grid;
        gap: var(--v2-sp-2);
    }
}

@media (max-width: 991.98px) {
    .blog-three .blog-body {
        flex-direction: column;
    }
    .blog-three .blog-body .bb-img {
        width: 100%;
    }
    .home-articles > a h2 {
        font-size: 20px;
    }
    .blog-body .bb-img {
        height: auto;
    }
    .home-articles {
        grid-template-columns: repeat(1, 1fr);
    }
    .card.card-support {
        background: none;
        padding: unset;
    }
    .dropdown .btn {
        width: 100%;
    }
    .page-outside {
        padding-top: 0;
    }
    .lg-none-copy {
        display: block;
    }
    .ns-info {
        gap: var(--v2-sp-1);
    }
    .ns-name {
        display: none;
    }
    .card.card-child {
        display: none;
    }
    .uit-last {
        justify-content: center;
        margin: 10px 0;
    }
    .updates-title {
        text-align: center;
    }
    .api-top {
        grid-template-columns: 1fr;
        gap: var(--v2-sp-2);
        display: grid;
        font-size: 12px;
    }
    footer .footBottom .footer-alt {
        flex-direction: column;
        padding-bottom: var(--v2-sp-2);
    }
    .lg-card {
        text-align: center;
    }
    .lg-card h3 {
        font-size: 26px;
    }
    .lg-card p {
        font-size: 16px;
    }
    .lg-card .lg-card-body {
        padding: var(--v2-sp-4);
    }
    .features-rates {
        gap: var(--v2-sp-6);
    }
    .section-title--badge {
        margin: auto;
    }
    .features .section-title--content {
        justify-content: center;
        text-align: center;
    }
    .rank-card .rank-area {
        flex-direction: column;
        gap: var(--v2-sp-2);
    }
    .section-header h5 {
        font-size: 20px;
    }
    .section-header p {
        font-size: 13px;
    }
    .payments-area {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--v2-sp-7);
    }
    .p-cards img {
        max-height: 30px;
    }
    .faq-ss-tabs .home-ss-tab h4 {
        font-size: 14px;
    }
    .review-item {
        max-width: 400px;
    }
    .brands-area {
        margin: -25px 0 25px 0;
    }
    .home-card {
        flex-direction: column;
        text-align: center;
        padding: var(--v2-sp-6) var(--v2-sp-4);
        gap: var(--v2-sp-6);
    }
    .home-card .hc-1 .title {
        font-size: 20px;
        padding-bottom: var(--v2-sp-2);
    }
    .tab-heading {
        flex-direction: column;
        text-align: center;
    }
    .tab-heading::before {
        display: none;
    }
    .tab-heading .tabs {
        margin-top: 15px;
    }
    .tab-content .home-content {
        padding: var(--v2-sp-4);
        text-align: center;
    }
    footer .footerTop .info .icon,
    footer .footTop .alert .icon {
        display: none;
    }
    footer .footerTop .container {
        flex-direction: column;
        gap: var(--v2-sp-5);
    }
    footer .footerTop .info {
        text-align: center;
    }
    footer .footTop,
    footer .footTop .action {
        flex-direction: column-reverse;
    }
    footer .footTop .action .socialMedias {
        margin: 0;
        padding: 0;
        border: none;
        margin-top: 20px;
    }
    footer .footTop .action {
        flex-direction: column;
    }
    footer .footTop .action {
        margin-bottom: 15px;
    }
    footer .footTop .alert {
        text-align: center;
    }
    footer .footTop {
        padding: var(--v2-sp-5) 0 var(--v2-sp-2);
    }
    .hm-remember {
        text-align: left;
    }
    .counts {
        margin-bottom: 50px;
    }
    .usCount {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--v2-sp-2);
    }
    .usCount .item {
        background: #ffffff20;
        border-radius: var(--v2-r-sm);
        padding: var(--v2-sp-2);
    }
    .usCount .item .icon {
        min-width: 40px;
        height: 40px;
        font-size: 20px;
        border: none;
        border-radius: var(--v2-r-xs);
        background: #ffffff25;
    }
    .usCount .item .text {
        line-height: 18px;
        font-size: 14px;
    }
    .usCount .item .text span {
        font-size: 20px;
        padding-bottom: var(--v2-sp-1);
    }
    .whyUsCards .card {
        padding: var(--v2-sp-4) var(--v2-sp-6);
        margin-bottom: 15px;
    }
    .home-images .home-hero--image.left {
        display: none;
    }
    .home-header .home-hero--image.right {
        top: 150px;
        opacity: 0.3;
    }
    .addBalance {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--v2-sp-1);
    }

    .order-item-bottom .oib-first,
    .services-item-bottom .sib-first {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
        gap: var(--v2-sp-2);
    }

    .order-item-bottom .oib-first .link {
        grid-area: 1 / 1 / 3 / 3;
        justify-content: center;
    }

    .order-item-bottom .oib-first .item.date {
        grid-area: 3 / 1 / 4 / 3;
        justify-content: center;
    }

    .order-item-top,
    .oit-first {
        flex-direction: column;
    }

    .order-item-top .oit-last,
    .sit-last {
        justify-content: center;
        margin-top: 10px;
    }

    .order-item-bottom .oib-first .item.flex-item {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .order-item-bottom {
        flex-direction: column;
    }

    .home-content .d-flex,
    .services-item-bottom .sib-first .max,
    .services-item-bottom .sib-first .min {
        justify-content: center;
    }

    .services-item-bottom .sib-first .avg {
        grid-area: 2/1/3/3;
        justify-content: center;
    }

    .services-item-bottom .sib-last {
        width: 100%;
        margin-top: 15px;
    }

    .service-cat-side .service-cat-header {
        margin-bottom: 5px;
    }

    .sit-first {
        justify-content: flex-start;
        align-items: unset;
        gap: 0;
    }

    .service-cat-side {
        text-align: center;
        padding: var(--v2-sp-2) var(--v2-sp-4);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .child-item-bottom,
    .cib-first,
    .ns-info,
    .oit-first,
    .order-item-bottom,
    .order-item-top,
    .services-item-bottom,
    .services-item-top,
    .signup-badge,
    .sit-first,
    .uit-first,
    .updates-item-top,
    footer .footer-content,
    footer .footer-content .action {
        flex-direction: column;
    }
    .sit-first .services-title {
        text-align: center;
    }
    .service-item .btn-favorite {
        position: absolute;
        top: 10px;
        right: 10px;
    }
    .m-hidden {
        display: none;
    }
    .services-item-bottom .sib-last .btn {
        width: 100%;
    }
    .hm-wrapper .outside-switcher {
        display: none;
    }
    .sm-header .outside-switcher {
        margin-right: -20px;
    }
    .badgearea {
        grid-area: 3 / 1 / 4 / 3;
        justify-content: center;
        display: flex;
        gap: var(--v2-sp-1);
    }
}

.payment-box.slct79761 .payment-top {
    background: transparent;
}

.frgt-pass {
    background: rgb(232 255 49 / 15%);
    border: 1px solid var(--main-color);
    border-radius: var(--v2-r-sm);
    padding: var(--v2-sp-1) var(--v2-sp-2);
    text-align: center;
    margin-top: 15px;
}

.home-1-card {
    margin-bottom: 30px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.home-1-card::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 40%;
    transform: translateX(-50%);
    height: 0;
    transition: var(--v2-t-fast) var(--v2-ease) all;
    background:
        radial-gradient(
            68.6% 68.6% at 57.8% 96.86%,
            rgba(56, 75, 110, 0.2) 0%,
            rgba(5, 9, 16, 0.2) 100%
        ),
        var(--main-bg);
}

.home-1-card:hover::before {
    height: 100%;
    width: 100%;
}

.home-1-card .card-body {
    position: relative;
    z-index: 1;
    padding: var(--v2-sp-7) var(--v2-sp-4);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--v2-sp-6);
    text-align: center;
}

.home-1-card h4 {
    font-size: 20px;
    margin-bottom: 0;
}

.home-1-card p {
    font-size: 14px;
    margin-bottom: 0;
}

.icon-box {
    background: var(--main-color);
    clip-path: polygon(
        92.32051% 40%,
        93.79385% 43.1596%,
        94.69616% 46.52704%,
        95% 50%,
        94.69616% 53.47296%,
        93.79385% 56.8404%,
        92.32051% 60%,
        79.82051% 81.65064%,
        77.82089% 84.50639%,
        75.35575% 86.97152%,
        72.5% 88.97114%,
        69.3404% 90.44449%,
        65.97296% 91.34679%,
        62.5% 91.65064%,
        37.5% 91.65064%,
        34.02704% 91.34679%,
        30.6596% 90.44449%,
        27.5% 88.97114%,
        24.64425% 86.97152%,
        22.17911% 84.50639%,
        20.17949% 81.65064%,
        7.67949% 60%,
        6.20615% 56.8404%,
        5.30384% 53.47296%,
        5% 50%,
        5.30384% 46.52704%,
        6.20615% 43.1596%,
        7.67949% 40%,
        20.17949% 18.34936%,
        22.17911% 15.49361%,
        24.64425% 13.02848%,
        27.5% 11.02886%,
        30.6596% 9.55551%,
        34.02704% 8.65321%,
        37.5% 8.34936%,
        62.5% 8.34936%,
        65.97296% 8.65321%,
        69.3404% 9.55551%,
        72.5% 11.02886%,
        75.35575% 13.02848%,
        77.82089% 15.49361%,
        79.82051% 18.34936%
    );
    width: 82px;
    height: 82px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    color: #fff;
    margin-bottom: 15px;
}

#desc-badges {
    margin-bottom: 15px;
}

#desc-badges span {
    margin-right: 5px;
    white-space: nowrap;
}

.hit:after {
    content: "NEW";
    background-size: cover;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    margin-right: 5px;
    display: inline-block;
    vertical-align: middle;
    animation: neon-1 0.1s ease-in-out infinite alternate;
    margin-left: 10px;
    font-weight: bold;
}

.light .hit {
    color: #000;
}

@keyframes neon-1 {
    from {
        text-shadow:
            0 0 6px rgba(202, 228, 225, 0.92),
            0 0 30px rgba(202, 228, 225, 0.34),
            0 0 12px rgba(191, 226, 255, 0.52),
            0 0 21px rgba(191, 226, 255, 0.92),
            0 0 34px rgba(191, 226, 255, 0.78),
            0 0 54px rgba(191, 226, 255, 0.92);
    }
    to {
        text-shadow:
            0 0 6px rgba(202, 228, 225, 0.98),
            0 0 30px rgba(202, 228, 225, 0.42),
            0 0 12px rgba(191, 226, 255, 0.58),
            0 0 22px rgba(191, 226, 255, 0.84),
            0 0 38px rgba(191, 226, 255, 0.88),
            0 0 60px #202020;
    }
}

@media (max-width: 991.98px) {
    #desc-badges {
        display: grid;
        gap: var(--v2-sp-2);
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 991.98px) {
    .brands-area {
        height: auto;
    }
    .brands-top-active {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        padding-top: 0;
        padding-left: 0;
    }
    .brands-top-active::before,
    .brands-top-active::after {
        display: none;
    }
    .sm-header.active .menu-btn .fa-times {
        display: block !important;
    }
    .sm-header.active .menu-btn .fa-bars,
    .sm-header .menu-btn .fa-times {
        display: none !important;
    }
    .header-menu .hm-item {
        background: var(--main-bg);
        border-radius: var(--v2-r-sm);
        padding: var(--v2-sp-1) var(--v2-sp-6);
    }
    .header-menu .hm-item .hm-link {
        font-size: 20px;
    }
    .section-title--content {
        text-align: center;
    }
    .home-boost-box {
        padding: 50px var(--v2-sp-4);
        width: 90%;
        margin: 125px auto 50px auto;
    }
    .home-boost-box .features-topcard--image {
        margin-left: auto;
        margin-right: auto;
        left: -10px;
        right: 0;
        max-width: 325px;
    }
    .form-group label {
        text-align: left;
    }
}

a.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%; /* ทำให้สูงเท่ากับปุ่ม */
}

.btn-outline-light:hover {
 /* สีเหลือง */
}

@media (max-width: 768px) {
    .alert {
        /* A95 · `margin-top: 30px` ถูกลบ — คอมเมนต์เดิมเขียนเองว่า "ปรับตามความสูงของ
           navbar/logo" คือระยะหลบหัวเว็บชั้นที่สาม ที่ไปเกาะบน element ที่ไม่เกี่ยวกัน
           ผลคือหน้าที่มี alert (เช่น /) ได้ช่องว่างใต้หัว 82px ส่วนหน้าที่ไม่มีได้ 52px */
        padding-right: 3rem; /* ปรับได้ตามต้องการ เช่น 2.5rem - 4rem */
    }
    .alert a {
        display: inline-block;
        min-width: 180px; /* ปรับขนาดตามความเหมาะสม */
    }
}





/* !important removed on 2026-08-01. These four are the stock theme's, and the
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
.btn-outline-light {
    color: #333;
    border-color: #333;
}

.dark .btn-outline-light {
    color: #fbd131;
    border-color: #fbd131;
}

.btn-outline-light:hover {
    color: #fff;
    background-color: #333;
    border-color: #333;
}

.dark .btn-outline-light:hover {
    color: #ffffff;
    background-color: #e3b713;
    border-color: #fbd131;
}

.logo-small {
    display: none;
}
.logo-big {
    display: block;
}


.mob-logo {
    display: none;
}

@media (max-width: 991.98px) {
    .mob-logo {
        display: block;
    }
}

.mob-logo-img {
    display: none;
    height: 35px;
}

.mob-logo .logo-light {
    display: block;
}

.mob-logo .logo-dark {
    display: none;
}

.dark .mob-logo .logo-light {
    display: none;
}

.dark .mob-logo .logo-dark {
    display: block;
}

/* Mobile Service Info Positioning */
/* CSS สำหรับการจัดตำแหน่งข้อมูลบริการในมือถือ */

@media (max-width: 991.98px) {
    /* A102 · ‼ กฎที่เคยอยู่ตรงนี้ตายสองชั้น ลบทิ้ง
       1. pseudo-class ชื่อ closest **ไม่มีอยู่ในภาษา CSS** — เอาไปใส่ querySelector แล้วโยน error
          และเซเลกเตอร์เสียหนึ่งตัวในลิสต์ทำให้ **ทั้งกฎ** ถูก parser ทิ้ง
          พิสูจน์แล้วบนหน้าจริง: เดิน cssRules ของ sheet ที่ blob-copy มา หา selectorText ที่มี
          'nav-info-tab' ไม่เจอเลย = กฎไม่ได้เข้าไปอยู่ใน CSSOM ตั้งแต่แรก
       2. ต่อให้เขียนถูก ก็ไม่มีอะไรให้จับ — `#nav-info-tab` ยังอยู่ (neworder.twig:379)
          แต่ `.col-lg-5` ที่เคยห่อมันหายไปตอน Panel F รื้อโครงหน้าสั่งงาน
       ‼ ที่ต้องลบ ไม่ใช่ปล่อยไว้: ถ้าใครมาเห็นแล้ว "แก้" `:closest` เป็น `:has` ทีหลัง
         กฎจะฟื้นขึ้นมาพร้อม display:none !important แล้วซ่อนคอลัมน์ที่ไม่ควรถูกซ่อน
       ‼ ห้ามเขียนชื่อ pseudo-class นั้นแบบเต็ม (มีโคลอนนำหน้าและวงเล็บ) ในคอมเมนต์ —
         guard ตอน deploy เช็คว่าไฟล์ต้องไม่มีสตริงนั้นเหลืออยู่ และคอมเมนต์จะทำให้มันไม่ผ่าน */

    /* จัดแต่งข้อมูลบริการสำหรับมือถือ */
    .mobile-service-info {
        margin-bottom: 20px;
        order: -1; /* ให้อยู่ก่อนสุด */
    }

    /* ปรับแต่งข้อมูลบริการในมือถือ */
    .mobile-service-info .ns-info {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--v2-sp-2);
    }

    .mobile-service-info .ns-info > div {
        width: 100%;
    }

    .mobile-service-info .ns-item {
        flex: none;
        width: 100%;
    }

    /* จัดแต่ง tab navigation ในมือถือ */
    .mobile-service-info .nav {
        margin-bottom: 15px;
    }

    .mobile-service-info .nav-item {
        flex: 1;
    }

    .mobile-service-info .nav-link {
        text-align: center;
        padding: var(--v2-sp-2) var(--v2-sp-1);
        font-size: 14px;
    }
}

@media (min-width: 992px) {
    /* ซ่อน mobile version ใน PC */
    .mobile-service-info {
        display: none !important;
    }

    /* แสดงตัวเดิมใน PC - เฉพาะหน้า neworder */
    .col-lg-5:has(#nav-info-tab) {
        display: block !important;
    }
}

/* Promotional Popup Styles */
.promo-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    backdrop-filter: blur(5px);
    animation: fadeIn 0.3s ease-in-out;
}

.promo-popup-overlay.show {
    display: flex;
}

.promo-popup {
    position: relative;
    background: linear-gradient(135deg, #ffd700 0%, #ffb300 100%);
    border-radius: var(--v2-r-lg);
    padding: var(--v2-sp-1);
    max-width: 520px;
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    animation: slideUp 0.4s ease-out;
    box-shadow: var(--v2-elev-2);
}

.promo-content {
    background: white;
    border-radius: var(--v2-r-md);
    overflow: hidden;
}

.promo-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all var(--v2-t-base) var(--v2-ease);
    box-shadow: var(--v2-elev-1);
}

.promo-close-btn:hover {
    background: white;
    transform: rotate(90deg) scale(1.1);
}

.promo-close-btn i {
    color: #ffb300;
    font-size: 20px;
}

.promo-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--v2-r-md) var(--v2-r-md) 0 0;
}

.promo-footer {
    padding: var(--v2-sp-5);
    background: linear-gradient(to bottom, #f9fafb, #ffffff);
    border-top: 1px solid #e5e7eb;
}

.promo-checkbox-container {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    transition: all var(--v2-t-base) var(--v2-ease);
}

.promo-checkbox-container:hover {
    transform: translateX(5px);
}

.promo-checkbox-container input[type="checkbox"] {
    margin-right: 10px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: #ffb300;
    display: inline-block !important;
}

.promo-checkbox-text {
    font-size: 16px;
    color: #4b5563;
    font-family: var(--v2-f-thai);
    font-weight: 500;
}

/* Popup Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(50px) scale(0.95);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* Responsive Design for Popup */
@media (max-width: 640px) {
    .promo-popup {
        max-width: 95%;
        margin: 10px;
    }

    .promo-footer {
        padding: var(--v2-sp-4);
    }

    .promo-checkbox-text {
        font-size: 14px;
    }
}

/* Shimmer effect on popup border */
@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

.promo-popup::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    animation: shimmer 3s infinite;
    pointer-events: none;
    border-radius: var(--v2-r-lg);
}

/* ============================================================
 *  v2 SHELL — layout.twig restyle (Phase 1)
 *  Targets existing class names so layout.twig HTML stays intact.
 *  Placed at file end to win cascade over legacy rules.
 * ============================================================ */

/* body mode — both authed and guest use the gradient + orbs */
body#dash,
body#outside {
    background-color: var(--v2-bg);
    color: var(--v2-ink);
    font-family: var(--v2-f-thai);
    position: relative;
}

/* ------------- AUTHED SHELL: .app > .sidebar + .page -------------
   NB: do NOT set `z-index` on `.app` — it creates a stacking context
   that traps Bootstrap modal-content beneath body-level .modal-backdrop
   (R15.2). `.app` paints above .v2-orbs naturally via DOM order
   (orbs come first inside <body>). */
body#dash .app {
    display: grid;
    grid-template-columns: 260px 1fr;
    min-height: 100vh;
    background: transparent;
    position: relative;
}
@media (max-width: 991px) {
    body#dash .app { grid-template-columns: 1fr; }
}

@media (max-width: 991px) {
}



@media (max-width: 991px) {
}

/* Sidebar profile — rich v4-style user card with avatar ring + tier chip */
body#dash .dropdown.dd-custom { margin-top: 4px; }
/* .sidebar-profile already is the card: gradient, border, 14px radius. .sp-box
   is the stock theme's own card — its background, 13px padding and 15px radius
   were never cleared, so the two nested with almost the same corner. Clearing
   them removes the doubled edge and hands 20px back to the name and role, which
   were being truncated to "MEMBER · …". */
body#dash .blob.blob-red {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--v2-ok);
    box-shadow: 0 0 10px rgba(111, 228, 168, 0.8);
    border: 2.5px solid var(--v2-bg);
    z-index: 2;
}
html.light body#dash .blob.blob-red { border-color: #ffffff; }

/* Sidebar menu */

/* ------------- AUTHED: page + container-fluid ------------- */
body#dash .page {
    background: transparent;
    padding: 0;
    min-height: 100vh;
    min-width: 0;
}
body#dash .container-fluid {
    padding: var(--v2-sp-4) var(--v2-sp-6) 80px;
    /*  A123 · 1400 → --v2-rail (1280)  เว็บนี้เคยมี 5 ราง
        1400 (authed) · 1280 (หัว/ท้าย guest) · 1240 (page-outside)
        · 1140 (bootstrap .container) · 960 (h-section.bps)
        ผลคือขอบซ้ายขยับ 4 ครั้งระหว่างเลื่อนหน้าเดียว */
    max-width: var(--v2-rail);
    margin: 0 auto;
}
@media (max-width: 767px) {
    body#dash .container-fluid { padding: var(--v2-sp-3) var(--v2-sp-3) 60px; }
}

/* ------------- AUTHED: topbar (#up-header.header) ------------- */
@media (max-width: 991px) {
}
body#dash .container-fluid { padding-top: 92px !important; }
@media (max-width: 767px) {
}


/* Topbar right-side cluster */

/* Hide the dropdown toggle on desktop; only visible on mobile. */
@media (max-width: 767px) {
    /* Show the chevron toggle on mobile. */

    /* JS sets inline display:block/none on .header-right — we drop it below the topbar. */
}

/* Theme switcher pill */
body#dash .switcher,
.outside-switcher {
    display: inline-flex;
    padding: var(--v2-sp-1);
    border-radius: var(--v2-r-pill);
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    gap: 2px;
    align-items: center;
}
body#dash .switcher .switcher-item,
.outside-switcher .switcher-item {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--v2-ink-mute);
    cursor: pointer;
    background: transparent;
    border: 0;
    transition: background var(--v2-t-fast), color var(--v2-t-fast);
    font-size: 14px;
    padding: 0;
}
body#dash .switcher .switcher-item:hover,
.outside-switcher .switcher-item:hover { color: var(--v2-ink); }
body#dash .switcher .switcher-item.active,
.outside-switcher .switcher-item.active {
    background: var(--v2-yellow);
    color: var(--v2-yellow-ink);
    box-shadow: 0 4px 12px -4px var(--v2-yellow-glow);
}
body#dash .switcher svg,
.outside-switcher svg {
    width: 16px;
    height: 16px;
}

/* Flag icons — keep size consistent in lang button */
body#dash .sbar-lang .flag-icon-squared { width: 18px; height: 18px; border-radius: 4px; }

/* ------------- GUEST SHELL: #header.head-out ------------- */
body#outside #header.head-out {
    position: sticky;
    top: 0;
    z-index: 50;
    padding: 0;
    background: transparent;
    border-bottom: 1px solid var(--v2-line);
}
body#outside #header.head-out::after { display: none !important; }
body#outside .hm-wrapper {
    background: var(--v2-nav-bg);
    backdrop-filter: var(--v2-blur-strong);
    -webkit-backdrop-filter: var(--v2-blur-strong);
    padding: var(--v2-sp-3) 0;
}
@media (max-width: 991px) {
    body#outside .hm-wrapper { display: none; }
}

body#outside .head-out .container { max-width: 1280px; }
body#outside .row-btn { gap: var(--v2-sp-4); align-items: center; flex-wrap: nowrap; }

body#outside .home-logo a {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-2);
    font-family: var(--v2-f-dis);
    font-weight: 700;
    font-size: 20px;
    color: var(--v2-ink);
}
body#outside .home-logo img { max-height: 36px; width: auto; }

body#outside .header-menu {
    display: flex;
    gap: 2px;
    justify-content: center;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
    list-style: none;
}
body#outside .header-menu .hm-item { list-style: none; }
body#outside .header-menu .hm-link {
    padding: var(--v2-sp-2) var(--v2-sp-3);
    border-radius: var(--v2-r-pill);
    font-family: var(--v2-f-dis);
    font-size: 14px;
    font-weight: 500;
    color: var(--v2-ink-dim);
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-1);
    transition: background var(--v2-t-fast), color var(--v2-t-fast);
    text-decoration: none !important;
}
body#outside .header-menu .hm-link:hover {
    background: var(--v2-glass);
    color: var(--v2-ink);
}
body#outside .navbar-icon { font-size: 13px; color: var(--v2-ink-mute); }

body#outside .btn.btn-primary,
body#outside .btn.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-2);
    height: 44px;
    padding: 0 var(--v2-sp-5);
    border-radius: var(--v2-r-pill);
    font-family: var(--v2-f-dis);
    font-weight: 600;
    font-size: 14px;
    border: 1px solid transparent;
    text-decoration: none !important;
    transition: background var(--v2-t-base), transform var(--v2-t-fast), box-shadow var(--v2-t-base), color var(--v2-t-fast);
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
}
body#outside .btn.btn-primary {
    background: var(--v2-yellow);
    color: var(--v2-yellow-ink);
}
body#outside .btn.btn-primary:hover {
    background: #ffe24a;
    color: var(--v2-yellow-ink);
    box-shadow: 0 12px 30px -10px var(--v2-yellow-glow);
    transform: translateY(-1px);
}
body#outside .btn.btn-secondary {
    background: var(--v2-glass-2);
    color: var(--v2-ink);
    border-color: var(--v2-line-strong);
    backdrop-filter: var(--v2-blur);
    -webkit-backdrop-filter: var(--v2-blur);
}
body#outside .btn.btn-secondary:hover {
    background: var(--v2-glass-3);
    color: var(--v2-ink);
    border-color: var(--v2-line-strong);
}
body#outside .btn-100 { width: 100%; justify-content: center; }

/* Guest mobile header */
body#outside .sm-header { display: none; }
@media (max-width: 991px) {
    body#outside .sm-header {
        display: block;
        padding: var(--v2-sp-3) 0;
        background: var(--v2-nav-bg);
        backdrop-filter: var(--v2-blur);
        -webkit-backdrop-filter: var(--v2-blur);
        border-bottom: 1px solid var(--v2-line);
        position: sticky;
        top: 0;
        z-index: 50;
    }
    body#outside .sm-header .row { gap: var(--v2-sp-3); align-items: center; }
    body#outside .sm-header .mob-logo img { max-height: 30px; width: auto; }
    html.dark body#outside .sm-header .logo-light,
    html:not(.dark) body#outside .sm-header .logo-dark,
    html.light body#outside .sm-header .logo-dark { display: none; }
    html.dark body#outside .sm-header .logo-dark,
    html:not(.dark) body#outside .sm-header .logo-light,
    html.light body#outside .sm-header .logo-light { display: inline-block; }
}
/* A100 · 40 → 44 · ปุ่มเปิดเมนูของหน้า guest เป็นทางเข้าเมนูเดียวบนมือถือ
   เป้ากด 44px เป็นมาตรฐานที่ธีมนี้ใช้กับ `.btn` ที่ <=991 อยู่แล้ว แต่ปุ่มนี้ไม่ใช่ `.btn` */
body#outside .menu-btn {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--v2-r-sm);
    background: var(--v2-glass-2);
    border: 1px solid var(--v2-line);
    color: var(--v2-ink);
    font-size: 20px;
    cursor: pointer;
    padding: 0;
    position: relative;
}
body#outside .menu-btn i + i { display: none; }
body#outside .menu-btn.active i:first-child { display: none; }
body#outside .menu-btn.active i + i { display: inline-flex; }

/* ------------- GUEST FOOTER ------------- */
body#outside footer {
    padding: 64px 0 var(--v2-sp-7);
    margin-top: 80px;
    border-top: 1px solid var(--v2-line);
    position: relative;
    z-index: 2;
}
body#outside .footerBody .container { max-width: 1280px; }
body#outside .footerBody .footTop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--v2-sp-6);
    flex-wrap: wrap;
    padding-bottom: var(--v2-sp-7);
    border-bottom: 1px solid var(--v2-line);
}
body#outside .footerBody .footTop .alert {
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    color: var(--v2-ink-dim);
    font-size: 13px;
    line-height: var(--v2-lh-body);
    max-width: 540px;
    flex: 1;
}
body#outside .footerBody .footTop .alert .text { color: var(--v2-ink-dim); }
body#outside .footerBody .action {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-5);
    flex-wrap: wrap;
}
body#outside .footerBody .footLogo img { max-height: 32px; width: auto; }
body#outside .footerBody .socialMedias { display: flex; gap: var(--v2-sp-2); }
body#outside .footerBody .socialMedias .item {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--v2-glass-2);
    border: 1px solid var(--v2-line);
    color: var(--v2-ink-dim);
    font-size: 14px;
    transition: background var(--v2-t-fast), color var(--v2-t-fast), transform var(--v2-t-fast);
    text-decoration: none !important;
}
body#outside .footerBody .socialMedias .item:hover {
    background: var(--v2-yellow);
    color: var(--v2-yellow-ink);
    transform: translateY(-2px);
}
body#outside .footBottom { padding-top: var(--v2-sp-6); margin-top: 24px; }
body#outside .footer-alt {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--v2-sp-3);
    font-size: 12px;
    color: var(--v2-ink-mute);
    font-family: var(--v2-f-mono);
    letter-spacing: 0.04em;
}
body#outside .footer-links a {
    color: var(--v2-ink-mute);
    text-decoration: none !important;
    margin-left: 16px;
    transition: color var(--v2-t-fast);
    font-family: var(--v2-f-mono);
}
body#outside .footer-links a:hover { color: var(--v2-yellow); }

/* ------------- MODALS (lang / currency) ------------- */
body .modal-content.modal-fixed,
body .modal-content {
    background: var(--v2-glass-3);
    border: 1px solid var(--v2-line-strong);
    border-radius: var(--v2-r-lg);
    backdrop-filter: var(--v2-blur-strong);
    -webkit-backdrop-filter: var(--v2-blur-strong);
    color: var(--v2-ink);
    box-shadow: var(--v2-shadow-2);
}
body .modal-backdrop.show { opacity: 0.7; }
body .modal-header {
    border-bottom: 1px solid var(--v2-line);
    padding: var(--v2-sp-4) var(--v2-sp-5);
}
body .modal-title {
    font-family: var(--v2-f-dis);
    font-weight: 700;
    font-size: 16px;
    color: var(--v2-ink);
    margin: 0;
}
body .modal-header .close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    color: var(--v2-ink);
    opacity: 1;
    font-size: 14px;
    text-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
}
body .modal-header .close:hover { background: var(--v2-glass-2); opacity: 1; }
body .modal-body { padding: var(--v2-sp-3) var(--v2-sp-5) var(--v2-sp-5); }

body .lang-wrapper,
body .currency-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--v2-sp-1);
}
body .lang-item,
body .currency-item {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-3);
    padding: var(--v2-sp-2) var(--v2-sp-3);
    border-radius: var(--v2-r-sm);
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    color: var(--v2-ink);
    font-family: var(--v2-f-dis);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none !important;
    transition: background var(--v2-t-fast), border-color var(--v2-t-fast), color var(--v2-t-fast);
}
body .lang-item:hover,
body .currency-item:hover {
    background: var(--v2-glass-2);
    border-color: var(--v2-line-strong);
    color: var(--v2-ink);
}
body .lang-item.active {
    background: var(--v2-yellow-soft);
    border-color: rgba(255, 214, 10, 0.30);
    color: var(--v2-yellow);
}
body .currency-item .cSymbol {
    font-family: var(--v2-f-mono);
    font-weight: 700;
    color: var(--v2-yellow);
    min-width: 32px;
}
body .currency-item .cText { color: var(--v2-ink-dim); }

/* ------------- PROMO POPUP ------------- */
body .promo-popup-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: var(--v2-blur);
    -webkit-backdrop-filter: var(--v2-blur);
    z-index: 1050;
    align-items: center;
    justify-content: center;
    padding: var(--v2-sp-5);
}
body .promo-popup-overlay.show { display: flex; }
body .promo-popup {
    background: var(--v2-glass-3);
    border: 1px solid var(--v2-line-strong);
    border-radius: var(--v2-r-xl);
    backdrop-filter: var(--v2-blur-strong);
    -webkit-backdrop-filter: var(--v2-blur-strong);
    max-width: 520px;
    width: 100%;
    padding: var(--v2-sp-5);
    position: relative;
    box-shadow: var(--v2-shadow-2);
}
body .promo-close-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    z-index: 2;
}
body .promo-image {
    width: 100%;
    border-radius: var(--v2-r-md);
    display: block;
}
body .promo-footer {
    margin-top: 16px;
    display: flex;
    justify-content: center;
}
body .promo-checkbox-container {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-2);
    color: var(--v2-ink-dim);
    font-size: 12px;
    cursor: pointer;
}
body .promo-checkbox-container input { accent-color: var(--v2-yellow); }

/* ------------- Notify toast -------------
   A58 · ก่อนหน้านี้ toast ไม่เคยขึ้นจอเลยสักครั้ง ปุ่ม copy ทั้ง 9 จุดในเว็บจึงกดแล้วเงียบ
   สามอย่างพร้อมกัน:
   ‼ 1. กฎที่เปิด toast ผูกกับ `.active` แต่ `notify()` ที่ script.js:343 ใส่ `.show`
        ตอนนี้ผูกกับ `.show` แล้ว — ‼ ถ้าจะเปลี่ยน ต้องแก้ script.js พร้อมกัน
   ‼ 2. `#notify` ตัวเดิม (L5455) ตั้ง `top: 0` กับ `width: 100%` ไว้ พอมาเจอ `bottom: 24px`
        ที่นี่ กล่องเลยยืดเต็มจอ วัดได้ 1912x925 ต้องล้าง top/width ที่นี่
   ‼ 3. `#notify.show` ตัวเดิมเรียก `animation: 0.5s fadein, 0.5s 2.5s fadeout`
        แต่ในไฟล์นี้ไม่มี keyframe ชื่อนั้น มีแต่ `fadeIn` (I ใหญ่) ชื่อ animation เป็น
        case-sensitive มันเลยไม่ทำงาน — การเข้าออกใช้ transition ที่นี่แทน */
body#dash #notify {
    position: fixed;
    top: auto;
    bottom: 24px;
    left: 50%;
    width: auto;
    max-width: min(560px, calc(100vw - 32px));
    transform: translateX(-50%) translateY(40px);
    padding: var(--v2-sp-3) var(--v2-sp-4);
    border-radius: var(--v2-r-pill);
    background: var(--v2-sidebar);
    color: var(--v2-on-sidebar);
    border: 0;
    font-family: var(--v2-f-thai);
    font-weight: 500;
    font-size: 13px;
    line-height: 1.5;
    text-align: left;
    box-shadow: var(--v2-elev-3);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--v2-t-base) var(--v2-ease), opacity var(--v2-t-base);
    z-index: 1100;
}
body#dash #notify.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
}

/* ------------- Mobile sidebar backdrop ------------- */
body .main-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 45;
    opacity: 0;
    transition: opacity var(--v2-t-base);
    pointer-events: none;
}
/* A96 · ‼ ฉากหลังเมนูมือถือไม่เคยขึ้นจอเลยสักครั้ง
   `layout.twig` เรนเดอร์ <div class="main-backdrop hidden" onclick="dMenuToggle()">
   และ `dMenuToggle()` ใน script.js ทำอย่างเดียวคือ toggle `.sidebar-active` ที่ body
   **ไม่มีใครถอดคลาส `hidden` ออกเลย** และ `.hidden` คือ `display:none !important`
   ท่าเดียวกับ toast `#notify.active` ที่ RESUME บันทึกไว้ — กฎที่ผูกกับสถานะที่ไม่มีใครตั้ง
   คลาส `hidden` ถูกถอดออกจาก twig แล้ว ความเห็น/ซ่อนคุมจาก `body.sidebar-active` ตัวเดียว
   (กฎ `:not(.hidden)` เดิมต้องไปด้วย ไม่งั้นพอไม่มีคลาสมันจะแปลว่า "โชว์ตลอดเวลา") */
@media (max-width: 991px) {
    body#dash.sidebar-active .main-backdrop { opacity: 1; pointer-events: auto; }
    /* แถบแท็บล่าง z-index 70 อยู่เหนือลิ้นชัก (50) มันจึงทับการ์ดยอดเงินท้ายลิ้นชัก
       50px (วัดจริง: การ์ดจบที่ 832 แถบแท็บเริ่มที่ 782) ระหว่างเปิดเมนูก็ไม่ต้องมี */
    body#dash.sidebar-active .v2-tabbar { display: none; }
    /* กันหน้าด้านหลังเลื่อนตามนิ้วขณะลิ้นชักเปิด */
    html:has(body#dash.sidebar-active),
    body#dash.sidebar-active { overflow: hidden; }
}

/* ------------- Floating orbs (body decoration) ------------- */
/* These orbs are injected via layout.twig right after <body>. */

/* ------------- Content wrapper z-index fix so orbs sit below -------------
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
body#outside .head-out,
body#outside main,
body#outside #header,
body#outside section,
body#outside footer,
body#outside .sm-header {
    position: relative;
    z-index: 2;
}

/* ============================================================
 *  v2 AUTHED PAGES — shared component overrides (Phase 2)
 *  These target legacy Bootstrap + theme class names used across
 *  neworder, services, orders, addfunds, tickets, account, etc.
 * ============================================================ */

/* Select2 dropdown tweak (was inline <style> in neworder.twig) */
body#dash .select2-results__options.dropdown-menu { margin-top: 0 !important; }
body#dash .select2-dropdown.dropdown-menu { padding: 0 !important; }

/* ---------- Cards ---------- */
/* A46 · พื้นทึบตามดีไซน์ 2a ไม่มีเส้นขอบ เงาเดียว
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
body#dash .card {
    background: var(--v2-surface);
    border: 0;
    border-radius: var(--v2-r-lg);
    box-shadow: var(--v2-elev);
    color: var(--v2-ink);
}
/*  A120 · กฎ `body#dash .card-shadow { box-shadow: var(--v2-shadow-1) }` ถูกลบ
    A46 เขียนกติกาไว้เองข้างบนว่า "การ์ดมีความลึกระดับเดียว" แต่คลาส
    `card-shadow` ซึ่งติดมากับ twig เดิมของ PerfectPanel (ใช้อยู่ 9 ไฟล์) ดัน
    การ์ดที่ใส่มันขึ้นไปอีกระดับ  ผลคือบน /tickets การ์ดสองแบบอยู่หน้าเดียวกัน
    คนละความลึก ทั้งที่เป็น .card เหมือนกัน — ต่างกันแค่ว่าคนเขียน twig ใส่
    คลาสนี้หรือเปล่า
    ‼ สำรวจแล้วว่า card-shadow อยู่บน .card เสมอในทุก twig จึงตกกลับไปใช้
      box-shadow ของ .card ได้ตรง ๆ ไม่มีอะไรเสียเงาไป
    ‼ เงาที่ "ขึ้นจอจริง" ทั้งเว็บมีแค่ 3 ระดับกลาง ๆ และทุกตัวใช้ token อยู่แล้ว
      ตัวเลข "109 เงาเขียนค่าตรง" ในบัญชีหนี้เกือบทั้งหมดเป็นโค้ดตายที่แพ้ cascade */
body#dash .card-body { padding: var(--v2-sp-5); color: var(--v2-ink); }

/* ---------- Dashboard stats widget (.dash-widget .dw-item) ---------- */
body#dash .dash-widget {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--v2-sp-3);
}
@media (max-width: 767px) {
    body#dash .dash-widget { grid-template-columns: 1fr; gap: var(--v2-sp-2); }
}
body#dash .dw-item {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-3);
    padding: var(--v2-sp-3);
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-md);
    position: relative;
    overflow: hidden;
}
body#dash .dw-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--v2-r-sm);
    background: var(--v2-yellow-soft);
    color: var(--v2-yellow);
    display: grid;
    place-items: center;
    font-size: 20px;
    flex-shrink: 0;
}
body#dash .dw-first { min-width: 0; flex: 1; }
body#dash .dw-value {
    font-family: var(--v2-f-dis);
    font-size: 20px;
    font-weight: 700;
    color: var(--v2-ink);
    line-height: var(--v2-lh-tight);
    display: flex;
    align-items: center;
    gap: var(--v2-sp-1);
    flex-wrap: wrap;
}
body#dash .dw-value a {
    color: var(--v2-yellow);
    font-size: 14px;
    display: inline-flex;
    align-items: center;
}
body#dash .dw-title {
    font-family: var(--v2-f-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--v2-ink-mute);
    margin-top: 4px;
}

/* ---------- App side widgets (contact / updates cards) ---------- */
body#dash .app-widget {
    padding: var(--v2-sp-3) var(--v2-sp-4);
    /* A46 · การ์ดใบเล็ก พื้นเดียวกับ .card มุมเล็กลงหนึ่งขั้น
       เหมือน .card เป๊ะ: กฎเดิมตรงนี้ก็ถูกกลุ่ม !important ที่ 16763 ทับอยู่ */
    background: var(--v2-surface);
    border: 0;
    border-radius: var(--v2-r-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--v2-sp-3);
    margin-bottom: 10px;
    box-shadow: var(--v2-elev);
}
body#dash .app-widget:last-child { margin-bottom: 0; }
body#dash .app-widget > span {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-2);
    color: var(--v2-ink);
    font-family: var(--v2-f-dis);
    font-weight: 600;
    font-size: 14px;
    flex: 1;
    min-width: 0;
}
body#dash .app-widget > span > i {
    width: 34px;
    height: 34px;
    background: var(--v2-yellow-soft);
    color: var(--v2-yellow);
    border-radius: var(--v2-r-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}
body#dash .app-widget > span > small {
    display: block;
    font-size: 11px;
    /*  A127 · ป้ายนี้เนื้อหาเป็นไทย — mono ไม่มี glyph ไทย ตัวไทยจึงตกไป
        ฟอนต์อื่นกลางป้าย · tracking ดันสระ/วรรณยุกต์หลุดจากพยัญชนะ
        ‼ แก้ที่กฎเดิม ไม่ต่อท้ายไฟล์ทับ — การทับทำให้ declaration เดิมตาย
          และ test-ledger จับได้ทันที (295 → 311) ซึ่งถูกของมัน */
    font-family: var(--v2-f-thai);
    color: var(--v2-ink-mute);
    font-weight: 500;
    margin-top: 2px;
}
/*  A114 · ปุ่มสองใบนี้เป็นปุ่มรอง ไม่ใช่ปุ่มหลัก
    วัดบนหน้า / ที่ 1900: "ADD LINE" กับ "ดูที่นี่" เป็น 130×36 พื้นเหลืองทึบ
    ส่วน "ถัดไป" ซึ่งเป็นปุ่มหลักของหน้าเป็น 92×44 พื้นขาว — ลิงก์เสริมในคอลัมน์ข้าง
    เด่นกว่าการกระทำหลักของหน้าทั้งขนาดและสี
    ทั้งสองกติกาที่บันทึกไว้บอกตรงกันว่าอันนี้ผิด:
      · กฎเจ้าของ 2026-08-04 — "ปุ่มรอง → --v2-well"
      · กฎดีไซน์ที่ L17679 — เหลืองถูกเก็บไว้ให้การกระทำ "ซื้อ" เท่านั้น
    ‼ ผูกกับ .app-widget เท่านั้น ไม่แตะ .btn-primary ทั้งเว็บ
      ไอคอนในการ์ดยังเป็น --v2-yellow-soft เหมือนเดิม การ์ดจึงไม่หายไปจากสายตา */
body#dash .app-widget .btn.btn-primary {
    height: 36px;
    padding: 0 var(--v2-sp-3);
    font-size: 12px;
    border-radius: var(--v2-r-sm);
    flex-shrink: 0;
    background: var(--v2-well);
    color: var(--v2-ink);
    box-shadow: none;
}
body#dash .app-widget .btn.btn-primary:hover {
    background: var(--v2-glass-2);
    color: var(--v2-ink);
}

/* ---------- Category picker (nwo-categories) ----------
   A70 · H-3 · เดสก์ท็อปเป็น grid 3 คอลัมน์ มีชื่อและจำนวนหมวด (ดีไซน์ Panel H · H1)
   ของเดิมเป็นปุ่มไอคอนเปล่า 54x54 เรียงแนวนอน — ผู้ใช้ต้องเดาว่าไอคอนไหนคืออะไร
   และไม่มีทางรู้ว่าแพลตฟอร์มนั้นมีของขายกี่หมวด
   ‼ Swiper ถูกสั่งให้ init เฉพาะจอ ≤767 แล้ว (layout.twig) — บนเดสก์ท็อป wrapper
     จึงว่างจาก transform ให้ grid ทำงานได้ ถ้าวันหนึ่ง Swiper กลับมา init ทุกจอ
     grid นี้จะโดน flex ของมันทับทันที ให้ไปดูที่ layout.twig ก่อนโทษ CSS */
body#dash .nwo-categories { margin: 0; padding: 0; overflow: hidden; width: 100%; }
body#dash .nwo-categories .swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
body#dash .nwo-categories .swiper-slide { width: auto; flex-shrink: 0; }
body#dash .nwo-cat-btn {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 16px 12px;
    border-radius: var(--v2-r-md);
    background: var(--v2-well);
    border: 0;
    color: var(--v2-ink);
    transition: background var(--v2-t-fast), box-shadow var(--v2-t-fast), color var(--v2-t-fast);
    cursor: pointer;
    text-align: center;
}
body#dash .nwo-cat-btn .nwo-cat-name {
    font-family: var(--v2-f-dis);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
}
body#dash .nwo-cat-btn .nwo-cat-count {
    font-size: 10.5px;
    line-height: 1.45;
    color: var(--adv-mute);
    font-variant-numeric: tabular-nums;
}
/* วงกลมไอคอน — ดีไซน์เรียกมันว่า data-mico ตอนถูกเลือกจะเป็นเหลืองทึบ */
body#dash .nwo-cat-btn .g-ticon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--v2-surface);
    color: var(--adv-mute);
    display: grid;
    place-items: center;
    font-size: 17px;
    transition: background var(--v2-t-fast), color var(--v2-t-fast);
}
body#dash .nwo-cat-btn.active .g-ticon { background: var(--v2-yellow); color: var(--v2-yellow-ink); }
/* ‼ ตัวเลขบนการ์ดที่ถูกเลือกต้องเข้มขึ้น — วัดธีมมืดแล้วได้ 4.36 (--adv-mute บนพื้นเหลืองจาง)
   ต่ำกว่าเกณฑ์ 4.5 ตรงกับที่ดีไซน์เขียนไว้ว่าลูกของ [data-methodon="true"] ให้ใช้ --ink */
body#dash .nwo-cat-btn.active .nwo-cat-count { color: var(--v2-ink-dim); }

/* A99 · มือถือ — กริด 3 คอลัมน์เหมือนเดสก์ท็อป ไม่ใช่แถวปัดได้อีกแล้ว
   ‼ บรรทัดที่ลบไปคือ `display: flex; grid-template-columns: none` ซึ่งล้างกริด 3 คอลัมน์
     ของกฎเดสก์ท็อปข้างบนทิ้ง แล้วให้ Swiper เข้ามาจัดแทน
   วัดบน 390 ก่อนแก้: ไทล์ 84x85 วางที่ x = 32,136,240,344,448,552,656,760,864
     → เห็น 3.5 ใบจาก 9 · หลังแก้: 3 แถว เห็นครบ 9 ใบ
   ไทล์เตี้ยลงเพื่อชดเชยความสูงที่เพิ่ม ตัวนับจำนวนหมวดยังซ่อนบนมือถือเหมือนเดิม */
@media (max-width: 767px) {
    body#dash .nwo-categories .swiper-wrapper { gap: var(--v2-sp-2); }
    body#dash .nwo-cat-btn { width: 100%; padding: 11px 6px; }
    body#dash .nwo-cat-btn .g-ticon { width: 32px; height: 32px; font-size: 14px; }
    body#dash .nwo-cat-btn .nwo-cat-name { font-size: 11.5px; }
    body#dash .nwo-cat-btn .nwo-cat-count { display: none; }
}
/* A70 · ลบกฎ :hover และ .active ของ .nwo-cat-btn ที่เคยอยู่ตรงนี้
   ‼ ทั้งสองตัวแพ้บล็อก "การ์ดเลือกได้" (หัวข้อ 4) ทุกบรรทัดอยู่แล้ว — ยกเว้น
     `transform: translateY(-2px)` ที่ไม่มีใครทับ จึงยังทำงานอยู่จริงมาตลอด
     ดีไซน์ไม่ให้การ์ดกระโดดตอน hover (ใช้เปลี่ยนพื้นแทน) เลยต้องถอนตัวนี้ด้วย
   ‼ `.g-ticon` เดิมตั้ง font-size: 20px ตอนที่มันเป็นไอคอนเปล่าในปุ่ม 54px
     ตอนนี้มันเป็นวงกลม 40px มีชื่อกับจำนวนอยู่ใต้ ค่าใหม่อยู่ในบล็อกด้านบน */

/* Order filter card (wraps swiper) — tighter padding */
body#dash .card.order-filter .card-body {
    padding: var(--v2-sp-3) var(--v2-sp-3);
}
body#dash .card.order-filter .card-body::before,
body#dash .card.order-filter .card-body::after { display: none !important; }

/* ---------- Nav tabs (.nav / .nav-link / .nav-item) ----------
   A65 · ถอน `body#dash ul.nav#nav-tab` ออกจากกลุ่มนี้ — `#nav-tab` มี role="tablist" อยู่แล้ว
   ตัวมันจึงซ้ำซ้อนมาตลอด และตอนนี้บล็อก 21.3 เป็นเจ้าของแท็บสองหน้านั้นแทน */
body#dash ul.nav[role="tablist"] {
    list-style: none;
    padding: var(--v2-sp-1);
    margin: 0 0 12px;
    display: inline-flex;
    gap: var(--v2-sp-1);
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-pill);
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
body#dash .nav .nav-item { list-style: none; margin: 0; }
body#dash .nav-link {
    padding: var(--v2-sp-2) var(--v2-sp-4);
    border-radius: var(--v2-r-pill);
    font-family: var(--v2-f-dis);
    font-size: 13px;
    font-weight: 600;
    color: var(--v2-ink-dim);
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-2);
    cursor: pointer;
    transition: background var(--v2-t-fast), color var(--v2-t-fast);
    text-decoration: none !important;
    border: 0;
    background: transparent;
    line-height: var(--v2-lh-tight);
    white-space: nowrap;
}
body#dash .nav-link:hover { background: var(--v2-glass); color: var(--v2-ink); }
body#dash .nav-link.active {
    background: var(--v2-yellow);
    color: var(--v2-yellow-ink);
    box-shadow: 0 4px 12px -4px var(--v2-yellow-glow);
}
body#dash .nav-link.active .icon { color: var(--v2-yellow-ink); }
body#dash .nav-link .icon { font-size: 14px; }

/* ---------- Form fields ---------- */
body#dash .form-group { margin-bottom: 16px; }
body#dash .form-group.mb-4 { margin-bottom: 18px !important; }
/* A54 · ช่องกรอก — Panel A · พื้น --v2-well ไม่มีขอบ โฟกัสเป็นวงแหวนเหลือง inset 2px
   ‼ ห้ามใส่ font-family mono / text-transform uppercase กลับให้ label
     label มาจาก lang() = ภาษาไทย ("ชื่อผู้ใช้") ทั้งสองอย่างไม่มีผลหรือทำร้ายการอ่าน
     (tracking ถูก A19 ยกเลิกไปแล้ว ตัวนี้เก็บกวาดที่เหลือ)
   ‼ โฟกัสใช้ inset box-shadow ไม่ใช่ border — border เปลี่ยนขนาดกล่อง ข้อความจะกระตุกตอนโฟกัส
   ‼ ห้ามแตะ transition ของ input:-webkit-autofill — มี delay 600000s กัน Chrome ทาสีเหลือง (A37)
   git log --grep=A54 · .claude/verify/panelA2/A54-verify.json */
body#dash .form-label,
body#dash .control-label {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--v2-ink-mute);
    margin-bottom: 7px;
}
body#dash .form-control {
    width: 100%;
    height: 46px;
    padding: 0 var(--v2-sp-3);
    border: 0;
    border-radius: var(--v2-r-md);
    background: var(--v2-well);
    color: var(--v2-ink);
    font-family: var(--v2-f-thai);
    font-size: 13px;
    line-height: 1.5;
    box-shadow: none;
    outline: 0;
    transition: background var(--v2-t-fast), box-shadow var(--v2-t-fast);
}
body#dash .form-control:focus {
    background: var(--v2-well);
    box-shadow: inset 0 0 0 2px var(--v2-acc-line);
    color: var(--v2-ink);
}
body#dash .form-control::placeholder { color: var(--v2-ink-mute); }
body#dash textarea.form-control {
    height: auto;
    min-height: 120px;
    padding: var(--v2-sp-3);
    resize: vertical;
    line-height: 1.7;
    /* mono เก็บไว้ — เนื้อหาคือลิงก์บรรทัดละรายการ ไม่ใช่ประโยคภาษาไทย */
    font-family: var(--v2-f-mono);
    font-size: 13px;
}
body#dash select.form-control {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}
/* readonly ที่นี่ไม่ใช่ "ปิดใช้งาน" แต่คือค่าที่ให้คัดลอก (API key, ลิงก์แนะนำ)
   ดีไซน์ให้ disabled จาง 50% ซึ่งจะทำให้ค่าพวกนี้อ่านยาก — เก็บ mono กับสีไว้ */
body#dash .form-control[readonly] {
    background: var(--v2-surface-2);
    color: var(--v2-yellow-text);
    font-family: var(--v2-f-mono);
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: default;
}

/* ---------- Select2 integration ---------- */
/* A71 · H3.3 · กล่อง select2 ต้องเป็นภาษาเดียวกับช่องกรอกที่อยู่ข้าง ๆ
   ‼ วัดบนหน้าจริง: `.form-control` ของ A54 เป็นพื้น --v2-well มุม 14 ไม่มีขอบ
     แต่ select2 ที่วางติดกันในฟอร์มเดียวเป็นพื้นแก้ว มุม 12 มีขอบ 1px — คนละภาษา
     ดีไซน์ Panel H · H1 ให้ทั้งคู่เป็น `--well` มุม `--ri` เหมือนกัน
   ‼ ถอน !important ของ background / border / border-radius ออกได้
     คู่แข่งคือ CSS ของ select2 เองที่ `.select2.select2-container .select2-selection` (sp 30)
     กฎนี้อยู่ที่ (1,2,1) = 121 ชนะด้วย specificity ไม่ต้องพึ่ง !important
     เหลือ !important ไว้เฉพาะ height / padding / display ที่ต้องสู้กับ inline ของ select2 เอง
   ‼ โฟกัสยังเป็นวงแหวนเหลือง — กติกาใน panel-tokens บรรทัด 5 บอกว่าเหลืองใช้เป็น
     "เส้นขอบหนา 2px รอบช่องที่กำลังโฟกัส" ได้ ซึ่งตรงกับที่ทำอยู่ */
body#dash .select2-container--default .select2-selection--single {
    height: 46px !important;
    padding: 0 var(--v2-sp-3) !important;
    border-radius: var(--v2-r-md);
    background: var(--v2-well);
    border: 0;
    color: var(--v2-ink);
    display: flex !important;
    align-items: center;
    outline: 0;
}
body#dash .select2-container--default.select2-container--focus .select2-selection--single,
body#dash .select2-container--default.select2-container--open .select2-selection--single {
    background: var(--v2-well);
    /*  A124 · โฟกัสเปลี่ยนจากวงแหวน inset 2px เป็นวงแหวน outset 3px
        ‼ ของเดิมวาดด้วยบรรทัดเดียวกับ .payment-box.active ("เลือกวิธีจ่ายเงินอันนี้")
          คือวงแหวน inset หนา 2px สีเหลืองตัวเดียวกัน เหมือนกันทุกตัวอักษร
          ผู้ใช้จึงแยกไม่ออกว่า "ช่องนี้กำลังพิมพ์อยู่" กับ "ฉันเลือกอันนี้ไว้"
          — นี่ไม่ใช่เรื่องสวย มันคือคนกดผิดตอนจ่ายเงิน
        รูปแบบ outset นี้ธีมใช้อยู่แล้วที่ 9686 และ 10156 จึงไม่ใช่ภาษาใหม่
        ‼ inset 2px ถูกสงวนไว้ให้ "เลือกอยู่" อย่างเดียวตั้งแต่นี้ */
    box-shadow: 0 0 0 3px var(--v2-yellow-soft);
}
body#dash .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--v2-ink);
    padding-left: 0 !important;
    padding-right: var(--v2-sp-5) !important;
    line-height: var(--v2-lh-ui);
    font-family: var(--v2-f-thai);
    font-size: 14px;
}
body#dash .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    top: 0 !important;
    right: 12px !important;
    width: 16px !important;
}
body#dash .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--v2-ink-mute) transparent transparent transparent !important;
}
            /*  A125 · backdrop-filter ถูกลบ
                หลังเฟส 1 ทุกลิสต์มีกล่องแม่ทึบ (--v2-surface) แล้ว และพื้นหน้าเอง
                เป็นไล่สีเรียบชั้นเดียวบนสีตัน (17392) — เบลอไล่สีเรียบได้ผลเป็น
                ไล่สีเรียบเหมือนเดิม ไม่มีพิกเซลไหนเปลี่ยน แต่กิน compositor layer
                หนึ่งชั้นต่อหนึ่งแถว และ .order-item ใช้ร่วมกัน 5 หน้า
                ‼ ที่เก็บไว้คือตัวที่มีของจริงอยู่ข้างหลัง: .main-backdrop (ฉากมืด
                  ทับเนื้อหาที่เลื่อนได้) · .modal-content · .dropdown-menu
                  · .filter-sticky · #up-header · .blog-date (ทับรูปปก)
                  และฝั่ง guest ทั้งหมดที่ทับงานกราฟิกของ hero */
body#dash .select2-dropdown {
    background: var(--v2-glass-3) !important;
    border: 1px solid var(--v2-line-strong) !important;
    border-radius: var(--v2-r-md) !important;
    box-shadow: var(--v2-shadow-2);
    color: var(--v2-ink);
    overflow: hidden;
}
body#dash .select2-container--default .select2-search--dropdown { padding: var(--v2-sp-2); }
body#dash .select2-container--default .select2-search--dropdown .select2-search__field {
    background: var(--v2-glass) !important;
    border: 1px solid var(--v2-line) !important;
    border-radius: var(--v2-r-sm) !important;
    color: var(--v2-ink) !important;
    padding: var(--v2-sp-2) var(--v2-sp-3) !important;
    font-family: var(--v2-f-thai);
    outline: 0;
}
body#dash .select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--v2-yellow) !important;
}
body#dash .select2-results__option {
    padding: var(--v2-sp-2) var(--v2-sp-3) !important;
    color: var(--v2-ink-dim) !important;
    font-size: 14px;
    font-family: var(--v2-f-thai);
}
body#dash .select2-container--default .select2-results__option--highlighted[aria-selected],
body#dash .select2-container--default .select2-results__option--highlighted {
    background: var(--v2-yellow-soft) !important;
    color: var(--v2-yellow) !important;
}
body#dash .select2-container--default .select2-results__option[aria-selected="true"] {
    background: var(--v2-glass-2) !important;
    color: var(--v2-ink) !important;
}

/* ---------- Buttons (Bootstrap overrides for authed) ---------- */
body#dash .btn.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--v2-sp-2);
    padding: var(--v2-sp-2) var(--v2-sp-5);
    border-radius: var(--v2-r-sm);
    font-family: var(--v2-f-dis);
    font-weight: 600;
    font-size: 14px;
    border: 1px solid transparent;
    background: var(--v2-yellow);
    color: var(--v2-yellow-ink);
    cursor: pointer;
    text-decoration: none !important;
    transition: background var(--v2-t-fast), transform var(--v2-t-fast), box-shadow var(--v2-t-base);
    line-height: 1.3;
    white-space: nowrap;
}
/* ‼ ห้ามใส่ box-shadow กลับเข้ามาที่นี่ — `.btn:hover { box-shadow: none !important }`
   ที่ L958 เป็นกฎรวมทั้งเว็บและตั้งใจให้ปุ่มทุกตัวแบน กฎเดิมตรงนี้เคยเขียน
   `0 12px 24px -10px var(--v2-yellow-glow)` ไว้และไม่เคยขึ้นจอเลยสักครั้ง
   ปฏิกิริยาตอนชี้คือสว่างขึ้น + ยกขึ้น 1px ซึ่งเห็นได้จริงทั้งคู่ */
body#dash .btn.btn-primary:hover,
body#dash .btn.btn-primary:focus {
    background: #ffe24a;
    color: var(--v2-yellow-ink);
    transform: translateY(-1px);
}
body#dash .btn.btn-outline-light {
    background: var(--v2-glass-2);
    border: 1px solid var(--v2-line-strong);
    color: var(--v2-ink);
    padding: var(--v2-sp-2) var(--v2-sp-5);
    border-radius: var(--v2-r-sm);
    font-family: var(--v2-f-dis);
    font-weight: 600;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--v2-sp-2);
    text-decoration: none !important;
    transition: background var(--v2-t-fast), border-color var(--v2-t-fast);
    line-height: 1.3;
}
body#dash .btn.btn-outline-light:hover {
    background: var(--v2-glass-3);
    color: var(--v2-ink);
    border-color: var(--v2-line-strong);
}
body#dash .btn.btn-lg { padding: var(--v2-sp-3) var(--v2-sp-5); font-size: 14px; border-radius: var(--v2-r-md); }
body#dash .btn.btn-block { display: flex; width: 100%; justify-content: center; }
body#dash .btn.btn-100 { width: 100%; justify-content: center; }
/* The stock .btn-secondary carries a two-layer drop shadow that never lands:
   .btn sets box-shadow: none !important earlier in the same file. Flat is the
   Soft Panel's intent, so this is one of the stock theme's own dead pairs rather
   than something to restore. */
body#dash .btn.btn-secondary {
    background: var(--v2-glass-2);
    border: 1px solid var(--v2-line-strong);
    color: var(--v2-ink);
    padding: var(--v2-sp-2) var(--v2-sp-4);
    border-radius: var(--v2-r-sm);
    font-family: var(--v2-f-dis);
    font-weight: 500;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-2);
    text-decoration: none !important;
    transition: background var(--v2-t-fast);
}
body#dash .btn.btn-secondary:hover {
    background: var(--v2-glass-3);
    color: var(--v2-ink);
}

/* ---------- Alerts (Bootstrap overrides) ---------- */
/* A48 · alert — โทนเดียวกับชิป พื้นทึบ ไม่มีขอบ
   ‼ ห้ามใส่ !important กลับ และห้ามลบ body#outside .alert.alert-success/-danger ในโซน legacy
     สองกฎนั้นมี !important ของตัวเองและเคยชนะบล็อกนี้อยู่ ตอนนี้จำกัด scope ให้ guest แล้ว
   git log --grep=A48 · .claude/verify/panelA2/A48-verify.json */
body#dash .alert {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-2);
    flex-wrap: wrap;
    padding: var(--v2-sp-3);
    border: 0;
    border-radius: var(--v2-r-md);
    background: var(--v2-well);
    color: var(--v2-ink);
    font-size: 12.5px;
    line-height: 1.6;
    margin-bottom: 18px;
    position: relative;
}
/* :not(.neworder-promo) — the partner banner has its own block further down and
   owns its own border. Without this exclusion that block needs !important on
   border just to clear this line, which is exactly why the version of it that
   shipped before carried border-color: !important with no visible reason. */
body#dash .alert-info    { background: var(--v2-info-soft);   color: var(--v2-info-text); }
body#dash .alert-warning:not(.neworder-promo) {
    background: var(--v2-warn-soft);
    color: var(--v2-warn-text);
}
body#dash .alert-success {
    background: var(--v2-ok-soft);
    color: var(--v2-ok-text);
}
body#dash .alert-success h4 { color: var(--v2-ok); font-family: var(--v2-f-dis); font-size: 14px; font-weight: 700; margin: 0 0 6px; }
body#dash .alert-danger {
    background: var(--v2-danger-soft);
    color: var(--v2-danger-text);
}
body#dash .alert strong { color: inherit; font-weight: 700; }
body#dash .alert.alert-dismissible { padding-right: 48px; }
body#dash .alert .close {
    background: transparent !important;
    border: 0 !important;
    color: var(--v2-ink-mute);
    opacity: 0.8;
    padding: 0;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 20px;
    text-shadow: none;
    line-height: 1;
}
body#dash .alert .close:hover { background: var(--v2-glass) !important; opacity: 1; }

/* Partner promo banner (the "ปรับระบบใหม่" affiliate banner in neworder.twig)
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
body#dash .alert.alert-warning.neworder-promo,
body#dash .alert.neworder-promo {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--v2-sp-1) var(--v2-sp-3);
    padding: var(--v2-sp-3) 48px var(--v2-sp-3) var(--v2-sp-4);
    background: var(--adv-panel-top) !important;
    border-radius: var(--v2-r-sm);
    /* the accent bar is an inset shadow, not border-left, because
       `body#dash .alert` sets `border: … !important` for every alert on the
       dashboard. Beating that needs !important here too, or a :not() on a rule
       the whole site leans on. box-shadow is uncontested, so the accent costs
       nothing and the hairline border stays the theme's own. */
    box-shadow: inset 3px 0 0 var(--adv-stub-bg), var(--adv-lift-sm);
    color: var(--adv-mute) !important;
    font-size: 13px;
    line-height: var(--v2-lh-body);
}
body#dash .neworder-promo strong {
    color: var(--adv-stub-ink);
    background: var(--adv-stub-bg);
    margin-right: 4px;
    padding: 2px var(--v2-sp-2);
    border-radius: var(--v2-r-pill);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
body#dash .neworder-promo .promo-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-1);
    margin-left: auto;
    padding: var(--v2-sp-2) var(--v2-sp-3);
    border-radius: var(--v2-r-pill);
    background: var(--adv-inner);
    border: 1px solid var(--adv-inner-line);
    /* --adv-stub-ink is the ink for sitting on yellow. The resting button is
       --adv-inner, which is #f2f0ea in light and #20202a in dark, so that ink
       vanished on dark — 12 luminance apart. Only the hover state turns yellow,
       so only hover gets stub-ink. Caught on /affiliates too: .promo-cta is
       shared with the withdraw button there. */
    color: var(--v2-ink);
    font-family: var(--v2-f-dis);
    font-weight: 600;
    font-size: 12px;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background var(--v2-t-fast), box-shadow var(--v2-t-fast), transform var(--v2-t-fast);
}
body#dash .neworder-promo .promo-cta:hover {
    background: var(--adv-stub-bg);
    border-color: var(--adv-stub-bg);
    color: var(--adv-stub-ink) !important;
    box-shadow: var(--adv-sel-glow);
    transform: translateY(-1px);
}
@media (max-width: 640px) {
    body#dash .neworder-promo { padding-right: 38px; }
    body#dash .neworder-promo .promo-cta { margin-left: 0; }
}

/* ---------- Service info right-panel ---------- */
/* A77 · F1-14 · การ์ดข้อมูลบริการ (ดีไซน์ Panel F บรรทัด 179–191)
   ‼ ดีไซน์ให้ชื่อบริการเป็น **หัวข้อขีดเส้นใต้** ไม่ใช่กล่องเหลือง — กล่องเหลืองในการ์ด
     ที่มีตั๋วเหลืองอยู่ด้านล่างแล้ว ทำให้มีสองจุดแย่งสายตากันในคอลัมน์เดียว
   ‼ `.ns-name` / `.ns-info` มีที่เดียวคือ neworder.twig (เช็คแล้วด้วย grep ทุก twig) */
body#dash .ns-name {
    padding: 0 0 14px;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--v2-line);
    border-radius: 0;
    margin-bottom: 14px;
    min-height: 0;
    display: flex;
    align-items: center;
}
body#dash .ns-name .service-title,
body#dash .ns-name .service-title span {
    color: var(--v2-ink);
    font-family: var(--v2-f-dis);
    font-weight: 600;
    font-size: 13px;
    line-height: 1.55;
}
body#dash .ns-name .service-title:empty::before {
    content: "เลือกบริการที่ต้องการ";
    color: var(--v2-ink-mute);
    font-weight: 500;
    font-size: 13px;
    font-family: var(--v2-f-thai);
}
/* ดีไซน์ให้เป็นรายการคอลัมน์เดียว: แผ่นไอคอนซ้ายคร่อมสองบรรทัด ป้ายบน ค่าล่าง
   ‼ `.ns-item` ห่อ **ทั้งไอคอนและข้อความ** ไว้ด้วยกัน แต่ดีไซน์ต้องการให้ไอคอนคร่อม
     บรรทัดป้ายด้วย ซึ่งแยกไม่ได้ถ้าไม่แก้ markup → ใช้ `display: contents`
     ให้ลูกของมันขึ้นไปเป็น grid item ของ `.ns-info > div` โดยตรง ไม่ต้องแตะ twig */
body#dash .ns-info {
    display: grid;
    grid-template-columns: 1fr;
    gap: 13px;
}
body#dash .ns-info > div {
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "ic k" "ic v";
    column-gap: 11px;
    row-gap: 2px;
    align-items: center;
}
body#dash .ns-info > div > span {
    grid-area: k;
    display: block;
    font-family: var(--v2-f-thai);
    font-size: 11px;
    line-height: 1.45;
    letter-spacing: normal;
    color: var(--v2-ink-mute);
    text-transform: none;
}
body#dash .ns-item {
    display: contents;
}
body#dash .ns-item .icon {
    grid-area: ic;
    align-self: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--v2-well);
    color: var(--v2-ink-dim);
    display: grid;
    place-items: center;
    font-size: 12px;
    flex-shrink: 0;
}
body#dash .ns-item .text {
    grid-area: v;
    min-width: 0;
    font-family: var(--v2-f-dis);
    font-size: 12.5px;
    line-height: 1.5;
    font-weight: 600;
    color: var(--v2-ink);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body#dash .ns-item .text > span:empty::before {
    content: "—";
    color: var(--v2-ink-soft);
    font-weight: 400;
}
body#dash .service-desc {
    padding: var(--v2-sp-3) var(--v2-sp-4);
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-md);
    font-size: 13px;
    color: var(--v2-ink-dim);
    line-height: 1.7;
}
body#dash .service-desc:has(> div:empty) { display: none; }

/* ---------- "Read before ordering" list ----------
   A65 · ลบทั้งสองกฎที่เคยอยู่ตรงนี้ (`#nav-read ul` และ `#nav-read ul li`)
   ‼ มันคือตัวที่ทำให้คำเตือนยังเป็นกล่อง 7 ใบ ทั้งที่บล็อก 21.4 สั่งให้เป็นแผงเดียวไปแล้ว
     `body#dash #nav-read ul li` ถือ **สอง id** → (2,0,3)
     `body#dash .read-before-list > li` ถือ id เดียว + class → (1,1,2) → **แพ้**
     ผลคือ background/border/border-radius ของ 21.4 ตายทั้งสามบรรทัด
     แต่ display/gap/counter ยังทำงาน — **กฎขึ้นจอครึ่งเดียว** ซึ่งดูจากรูปแล้วแยกไม่ออก
   ‼ เครื่องมือที่มีมองไม่เห็น: `who-wins.py read-before-list` เก็บเฉพาะกฎที่ชื่อ selector
     มีคำที่ค้น — ตัวที่ชนะไม่มีคำว่า read-before-list เลยสักตัวอักษร
     วิธีที่เจอ: แปลง sheet เป็น blob แล้วไล่ el.matches ทีละกฎ เรียงตาม (specificity, ลำดับ)
   ‼ ปลอดภัยที่จะลบ: `#nav-read` มีที่เดียวคือ neworder.twig:376 และข้างในมี
     ul.read-before-list ตัวเดียว — กฎ 21.4 ครอบทุกบรรทัดที่กฎนี้เคยตั้งไว้
   ที่อยู่ใหม่ของสไตล์ลิสต์นี้: หัวข้อ 21.4 (ค้นคำว่า "ตัวเตือน 7 การ์ด") */

/* ---------- Description badges (set by JS) ---------- */
/* A70 · H-3 · ป้ายบริการ — ดีไซน์ Panel H · H1 บรรทัด 129–133
   ‼ ถอน `!important` เจ็ดตัวออกจากบล็อกนี้ ของเดิมจำเป็นเพราะ layout.twig ฝังสีและ
     ระยะไว้ใน inline style ซึ่งชนะสไตล์ชีตเสมอ — A70 เปลี่ยน layout.twig ให้ปล่อย
     `class="svc-badge" data-tone="…"` แทน ไม่มี inline แล้ว จึงไม่ต้องมี !important
   ‼ ผลพลอยได้: ธีมมืดเคยได้ป้ายสีเดียวกับธีมสว่างมาตลอด เพราะ #ffd700 / #1e7e34 /
     #2f6bd8 ถูกฝังตายไว้ ตอนนี้ตามธีมแล้ว */
body#dash #desc-badges {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    min-height: 0;
}
body#dash #desc-badges:empty { margin-bottom: 0; }
body#dash .svc-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 11px;
    border-radius: var(--v2-r-pill);
    font-family: var(--v2-f-dis);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1;
}
body#dash .svc-badge i { font-size: 9px; }
/* โทนตาม [data-tone] ของ panel-tokens — สีมาจาก token จึงสลับตามธีมเอง */
body#dash .svc-badge[data-tone="ok"]   { background: var(--v2-ok-soft);     color: var(--v2-ok); }
body#dash .svc-badge[data-tone="info"] { background: var(--v2-info-soft);   color: var(--v2-info-text); }
body#dash .svc-badge[data-tone="acc"]  { background: var(--v2-yellow-soft); color: var(--v2-yellow-text); }
body#dash .svc-badge[data-tone="mute"] { background: var(--v2-well);        color: var(--v2-ink-dim); }

/* ---------- Service description panel ---------- */
body#dash #service_description { margin-bottom: 18px; }
body#dash #service_description .panel-body {
    padding: var(--v2-sp-3) var(--v2-sp-4);
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-md);
    color: var(--v2-ink-dim);
    font-size: 13px;
    line-height: var(--v2-lh-body);
}
body#dash .border-solid { border: 1px solid var(--v2-line); }
body#dash .border-rounded { border-radius: var(--v2-r-md); }

/* ---------- Grid/row compactness ---------- */
body#dash .row.m-top,
body#dash .mt-lg-3.m-top { margin-top: 0 !important; }
body#dash .row { margin-left: -7px; margin-right: -7px; row-gap: var(--v2-sp-3); }
body#dash .row > [class*="col-"] { padding-left: var(--v2-sp-2); padding-right: var(--v2-sp-2); }

/* Hidden class (used in form state) */
body#dash .hidden,
body#outside .hidden { display: none !important; }

/* ---------- New-order action row (submit + top-up) ---------- */
body#dash .neworder-actions {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--v2-sp-2);
    align-items: stretch;
    /* nothing separated these from the stub above, so the ticket and the buy
       button read as one fused block */
    margin-top: 16px;
}
@media (max-width: 540px) {
    body#dash .neworder-actions { grid-template-columns: 1fr; }
}
body#dash .neworder-actions .btn-lg {
    min-height: 52px;
    padding: var(--v2-sp-3) var(--v2-sp-6);
    white-space: nowrap;
}

/* ============================================================
 *  Page header (v4-style) — shared by orders, services, addfunds,
 *  account, tickets, affiliates, refill, subscription, drip_feed,
 *  api, updates, faq, childpanel, massorder
 * ============================================================ */
body#dash .page-header-v2,
body#outside .page-header-v2 {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--v2-sp-6);
    padding: var(--v2-sp-1) 0 var(--v2-sp-5);
    flex-wrap: wrap;
}
body#dash .page-header-v2 > div,
body#outside .page-header-v2 > div { min-width: 0; }
body#dash .page-h1-v2,
body#outside .page-h1-v2 {
    font-family: var(--v2-f-dis);
    font-size: var(--v2-fs-fluid-2);
    font-weight: 800;
    line-height: var(--v2-lh-tight);
    margin: 10px 0 8px;
    color: var(--v2-ink);
}
body#dash .page-h1-v2 i,
body#outside .page-h1-v2 i {
    font-style: italic;
    font-family: var(--v2-f-serif);
    font-weight: 400;
    color: var(--v2-yellow-text);
}
body#dash .page-sub-v2,
body#outside .page-sub-v2 {
    color: var(--v2-ink-mute);
    font-size: 14px;
    line-height: var(--v2-lh-body);
    max-width: 720px;
}

/* ============================================================
 *  Auth mini card (2fa, confirm-email — single narrow form)
 * ============================================================ */
/* A88 · E3 · `.card` ในเซเลกเตอร์ไม่ใช่ของประดับ — `body#dash .card > .card-body`
   ที่ (1,2,1) อยู่หลังในไฟล์และชนะกฎนี้ถ้าเขียนแค่ `.auth-mini-card .card-body`
   (เคยแก้ด้วย `!important` ที่กฎคู่ในหัวข้อ 17 ซึ่งลบไปแล้ว ที่นี่ใช้ specificity แทน) */
body#dash .auth-mini-card.card > .card-body,
body#outside .auth-mini-card.card > .card-body { padding: var(--v2-sp-6); text-align: left; }
/* ช่องรหัส 6 หลัก — ‼ ค่าชุดนี้เคยเขียนไว้ที่ `.auth-mini-card #code` (1,1,0) ซึ่งแพ้
   `body#dash .form-control` (1,1,1) มาตลอด ช่องจริงจึงสูง 46 ฟอนต์ไทย 13px
   ไม่ใช่ mono 26px สูง 64 ตามที่ตั้งใจ (วัดจริงบนหน้า authed 2026-08-10) */
body#dash .auth-mini-card #code,
body#outside .auth-mini-card #code {
    height: 64px;
    font-family: var(--v2-f-mono);
    font-size: 26px;
    font-weight: 600;
    letter-spacing: 0.42em;
    text-align: center;
    text-indent: 0.42em;   /* ชดเชย letter-spacing ตัวท้าย ให้อยู่กลางจริง */
}
body#dash .auth-mini-title,
body#outside .auth-mini-title {
    font-family: var(--v2-f-dis);
    font-size: 20px;
    font-weight: 700;
    color: var(--v2-ink);
    margin: 0 0 6px;
}
body#dash .auth-mini-sub,
body#outside .auth-mini-sub {
    color: var(--v2-ink-mute);
    font-size: 13px;
    line-height: var(--v2-lh-body);
    margin: 0 0 20px;
}
/* A88 · E3 · สูง 52 มุม --v2-r-md ตรงกับปุ่มของ signin/signup/resetpassword
   ‼ ค่านี้เคยเขียนไว้ที่กฎคู่ในหัวข้อ 17 ซึ่งอยู่ที่ (0,3,0) และแพ้กฎนี้ที่ (1,3,0)
     จึงไม่เคยขึ้นจอ ปุ่มจริงสูง 46 มุม --v2-r-sm มาตลอด */
body#dash .auth-mini-card .btn.btn-primary,
body#outside .auth-mini-card .btn.btn-primary {
    width: 100%;
    justify-content: center;
    margin-top: 8px;
    height: 52px;
    padding: 0 var(--v2-sp-4);
    border-radius: var(--v2-r-md);
    font-weight: 700;
}

/* ============================================================
 *  Terms / About content (long-form prose)
 * ============================================================ */
body#dash .terms-content,
body#outside .terms-content,
body#dash .about-content,
body#outside .about-content {
    color: var(--v2-ink-dim);
}
body#dash .terms-content p,
body#outside .terms-content p,
body#dash .about-content p,
body#outside .about-content p { margin: 0 0 14px; }
body#dash .terms-content h1,
body#dash .terms-content h2,
body#dash .terms-content h3,
body#outside .terms-content h1,
body#outside .terms-content h2,
body#outside .terms-content h3,
body#dash .about-content h1,
body#dash .about-content h2,
body#dash .about-content h3,
body#outside .about-content h1,
body#outside .about-content h2,
body#outside .about-content h3 {
    font-family: var(--v2-f-dis);
    font-weight: 700;
    color: var(--v2-ink);
    /* A105 · `margin` ย้ายไปอยู่กับบล็อกขนาดหัวข้อท้ายไฟล์ที่เดียว — ถ้าปล่อยไว้ที่นี่ด้วย
       จะกลายเป็นของตาย 12 บรรทัด (หนึ่งต่อหนึ่งเซเลกเตอร์ในกลุ่มนี้) */
}
/*  A121 · --v2-yellow → --v2-yellow-text
    ลิงก์ในหน้าเนื้อหา (/terms /about-us) วัดในธีมสว่างได้ contrast **1.35**
    เหลืองสด rgb(255,200,0) บนพื้นครีม rgb(241,239,233) — มองไม่เห็นจริง ๆ
    ธีมมี token คู่นี้อยู่แล้วและเขียนเหตุผลไว้ที่หัวไฟล์เองว่า "บนธีมสว่าง
    ค่าเดียวกันนี้ใช้เป็นพื้นและเส้นได้ แต่ใช้เป็นสีตัวอักษรไม่ผ่าน จึงมีชุด
    -text แยกไว้"  A105 (ผมเอง) หยิบผิดตัว
    หลังแก้: สว่าง 5.65 (#7d5700) · มืด 13.83 (ในธีมมืด -text = --v2-yellow อยู่แล้ว
    จึงไม่มีอะไรเปลี่ยนฝั่งมืด) */
body#dash .terms-content a,
body#outside .terms-content a,
body#dash .about-content a,
body#outside .about-content a {
    color: var(--v2-yellow-text);
    text-decoration: underline !important;
    text-underline-offset: 3px;
}
body#dash .terms-content ul,
body#outside .terms-content ul,
body#dash .about-content ul,
body#outside .about-content ul { padding-left: var(--v2-sp-5); margin: 10px 0 14px; }
body#dash .terms-content li,
body#outside .terms-content li,
body#dash .about-content li,
body#outside .about-content li { margin-bottom: 6px; list-style: disc; }

/* ---------- Neworder header (eyebrow + h1 + inline stats strip) ----------
   A61 · เหลือแต่ระยะ — display/gap/align มาจากกฎที่ 21.2 (`display:flex`)
   ‼ กฎนี้เคยเป็น grid 1fr auto พร้อม media query ที่สลับเป็น 1fr คอลัมน์เดียว
     ทั้งชุดตายมาตลอดเพราะกฎ flex อยู่ทีหลังในไฟล์ ลบทิ้งแทนการไปสู้
     เช็คก่อนเพิ่มอะไรที่นี่: who-wins.py neworder-header --scope 'body#dash' */
body#dash .neworder-header {
    padding: var(--v2-sp-1) 0 var(--v2-sp-5);
    margin-bottom: 4px;
}
body#dash .neworder-header-title { min-width: 0; }
/* ขนาดตัวอักษรไม่ได้อยู่ที่นี่ — บล็อก 21.2 ตั้ง 26px !important ให้หัวหน้าฝั่ง dash
   ทุกหน้า บรรทัด font-size ตรงนี้จึงตายมาตลอด ลบทิ้งแทนที่จะไปสู้ด้วย !important */
body#dash .neworder-h1 {
    font-family: var(--v2-f-dis);
    font-weight: 800;
    line-height: var(--v2-lh-tight);
    margin: 10px 0 8px;
    color: var(--v2-ink);
}
body#dash .neworder-h1 i {
    font-style: italic;
    font-family: var(--v2-f-serif);
    font-weight: 400;
    color: var(--v2-yellow-text);
}
body#dash .neworder-sub {
    color: var(--v2-ink-mute);
    font-size: 14px;
    line-height: var(--v2-lh-body);
}
/* A61 · สถิติสามช่องเป็นแถบเปล่า ไม่ใช่การ์ด — กฎที่ 21.2 ล้าง padding / background / border
   ด้วย !important ทั้งสามตัว จึงลบออกจากที่นี่
   ‼ แต่ 21.2 **ไม่ได้แตะ** border-radius กับ backdrop-filter — สองตัวนั้นยังมีผลจริง
     ลบไปครั้งหนึ่งแล้วเบลอฉากหลังหายไป จับได้ตอนวัดเทียบ ไม่ใช่ตอนอ่านโค้ด
     ห้ามลบซ้ำโดยคิดว่า "พื้นโปร่งใสแล้วเบลอไม่มีผล" — backdrop-filter ทำงานตรงที่พื้นโปร่ง */
            /*  A125 · backdrop-filter ถูกลบ
                หลังเฟส 1 ทุกลิสต์มีกล่องแม่ทึบ (--v2-surface) แล้ว และพื้นหน้าเอง
                เป็นไล่สีเรียบชั้นเดียวบนสีตัน (17392) — เบลอไล่สีเรียบได้ผลเป็น
                ไล่สีเรียบเหมือนเดิม ไม่มีพิกเซลไหนเปลี่ยน แต่กิน compositor layer
                หนึ่งชั้นต่อหนึ่งแถว และ .order-item ใช้ร่วมกัน 5 หน้า
                ‼ ที่เก็บไว้คือตัวที่มีของจริงอยู่ข้างหลัง: .main-backdrop (ฉากมืด
                  ทับเนื้อหาที่เลื่อนได้) · .modal-content · .dropdown-menu
                  · .filter-sticky · #up-header · .blog-date (ทับรูปปก)
                  และฝั่ง guest ทั้งหมดที่ทับงานกราฟิกของ hero */
body#dash .neworder-stats {
    flex-wrap: wrap;
    border-radius: var(--v2-r-md);
}
body#dash .neworder-stats .ns {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
/* A61 · ตัวเลขสถิติ — เหลือแต่ family กับ weight
   ‼ font-size / line-height / color ถูกกฎที่ 21.2 ตั้งใหม่ทั้งหมด และตัวเลขช่องที่สอง
     ถูกเปลี่ยนเป็นเหลืองที่นั่นด้วย (`:nth-child(2) b`) สามบรรทัดนั้นตายมาตลอด */
body#dash .neworder-stats .ns b {
    font-family: var(--v2-f-dis);
    font-weight: 800;
}
/* A65 · ลบกฎ mono/uppercase ของป้ายสถิติที่เคยอยู่ตรงนี้
   ‼ คอมเมนต์เดิมเขียนว่า "ป้ายพวกนี้เป็นภาษาอังกฤษล้วน (ORDERS / BALANCE)" — **ไม่จริง**
     ใน neworder.twig มันคือ ออเดอร์ทั้งหมด · คงเหลือ · ยอดใช้จ่ายไป ภาษาไทยล้วนทั้งสามตัว
     uppercase จึงไม่ทำอะไรกับตัวอักษรเลย นอกจากลาก JetBrains Mono มาเรนเดอร์ไทย
     ซึ่งคือบั๊กตัวเดียวกับที่ A54 แก้ไปแล้วรอบหนึ่ง
   ค่าใหม่อยู่ในบล็อก 21.2 (ค้นคำว่า "การ์ดสามใบ") */
body#dash .neworder-stats .ns span a {
    color: var(--v2-yellow-text);
    text-decoration: none !important;
}
/* A61 · เส้นคั่นระหว่างช่อง — วาดที่ 21.2 (solid --adv-panel-line, sp-4)
   ‼ ที่นี่เคยเป็นเส้นประ --v2-line ระยะ sp-5 ทั้งคู่ตายมาตลอด ลบทิ้ง
     กฎบนจอ 540px ที่ล้างเส้นออกยังอยู่ ไม่ได้แตะ */

/* ---------- Neworder 2-col wrap (form-card + summary) ---------- */
body#dash .neworder-wrap {
    display: grid;
    /*  A123 · คอลัมน์ฟอร์มไม่ยืดเต็มราง
        ที่จอ 1920 คอลัมน์ซ้ายเคยได้ ~956px แล้ว .form-control ไม่มี max-width
        ที่ไหนเลยทั้งไฟล์ → ช่องกรอก "ลิงก์" กว้าง ~916px สำหรับ URL ที่ ellipsis
        ตัดทิ้งอยู่แล้ว  ตาต้องกวาดจากป้าย (ซ้าย) ไปหาปุ่ม (ขวาสุด อีก 900px)
        ตารางควรได้กว้าง ฟอร์มควรได้แคบ — ที่นี่เคยให้กว้างเท่ากันทั้งคู่ */
    grid-template-columns: minmax(0, var(--v2-rail-form)) 380px;
    justify-content: start;
    gap: var(--v2-sp-4);
    align-items: flex-start;
}
@media (max-width: 1100px) {
    body#dash .neworder-wrap { grid-template-columns: 1fr; }
}
body#dash .neworder-main { min-width: 0; }

/* Form card — wraps the tabbed form */
body#dash .form-card { padding: 0; }
body#dash .form-card > .card-body { padding: var(--v2-sp-5); }

/* Step rows (v4-style numbered steps) */
body#dash .step-row {
    display: flex;
    gap: var(--v2-sp-3);
    padding: var(--v2-sp-4) 0;
    border-bottom: 1px solid var(--v2-line);
}
body#dash .step-row:first-of-type { padding-top: var(--v2-sp-1); }
body#dash .step-row:last-of-type { border-bottom: 0; padding-bottom: var(--v2-sp-1); }
body#dash .step-n {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--v2-yellow);
    color: var(--v2-yellow-ink);
    display: grid;
    place-items: center;
    font-family: var(--v2-f-dis);
    font-weight: 800;
    font-size: 14px;
    box-shadow: 0 6px 18px -6px var(--v2-yellow-glow);
}
body#dash .step-body {
    flex: 1;
    min-width: 0;
}
body#dash .step-body .step-t {
    font-family: var(--v2-f-dis);
    font-weight: 700;
    font-size: 14px;
    color: var(--v2-ink);
    margin-bottom: 2px;
}
body#dash .step-body .step-d {
    color: var(--v2-ink-mute);
    font-size: 12px;
    margin-bottom: 14px;
    line-height: 1.5;
}

/* Swiper inside step 1 — tighter since it's inside a card */
body#dash .step-body .nwo-categories { padding: var(--v2-sp-1) 0; }

/* Summary aside (service info tabs + ctx widgets) */
body#dash .neworder-summary {
    position: sticky;
    top: 80px;
    display: flex;
    flex-direction: column;
    gap: var(--v2-sp-2);
    min-width: 0;
}
/* A67 · H4 กฎข้อ 2 — คอลัมน์ขวาไปอยู่ **ล่างสุด** บนมือถือ
   ‼ `order: -1` ถูกลบ: มันดันคำเตือน 7 ข้อ + วิดเจ็ต 2 อันมาก่อนช่องกรอก
     ต้องเลื่อนผ่านทั้งหมดกว่าจะถึงงานหลัก — เห็นตอนเปิดจอ 390 จริงครั้งแรก
   ‼ ตัวเลขที่ต้องเห็นตลอดคือ "ยอดที่ต้องชำระ" ดีไซน์จึงให้ตรึงเฉพาะตั๋วไว้ขอบล่าง
     ไม่ใช่ดันทั้งคอลัมน์ขึ้นบน (Panel H · H4 กฎข้อ 2) */
@media (max-width: 1100px) {
    body#dash .neworder-summary { position: static; }
    /* กฎ "ตั๋วตรึงขอบล่าง" **ไม่ได้อยู่ตรงนี้** — ดูท้ายบล็อก .nos-quote (A62/A67)
       ‼ เขียนไว้ตรงนี้ครั้งแรกแล้วไม่ทำงาน: บล็อกฐานของ .nos-quote อยู่ท้ายไฟล์
         specificity เท่ากัน ตัวที่อยู่ทีหลังชนะ กฎ media ที่อยู่ก่อนหน้าจึงแพ้ทั้งดุ้น
         วัดบนจอ 390 จริงถึงเห็น (position ยังเป็น relative) */
}
body#dash .neworder-summary .nav {
    margin: 0 0 10px;
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}
body#dash .neworder-summary-card .card-body { padding: var(--v2-sp-4); }

/* App widgets inside the summary aside — full width stacked */
body#dash .neworder-summary .app-widget {
    margin-bottom: 0;
}

/* Service-info grid: single column inside the narrow summary aside */
body#dash .neworder-summary .ns-info {
    grid-template-columns: 1fr;
}

/* Hide the old sidebar-profile context that showed "จำนวนออเดอร์ทั้งหมด" etc */
body#dash .neworder-summary .card-body { position: relative; }

/* ============================================================
 *  services.twig — service catalog list
 * ============================================================ */

/* Services wrap — used when catalog is shown to guests */
body#outside .services-wrap { max-width: 1280px; margin: 0 auto; padding: var(--v2-sp-5) var(--v2-sp-6) 80px; }
body#outside .services-wrap .page-outside { position: relative; z-index: 2; }

/* Dropdown menu (filter categories, currencies) */
body#dash .dropdown-menu,
body#outside .dropdown-menu {
    background: var(--v2-glass-3);
    border: 1px solid var(--v2-line-strong);
    border-radius: var(--v2-r-md);
    backdrop-filter: var(--v2-blur-strong);
    -webkit-backdrop-filter: var(--v2-blur-strong);
    box-shadow: var(--v2-shadow-2);
    padding: var(--v2-sp-1);
    color: var(--v2-ink);
}
body#dash .dropdown-menu.dropdown-menu-scroll,
body#outside .dropdown-menu.dropdown-menu-scroll { max-height: 400px; overflow-y: auto; }
body#dash .dropdown-menu.dropdown-menu-currency,
body#outside .dropdown-menu.dropdown-menu-currency { width: auto; min-width: 140px; }
body#dash .dropdown-item,
body#outside .dropdown-item {
    padding: var(--v2-sp-2) var(--v2-sp-3);
    border-radius: var(--v2-r-sm);
    color: var(--v2-ink-dim);
    font-family: var(--v2-f-dis);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: normal;
    transition: background var(--v2-t-fast), color var(--v2-t-fast);
}
body#dash .dropdown-item:hover,
body#outside .dropdown-item:hover {
    background: var(--v2-glass-2);
    color: var(--v2-ink);
}
body#dash .dropdown-item.active,
body#outside .dropdown-item.active {
    background: var(--v2-yellow-soft);
    color: var(--v2-yellow);
}
@media (min-width: 992px) {
    body#dash .dropdown-item,
    body#outside .dropdown-item { min-width: 320px; }
}

/* Filter toggle button (ตัวกรองบริการ) uses .btn.btn-primary */
body#dash .dropdown .btn.dropdown-toggle,
body#outside .dropdown .btn.dropdown-toggle { padding-right: 36px; position: relative; }
body#dash .dropdown .btn.dropdown-toggle::after,
body#outside .dropdown .btn.dropdown-toggle::after {
    border: 0;
    content: "▾";
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    width: auto;
    height: auto;
    margin: 0;
}

/* Service search input */
body#dash .service-search,
body#outside .service-search { position: relative; }
body#dash .service-search::before,
body#outside .service-search::before {
    content: "\f002";
    font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome";
    font-weight: 400;
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--v2-ink-mute);
    font-size: 14px;
    pointer-events: none;
}
body#dash .service-search .textbox,
body#outside .service-search .textbox {
    width: 100%;
    padding: var(--v2-sp-3) var(--v2-sp-3) var(--v2-sp-3) 42px;
    border-radius: var(--v2-r-pill);
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    color: var(--v2-ink);
    font-family: var(--v2-f-thai);
    font-size: 14px;
    outline: 0;
    transition: border-color var(--v2-t-fast), background var(--v2-t-fast);
}
body#dash .service-search .textbox:focus,
body#outside .service-search .textbox:focus {
    border-color: var(--v2-yellow);
    background: var(--v2-glass-2);
    box-shadow: 0 0 0 3px var(--v2-yellow-soft);
}
body#dash .service-search .textbox::placeholder,
body#outside .service-search .textbox::placeholder { color: var(--v2-ink-mute); }

/* Empty search state */
body#outside .nothing-found { display: none; }
body#outside .nothing-found.show { display: block; }
body#outside .nothing-found-body { padding: 48px var(--v2-sp-6); }
body#outside .nothing-found-icon {
    font-size: 56px;
    color: var(--v2-yellow);
    margin-bottom: 14px;
}
body#outside .nothing-found h3 {
    font-family: var(--v2-f-dis);
    font-size: 20px;
    font-weight: 700;
    color: var(--v2-ink);
    margin: 0 0 6px;
}
body#outside .nothing-found p { color: var(--v2-ink-mute); font-size: 14px; margin: 0; }

/* Service category section */
body#dash .service-category,
body#outside .service-category { margin-bottom: 28px; }
body#dash .service-content-all,
body#outside .service-content-all {
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-lg);
    padding: var(--v2-sp-4);
    /*  A127 · backdrop-filter ถูกลบ — หลังเฟส 1 ระนาบนี้ทึบแล้ว
        เบลอพื้นทึบได้ผลเป็นศูนย์ แต่ /services มีแถวบริการเป็นพันแถว
        gate G2 นับได้ 78 element ที่ยังขอเบลอบนหน้าเดียว */
}
body#dash .service-content-head,
body#outside .service-content-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--v2-sp-3);
    padding-bottom: var(--v2-sp-3);
    border-bottom: 1px solid var(--v2-line);
    margin-bottom: 14px;
}
body#dash .service-cat-side,
body#outside .service-cat-side { display: flex; align-items: center; gap: var(--v2-sp-3); flex-wrap: wrap; }
body#dash .service-cat-header,
body#outside .service-cat-header {
    font-family: var(--v2-f-dis);
    font-size: 20px;
    font-weight: 700;
    color: var(--v2-ink);
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-2);
}
body#dash .s-count,
body#outside .s-count {
    font-family: var(--v2-f-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--v2-ink-mute);
    text-transform: uppercase;
}
body#dash .s-count strong,
body#outside .s-count strong { color: var(--v2-yellow); font-weight: 700; }

/* Service item row */
body#dash .service-content,
body#outside .service-content {
    display: flex;
    flex-direction: column;
    gap: var(--v2-sp-2);
}
body#dash .service-item,
body#outside .service-item {
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-md);
    padding: var(--v2-sp-3) var(--v2-sp-4);
    transition: border-color var(--v2-t-fast), background var(--v2-t-fast);
}
body#dash .service-item:hover,
body#outside .service-item:hover {
    border-color: var(--v2-line-strong);
    background: var(--v2-glass-2);
}
body#dash .services-item-top,
body#outside .services-item-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--v2-sp-3);
    margin-bottom: 10px;
}
body#dash .sit-first,
body#outside .sit-first { display: flex; gap: var(--v2-sp-3); align-items: flex-start; flex: 1; min-width: 0; }
body#outside .sit-first .services-id { margin: auto; }
body#dash .services-id,
body#outside .services-id {
    font-family: var(--v2-f-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--v2-yellow);
    background: var(--v2-yellow-soft);
    padding: var(--v2-sp-1) var(--v2-sp-2);
    border-radius: var(--v2-r-xs);
    flex-shrink: 0;
}
body#dash .services-title,
body#outside .services-title {
    font-family: var(--v2-f-dis);
    font-size: 14px;
    font-weight: 600;
    color: var(--v2-ink);
    line-height: var(--v2-lh-tight);
    min-width: 0;
    word-break: break-word;
}
body#dash .services-title .ss-name,
body#outside .services-title .ss-name { color: var(--v2-ink); }
body#dash .sit-last,
body#outside .sit-last {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-2);
    flex-shrink: 0;
}
body#dash .services-rate,
body#outside .services-rate {
    font-family: var(--v2-f-dis);
    font-weight: 800;
    font-size: 16px;
    color: var(--v2-yellow-text);
    white-space: nowrap;
}
body#dash .btn-favorite,
body#outside .btn-favorite {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--v2-r-sm);
    background: var(--v2-glass-2);
    border: 1px solid var(--v2-line);
    color: var(--v2-ink-mute);
    cursor: pointer;
    transition: background var(--v2-t-fast), color var(--v2-t-fast);
}
body#dash .btn-favorite:hover,
body#outside .btn-favorite:hover { color: var(--v2-yellow); }
body#dash .btn-favorite .favorite-active,
body#outside .btn-favorite .favorite-active { color: var(--v2-yellow); }

/* Service item — bottom row (min/max/avg + actions) */
body#dash .services-item-bottom,
body#outside .services-item-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--v2-sp-3);
    flex-wrap: wrap;
}
body#dash .sib-first,
body#outside .sib-first {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-3);
    flex-wrap: wrap;
    font-family: var(--v2-f-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--v2-ink-mute);
}
body#dash .sib-first > span,
body#outside .sib-first > span { display: inline-flex; align-items: center; gap: var(--v2-sp-1); }
body#dash .sib-first > span i,
body#outside .sib-first > span i { color: var(--v2-ink-soft); font-size: 12px; }
body#dash .sib-first strong,
body#outside .sib-first strong {
    color: var(--v2-ink);
    font-family: var(--v2-f-dis);
    font-weight: 700;
    font-size: 12px;
}
body#dash .badgearea,
body#outside .badgearea { display: inline-flex; gap: var(--v2-sp-1); flex-wrap: wrap; }

/* ─── A81 · B1 · รายการบริการเป็นตาราง (ดีไซน์ Panel B · B1) ───────────────
   ‼ หน้านี้เปิดสาธารณะ กฎทั้งบล็อกจึงต้องทำงานทั้ง body#dash และ body#outside
     และห้ามใช้ token ที่ประกาศใต้ `body.v2-dash` (--v2-well / --v2-surface / --v2-sidebar)
     ไม่งั้น declaration ตายทั้งบรรทัดฝั่ง guest — บั๊กเดียวกับ A74
   ‼ บทเรียนจาก A80: อย่าละลาย wrapper ที่มีลูกหลายตัว `.sit-last` (ราคา + ดาวโปรด)
     กับ `.sib-last` (ปุ่มสั่ง + ปุ่มคำอธิบาย) เก็บไว้เป็นช่องเดียว จัดข้างในด้วย flex
   ‼ `.modal` ของแต่ละบริการเป็นลูกของ `.service-item` ด้วย — bootstrap ตั้ง position: fixed
     ไว้แล้ว มันจึงหลุดออกจาก flow ไม่กินช่องในกริด (วัดยืนยันหลัง deploy)
   ‼ ต่ำกว่า 1100 กลับไปเป็นการ์ดเดิมทั้งหมด รวมถึงป้ายกำกับในช่องที่ desktop ซ่อนไว้ */
body#dash .svc-head,
body#outside .svc-head { display: none; }

@media (min-width: 1100px) {
    body#dash .service-content .svc-head,
    body#outside .service-content .svc-head,
    body#dash .service-content .service-item,
    body#outside .service-content .service-item {
        display: grid;
        /*  A112 · คอลัมน์ราคา 92 → 120
            .sit-last ใส่ของสามชิ้น: ชิปราคา 69 + gap 8 + ปุ่มดาว 18 = 95
            เกินช่อง 92 อยู่ 3px และยิ่งราคาหลักมากยิ่งล้น — วัดจริงได้ถึง 27px
            (674–767 ในกล่องพ่อ 701–793) ชิปจึงเลื่อนไปทับคอลัมน์ชื่อบริการ
            120 = ราคาหกหลักพร้อมจุลภาค + gap + ดาว  ที่เพิ่มดึงจาก minmax(0,1fr) */
        grid-template-columns: 56px minmax(0, 1fr) 120px 116px 116px 104px 152px;
        column-gap: 12px;
        row-gap: 3px;
        align-items: center;
    }
    body#dash .service-content .svc-head,
    body#outside .service-content .svc-head {
        padding: 9px 14px;
        margin-bottom: 6px;
        background: var(--adv-inner);
        border-radius: var(--v2-r-sm);
        font-family: var(--v2-f-thai);
        font-size: 11px;
        font-weight: 500;
        /*  A127 · letter-spacing + uppercase ถูกลบ (ทั้งสามหัวตาราง)
            หัวคอลัมน์เป็นไทยทั้งหมด — วันที่สั่ง · งาน · ความคืบหน้า ·
            ยอดเริ่มงาน · ยอดที่ชำระ · สถานะงาน
            uppercase ไม่ทำอะไรกับไทย ส่วน tracking 0.06em (วัดได้ 0.66px)
            ดันสระกับวรรณยุกต์ให้ลอยออกจากพยัญชนะที่มันเกาะอยู่
            ‼ G5 ของ design-gates.js จับจุดนี้เองในการรันครั้งแรก */
        color: var(--v2-ink-mute);
    }
    body#dash .service-content .svc-head > span:nth-child(3),
    body#outside .service-content .svc-head > span:nth-child(3) { text-align: right; }

    body#dash .service-content .services-item-top,
    body#outside .service-content .services-item-top,
    body#dash .service-content .sit-first,
    body#outside .service-content .sit-first,
    body#dash .service-content .services-item-bottom,
    body#outside .service-content .services-item-bottom,
    body#dash .service-content .sib-first,
    body#outside .service-content .sib-first {
        display: contents;
    }
    body#dash .service-content .services-item-top,
    body#outside .service-content .services-item-top { margin-bottom: 0; }

    body#dash .service-content .services-id,
    body#outside .service-content .services-id { grid-column: 1; grid-row: 1 / 3; justify-self: start; }
    body#dash .service-content .services-title,
    body#outside .service-content .services-title { grid-column: 2; grid-row: 1; min-width: 0; }
    body#dash .service-content .badgearea,
    body#outside .service-content .badgearea { grid-column: 2; grid-row: 2; }
    body#dash .service-content .sit-last,
    body#outside .service-content .sit-last {
        grid-column: 3; grid-row: 1 / 3;
        display: flex; align-items: center; justify-content: flex-end; gap: var(--v2-sp-2);
    }
    body#dash .service-content .min,
    body#outside .service-content .min { grid-column: 4; grid-row: 1; }
    body#dash .service-content .max,
    body#outside .service-content .max { grid-column: 4; grid-row: 2; }
    body#dash .service-content .svc-speed,
    body#outside .service-content .svc-speed { grid-column: 5; grid-row: 1; }
    body#dash .service-content .avg,
    body#outside .service-content .avg { grid-column: 5; grid-row: 2; min-width: 0; }
    body#dash .service-content .svc-warranty,
    body#outside .service-content .svc-warranty { grid-column: 6; grid-row: 1 / 3; }
    body#dash .service-content .sib-last,
    body#outside .service-content .sib-last {
        grid-column: 7; grid-row: 1 / 3;
        display: flex; align-items: center; justify-content: flex-end; gap: var(--v2-sp-1);
    }

    /* หัวตารางบอกชื่อช่องแล้ว ในแถวเหลือแต่ค่า
       ‼ `.avg` ก็ต้องซ่อนป้ายด้วย ป้ายมันคือ "ระยะเวลาเสร็จงานออเดอร์ล่าสุด:" ยาว 30 ตัวอักษร
         วัดได้ว่ามันดันช่องสูง 90px ทำให้ทั้งแถวสูง 185 · ตัว title ของ element เดิมยังอยู่
         เอาเมาส์ชี้แล้วอ่านได้เหมือนเดิม ไม่ได้ลบข้อมูล */
    body#dash .service-content .min > span:not(strong),
    body#outside .service-content .min > span:not(strong),
    body#dash .service-content .max > span:not(strong),
    body#outside .service-content .max > span:not(strong),
    body#dash .service-content .avg > span:not(strong),
    body#outside .service-content .avg > span:not(strong),
    body#dash .service-content .svc-speed .svc-k,
    body#outside .service-content .svc-speed .svc-k,
    body#dash .service-content .svc-warranty .svc-k,
    body#outside .service-content .svc-warranty .svc-k { display: none; }

    body#dash .service-content .avg,
    body#outside .service-content .avg {
        font-size: 10.5px;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
    }
    body#dash .service-content .avg strong,
    body#outside .service-content .avg strong {
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
    }
    /* ‼ `.ss-name` **ไม่มีจริงตอน runtime** — สคริปต์ค้นหาของธีมเขียนทับ `.services-title`
       เป็นข้อความเปล่า (วัดแล้ว: `.services-title` ไม่มี element ลูกเลย)
       กฎตัดบรรทัดจึงต้องอยู่ที่ `.services-title` ตัวมันเอง
       ใช้ line-clamp 2 บรรทัด ไม่ใช่ตัดบรรทัดเดียว — ชื่อบริการที่นี่ยาวและมีข้อมูลจริงอยู่ท้ายชื่อ */
    body#dash .service-content .services-title,
    body#outside .service-content .services-title {
        min-width: 0;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.45;
    }
    body#dash .service-content .sib-last .btn,
    body#outside .service-content .sib-last .btn {
        padding: var(--v2-sp-1) var(--v2-sp-3);
        font-size: 11.5px;
        min-height: 0;
        white-space: nowrap;
    }
    body#dash .service-content .service-item,
    body#outside .service-content .service-item { padding: 10px 14px; }
}
body#dash .badgearea > span,
body#outside .badgearea > span {
    border-radius: var(--v2-r-pill) !important;
    padding: var(--v2-sp-1) var(--v2-sp-2) !important;
    font-family: var(--v2-f-dis);
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
}
body#dash .sib-last,
body#outside .sib-last { display: flex; gap: var(--v2-sp-2); flex-wrap: wrap; }
/*  A116 · ‼ อ่านออกไม่ได้จริง ๆ ไม่ใช่เรื่องความสวย
    ปุ่ม "คำอธิบาย" ในแถวบริการวัด contrast ได้ **1.29** — ตัวอักษรเกือบดำ
    rgb(26,21,0) บนพื้นจริง rgb(43,43,46) เกณฑ์ขั้นต่ำของข้อความปกติคือ 4.5
    สาเหตุคือกฎสองตัวแบ่งกันคุมปุ่มเดียว:
      · กฎนี้ (1,2,1) ให้พื้น --v2-glass-2 → ได้พื้นเข้ม
      · `html body#dash .btn.btn-primary` (1,2,2) ให้ color: --v2-yellow-ink
        ซึ่งเป็นสีตัวอักษรสำหรับ "พื้นเหลือง" — มันชนะเฉพาะ color ไม่ได้แตะพื้น
    ปุ่มจึงได้พื้นของปุ่มเงียบ + สีตัวอักษรของปุ่มเหลือง
    เติม `html` และ `.btn-primary` ให้กฎนี้เป็น (1,3,2) เพื่อชนะที่ตัวขับจริง
    ไม่ใช้ !important — เลขที่ยกขึ้นมาน้อยที่สุดที่พอชนะ
    ‼ ไม่แตะ .btn-order-now ("สั่งซื้อเลยตอนนี้") ที่อยู่ใน .sib-last เหมือนกัน
      ตัวนั้นพื้นเหลืองจริง yellow-ink จึงถูกแล้ว วัดได้ 12.92 */
html body#dash .sib-last .btn.btn-primary,
html body#outside .sib-last .btn.btn-primary { color: var(--v2-ink); }

body#dash .sib-last .btn,
body#outside .sib-last .btn {
    padding: var(--v2-sp-2) var(--v2-sp-3);
    border-radius: var(--v2-r-sm);
    font-size: 12px;
    font-family: var(--v2-f-dis);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-1);
    border: 1px solid var(--v2-line);
    background: var(--v2-glass-2);
    color: var(--v2-ink);
    text-decoration: none !important;
    cursor: pointer;
    transition: background var(--v2-t-fast), border-color var(--v2-t-fast), transform var(--v2-t-fast);
}
body#dash .sib-last .btn:hover,
body#outside .sib-last .btn:hover {
    background: var(--v2-glass-3);
    border-color: var(--v2-line-strong);
    transform: translateY(-1px);
}
body#dash .btn.btn-order-now,
body#outside .btn.btn-order-now {
    background: var(--v2-yellow);
    color: var(--v2-yellow-ink);
    border-color: transparent;
}
body#dash .btn.btn-order-now:hover,
body#outside .btn.btn-order-now:hover {
    background: #ffe24a;
    color: var(--v2-yellow-ink);
    box-shadow: 0 8px 18px -6px var(--v2-yellow-glow);
}

/* Service detail modal */
body .modal-order-content {
    font-size: 13px;
    line-height: 1.7;
    color: var(--v2-ink-dim);
    padding: var(--v2-sp-2) 0;
}
body .modal-order-content br + br { display: none; }

/* Hit badge (added by layout.twig script for services with ✨) */
body#dash .hit::after,
body#outside .hit::after {
    content: "HIT";
    display: inline-block;
    margin-left: 8px;
    padding: 2px var(--v2-sp-2);
    border-radius: var(--v2-r-pill);
    background: var(--v2-danger);
    color: #fff;
    font-family: var(--v2-f-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    vertical-align: middle;
}

/* ============================================================
 *  orders.twig — order history list
 * ============================================================ */

/* Filter pill navigation */
body#dash .pnd-ord-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--v2-sp-1);
    padding: 0;
    margin: 0;
    list-style: none;
}
body#dash .pnd-ord-nav li { list-style: none; }
body#dash .pnd-ord-nav a {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-1);
    padding: var(--v2-sp-2) var(--v2-sp-3);
    border-radius: var(--v2-r-pill);
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    color: var(--v2-ink-dim);
    font-family: var(--v2-f-dis);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background var(--v2-t-fast), border-color var(--v2-t-fast), color var(--v2-t-fast);
}
body#dash .pnd-ord-nav a:hover {
    background: var(--v2-glass-2);
    border-color: var(--v2-line-strong);
    color: var(--v2-ink);
}
body#dash .pnd-ord-nav a.active {
    background: var(--v2-yellow);
    color: var(--v2-yellow-ink);
    border-color: transparent;
}

/* Order search form */
body#dash .orders-search form { gap: var(--v2-sp-1); }
body#dash .orders-search .textbox {
    flex: 1;
    padding: var(--v2-sp-3) var(--v2-sp-3) var(--v2-sp-3) 42px;
    border-radius: var(--v2-r-pill);
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    color: var(--v2-ink);
    font-family: var(--v2-f-thai);
    font-size: 14px;
    outline: 0;
    transition: border-color var(--v2-t-fast), background var(--v2-t-fast);
}
body#dash .orders-search .textbox:focus {
    border-color: var(--v2-yellow);
    background: var(--v2-glass-2);
    box-shadow: 0 0 0 3px var(--v2-yellow-soft);
}
body#dash .orders-search .btn.search {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    flex-shrink: 0;
}

/* No-orders empty state */
body#dash .noorders { padding: 40px var(--v2-sp-6); }
body#dash .noorders-icon {
    font-size: 56px;
    color: var(--v2-yellow);
    margin-bottom: 14px;
    line-height: 1;
}
body#dash .noorders p {
    color: var(--v2-ink-dim);
    font-size: 14px;
    line-height: var(--v2-lh-body);
    margin: 0 0 8px;
}
body#dash .noorders .primary-color { color: var(--v2-yellow); font-weight: 700; }
body#dash .noorders-cta {
    margin-top: 24px;
    display: flex;
    justify-content: center;
}

/* Order item card */
            /*  A125 · backdrop-filter ถูกลบ
                หลังเฟส 1 ทุกลิสต์มีกล่องแม่ทึบ (--v2-surface) แล้ว และพื้นหน้าเอง
                เป็นไล่สีเรียบชั้นเดียวบนสีตัน (17392) — เบลอไล่สีเรียบได้ผลเป็น
                ไล่สีเรียบเหมือนเดิม ไม่มีพิกเซลไหนเปลี่ยน แต่กิน compositor layer
                หนึ่งชั้นต่อหนึ่งแถว และ .order-item ใช้ร่วมกัน 5 หน้า
                ‼ ที่เก็บไว้คือตัวที่มีของจริงอยู่ข้างหลัง: .main-backdrop (ฉากมืด
                  ทับเนื้อหาที่เลื่อนได้) · .modal-content · .dropdown-menu
                  · .filter-sticky · #up-header · .blog-date (ทับรูปปก)
                  และฝั่ง guest ทั้งหมดที่ทับงานกราฟิกของ hero */
body#dash .order-item {
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-md);
    padding: var(--v2-sp-4) var(--v2-sp-4);
    margin-bottom: 10px;
    transition: border-color var(--v2-t-fast), background var(--v2-t-fast);
}
body#dash .order-item:hover {
    border-color: var(--v2-line-strong);
    background: var(--v2-glass-2);
}

body#dash .order-item-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--v2-sp-3);
    padding-bottom: var(--v2-sp-3);
    margin-bottom: 12px;
    border-bottom: 1px dashed var(--v2-line);
}
body#dash .oit-first { display: flex; align-items: center; gap: var(--v2-sp-3); flex: 1; min-width: 0; flex-wrap: wrap; }
body#dash .order-id {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-1);
    font-family: var(--v2-f-mono);
    font-size: 12px;
    font-weight: 700;
    color: var(--v2-ink);
    background: var(--v2-glass-2);
    padding: var(--v2-sp-1) var(--v2-sp-2);
    border-radius: var(--v2-r-sm);
    border: 1px solid var(--v2-line);
}
body#dash .order-id .primary-color { color: var(--v2-yellow); }
body#dash .order-title {
    color: var(--v2-ink);
    font-family: var(--v2-f-dis);
    font-weight: 600;
    font-size: 13px;
    min-width: 0;
}
body#dash .order-service-chip {
    display: inline-block;
    background: var(--v2-yellow);
    color: var(--v2-yellow-ink);
    padding: 2px var(--v2-sp-2);
    border-radius: var(--v2-r-xs);
    font-family: var(--v2-f-mono);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.04em;
    margin-right: 4px;
    vertical-align: 1px;
}

body#dash .oit-last { flex-shrink: 0; }
/* A48 · ชิปสถานะ — Panel A
   ‼ ห้ามใส่ font-family mono / text-transform uppercase / letter-spacing กลับ
     ป้ายเป็นภาษาไทย ทั้งสามอย่างไม่มีผลหรือทำร้ายการอ่าน
   git log --grep=A48 · .claude/verify/panelA2/A48-verify.json */
body#dash .os-widget {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-1);
    height: 26px;
    padding: 0 var(--v2-sp-3);
    border-radius: var(--v2-r-pill);
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}
body#dash .os-widget::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
/* หกสถานะของธีมแม็ปเข้าห้าโทนของดีไซน์ · การแม็ปนี้เป็นการตัดสินใจ ไม่ใช่การวัด
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
body#dash .os-widget.pending    { background: var(--v2-well);        color: var(--v2-ink-dim); }
body#dash .os-widget.inprogress,
body#dash .os-widget.processing { background: var(--v2-warn-soft);   color: var(--v2-warn-text); }
body#dash .os-widget.partial    { background: var(--v2-info-soft);   color: var(--v2-info-text); }
body#dash .os-widget.completed  { background: var(--v2-ok-soft);     color: var(--v2-ok-text); }
body#dash .os-widget.canceled   { background: var(--v2-danger-soft); color: var(--v2-danger-text); }

body#dash .order-item-bottom {
    display: flex;
    justify-content: space-between;
    gap: var(--v2-sp-4);
    flex-wrap: wrap;
}
body#dash .oib-first {
    display: flex;
    gap: var(--v2-sp-4);
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
    font-family: var(--v2-f-mono);
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--v2-ink-mute);
    align-items: center;
}
body#dash .oib-first .link.order-link-url {
    color: var(--v2-info);
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-1);
    max-width: 420px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    text-decoration: none !important;
}
body#dash .oib-first .link.order-link-url strong {
    color: var(--v2-info-text);
    font-family: var(--v2-f-mono);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
body#dash .oib-first .link.order-link-url:hover strong { text-decoration: underline; }
body#dash .oib-first .item {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-1);
}
body#dash .oib-first .item .primary-color {
    color: var(--v2-ink-mute);
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-1);
    font-weight: 500;
}
body#dash .oib-first .item .primary-color i { color: var(--v2-ink-soft); }
body#dash .oib-first .item strong {
    color: var(--v2-ink);
    font-family: var(--v2-f-dis);
    font-weight: 700;
    font-size: 12px;
}

body#dash .oib-last { display: flex; gap: var(--v2-sp-1); align-items: center; flex-wrap: wrap; }

/* ─── A79 · B2 · แถบความคืบหน้าในแถวออเดอร์ (ดีไซน์ Panel B · B2) ──────────
   ‼ `.order-item` ใช้ร่วมห้าหน้า (orders · refill · refunds · subscriptions · drip_feed)
     กฎที่นี่จึงผูกกับ `.order-progress` ซึ่งมีเฉพาะ orders.twig — อีกสี่หน้าไม่มี element นี้
     จึงไม่ได้อะไรเพิ่มและไม่เสียอะไร ไม่ต้องใส่ scope หน้าเพิ่ม
   ‼ ช่องนี้ว่างเมื่ออ่านตัวเลขไม่ได้ `:empty` จึงยุบทิ้ง ไม่เหลือช่องว่างค้างในแถว */
body#dash .order-progress {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 148px;
    flex: 0 1 152px;
}
body#dash .order-progress:empty { display: none; }
body#dash .op-head {
    display: flex;
    justify-content: space-between;
    gap: var(--v2-sp-2);
    font-family: var(--v2-f-dis);
    font-size: 11px;
    line-height: 1.2;
    color: var(--v2-ink-mute);
    font-variant-numeric: tabular-nums;
    letter-spacing: normal;
}
body#dash .op-pct { color: var(--v2-ink-dim); font-weight: 600; }
body#dash .op-bar {
    display: block;
    height: 6px;
    border-radius: var(--v2-r-pill);
    background: var(--v2-well);
    overflow: hidden;
}
body#dash .op-fill {
    display: block;
    height: 100%;
    border-radius: var(--v2-r-pill);
    background: var(--v2-yellow);
}
/* เสร็จครบแล้วเปลี่ยนเป็นสีเขียว — ตรงกับป้ายสถานะ "เสร็จ" ที่อยู่แถวเดียวกัน
   ‼ ผูกกับสถานะจริงในหน้า ไม่ได้ดูจากตัวเลขอย่างเดียว: บางออเดอร์ส่งครบแต่ยัง
     ไม่ถูกปิดงาน การทาเขียวก่อนระบบปิดงานคือการบอกสถานะแทนระบบ */
body#dash .order-item:has(.os-widget.completed) .op-fill { background: var(--v2-ok); }
body#dash .order-item:has(.os-widget.canceled) .op-fill { background: var(--v2-ink-soft); }

/* หัวตารางมีความหมายเฉพาะตอนที่แถวเป็นตารางจริง ต่ำกว่า 1100 ไม่ต้องขึ้น */
body#dash .orders-list .orders-head { display: none; }

/* ─── A80 · B2 · แถวออเดอร์เป็นตารางแถวเดียว (ดีไซน์ Panel B · B2) ─────────
   ‼ เจ้าของสั่ง 2026-08-06: ทำตาราง **แต่เก็บ "ยอดเริ่มงาน" ไว้** ดีไซน์ตัดทิ้ง
     ตารางนี้จึงมี 8 คอลัมน์ ไม่ใช่ 7 · "คงเหลือ" ยุบเข้าแถบความคืบหน้าได้
     เพราะแถบบอก ส่งแล้ว/ทั้งหมด อยู่แล้ว คงเหลือคือส่วนต่างที่เห็นได้จากแถบ
   ‼ ไม่แตะโครง twig ของแถว — ใช้ `display: contents` ละลาย wrapper สี่ชั้น
     (.order-item-top · .oit-first · .oit-last · .order-item-bottom · .oib-first · .oib-last)
     ให้ลูกจริงขึ้นมาเป็น grid item ของแถวโดยตรง
   ‼ ผูกกับ `.orders-list` เท่านั้น อีกสี่หน้าที่ใช้ `.order-item` ร่วมกันไม่มี wrapper นี้
   ‼ ต่ำกว่า 1100 กลับไปเป็นบล็อกสองแถวเหมือนเดิม — แปดคอลัมน์ในกรอบ 390 อ่านไม่ได้ */
@media (min-width: 1100px) {
    body#dash .orders-list .orders-head,
    body#dash .orders-list .order-item {
        display: grid;
        /*  A112 · คอลัมน์วันที่ 78 → 152
            ตัวตรวจชั้น B เจอเองว่า <strong> ในชิปวันที่กว้าง 121px แต่ช่องกว้าง 78
            ข้อความเป็น nowrap และชิปตั้ง overflow: visible วันที่จึงทะลุออกไป
            ทับคอลัมน์ "งาน" — วัดที่ 1392 ได้กล่องลูก 371–491 ในกล่องพ่อ 349–427
            ‼ ครั้งแรกตั้ง 124 จากความกว้างของข้อความอย่างเดียว ยังล้นอยู่ 18px
              เพราะในชิปมีไอคอนปฏิทินนำหน้าด้วย  รอบสองโคลนชิปของทั้ง 100 แถว
              แล้ววัด width: max-content จริง ได้ค่ามากสุด 151 → ตั้ง 152
              ซึ่งพอดีกับคอลัมน์ที่สี่ที่มีอยู่แล้ว
            ส่วนที่เพิ่มมา 74px ดึงจากคอลัมน์ที่สามซึ่งเป็น minmax(0, 1fr) อยู่แล้ว */
        grid-template-columns: 76px 152px minmax(0, 1fr) 152px 86px 92px 100px 60px;
        column-gap: 10px;
        row-gap: 2px;
        align-items: center;
    }
    /*  A123 · หัวตารางต้องมี padding เท่าแถวเป๊ะ ไม่งั้นหัวกับคอลัมน์ไม่ตรงกัน */
    body#dash .orders-list .orders-head {
        padding: var(--v2-d-compact);
        background: var(--v2-well);
        border-radius: var(--v2-r-sm);
        font-family: var(--v2-f-thai);
        font-size: 11px;
        font-weight: 500;
        /*  A127 · letter-spacing + uppercase ถูกลบ (ทั้งสามหัวตาราง)
            หัวคอลัมน์เป็นไทยทั้งหมด — วันที่สั่ง · งาน · ความคืบหน้า ·
            ยอดเริ่มงาน · ยอดที่ชำระ · สถานะงาน
            uppercase ไม่ทำอะไรกับไทย ส่วน tracking 0.06em (วัดได้ 0.66px)
            ดันสระกับวรรณยุกต์ให้ลอยออกจากพยัญชนะที่มันเกาะอยู่
            ‼ G5 ของ design-gates.js จับจุดนี้เองในการรันครั้งแรก */
        color: var(--v2-ink-mute);
        margin-bottom: 4px;
    }
    body#dash .orders-list .orders-head > span:nth-child(6) { text-align: right; }

    /* wrapper ทั้งหมดละลาย เหลือแต่ช่องจริง */
    body#dash .orders-list .order-item-top,
    body#dash .orders-list .order-item-bottom,
    body#dash .orders-list .oit-first,
    body#dash .orders-list .oit-last,
    body#dash .orders-list .oib-first {
        display: contents;
    }
    /* ‼ `.oib-last` **ไม่ละลาย** — ข้างในมีลูกสองตัวคือ `.order-actions` กับ `.btn-report`
       ละลายแล้ว `.btn-report` ไม่มีที่วาง มันเลยไปสร้างแถวที่สามสูง 40px ให้ทุกแถว
       (วัดได้ `grid-template-rows: 30.78px 26.69px 40px` บนหน้าจริง)
       เก็บไว้เป็นช่องเดียวแล้วจัดข้างในด้วย flex จบทั้งสองปุ่ม */
    body#dash .orders-list .oib-last {
        grid-column: 8;
        grid-row: 1 / 3;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: var(--v2-sp-1);
        flex-wrap: wrap;
    }
    /* เส้นประคั่นบน/ล่างของบล็อกเดิมไม่มีความหมายแล้วเมื่อเป็นแถวเดียว */
    body#dash .orders-list .order-item-top { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }

    body#dash .orders-list .order-id      { grid-column: 1; grid-row: 1 / 3; }
    body#dash .orders-list .item.date     { grid-column: 2; grid-row: 1 / 3; }
    body#dash .orders-list .order-title   { grid-column: 3; grid-row: 1; min-width: 0; }
    body#dash .orders-list .order-link-url{ grid-column: 3; grid-row: 2; min-width: 0; }
    body#dash .orders-list .order-progress{ grid-column: 4; grid-row: 1 / 3; }
    body#dash .orders-list [data-of="startcount"] { grid-column: 5; grid-row: 1 / 3; }
    body#dash .orders-list [data-of="charge"]     { grid-column: 6; grid-row: 1 / 3; justify-content: flex-end; }
    body#dash .orders-list .order-status  { grid-column: 7; grid-row: 1 / 3; }

    /* จำนวนสั่งกับคงเหลืออ่านได้จากแถบแล้ว (ส่งแล้ว / ทั้งหมด) */
    body#dash .orders-list [data-of="quantity"],
    body#dash .orders-list [data-of="remains"] { display: none; }

    /* ป้ายกำกับในช่องหายไปแล้ว เพราะหัวตารางบอกแทน เหลือแต่ตัวเลข */
    body#dash .orders-list [data-of="startcount"] .primary-color,
    body#dash .orders-list [data-of="charge"] .primary-color { display: none; }
    body#dash .orders-list [data-of="startcount"] strong,
    body#dash .orders-list [data-of="charge"] strong { font-variant-numeric: tabular-nums; }

    body#dash .orders-list .order-title span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    body#dash .orders-list .order-link-url { max-width: 100%; }
    body#dash .orders-list .order-link-url strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    /*  A123 · 10px 4px → --v2-d-compact (12/16)  ‼ 4px บนกล่องที่ประกาศมุม 16
        ผิดกฎ padding-inline ≥ radius — และเป็นค่าที่มาจากการมองจอ ไม่ใช่จากระบบ */
    body#dash .orders-list .order-item { padding: var(--v2-d-compact); }
}
body#dash .order-actions { display: flex; gap: var(--v2-sp-1); flex-wrap: wrap; }
body#dash .order-actions .btn {
    padding: var(--v2-sp-2) var(--v2-sp-3);
    border-radius: var(--v2-r-sm);
    font-size: 12px;
    font-family: var(--v2-f-dis);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-1);
    text-decoration: none !important;
    border: 1px solid var(--v2-line);
    background: var(--v2-glass-2);
    color: var(--v2-ink);
    cursor: pointer;
    transition: background var(--v2-t-fast), transform var(--v2-t-fast);
    line-height: 1.3;
}
body#dash .order-actions .btn:hover { background: var(--v2-glass-3); transform: translateY(-1px); }
body#dash .order-actions .btn.btn-success {
    color: var(--v2-ok-text);
    background: var(--v2-ok-soft);
    border-color: rgba(111, 228, 168, 0.25);
}
body#dash .order-actions .btn.btn-success:hover {
    background: rgba(111, 228, 168, 0.22);
    color: var(--v2-ok-text);
}
body#dash .order-actions .btn.btn-success.disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
body#dash .order-actions .btn.btn-danger {
    color: var(--v2-danger);
    background: var(--v2-danger-soft);
    border-color: rgba(255, 122, 106, 0.25);
}
body#dash .order-actions .btn.btn-danger:hover {
    background: rgba(255, 122, 106, 0.22);
    color: var(--v2-danger);
}

body#dash .btn-report.c-pointer .btn.btn-report-support {
    width: 40px;
    height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--v2-glass-2);
    border: 1px solid var(--v2-line-strong);
    color: var(--v2-ink);
    transition: background var(--v2-t-fast), color var(--v2-t-fast);
    font-size: 14px;
}
body#dash .btn-report.c-pointer .btn.btn-report-support:hover {
    background: var(--v2-yellow-soft);
    border-color: rgba(255, 214, 10, 0.35);
    color: var(--v2-yellow);
}

/* Pagination */
body#dash .pagination {
    display: inline-flex;
    gap: var(--v2-sp-1);
    padding: var(--v2-sp-1);
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-pill);
    list-style: none;
    margin: 0;
}
body#dash .pagination .page-item { list-style: none; }
body#dash .pagination .page-link {
    min-width: 34px;
    height: 34px;
    padding: 0 var(--v2-sp-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--v2-r-pill);
    background: transparent;
    border: 0;
    color: var(--v2-ink-dim);
    font-family: var(--v2-f-dis);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none !important;
    cursor: pointer;
    transition: background var(--v2-t-fast), color var(--v2-t-fast);
}
body#dash .pagination .page-link:hover { background: var(--v2-glass-2); color: var(--v2-ink); }
/* A55 · หน้าที่กำลังอยู่ = "อยู่ตรงไหน" ไม่ใช่ "กดอะไร" → หมึก ไม่ใช่เหลือง
   กติกาเดียวกับแท็บ · โควตาเหลืองอยู่ใน RESUME */
body#dash .pagination .page-item.active .page-link {
    background: var(--v2-ink);
    color: var(--v2-bg);
    font-weight: 700;
}
/* A55 · ธีมเดิมวางแถบ 14x3px สี #253cff ไว้ใต้เลขหน้าที่กำลังอยู่ (:before ที่ L3209)
   น้ำเงินตัวนั้นไม่มีอยู่ในจานสีของธีมนี้เลย และตอนนี้มันไปนั่งทับแคปซูลหมึก
   ‼ ซ่อนเฉพาะฝั่ง authed — guest ยังใช้ของเดิม ห้ามลบกฎต้นทาง */
body#dash .pagination .page-item.active .page-link::before { content: none; }

/* Order ticket modal textarea */
body#dash .reportOrder textarea.form-control { min-height: 125px; }
body#dash .reportOrder .form-select { width: 100%; }

/* ============================================================
 *  addfunds.twig — top-up flow
 * ============================================================ */

/* Payment method grid (dynamically built via setPayment()) */
body#dash .payment-list#method-drop {
    margin-bottom: 22px;
}
body#dash .payment-top {
    aspect-ratio: 1.4 / 1;
    width: 100%;
    border-radius: var(--v2-r-sm);
    overflow: hidden;
    background: var(--v2-glass-2);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
body#dash .payment-top.active,
body#dash .payment-box.active .payment-top {
    outline: 2px solid var(--v2-yellow);
    outline-offset: -2px;
    box-shadow: 0 8px 20px -6px var(--v2-yellow-glow);
}
body#dash .payment-icon { width: 100%; height: 100%; display: flex; }
body#dash .payment-icon img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--v2-r-sm); }
body#dash .payment-bottom {
    text-align: center;
    font-family: var(--v2-f-dis);
    font-size: 13px;
    font-weight: 600;
    color: var(--v2-ink);
}

/* Quick amount chips */

/* Addfunds amount input (number) */
/* .addfunds-amount is the field — it carries the ฿ prefix, so the input inside
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
body#dash #amount.form-control {
    font-family: var(--v2-f-mono);
    font-weight: 700;
    background: none !important;
    border: 0 !important;
    border-radius: 0!important;
    padding: 0 !important;
    box-shadow: none !important;
    height: auto;
}
body#dash .addfunds-amount { align-items: center; }

/* Deposit history items */
body#dash .payment-history { display: flex; flex-direction: column; gap: var(--v2-sp-2); }
body#dash .history-item {
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-md);
    padding: var(--v2-sp-3) var(--v2-sp-4);
    transition: border-color var(--v2-t-fast);
}
body#dash .history-item:hover { border-color: var(--v2-line-strong); }
body#dash .history-item-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--v2-sp-3);
    padding-bottom: var(--v2-sp-2);
    margin-bottom: 10px;
    border-bottom: 1px dashed var(--v2-line);
    flex-wrap: wrap;
}
body#dash .hit-first {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-3);
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
}
body#dash .history-id {
    font-family: var(--v2-f-mono);
    font-size: 12px;
    font-weight: 700;
    color: var(--v2-ink);
    background: var(--v2-glass-2);
    padding: var(--v2-sp-1) var(--v2-sp-2);
    border-radius: var(--v2-r-sm);
    border: 1px solid var(--v2-line);
}
body#dash .history-title {
    color: var(--v2-ink);
    font-family: var(--v2-f-dis);
    font-weight: 600;
    font-size: 13px;
}
body#dash .hit-last { flex-shrink: 0; }
body#dash .history-item-bottom {
    display: flex;
    justify-content: space-between;
    gap: var(--v2-sp-3);
    flex-wrap: wrap;
    font-family: var(--v2-f-mono);
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--v2-ink-mute);
}
body#dash .hib-first { display: flex; gap: var(--v2-sp-3); flex-wrap: wrap; }
body#dash .hib-first .date { display: inline-flex; align-items: center; gap: var(--v2-sp-1); }
body#dash .hib-first .date i { color: var(--v2-ink-soft); }
body#dash .hib-first .date strong {
    color: var(--v2-ink);
    font-family: var(--v2-f-dis);
    font-weight: 700;
}

/* Payment page bottom wrapper (form container) */
body#dash .payment-page-bottom { padding-top: var(--v2-sp-1); }

/* ============================================================
 *  addfunds.twig v2 restructure — 2-col with summary sidebar
 * ============================================================ */
body#dash .addfunds-wrap {
    display: grid;
    /*  A123 · เหมือน .neworder-wrap — ช่องกรอกจำนวนเงินเคยกว้าง ~956px
        สำหรับตัวเลข 3–5 หลัก */
    grid-template-columns: minmax(0, var(--v2-rail-form)) 340px;
    justify-content: start;
    gap: var(--v2-sp-4);
    align-items: flex-start;
}
@media (max-width: 1100px) {
    body#dash .addfunds-wrap { grid-template-columns: 1fr; }
}
body#dash .addfunds-main { min-width: 0; }

body#dash .addfunds-summary {
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    gap: var(--v2-sp-3);
}
@media (max-width: 1100px) { body#dash .addfunds-summary { position: static; } }

/* Wallet chip in page header */
body#dash .page-header-v2 .v2-wallet-chip {
    display: flex;
    flex-direction: column;
    gap: var(--v2-sp-1);
    padding: var(--v2-sp-3) var(--v2-sp-5);
    background: var(--v2-yellow-soft);
    border: 1px solid rgba(255, 214, 10, 0.25);
    border-radius: var(--v2-r-md);
    min-width: 180px;
    align-items: flex-end;
}
body#dash .v2-wallet-chip .l {
    font-family: var(--v2-f-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--v2-ink-mute);
    text-transform: uppercase;
}
body#dash .v2-wallet-chip b {
    font-family: var(--v2-f-dis);
    font-size: 20px;
    font-weight: 800;
    color: var(--v2-yellow-text);
}

/* Amount mega input */
body#dash .addfunds-amount {
    display: flex;
    align-items: baseline;
    gap: var(--v2-sp-3);
    padding: var(--v2-sp-5) var(--v2-sp-5);
    border-radius: var(--v2-r-md);
    background: var(--v2-glass-2);
    border: 1px solid var(--v2-line);
    margin-bottom: 14px;
}
/* Yellow on the white field measured 1.55:1 — the ฿ was barely there. Section 31
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
body#dash .addfunds-amount .cur {
    font-family: var(--v2-f-mono);
    font-size: 26px;
    color: var(--adv-mute);
    font-weight: 700;
}
/* background, border, padding and box-shadow used to live here and never took —
   #amount.form-control outranks this selector. They are now declared there, with
   !important, so they are removed rather than left looking effective. */
/*  A114 · 44 → 32
    วัดที่ 1900: ช่องกรอกสูง 57 ตัวเลข 44px ขณะที่ h1 ของหน้า ("เติม เงิน") อยู่ที่
    26px — ตัวเลขในช่องกรอกจึงใหญ่กว่าหัวเรื่องของหน้าเกือบเท่าตัว และกล่องนั้น
    กลายเป็นของที่ใหญ่ที่สุดในหน้าทั้งที่ยังว่างอยู่
    32 ยังใหญ่กว่า h1 พออ่านชัดว่านี่คือช่องหลัก แต่ไม่แย่งลำดับกับหัวเรื่อง */
body#dash .addfunds-amount input.form-control {
    flex: 1;
    font-family: var(--v2-f-mono);
    font-size: 32px;
    font-weight: 700;
    color: var(--v2-ink);
    outline: 0;
    line-height: var(--v2-lh-tight);
}
body#dash .addfunds-amount input.form-control:focus {
    background: transparent;
    box-shadow: none;
}
body#dash .addfunds-amount input.form-control::placeholder { color: var(--v2-ink-soft); }

/* Amount quick chips — tightened */
body#dash .addBalance {
    display: flex;
    flex-wrap: wrap;
    gap: var(--v2-sp-2);
    margin: 0 !important;
}
/*  A114 · ชิป preset คือปุ่มที่คนกดจริงบนหน้านี้ แต่เป็นของที่เล็กที่สุด
    วัดได้ 57×30 fs 12 อยู่ใต้ช่องกรอก 843×57 fs 44 — คนที่เติม 500 บาท
    ไม่ได้อยากพิมพ์ อยากกดปุ่ม  ขยายเป็นสูง 38 fs 13 ให้อ่านและกดง่ายขึ้น
    ยังเล็กกว่าช่องกรอกชัดเจน ไม่ได้สลับลำดับกัน */
body#dash .addBalance .addBalanceBtn {
    /* inline-flex เพราะ min-height บน inline-block ไม่จัดกลางแนวตั้งให้ */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 var(--v2-sp-4);
    border-radius: var(--v2-r-pill);
    border: 1px solid var(--v2-line);
    background: var(--v2-glass);
    color: var(--v2-ink-dim);
    font-family: var(--v2-f-mono);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background var(--v2-t-fast), border-color var(--v2-t-fast), color var(--v2-t-fast);
    line-height: 1;
}
body#dash .addBalance .addBalanceBtn:hover {
    background: var(--v2-yellow-soft);
    border-color: rgba(255, 214, 10, 0.35);
    color: var(--v2-yellow);
}

/* Payment method grid — smaller compact cards with icons */
/* Two columns, not four. The panel currently serves two methods, so four
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
body#dash .payment-list#method-drop {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--v2-sp-2);
    margin: 0;
}
/* A64 · กล่องช่องทางชำระเงิน — ที่นี่เคยเป็น "การ์ดแนวตั้ง" (รูปด้านบน ข้อความด้านล่าง
   จัดกึ่งกลาง) ทั้งชุดตายมานานแล้ว บล็อกที่ 21.x วาดใหม่เป็น "แถวแนวนอน" ไอคอน 42px
   ข้อความชิดซ้าย ซึ่งตรงกับที่ดีไซน์ Panel F (F3) ขอพอดี
   ‼ เหลือแต่ cursor กับ overflow ที่ยังมีผลจริง — ห้ามเติม display / flex-direction /
     background / border กลับมาที่นี่ มันจะตายทันทีเหมือนเดิม
     เช็คก่อนแก้: who-wins.py payment-box --scope 'body#dash' */
body#dash .payment-box {
    cursor: pointer;
    overflow: hidden;
}
body#dash .payment-box:hover {
    border-color: var(--v2-line-strong);
    background: var(--v2-glass-2);
    transform: translateY(-2px);
}
/* A64 · สถานะ "เลือกอยู่" วาดที่บล็อก 5 ด้วย !important ทั้งพื้น ขอบ และเงา
   สามบรรทัดที่เคยอยู่ตรงนี้จึงตายมาตลอด */
/* A64 · กรอบรูปด้านบนของการ์ดแนวตั้ง — ไม่มีการ์ดแนวตั้งแล้ว
   เหลือแต่ที่ยังมีผล: จัดกึ่งกลางไอคอน และล้าง outline/เงาที่ธีมเดิมใส่มา */
body#dash .payment-box .payment-top {
    display: flex;
    align-items: center;
    justify-content: center;
    outline: 0 !important;
    box-shadow: none !important;
}
body#dash .payment-box.active .payment-top {
    background: linear-gradient(135deg, var(--v2-yellow-soft), rgba(255, 214, 10, 0.05));
}
/* A64 · ขนาดและ display ของไอคอนถูกตั้งใหม่ที่ 20.x (42px, grid) — เหลือแต่การจัดกลาง */
body#dash .payment-box .payment-icon {
    align-items: center;
    justify-content: center;
}
body#dash .payment-box .payment-icon img {
    display: none !important;
}
body#dash .payment-box .payment-icon i {
    font-size: 34px;
    color: var(--v2-ink-mute);
    transition: color var(--v2-t-base);
}
body#dash .payment-box.active .payment-icon i {
    color: var(--v2-yellow);
}
/* A64 · ข้อความใต้ไอคอน — ตัวอักษร ระยะ และการจัดวางถูกวาดใหม่ที่ 21.x/31.x ทั้งหมด
   เหลือแต่เส้นคั่นบนกับความสูงขั้นต่ำ ซึ่งยังไม่มีใครเขียนทับ */
body#dash .payment-box .payment-bottom {
    border-top: 1px solid var(--v2-line);
    min-height: 44px;
    display: flex;
    align-items: center;
}
body#dash .payment-box.active .payment-bottom {
    color: var(--v2-yellow);
    border-top-color: rgba(255, 214, 10, 0.2);
}
/* Payment method variant icon colors */
body#dash .payment-box.pm-qr .payment-icon i { color: #4da9ff; }
body#dash .payment-box.pm-true .payment-icon i { color: #ff7a6a; }
body#dash .payment-box.pm-crypto .payment-icon i { color: #f7931a; }
body#dash .payment-box.pm-bank .payment-icon i { color: #6fe4a8; }
body#dash .payment-box.active.pm-qr .payment-icon i,
body#dash .payment-box.active.pm-true .payment-icon i,
body#dash .payment-box.active.pm-crypto .payment-icon i,
body#dash .payment-box.active.pm-bank .payment-icon i {
    color: var(--v2-yellow);
}

/* Submit button full-width */
body#dash .addfunds-submit {
    width: 100%;
    justify-content: center;
    height: 54px;
    font-size: 14px;
    border-radius: var(--v2-r-md);
}

/* Summary card */
            /*  A125 · backdrop-filter ถูกลบ
                หลังเฟส 1 ทุกลิสต์มีกล่องแม่ทึบ (--v2-surface) แล้ว และพื้นหน้าเอง
                เป็นไล่สีเรียบชั้นเดียวบนสีตัน (17392) — เบลอไล่สีเรียบได้ผลเป็น
                ไล่สีเรียบเหมือนเดิม ไม่มีพิกเซลไหนเปลี่ยน แต่กิน compositor layer
                หนึ่งชั้นต่อหนึ่งแถว และ .order-item ใช้ร่วมกัน 5 หน้า
                ‼ ที่เก็บไว้คือตัวที่มีของจริงอยู่ข้างหลัง: .main-backdrop (ฉากมืด
                  ทับเนื้อหาที่เลื่อนได้) · .modal-content · .dropdown-menu
                  · .filter-sticky · #up-header · .blog-date (ทับรูปปก)
                  และฝั่ง guest ทั้งหมดที่ทับงานกราฟิกของ hero */
body#dash .af-sum-card {
    /*  A127 · เฟส 1.3 · ยุบเป็นสูตรระนาบเดียว (เจ้าของเลือก 2026-08-11:
        ทึบ · ไร้ขอบ · เงาเดียว)  ก่อนแก้การ์ดเนื้อหาสามใบบน /addfunds
        ใช้สามสูตร: .card ทึบ+เงา · .af-sum-card กระจก .08+ขอบ ·
        .af-info-card กระจก .05+ขอบ — ซ้ายทึบ ขวากระจก ห่างกัน 16px
        ‼ แก้ที่กฎเดิม ไม่ต่อท้ายทับ — การทับทำให้ declaration เดิมตาย
          และ test-ledger จับได้ทันที ซึ่งถูกของมัน */
    background: var(--v2-surface);
    border: 0;
    border-radius: var(--v2-r-lg);
    box-shadow: var(--v2-elev);
    padding: var(--v2-sp-5);
}
body#dash .af-sum-head {
    font-family: var(--v2-f-dis);
    font-weight: 700;
    font-size: 16px;
    color: var(--v2-ink);
    margin-bottom: 16px;
    padding-bottom: var(--v2-sp-3);
    border-bottom: 1px solid var(--v2-line);
}
body#dash .af-sum-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--v2-sp-2) 0;
    font-size: 13px;
}
/*  A125 · ป้ายนี้เป็นไทย ("ยอดคงเหลือปัจจุบัน" · "+ ยอดที่จะเติม")
    mono + tracking + uppercase ไม่ทำงานกับไทยเลยสักอย่าง และแย่กว่านั้น
    เครื่องหมาย "+" เรนเดอร์ด้วย JetBrains Mono ส่วนตัวไทยตกไป Plex Thai
    = สองฟอนต์ในป้ายเดียว  สูตรเดียวกับที่ A65 แก้ .ns span ไปแล้ว */
body#dash .af-sum-row .k {
    color: var(--v2-ink-mute);
    font-family: var(--v2-f-thai);
    font-size: 12px;
}
body#dash .af-sum-row .v {
    font-family: var(--v2-f-dis);
    font-weight: 600;
    color: var(--v2-ink);
    font-size: 14px;
}
body#dash .af-sum-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 10px;
    padding: var(--v2-sp-4);
    border-radius: var(--v2-r-md);
    background: var(--v2-yellow-soft);
    border: 1px solid rgba(255, 214, 10, 0.25);
}
/*  A125 · กฎ `body#dash .af-sum-total .k` ถูกลบ — ตายมาตลอด
    addfunds.twig:183 เขียน id="af-sum-total" ไม่ใช่ class
    selector คลาสจึงไม่มีทางแมตช์ และมันยังเป็น mono+caps บนไทยด้วย */
body#dash .af-sum-total .v {
    font-family: var(--v2-f-dis);
    font-size: 26px;
    font-weight: 800;
    color: var(--v2-yellow);
    line-height: 1;
}

/* Info cards in summary sidebar */
body#dash .af-info-card {
    /*  A127 · เฟส 1.3 · ยุบเป็นสูตรระนาบเดียว (เจ้าของเลือก 2026-08-11:
        ทึบ · ไร้ขอบ · เงาเดียว)  ก่อนแก้การ์ดเนื้อหาสามใบบน /addfunds
        ใช้สามสูตร: .card ทึบ+เงา · .af-sum-card กระจก .08+ขอบ ·
        .af-info-card กระจก .05+ขอบ — ซ้ายทึบ ขวากระจก ห่างกัน 16px
        ‼ แก้ที่กฎเดิม ไม่ต่อท้ายทับ — การทับทำให้ declaration เดิมตาย
          และ test-ledger จับได้ทันที ซึ่งถูกของมัน */
    background: var(--v2-surface);
    border: 0;
    border-radius: var(--v2-r-lg);
    box-shadow: var(--v2-elev);
    padding: var(--v2-sp-4) var(--v2-sp-5);
    font-size: 12px;
    color: var(--v2-ink-dim);
    line-height: var(--v2-lh-body);
}
body#dash .af-info-head {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-2);
    font-family: var(--v2-f-dis);
    font-weight: 700;
    font-size: 14px;
    color: var(--v2-ink);
    margin-bottom: 10px;
}
body#dash .af-info-head i {
    color: var(--v2-yellow);
    font-size: 16px;
}
body#dash .af-info-card ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
body#dash .af-info-card ul li {
    padding: var(--v2-sp-1) 0 var(--v2-sp-1) var(--v2-sp-4);
    position: relative;
}
body#dash .af-info-card ul li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--v2-ok);
    font-weight: 700;
}
body#dash .af-info-card p { margin: 0 0 10px; }
body#dash .af-info-card-yellow {
    background: var(--v2-yellow-soft);
    border-color: rgba(255, 214, 10, 0.22);
    color: var(--v2-ink);
}
body#dash .af-info-card-yellow .af-info-head { color: var(--v2-yellow); }

/* ============================================================
 *  affliliates.twig — affiliate dashboard
 * ============================================================ */

/* Dashboard stat card icon (dh-icon used in affiliates cards) */
body#dash .dh-icon,
body#outside .dh-icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--v2-r-sm);
    background: var(--v2-yellow-soft);
    color: var(--v2-yellow);
    font-size: 16px;
    flex-shrink: 0;
}

/* Info card body (aff dashboard) */
body#dash .card-body > .d-flex:first-child {
    color: var(--v2-ink-mute);
    font-family: var(--v2-f-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
/* .aff-bold is excluded because this rule outranks it — six compound selectors
   against two — and was painting the affiliate figures the same muted grey as
   their own labels, so a row read as disabled rather than as a value. */
body#dash .card-body > .d-flex > span:not(.far):not(.fal):not(.fas):not(.fab):not(.aff-bold) {
    color: var(--v2-ink-mute);
}
body#dash .card-body h5 {
    font-family: var(--v2-f-dis);
    font-size: 20px;
    font-weight: 700;
    color: var(--v2-ink);
    margin: 0;
    word-break: break-all;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
body#dash .btn-copy-inline {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--v2-r-sm);
    background: var(--v2-glass-2);
    border: 1px solid var(--v2-line);
    color: var(--v2-yellow);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background var(--v2-t-fast), color var(--v2-t-fast);
}
body#dash .btn-copy-inline:hover {
    background: var(--v2-yellow-soft);
    color: var(--v2-yellow);
}

/* Affiliate stat rows */
/* A83 · ลบกฎ `body#dash .aff-item` กับ `.aff-item > span:first-child` ทั้งสองก้อนทิ้ง
   บล็อก C2 ท้ายไฟล์เขียนทับทุกบรรทัดแล้ว (specificity เท่ากัน ลำดับตัดสิน)
   ‼ ป้ายเดิมเป็น mono + uppercase + tracking .08em บนข้อความไทย ซึ่งเป็นข้อห้ามเดิม
     ของ A19/A54 ที่ตกสำรวจมาถึงหน้านี้ — ไม่ต้องกู้กลับ */
body#dash .aff-item:last-of-type { border-bottom: 0; }
/* ‼ กฎนี้ (1,2,1) ชนะ `body#dash .aff-bold` (1,1,1) ของบล็อก C2 ท้ายไฟล์เสมอ
   ไม่ว่าจะอยู่ก่อนหรือหลัง — ค่าของ C2 จึงต้องมาอยู่ **ที่นี่** ไม่ใช่เขียนซ้ำที่นั่น
   ‼ ห้ามเปลี่ยนเป็น --v2-yellow: บนแผงขาววัดได้ 1.55:1 (กับดักเดียวกับที่ ฿ เคยตก)
     ตัวเลขต่างจากป้ายด้วยน้ำหนักและขนาด ไม่ใช่ด้วยสี */
body#dash .aff-item .aff-bold {
    font-family: var(--v2-f-dis);
    font-weight: 700;
    font-size: 28px;
    line-height: 1.1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    color: var(--v2-ink);
}
@media (max-width: 560px) {
    body#dash .aff-item .aff-bold { font-size: 24px; }
}

/* Dashboard section header */
body#dash .dash-header,
body#outside .dash-header {
    font-family: var(--v2-f-dis);
    font-size: 16px;
    font-weight: 700;
    color: var(--v2-ink);
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: var(--v2-sp-2);
}

/* Data card (d-card — used in affiliates, refunds, updates, etc.) */
            /*  A125 · backdrop-filter ถูกลบ
                หลังเฟส 1 ทุกลิสต์มีกล่องแม่ทึบ (--v2-surface) แล้ว และพื้นหน้าเอง
                เป็นไล่สีเรียบชั้นเดียวบนสีตัน (17392) — เบลอไล่สีเรียบได้ผลเป็น
                ไล่สีเรียบเหมือนเดิม ไม่มีพิกเซลไหนเปลี่ยน แต่กิน compositor layer
                หนึ่งชั้นต่อหนึ่งแถว และ .order-item ใช้ร่วมกัน 5 หน้า
                ‼ ที่เก็บไว้คือตัวที่มีของจริงอยู่ข้างหลัง: .main-backdrop (ฉากมืด
                  ทับเนื้อหาที่เลื่อนได้) · .modal-content · .dropdown-menu
                  · .filter-sticky · #up-header · .blog-date (ทับรูปปก)
                  และฝั่ง guest ทั้งหมดที่ทับงานกราฟิกของ hero */
body#dash .d-card {
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-lg);
    overflow: hidden;
}
body#dash .d-card-body { padding: var(--v2-sp-1) var(--v2-sp-1); }

/* Table (Bootstrap .table) */
body#dash .table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    color: var(--v2-ink-dim);
    margin: 0;
}
/* A51 · ตาราง — Panel A
   ‼ ห้ามใส่ font-family mono / text-transform uppercase / letter-spacing กลับให้ thead th
     หัวตารางมาจาก lang() ซึ่งเป็นภาษาไทย · วัดแล้วเดิมโดน letter-spacing 1.54px จริง
     ซึ่งเป็นสิ่งที่ A19 ห้ามไว้เอง แต่ตกสำรวจ
   git log --grep=A51 · .claude/verify/panelA2/A51-verify.json */
body#dash .table thead th {
    background: var(--v2-well);
    padding: var(--v2-sp-2) var(--v2-sp-5);
    border: 0;
    font-size: 11px;
    font-weight: 500;
    color: var(--v2-ink-mute);
    text-align: left;
    white-space: nowrap;
}
body#dash .table tbody td {
    padding: var(--v2-sp-3) var(--v2-sp-5);
    border: 0;
    border-top: 1px solid var(--v2-line);
    font-size: 12.5px;
    color: var(--v2-ink-dim);
    vertical-align: middle;
}
body#dash .table tbody tr:hover td {
    background: var(--v2-surface-2);
    color: var(--v2-ink);
}
body#dash .table tbody td b,
body#dash .table tbody td strong { color: var(--v2-ink); font-weight: 600; }

/* ─── A82 · B3 · ครึ่ง "ตาราง" ของแพทเทิร์นในดีไซน์ Panel B · B3 ───────────
   ‼ ครึ่ง "ฟอร์มสร้าง" ของ B3 **ใช้กับแพนเนลนี้ไม่ได้** ตรวจทั้งสี่หน้าแล้ว:
     drip_feed / refill / subscriptions เป็นหน้า **ประวัติ** ล้วน ไม่มีฟอร์มสร้าง
     (drip-feed สร้างในฟอร์มสั่งงาน · refill ขอจากแถวออเดอร์ในหน้า /orders)
     refunds เป็น `<table>` อยู่แล้ว ไม่ใช่ลิสต์การ์ด
   ที่ยังขาดจริงคือประโยคที่ดีไซน์เน้นเอง: "คอลัมน์ตัวเลขใช้ตัวเลขความกว้างเท่ากัน
   ทุกช่องเพื่อให้กวาดตาลงมาตรง ๆ ได้" — วัดแล้ว `font-variant-numeric: normal`
   ‼ ใส่ที่ตัวเซลล์ทั้งหมด ไม่เลือกเฉพาะคอลัมน์ตัวเลข เพราะ `.table` ถูกใช้สามหน้า
     ที่คอลัมน์ไม่ตรงกัน และ tabular-nums ไม่มีผลกับตัวอักษรที่ไม่ใช่ตัวเลข */
body#dash .table tbody td,
body#dash .table thead th { font-variant-numeric: tabular-nums; }

/* กรอบตารางเป็นแผ่นเดียวมุมมน ไม่ใช่หัวแถบลอยเหนือแถว
   ‼ `overflow: hidden` ต้องอยู่ที่ตัวห่อ ไม่ใช่ที่ `<table>` — border-collapse: separate
     ทำให้ radius ที่ตัวตารางไม่ตัดพื้นหัวตาราง */
body#dash .table-responsive {
    border-radius: var(--v2-r-md);
    overflow: hidden;
    border: 1px solid var(--v2-line);
}

/* A53 · checkbox ในตารางต้องมองเห็นได้ — บั๊กใช้งาน ไม่ใช่เรื่องสไตล์
   style.css:889 ซ่อน input[type=checkbox] ทุกตัวทั้งไฟล์ แล้วให้ `+ label` วาดตัวควบคุมแทน
   /neworder ทำถูก (มี <span class="checkmark"> ใน label เดียวกัน) แต่ /notifications
   วาง input เปล่าไว้ใน <span> ไม่มีอะไรตามหลัง ช่องอีเมล/Telegram จึงว่างเปล่าทั้งคอลัมน์
   และผู้ใช้ตั้งค่าการแจ้งเตือนไม่ได้เลย — วัดแล้ว 4 ตัว display:none ไม่มี label
   ‼ ห้ามลบกฎที่ L889 เพื่อแก้ — จะไปเปิด checkbox ที่ตั้งใจซ่อนบน /neworder และหน้า guest
   ใช้ accent-color แทนการ appearance:none ทั้งชุด เพราะมีแค่ 4 ตัวและ native ทำงานถูกอยู่แล้ว
   git log --grep=A53 */
body#dash .table input[type="checkbox"] {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--v2-yellow);
    cursor: pointer;
    vertical-align: middle;
}

/* ============================================================
 *  tickets.twig + viewticket.twig
 * ============================================================ */

/* Support info banner (top of tickets page) */
body#dash .card-support { background: var(--v2-yellow-soft); border-color: rgba(255, 214, 10, 0.25); }
body#dash .card-support .card-body {
    color: var(--v2-ink);
    line-height: 1.9;
    font-size: 13px;
}

/* Unread tickets notice card */
body#dash .card-tickets {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-3);
    padding: var(--v2-sp-4) var(--v2-sp-4);
    background: var(--v2-yellow-soft);
    border-color: rgba(255, 214, 10, 0.25);
    margin-bottom: 12px;
}
body#dash .card-tickets > i {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--v2-r-sm);
    background: var(--v2-yellow);
    color: var(--v2-yellow-ink);
    font-size: 20px;
    flex-shrink: 0;
}
body#dash .card-tickets .card-text {
    font-size: 13px;
    color: var(--v2-ink);
    line-height: 1.5;
    font-family: var(--v2-f-dis);
}
body#dash .card-tickets .card-text .primary-color {
    color: var(--v2-yellow);
    font-weight: 700;
    /*  A127 · ป้ายนี้เนื้อหาเป็นไทย — mono ไม่มี glyph ไทย ตัวไทยจึงตกไป
        ฟอนต์อื่นกลางป้าย · tracking ดันสระ/วรรณยุกต์หลุดจากพยัญชนะ
        ‼ แก้ที่กฎเดิม ไม่ต่อท้ายไฟล์ทับ — การทับทำให้ declaration เดิมตาย
          และ test-ledger จับได้ทันที (295 → 311) ซึ่งถูกของมัน */
    font-family: var(--v2-f-thai);
}

/* Ticket item list */
body#dash .ticket-list {
    display: flex;
    flex-direction: column;
    gap: var(--v2-sp-2);
    margin-top: 14px;
}
body#dash .ticket-item {
    display: block;
    padding: var(--v2-sp-3) var(--v2-sp-4);
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-md);
    text-decoration: none !important;
    color: var(--v2-ink);
    transition: background var(--v2-t-fast), border-color var(--v2-t-fast), transform var(--v2-t-fast);
}
body#dash .ticket-item:hover {
    background: var(--v2-glass-2);
    border-color: var(--v2-line-strong);
    transform: translateY(-1px);
}
body#dash .ticket-item.ticket-item-new {
    border-color: rgba(255, 214, 10, 0.30);
    background: var(--v2-yellow-soft);
}
body#dash .ticket-item-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--v2-sp-3);
    margin-bottom: 10px;
    padding-bottom: var(--v2-sp-2);
    border-bottom: 1px dashed var(--v2-line);
}
body#dash .tit-first {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-3);
    flex: 1;
    min-width: 0;
}
body#dash .ticket-id {
    font-family: var(--v2-f-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--v2-ink);
    background: var(--v2-glass-2);
    padding: var(--v2-sp-1) var(--v2-sp-2);
    border-radius: var(--v2-r-xs);
    flex-shrink: 0;
}
body#dash .ticket-title {
    color: var(--v2-ink);
    font-family: var(--v2-f-dis);
    font-weight: 600;
    font-size: 13px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body#dash .ticket-item-bottom {
    display: flex;
    justify-content: space-between;
    gap: var(--v2-sp-3);
    font-family: var(--v2-f-mono);
    font-size: 11px;
    color: var(--v2-ink-mute);
    align-items: center;
}
body#dash .tib-first .date {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-1);
}
body#dash .tib-first .date i { color: var(--v2-ink-soft); }
body#dash .tib-first .date strong {
    color: var(--v2-ink);
    font-family: var(--v2-f-dis);
    font-weight: 600;
}
body#dash .ticket-new-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-1);
    padding: var(--v2-sp-1) var(--v2-sp-2);
    border-radius: var(--v2-r-pill);
    background: var(--v2-yellow);
    color: var(--v2-yellow-ink);
    font-family: var(--v2-f-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
}

/* Tickets file uploader placeholder */
body#dash .tickets-uploader {
    min-height: 42px;
    border-radius: var(--v2-r-sm);
    border: 1px dashed var(--v2-line-strong);
    padding: var(--v2-sp-2) var(--v2-sp-3);
    background: var(--v2-glass);
    color: var(--v2-ink-mute);
    font-size: 12px;
}

/* "Hidden until JS" alert areas — preserve initial inline display:none */
body#dash #alertArea.is-hidden,
body#dash #successArea.is-hidden { display: none; }

/* text-danger utility */
body#dash .text-danger { color: var(--v2-danger) !important; }
body#dash .text-success { color: var(--v2-ok) !important; }

/* ---------- viewticket.twig ---------- */
body#dash .card-viewticket .card-body { padding: var(--v2-sp-5) var(--v2-sp-6) var(--v2-sp-4); }
body#dash .ticket-header {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-4);
    padding-bottom: var(--v2-sp-4);
    margin-bottom: 18px;
    border-bottom: 1px solid var(--v2-line);
    flex-wrap: wrap;
}
body#dash .ticket-header .item.item-title {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
body#dash .ticket-header .title {
    font-family: var(--v2-f-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--v2-ink-mute);
    text-transform: uppercase;
}
body#dash .ticket-header .value {
    font-family: var(--v2-f-dis);
    font-size: 16px;
    font-weight: 700;
    color: var(--v2-ink);
}
body#dash .ticket-header .ticket-id-title {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-2);
    font-family: var(--v2-f-mono);
    font-size: 12px;
    color: var(--v2-ink-mute);
}
body#dash .ticket-header .ticket-id-title .ticket-id {
    display: inline-block;
    padding: var(--v2-sp-1) var(--v2-sp-2);
    background: var(--v2-yellow-soft);
    border-radius: var(--v2-r-xs);
    color: var(--v2-yellow);
    font-weight: 700;
}

body#dash .btn.btn-rounded { border-radius: var(--v2-r-pill); padding: var(--v2-sp-2) var(--v2-sp-4); }
/* A76 · ลบ `body#dash .btn.btn-sm` ทิ้งทั้งกฎ — padding ซ้ำกับ `.btn-sm` เป๊ะ
   ส่วน font-size: 12px แพ้ `!important` ของ `.btn-sm` มาตลอด ไม่เคยขึ้นจอ */

/* Ticket message thread */
body#dash .ticket-body {
    display: flex;
    flex-direction: column;
    gap: var(--v2-sp-4);
    padding: var(--v2-sp-1) 0;
}
/* A90 · D2 · เหลือแค่ `max-width` — ‼ display/flex-direction/gap ที่เคยอยู่ตรงนี้ตายหมด
   `body#dash .ticket-message` ถูกประกาศอีกครั้งในบล็อก A86 ท้ายไฟล์ specificity เท่ากัน
   ตัวหลังจึงชนะทุก property ที่ทับกัน (ท่า "ฝาแฝด" ที่ RESUME เตือนไว้ และ A87 ก็เจอ)
   ครั้งแรกของ A90 เขียน `margin-bottom: 0` ไว้ที่นี่ deploy แล้ววัดได้ 20px เท่าเดิม */
body#dash .ticket-message {
    max-width: 80%;
}
body#dash .ticket-message-support {
    align-self: flex-end;
    align-items: flex-end;
}
body#dash .ticket-message-box {
    padding: var(--v2-sp-3) var(--v2-sp-4);
    border-radius: var(--v2-r-md);
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    color: var(--v2-ink);
    font-size: 14px;
    line-height: var(--v2-lh-body);
    word-break: break-word;
}
/* A90 · D2 · ‼ ขึ้นบรรทัดใหม่ที่ผู้ใช้พิมพ์ถูกยุบทิ้งมาตลอด — ช่องตอบเป็น
   `<textarea rows="4">` แต่ตอนแสดงผล `\n` กลายเป็นช่องว่าง รายการเลขออเดอร์
   หรือขั้นตอนที่พิมพ์เป็นบรรทัด ๆ จึงกลายเป็นย่อหน้าเดียวติดกัน
   ‼ ต้องใส่ที่ `<span>` เท่านั้น ห้ามใส่ที่ `.ticket-message-box` — กล่องมี tab
     ของเทมเพลตอยู่รอบ ๆ span พอเป็น pre-wrap มันเรนเดอร์ tab ออกมาจริง
     ทดสอบสด: ฟองทุกใบพองเป็น 459px (ชน max-width) แม้ข้อความยาวสองตัวอักษร
     บทเรียนเดียวกับ A85/D4 ที่ `<pre>` เรนเดอร์ tab ของ api.twig ออกมา */
body#dash .ticket-message-box > span { white-space: pre-wrap; }
/* A86 · เหลือแค่ `border-color` — สองบรรทัดที่เหลือถูกบล็อก A86 ท้ายไฟล์เขียนทับแล้ว
   ‼ และ `border-color` เหลืองก็ต้องไปด้วย: มันเป็นของยุคที่ฟองฝั่งเราเป็นสีเหลือง
     พอฟองเปลี่ยนเป็นหมึกเข้ม เส้นขอบเหลืองจาง ๆ จะลอยอยู่รอบก้อนดำ */
body#dash .ticket-message-support .ticket-message-box {
    border-color: transparent;
}
body#dash .ticket-message-info {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-2);
    font-family: var(--v2-f-mono);
    font-size: 11px;
    color: var(--v2-ink-mute);
}
body#dash .ticket-owner {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-1);
    font-family: var(--v2-f-dis);
    color: var(--v2-ink);
    font-weight: 600;
}
body#dash .ticket-owner.support { color: var(--v2-yellow); }
body#dash .ticket-owner .verified {
    color: var(--v2-yellow);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin-left: 2px;
}
body#dash .ticket-owner .verified svg { width: 14px; height: 14px; }

/* viewticket page header — compact layout with ID chip on right */
body#dash .viewticket-header {
    align-items: center;
    gap: var(--v2-sp-4);
    padding: var(--v2-sp-2) 0 var(--v2-sp-5);
    flex-wrap: wrap;
}
body#dash .viewticket-header .page-h1-v2 {
    /* font-size ตาย เหมือน .neworder-h1 — บล็อก 21.2 คุมด้วย !important */
    margin: 6px 0 6px;
    line-height: var(--v2-lh-tight);
}
body#dash .viewticket-back {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-1);
    color: var(--v2-ink-mute);
    text-decoration: none !important;
    font-family: var(--v2-f-dis);
    font-weight: 500;
    font-size: 13px;
    transition: color var(--v2-t-fast);
}
body#dash .viewticket-back:hover { color: var(--v2-yellow); }
/* A90 · D2 · ลบกฎ `.viewticket-meta` / `.vt-stat` พร้อม element — มันคือกล่องเหลือง
   "TICKET ID #71" ที่ซ้ำกับ eyebrow เหนือมันสามบรรทัด และซ้ำกับการ์ด "ข้อมูลเคส" อีกที */

/* A90 · D2 · การ์ด "ข้อมูลเคส" — ข้อมูลของเคสนี้จริง ๆ ไม่ใช่ข้อความ SLA ที่เหมือนกันทุกเคส */
body#dash .vt-info .card-body { padding: var(--v2-sp-5); }
body#dash .vt-info-h {
    font-family: var(--v2-f-dis);
    font-size: 13px;
    font-weight: 700;
    color: var(--v2-ink);
    margin-bottom: var(--v2-sp-4);
}
body#dash .vt-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--v2-sp-3);
    font-size: 12.5px;
    padding: 7px 0;
}
body#dash .vt-row + .vt-row { border-top: 1px solid var(--adv-hair); }
body#dash .vt-row .k { color: var(--v2-ink-mute); }
body#dash .vt-row b {
    font-weight: 600;
    color: var(--v2-ink);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* Verified badge (support agent) — yellow pill with check */
body#dash .ticket-owner.support .verified {
    width: 18px;
    height: 18px;
    background: var(--v2-yellow);
    border-radius: 4px;
    padding: 2px;
}

/* Ticket message meta row */
body#dash .ticket-meta-sep {
    color: var(--v2-ink-soft);
    margin: 0 2px;
}
body#dash .ticket-owner-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--v2-sp-2);
    margin-left: 4px;
    border-radius: var(--v2-r-pill);
    background: var(--v2-yellow);
    color: var(--v2-yellow-ink);
    font-family: var(--v2-f-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Ticket file attachments row (inside message box) */
body#dash .ticket-files {
    margin-top: 12px;
    padding-top: var(--v2-sp-2);
    border-top: 1px dashed var(--v2-line);
    display: flex;
    flex-wrap: wrap;
    gap: var(--v2-sp-1);
    align-items: center;
}
body#dash .ticket-files small {
    font-family: var(--v2-f-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--v2-ink-mute);
    text-transform: uppercase;
    margin-right: 4px;
}

body#dash .ticket-file {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-1);
    padding: var(--v2-sp-1) var(--v2-sp-2);
    border-radius: var(--v2-r-sm);
    background: var(--v2-glass-2);
    border: 1px solid var(--v2-line);
    color: var(--v2-yellow);
    font-family: var(--v2-f-mono);
    font-size: 11px;
    text-decoration: none !important;
    margin-right: 4px;
}
body#dash .ticket-file:hover { background: var(--v2-yellow-soft); }

/* Reply form */
body#dash .ticket-footer {
    padding-top: var(--v2-sp-4);
    margin-top: 18px;
    border-top: 1px solid var(--v2-line);
}
body#dash .message-send {
    display: flex;
    flex-direction: column;
    gap: var(--v2-sp-2);
}
body#dash .message-send textarea.form-control { min-height: 90px; }

body#dash .btn .btn-icon { display: inline-flex; margin-left: 4px; }

/* A90 · D2 · เวลาให้บริการ — สามข้อความเดิมอยู่ในการ์ดเดียว ไม่ใช่การ์ดละใบ
   `.ticket-detail-box` ไม่มีใน twig แล้ว กฎเดิมของมันถูกลบทั้งชุด */
body#dash .vt-sla { margin-top: var(--v2-sp-3); }
body#dash .vt-sla .card-body {
    padding: var(--v2-sp-5);
    display: grid;
    gap: var(--v2-sp-4);
}
body#dash .vt-sla .sup-item {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-3);
}
body#dash .vt-sla .sup-item .icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--v2-r-sm);
    background: var(--adv-inner);
    color: var(--v2-ink-dim);
    font-size: 14px;
    flex-shrink: 0;
}
/* ‼ ป้ายเดิมเป็น mono + uppercase + tracking 0.08em บนข้อความไทย
   ("เวลาตอบสนองโดยเฉลี่ย") — ปัญหาเดียวกับที่ A54/A74/A88 แก้ไปแล้วสามรอบ */
body#dash .vt-sla .sup-item-title {
    font-family: var(--v2-f-thai);
    font-size: 11.5px;
    letter-spacing: normal;
    text-transform: none;
    color: var(--v2-ink-mute);
}
body#dash .vt-sla .sup-item-value {
    font-family: var(--v2-f-dis);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--v2-ink);
    margin-top: 2px;
}

/* ============================================================
 *  Remaining money/support pages — shared overrides
 * ============================================================ */

/* Bootstrap .well (used by notifications) */
body#dash .well {
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-md);
    padding: var(--v2-sp-4);
    margin-bottom: 14px;
    color: var(--v2-ink);
    box-shadow: none;
}

/* nav-pills (notifications tab bar) */
/* the 16px bottom margin loses to `.pnd-ord-nav { margin: 0 !important }`. On
   /orders, /refill and /drip-feed the pills are the last child of their
   container, so nothing sits under them to be crowded — the spacing comes from
   the container. Kept for the pages that use .nav-pills without .pnd-ord-nav. */
body#dash ul.nav.nav-pills {
    list-style: none;
    padding: var(--v2-sp-1);
    margin: 0 0 16px;
    display: inline-flex;
    gap: var(--v2-sp-1);
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-pill);
    flex-wrap: wrap;
}
body#dash .nav-pills li { list-style: none; }
/* color loses to the stock `.nav-link { color: var(--text-color) !important }`.
   Left alone deliberately: .nav-link is every Bootstrap tab on the site, so
   dropping that !important reaches far more than these pills, and --text-color
   reads correctly on the pill background anyway. The design wanted inactive
   pills one step softer; the active pill still separates on its yellow fill. */
body#dash .nav-pills li a {
    padding: var(--v2-sp-2) var(--v2-sp-4);
    border-radius: var(--v2-r-pill);
    font-family: var(--v2-f-dis);
    font-size: 13px;
    font-weight: 600;
    color: var(--v2-ink-dim);
    text-decoration: none !important;
    transition: background var(--v2-t-fast), color var(--v2-t-fast);
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-1);
}
body#dash .nav-pills li a:hover {
    background: var(--v2-glass-2);
    color: var(--v2-ink);
}
body#dash .nav-pills li.active a,
body#dash .nav-pills li a.active {
    background: var(--v2-yellow);
    color: var(--v2-yellow-ink);
}

/* .btn-danger (2FA disable, order cancel) */
body#dash .btn.btn-danger {
    background: var(--v2-danger-soft);
    color: var(--v2-danger-text);
    border: 1px solid rgba(255, 122, 106, 0.30);
    padding: var(--v2-sp-2) var(--v2-sp-4);
    border-radius: var(--v2-r-sm);
    font-family: var(--v2-f-dis);
    font-weight: 600;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--v2-sp-1);
    text-decoration: none !important;
    transition: background var(--v2-t-fast), color var(--v2-t-fast);
    cursor: pointer;
}
body#dash .btn.btn-danger:hover {
    background: rgba(255, 122, 106, 0.22);
    color: var(--v2-danger-text);
    border-color: rgba(255, 122, 106, 0.45);
}

/* input-group (input + button) */
body#dash .input-group {
    display: flex;
    width: 100%;
    position: relative;
}
body#dash .input-group .form-control { flex: 1; min-width: 0; }
body#dash .input-group > :not(:first-child) { margin-left: -1px; }
body#dash .input-group > :not(:first-child) .form-control,
body#dash .input-group > :not(:first-child) .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
body#dash .input-group > :not(:last-child) .form-control,
body#dash .input-group > :not(:last-child) .btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* ============================================================
 *  api.twig — REST API docs
 * ============================================================ */

body#dash .api-box,
body#outside .api-box {
    display: flex;
    flex-direction: column;
    gap: var(--v2-sp-4);
}
body#dash .api-top,
body#outside .api-top {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--v2-sp-2);
}
@media (max-width: 900px) {
    body#dash .api-top,
    body#outside .api-top { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
    body#dash .api-top,
    body#outside .api-top { grid-template-columns: 1fr; }
}
body#dash .api-top-item,
body#outside .api-top-item {
    display: flex;
    flex-direction: column;
    gap: var(--v2-sp-1);
    padding: var(--v2-sp-3) var(--v2-sp-3);
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-sm);
    font-family: var(--v2-f-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--v2-ink-mute);
    text-transform: uppercase;
}
body#dash .api-top-item b,
body#outside .api-top-item b {
    font-family: var(--v2-f-mono);
    font-size: 13px;
    color: var(--v2-yellow-text);
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: none;
    word-break: break-all;
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-1);
}
body#dash .api-top-item b a,
body#outside .api-top-item b a { color: var(--v2-yellow-text); text-decoration: underline; }

body#dash .api-code,
body#outside .api-code {
    display: flex;
    flex-direction: column;
    gap: var(--v2-sp-4);
}
body#dash .api-title,
body#outside .api-title {
    display: block;
    font-family: var(--v2-f-dis);
    font-size: 14px;
    font-weight: 700;
    color: var(--v2-ink);
    margin-top: 14px;
    padding-bottom: var(--v2-sp-1);
    border-bottom: 1px solid var(--v2-line);
}
body#dash .api-list,
body#outside .api-list {
    display: flex;
    flex-direction: column;
    gap: var(--v2-sp-1);
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-sm);
    padding: var(--v2-sp-2);
    margin-bottom: 8px;
}
body#dash .api-item,
body#outside .api-item {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: var(--v2-sp-3);
    padding: var(--v2-sp-2) var(--v2-sp-3);
    border-radius: var(--v2-r-xs);
    font-family: var(--v2-f-mono);
    font-size: 12px;
    color: var(--v2-yellow-text);
    font-weight: 600;
    transition: background var(--v2-t-fast);
}
body#dash .api-item:hover,
body#outside .api-item:hover { background: var(--v2-glass-2); }
body#dash .api-item b,
body#outside .api-item b {
    color: var(--v2-ink-dim);
    font-weight: 400;
    font-family: var(--v2-f-thai);
    font-size: 13px;
}
@media (max-width: 540px) {
    body#dash .api-item,
    body#outside .api-item { grid-template-columns: 1fr; gap: var(--v2-sp-1); }
}

/* the code block is #05050a in both modes, so its text cannot follow the mode:
   --v2-ink-dim put dark ink on a near-black panel at 1.06:1 in light. Ninth time
   in this project that ink had to follow the surface rather than the theme. */
body#dash pre.language-css,
body#outside pre.language-css {
    background: #05050a;
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-sm);
    padding: var(--v2-sp-3) var(--v2-sp-4);
    overflow-x: auto;
    font-family: var(--v2-f-mono);
    font-size: 12px;
    line-height: var(--v2-lh-body);
    color: #d8d8de;
    margin: 0;
}
body#dash pre.language-css code,
body#outside pre.language-css code {
    font-family: var(--v2-f-mono);
    color: inherit;
    background: transparent;
    padding: 0;
    white-space: pre-wrap;
    word-break: break-all;
}

body#dash .form-inline,
body#outside .form-inline {
    display: flex;
    gap: var(--v2-sp-2);
    align-items: center;
    flex-wrap: wrap;
    margin: 8px 0;
}
body#dash .form-inline .form-group,
body#outside .form-inline .form-group { margin: 0; }
body#dash .input-sm,
body#outside .input-sm { padding: var(--v2-sp-2) var(--v2-sp-3); font-size: 13px; height: 36px; }

/* ============================================================
 *  account.twig — extra specifics
 * ============================================================ */

/* A54 · เดิมบังคับ mono + uppercase + tracking ให้ label ทุกตัวในการ์ด ซึ่งเป็นภาษาไทย
   ("ชื่อผู้ใช้") · ตรงกับบล็อกฐานแล้ว ‼ ห้ามใส่ mono/uppercase กลับ */
body#dash .card-body label {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--v2-ink-mute);
    margin-bottom: 7px;
}
body#dash .card-body .form-control[readonly][disabled],
body#dash .card-body .form-control[readonly] {
    background: var(--v2-glass-2);
    color: var(--v2-ink-dim);
    font-family: var(--v2-f-mono);
    cursor: default;
}
body#dash span.form-control#current-email {
    line-height: 1.5;
    padding: var(--v2-sp-3) var(--v2-sp-3);
    min-height: 46px;
    display: flex;
    align-items: center;
}

/* ============================================================
 *  massorder.twig
 * ============================================================ */
body#dash #links.form-control {
    font-family: var(--v2-f-mono);
    font-size: 12px;
    line-height: 1.7;
    min-height: 280px;
}

/* ============================================================
 *  updates.twig + notifications (generic d-flex dash-header)
 * ============================================================ */
body#dash .updates-item,
body#dash .update-item {
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-md);
    padding: var(--v2-sp-3) var(--v2-sp-4);
    margin-bottom: 10px;
}

/* ============================================================
 *  subscription.twig, drip_feed.twig — forms inherit generic form-control/btn
 *  nothing extra needed
 * ============================================================ */

/* ============================================================
 *  childpanel.twig / childpanel_order.twig — inherit cards + tables
 * ============================================================ */

/* ============================================================
 *  Phase 4 — Auth + Marketing pages
 * ============================================================ */

/* signup/reset/setnew use .auth-hide-chrome to hide the global chrome */
body#outside:has(.auth-hide-chrome) #header,
body#outside:has(.auth-hide-chrome) > footer,
body#outside:has(.auth-hide-chrome) .sm-header { display: none !important; }

/* signup-area / reset-area wrapper (full-bleed auth pages) */
body#outside .signup-area {
    min-height: 100vh;
    padding: var(--v2-sp-6) var(--v2-sp-5) 60px;
    position: relative;
    z-index: 2;
}
body#outside .signup-area .home-fade {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}
body#outside .signup-area .hf-glow {
    position: absolute;
    width: 800px;
    height: 800px;
    top: -200px;
    left: -100px;
    background: radial-gradient(circle, var(--v2-yellow-soft), transparent 70%);
    filter: blur(80px);
}

/* Signup/reset header (logo + back to home button)
   A88 · E3 · ‼ กฎฐาน L5166 ตั้ง `position: fixed; top:0; left:0; width:100%`
     กฎนี้เคยทับแค่ `max-width` แต่ไม่เคยยกเลิก fixed แถบหัวจึงถูกตรึงที่ x=0
     กว้าง 1240 บนจอ 1392 → พื้นโปร่งของมันจบกลางจอ ห่างขอบขวา 152px
     `margin: 0 auto 40px` ก็ไม่ทำงานเพราะ fixed จัดกลางด้วย margin ไม่ได้
     และ `.signup-badge { margin-top: 80px }` มีไว้หลบแถบนี้อย่างเดียว */
body#outside .signup-header {
    position: static;
    width: auto;
    max-width: 1140px;   /* = .container ที่ >=1200 โลโก้จึงตรงคอลัมน์การ์ดพอดี */
    margin: 0 auto var(--v2-sp-6);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--v2-sp-3) 0;
    gap: var(--v2-sp-5);
    flex-wrap: wrap;
    background: none;
    z-index: auto;
}
body#outside .signup-logo a {
    display: inline-flex;
    align-items: center;
    font-family: var(--v2-f-dis);
    font-weight: 700;
    color: var(--v2-ink);
    font-size: 20px;
    text-decoration: none !important;
}
body#outside .signup-logo img { max-height: 40px; width: auto; }
/* A88 · E3 · ปุ่ม "กลับไปที่บ้าน" — แคปซูลเงียบ ไม่ใช่ปุ่มเหลือง
   ‼ เดิมเป็นไล่สีเหลือง เพราะกลุ่ม `!important` ของหัวข้อ 5 (A74) ชนะกฎนี้
     ที่ specificity เท่ากัน หน้านี้จึงมีเหลืองสองที่ ทั้งที่การกระทำหลักคือปุ่ม submit
     ตอนนี้กลุ่มนั้นกัน `.signup-header .btn` ออกแล้ว กฎนี้จึงชนะโดยไม่ต้องใช้ !important
   ‼ กฎคู่ที่ L17808 ถูกลบ — มันเขียนทับกฎนี้ทุก property ด้วย !important สี่ตัว
     ค่าที่เห็นบนจอมาจากที่นั่น ไม่ใช่ที่นี่ ตอนนี้เหลือเจ้าของเดียว
   ค่าตรงกับ `.v2-auth-back` ของหน้า signup — สองหน้านี้อยู่ในโฟลว์เดียวกัน */
body#outside .signup-header .btn.btn-primary {
    margin-left: auto;
    background: var(--v2-glass);
    color: var(--v2-ink);
    border: 1px solid var(--v2-line);
    box-shadow: none;
    height: 42px;
    padding: 0 var(--v2-sp-4);
    border-radius: var(--v2-r-pill);
    font-family: var(--v2-f-thai);
    font-weight: 600;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-2);
    text-decoration: none !important;
    transition: background var(--v2-t-base) var(--v2-ease), border-color var(--v2-t-base) var(--v2-ease), transform var(--v2-t-base) var(--v2-ease);
}
body#outside .signup-header .btn.btn-primary:hover {
    background: var(--v2-glass-2);
    border-color: rgba(255, 214, 10, 0.35);
    color: var(--v2-ink);
    transform: translateX(-2px);
}
body#outside .signup-header .btn.btn-primary > i { color: var(--v2-yellow); font-size: 14px; }

/* Signup badge — หัวการ์ด (ไอคอน + ชื่อ + คำอธิบาย)
   A88 · E3 · ดีไซน์ Panel E · E3 เป็น "การ์ดเดียว" ไอคอนอยู่บนหัวเรื่อง
   ‼ twig ย้าย `.signup-badge` เข้าไปไว้ใน `.signup-content` แล้ว เดิมเป็นสองการ์ด
     ซ้อนกันที่มีเงาคนละตัว (--adv-lift-lg กับ --adv-lift) เพราะกฎ !important
     สองกลุ่มชนะคนละใบ
   ‼ `margin-top: 40/80px` ที่เคยอยู่หัวข้อ "Auth + content page mobile/light fixes"
     ถูกลบ — มันมีไว้หลบแถบหัวที่เคยเป็น position:fixed เท่านั้น */
body#outside .signup-badge {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--v2-sp-3);
    padding: 0 0 var(--v2-sp-5);
    margin: 0 0 var(--v2-sp-5);
    border-bottom: 1px solid var(--adv-panel-line);
}
/* ชิปไอคอนเป็นกลาง ไม่ใช่เหลือง — เหลืองในหน้านี้ถูกจองไว้ให้ปุ่ม submit
   ซึ่งเป็นการกระทำหลักหนึ่งเดียวของหน้า (กติกาโควตาเหลือง 2026-08-04) */
body#outside .signup-badge .icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: var(--v2-r-md);
    background: var(--adv-inner);
    color: var(--v2-ink-dim);
    font-size: 17px;
    flex-shrink: 0;
}
body#outside .signup-badge .text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
body#outside .signup-badge .text > span {
    font-family: var(--v2-f-dis);
    font-size: 20px;
    font-weight: 700;
    color: var(--v2-ink);
}
body#outside .signup-badge .text small {
    color: var(--v2-ink-mute);
    font-size: 12px;
    line-height: 1.5;
}

/* Signup content (form container) */
body#outside .signup-content {
    padding: var(--v2-sp-6);
    background: var(--v2-glass-2);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-lg);
    backdrop-filter: var(--v2-blur);
    -webkit-backdrop-filter: var(--v2-blur);
    box-shadow: var(--v2-shadow-1);
}
body#outside .signup-content .form-group { margin-bottom: 14px; position: relative; }
/* A88 · E3 · ป้ายกำกับ — บทเรียนเดิมของ A54/A74 อีกครั้ง ข้อความคือ "อีเมลที่สมัคร"
   ภาษาไทย uppercase ไม่ทำอะไร ได้แต่ลาก JetBrains Mono มาเรนเดอร์ไทย
   และ tracking 0.12em ทำให้สระหลุดจากพยัญชนะ (วัดจริง 1.32px ต่อตัว) */
body#outside .signup-content .form-group > label,
body#outside .signup-content .form-group .control-label {
    font-family: var(--v2-f-dis);
    font-size: 12px;
    /* letter-spacing มาจากกลุ่ม "ไทยห้ามโดน letter-spacing" หัวข้อ 19 ซึ่งเป็น
       !important และมีเซเลกเตอร์นี้อยู่แล้ว เขียนซ้ำที่นี่ = declaration ตายหนึ่งบรรทัด */
    text-transform: none;
    color: var(--v2-ink);
    font-weight: 600;
    margin-bottom: 8px;
    display: block;
}
/* ช่องกรอก — ค่าเดียวกับ `.login-card` ของ signin/signup ทั้งสามหน้าอยู่โฟลว์เดียวกัน
   ‼ ห้ามใช้ --v2-well / --v2-surface ที่นี่ สองตัวนั้นประกาศใต้ body.v2-dash เท่านั้น
   ‼ ไม่เขียน `border: 0` — `body#outside .form-control` (A54) เป็น !important ที่ (1,1,1)
     ให้เส้น 1px --adv-inner-line กับช่องกรอก guest ทุกช่องอยู่แล้ว และชนะที่นี่
     A74 เขียน `border: 0` ไว้ใน .login-card ด้วยเหตุผลเดียวกันและมันไม่เคยขึ้นจอเลย
     (วัดจริง: ช่องของ signin/signup ก็มีเส้นเหมือนกัน) ลบทิ้งดีกว่าไปเติม !important */
body#outside .signup-content .form-control,
body#outside .signup-content .form-select {
    width: 100%;
    height: 50px;
    padding: 0 16px 0 40px;
    border-radius: var(--v2-r-md);
    background: var(--adv-inner);
    color: var(--v2-ink);
    font-family: var(--v2-f-thai);
    font-size: 13.5px;
    outline: 0;
    transition: background var(--v2-t-fast), box-shadow var(--v2-t-fast);
    line-height: 1.5;
}
body#outside .signup-content .form-control:focus {
    background: var(--adv-inner);
    /*  A124 · โฟกัสเปลี่ยนจากวงแหวน inset 2px เป็นวงแหวน outset 3px
        ‼ ของเดิมวาดด้วยบรรทัดเดียวกับ .payment-box.active ("เลือกวิธีจ่ายเงินอันนี้")
          คือวงแหวน inset หนา 2px สีเหลืองตัวเดียวกัน เหมือนกันทุกตัวอักษร
          ผู้ใช้จึงแยกไม่ออกว่า "ช่องนี้กำลังพิมพ์อยู่" กับ "ฉันเลือกอันนี้ไว้"
          — นี่ไม่ใช่เรื่องสวย มันคือคนกดผิดตอนจ่ายเงิน
        รูปแบบ outset นี้ธีมใช้อยู่แล้วที่ 9686 และ 10156 จึงไม่ใช่ภาษาใหม่
        ‼ inset 2px ถูกสงวนไว้ให้ "เลือกอยู่" อย่างเดียวตั้งแต่นี้ */
    box-shadow: 0 0 0 3px var(--v2-yellow-soft);
}
/* ไอคอนนำหน้าช่อง — เว้นที่ไว้แล้วด้วย padding-left 40px ข้างบน
   ‼ ผูกกับ id จริงใน twig ทั้งสี่ตัว ไม่ใช่ตัวใดตัวหนึ่ง
     บทเรียนจาก A74: เขียนไว้แค่ #username/#password แล้ว signup ซึ่งใช้
     #login/#email/#password_again ได้ระยะเยื้อง 40px ครบทุกช่องแต่มีไอคอนช่องเดียว */
body#outside .signup-content .form-group:has(#email)::before,
body#outside .signup-content .form-group:has(#username)::before,
body#outside .signup-content .form-group:has(#password_new)::before,
body#outside .signup-content .form-group:has(#password_confirm)::before {
    position: absolute;
    left: 16px;
    bottom: 0;
    height: 50px;
    display: grid;
    place-items: center;
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    font-size: 12px;
    color: var(--v2-ink-mute);
    pointer-events: none;
}
body#outside .signup-content .form-group:has(#email)::before { content: "\f0e0"; }
body#outside .signup-content .form-group:has(#username)::before { content: "\f007"; }
body#outside .signup-content .form-group:has(#password_new)::before,
body#outside .signup-content .form-group:has(#password_confirm)::before { content: "\f023"; }
/* A88 · E3 · ค่าจริงมาจากกฎคู่ที่ L17873 ซึ่งถูกลบแล้ว — ที่นี่คือเจ้าของเดียว
   ‼ background/box-shadow ไม่ต้องเขียน กลุ่ม !important ของหัวข้อ 5 ให้ --adv-btn อยู่แล้ว
     ถ้าเขียนซ้ำจะได้ declaration ตายเพิ่มสองบรรทัด */
body#outside .signup-content .btn.btn-primary {
    width: 100%;
    justify-content: center;
    height: 52px;
    font-size: 14.5px;
    border-radius: var(--v2-r-md);
    color: var(--v2-yellow-ink);
    font-family: var(--v2-f-dis);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-2);
    border: 0;
    cursor: pointer;
    transition: background var(--v2-t-fast), box-shadow var(--v2-t-base), transform var(--v2-t-fast);
}
body#outside .signup-content .btn.btn-primary:hover {
    background: #ffe24a;
    color: var(--v2-yellow-ink);
    box-shadow: 0 12px 30px -10px var(--v2-yellow-glow);
    transform: translateY(-1px);
}
body#outside .signup-content .alert {
    padding: var(--v2-sp-3) var(--v2-sp-4);
    border-radius: var(--v2-r-md);
    border: 1px solid var(--v2-line);
    background: var(--v2-glass-2);
    color: var(--v2-ink);
    font-size: 13px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: var(--v2-sp-2);
}
body#outside .signup-content .alert-success {
    background: var(--v2-ok-soft);
    border-color: rgba(111, 228, 168, 0.30);
    color: var(--v2-ok);
}
body#outside .signup-content .alert-danger {
    background: var(--v2-danger-soft);
    border-color: rgba(255, 122, 106, 0.30);
    color: var(--v2-danger);
}

/* Left-side marketing description (sign-d) */
body#outside .sign-d { padding: var(--v2-sp-6); }
body#outside .rp-left-title {
    font-family: var(--v2-f-dis);
    font-size: var(--v2-fs-fluid-2);
    font-weight: 800;
    line-height: var(--v2-lh-tight);
    color: var(--v2-ink);
    margin: 0 0 18px;
}
body#outside .rp-left-title .primary-color { color: var(--v2-yellow); }
body#outside .rp-left-text {
    color: var(--v2-ink-dim);
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
}

/* Login card (signin.twig) — the login form in the hero */
body#outside .login-card {
    -webkit-backdrop-filter: var(--v2-blur);
}
body#outside .login-card .card-body { padding: 0; background: transparent; }
body#outside .login-card .form-group { margin-bottom: 14px; }
/* A74 · G1 · ป้ายกำกับช่องกรอก
   ‼ ของเดิมเป็น mono + uppercase + tracking 0.12em ซึ่งเป็นบทเรียนเดิมของ A54 อีกครั้ง:
     ข้อความคือ "ชื่อผู้ใช้" / "รหัสผ่าน" ภาษาไทย uppercase ไม่ทำอะไรเลย
     ได้แต่ลาก JetBrains Mono มาเรนเดอร์ไทย และ tracking ทำให้สระหลุดจากพยัญชนะ */
body#outside .login-card .form-group > label {
    font-family: var(--v2-f-dis);
    font-size: 12px;
    letter-spacing: normal;
    text-transform: none;
    color: var(--v2-ink);
    font-weight: 600;
    margin-bottom: 8px;
    display: block;
}
/* A74 · G1 · ช่องกรอกเป็นร่องแบนมุม 14 มีไอคอนนำ (ดีไซน์ Panel G · G1)
   ‼ แก้ที่กฎเจ้าของเดิม ไม่เขียนกฎใหม่ไปซ้อน — เขียนซ้อนครั้งแรกแล้ว ledger จับได้ทันที
     ว่า 5 property ที่นี่กลายเป็นของตาย
   ‼‼ **ห้ามใช้ `--v2-well` / `--v2-surface` ในกฎ body#outside** สองตัวนี้ประกาศไว้ใต้
      `body.v2-dash` เท่านั้น บนหน้า guest มันไม่มีค่า → declaration ตายทั้งบรรทัด
      แล้ว property ตกกลับไปใช้ค่าที่สืบทอดมา ครั้งแรกของ A74 พลาดข้อนี้จริง ๆ:
      ปุ่มเข้าสู่ระบบได้ `color: var(--v2-surface)` ซึ่งตาย ตัวอักษรเลยเป็นหมึกบนพื้นหมึก
      **contrast 1.0 มองไม่เห็นเลย** — เป็นบั๊กชนิดเดียวกับ A57/A58 ที่ทำ modal guest พื้นหาย
      ฝั่ง guest ให้ใช้ `--adv-inner` (แทน well) และ `--adv-panel-top` (แทน surface)
      ทั้งคู่ประกาศบน `html, html.light` จึงเอื้อมถึงทั้งสองฝั่ง */
body#outside .login-card .form-control {
    width: 100%;
    height: 50px;
    padding: 0 16px 0 40px;
    border-radius: var(--v2-r-md);
    background: var(--adv-inner);
    /* A88 · `border: 0` ลบออก — มันไม่เคยขึ้นจอ `body#outside .form-control` ของ A54
       เป็น !important ที่ (1,1,1) และให้เส้น 1px --adv-inner-line มาตลอด (วัดจริง 2026-08-10) */
    color: var(--v2-ink);
    font-family: var(--v2-f-thai);
    font-size: 13.5px;
    outline: 0;
    transition: background var(--v2-t-fast), box-shadow var(--v2-t-fast);
    line-height: 1.5;
}
/* โฟกัสเป็นวงแหวน **ด้านใน** ไม่ใช่เงาฟุ้งด้านนอก — ช่องจึงไม่ขยับและไม่ชนช่องข้าง ๆ
   ตรงกับกติกาใน panel-tokens บรรทัด 5 (เหลืองใช้เป็นขอบหนา 2px รอบช่องที่โฟกัส) */
body#outside .login-card .form-control:focus {
    background: var(--adv-inner);
    /*  A124 · โฟกัสเปลี่ยนจากวงแหวน inset 2px เป็นวงแหวน outset 3px
        ‼ ของเดิมวาดด้วยบรรทัดเดียวกับ .payment-box.active ("เลือกวิธีจ่ายเงินอันนี้")
          คือวงแหวน inset หนา 2px สีเหลืองตัวเดียวกัน เหมือนกันทุกตัวอักษร
          ผู้ใช้จึงแยกไม่ออกว่า "ช่องนี้กำลังพิมพ์อยู่" กับ "ฉันเลือกอันนี้ไว้"
          — นี่ไม่ใช่เรื่องสวย มันคือคนกดผิดตอนจ่ายเงิน
        รูปแบบ outset นี้ธีมใช้อยู่แล้วที่ 9686 และ 10156 จึงไม่ใช่ภาษาใหม่
        ‼ inset 2px ถูกสงวนไว้ให้ "เลือกอยู่" อย่างเดียวตั้งแต่นี้ */
    box-shadow: 0 0 0 3px var(--v2-yellow-soft);
}
body#outside .login-card .col-end { margin-top: 16px; }
/* A74 · G1 · "จำฉันไว้" เป็นแถวมีข้อความ ไม่ใช่ปุ่มไอคอนเปล่า
   ‼ ของเดิมเป็นกล่อง 46x46 ที่บอกความหมายผ่าน tooltip อย่างเดียว — บนมือถือไม่มี hover
     จึงไม่มีทางรู้เลยว่าปุ่มนั้นคืออะไร ตอนนี้ข้อความอยู่ข้าง ๆ ตลอดเวลา
   ‼ กฎ .col-end .row / .col / .col-auto ถูกลบ — twig ไม่มี wrapper พวกนั้นแล้ว
   ‼ พื้นเหลืองทั้งกล่องตอนติ๊กก็ถูกลบ ตอนนี้เหลืองอยู่ที่ช่องติ๊ก 20px ช่องเดียว
     ถ้าคงไว้ แถบทั้งแถบจะกลายเป็นสีเหลืองซึ่งดังกว่าปุ่มเข้าสู่ระบบเสียอีก */
body#outside .login-remember-me {
    display: flex;
    align-items: center;
    gap: 10px;
    width: auto;
    height: auto;
    margin: 0 0 16px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    color: var(--v2-ink-dim);
    cursor: pointer;
    transition: color var(--v2-t-fast);
}
body#outside .login-remember-me input[type="checkbox"] { display: none; }
body#outside .login-remember-me .lgn-btn {
    width: 20px;
    height: 20px;
    flex: none;
    border-radius: 6px;
    background: var(--adv-inner);
    color: var(--v2-ink-mute);
    display: grid;
    place-items: center;
    transition: background var(--v2-t-fast), color var(--v2-t-fast);
}
body#outside .login-remember-me .lgn-btn svg { width: 13px; height: 13px; display: block; }
body#outside .login-remember-me input[type="checkbox"]:checked + .lgn-btn {
    background: var(--v2-yellow);
    color: var(--v2-yellow-ink);
}
body#outside .login-remember-text {
    font-family: var(--v2-f-thai);
    font-size: 12.5px;
    font-weight: 400;
}
/* A74 · G1 · ปุ่มเข้าสู่ระบบเป็นแคปซูลหมึก ไม่ใช่เหลือง
   ‼ เหลืองในหน้านี้ถูกจองไว้แล้วสองที่: ตัวเลข uptime ในก้อนดำฝั่งซ้าย และวงแหวนโฟกัส
     ถ้าปุ่มเป็นเหลืองอีก จะมีเหลืองสามที่ในจอเดียวและไม่มีที่ไหนเด่น
   ‼ ผูกกับ .login-card เท่านั้น ปุ่มเหลืองที่อื่นทั้งเว็บไม่กระทบ */
body#outside .login-card .btn.btn-primary {
    width: 100%;
    height: 52px;
    border-radius: var(--v2-r-md);
    background: var(--v2-ink);
    color: var(--adv-panel-top);
    font-family: var(--v2-f-dis);
    font-weight: 700;
    font-size: 14.5px;
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--v2-sp-2);
    cursor: pointer;
    transition: background var(--v2-t-fast), box-shadow var(--v2-t-base), transform var(--v2-t-fast);
    text-decoration: none !important;
}
body#outside .login-card .btn.btn-primary:hover {
    background: #ffe24a;
    color: var(--v2-yellow-ink);
    box-shadow: 0 12px 30px -10px var(--v2-yellow-glow);
    transform: translateY(-1px);
}
body#outside .frgt-pass {
    margin-top: 16px;
    text-align: center;
    font-size: 13px;
}
body#outside .frgt-pass a {
    color: var(--v2-yellow-text);
    text-decoration: none !important;
    font-weight: 600;
    font-family: var(--v2-f-dis);
}
/* the hover was #ffe24a — lighter than the resting colour, so on the white
   card it went from readable to invisible on the way to being clicked */
body#outside .frgt-pass a:hover { color: var(--v2-ink); }
body#outside .frgt-pass .sep {
    /* --v2-ink-soft is 0.32 alpha: 2.09:1 for a separator that carries meaning */
    color: var(--v2-ink-mute);
    margin: 0 8px;
}
body#outside .frgt-pass .signup-link { color: var(--v2-ink-dim); }
body#outside .frgt-pass .signup-link strong {
    color: var(--v2-yellow-text);
    font-weight: 700;
    margin-left: 4px;
}

/* Hero stats strip (below home-content paragraph) */
body#outside .home-stats {
    display: flex;
    gap: var(--v2-sp-6);
    margin-top: 30px;
    padding: var(--v2-sp-5) var(--v2-sp-5);
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-md);
    backdrop-filter: var(--v2-blur);
    -webkit-backdrop-filter: var(--v2-blur);
    flex-wrap: wrap;
    max-width: 540px;
}
body#outside .home-stats .m {
    font-family: var(--v2-f-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--v2-ink-mute);
    text-transform: uppercase;
    min-width: 80px;
}
body#outside .home-stats .m b {
    display: block;
    font-family: var(--v2-f-dis);
    color: var(--v2-ink);
    font-size: 20px;
    margin-top: 4px;
    text-transform: none;
    font-weight: 800;
}
body#outside .home-stats .m:nth-child(2) b { color: var(--v2-yellow); }
body#outside .home-stats .m + .m {
    padding-left: var(--v2-sp-6);
    border-left: 1px solid var(--v2-line);
}
@media (max-width: 540px) {
    body#outside .home-stats { gap: var(--v2-sp-3); padding: var(--v2-sp-3) var(--v2-sp-4); }
    body#outside .home-stats .m + .m { padding-left: 0; border-left: 0; }
}

/* Login card wrapper — hosts floating demo cards */
body#outside .login-card-wrap {
    position: relative;
    max-width: 440px;
    margin-left: auto;
}
@media (max-width: 991px) {
    body#outside .login-card-wrap { margin: 0 auto; }
}

body#outside .login-card {
    padding: var(--v2-sp-6);
    background: var(--v2-glass-2);
    border: 1px solid var(--v2-line-strong);
    border-radius: var(--v2-r-lg);
    backdrop-filter: var(--v2-blur-strong);
    -webkit-backdrop-filter: var(--v2-blur-strong);
    box-shadow: var(--v2-shadow-2);
    position: relative;
    z-index: 2;
}
body#outside .login-card-title {
    font-family: var(--v2-f-dis);
    font-size: 34px;
    font-weight: 800;
    color: var(--v2-ink);
    margin: 10px 0 6px;
    line-height: 1;
}
body#outside .login-card-title i {
    font-family: var(--v2-f-serif);
    font-style: italic;
    font-weight: 400;
    color: var(--v2-yellow);
}
body#outside .login-card-sub {
    color: var(--v2-ink-mute);
    font-size: 13px;
    line-height: var(--v2-lh-body);
    margin: 0 0 20px;
}

/* Floating demo cards around the login card (decorative) */
body#outside .float-demo {
    position: absolute;
    padding: var(--v2-sp-3) var(--v2-sp-4);
    border-radius: var(--v2-r-md);
    background: var(--v2-glass-3);
    border: 1px solid var(--v2-line-strong);
    backdrop-filter: var(--v2-blur);
    -webkit-backdrop-filter: var(--v2-blur);
    box-shadow: var(--v2-shadow-2);
    z-index: 1;
    font-size: 12px;
    color: var(--v2-ink-dim);
    min-width: 180px;
}
body#outside .float-demo .label {
    font-family: var(--v2-f-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--v2-ink-mute);
    text-transform: uppercase;
}
body#outside .float-demo .value {
    font-family: var(--v2-f-dis);
    font-size: 20px;
    font-weight: 700;
    color: var(--v2-ink);
    margin-top: 4px;
}
body#outside .float-demo .value span {
    color: var(--v2-yellow);
    font-style: italic;
    font-family: var(--v2-f-serif);
    font-weight: 400;
}
body#outside .float-demo .value small {
    color: var(--v2-ink-mute);
    font-size: 13px;
    font-family: var(--v2-f-dis);
}
body#outside .float-demo-a {
    top: -18px;
    left: -32px;
    transform: rotate(-3deg);
    animation: v2-float 6s ease-in-out infinite;
}
body#outside .float-demo-b {
    bottom: -18px;
    right: -28px;
    transform: rotate(3deg);
    animation: v2-float 7s ease-in-out infinite 1s;
}
@media (max-width: 540px) {
    body#outside .float-demo { display: none; }
}

/* ============================================================
 *  v2 LANDING — mega centered hero (signin.twig)
 * ============================================================ */
body#outside .v2-hero {
    position: relative;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 120px var(--v2-sp-6) 100px;
    text-align: center;
    overflow: hidden;
}
body#outside .v2-hero .home-fade,
body#outside .v2-hero .home-images { display: none; }

/* Floating corner demo cards */
body#outside .v2-hero-floats {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}
body#outside .v2-hero-floats .vf {
    border: 1px solid var(--v2-line);
    backdrop-filter: var(--v2-blur);
    -webkit-backdrop-filter: var(--v2-blur);
    font-family: var(--v2-f-thai);
}
body#outside .v2-hero-floats .vf-e {
    font-family: var(--v2-f-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--v2-ink-mute);
    text-transform: uppercase;
    margin-bottom: 6px;
}
body#outside .v2-hero-floats .vf-v {
    font-family: var(--v2-f-dis);
    font-weight: 700;
    color: var(--v2-ink);
    line-height: var(--v2-lh-tight);
}
body#outside .v2-hero-floats .vf-v i {
    color: var(--v2-yellow-text);
    font-style: italic;
    font-family: var(--v2-f-serif);
    font-weight: 400;
}
body#outside .v2-hero-floats .vf-v small {
    color: var(--v2-ink-mute);
    font-size: 14px;
    font-family: var(--v2-f-dis);
}
body#outside .v2-hero-floats .vf-v-sm {
    font-family: var(--v2-f-dis);
    font-size: 14px;
    font-weight: 600;
    color: var(--v2-ink);
    line-height: var(--v2-lh-tight);
}
body#outside .v2-hero-floats .vf-s {
    font-family: var(--v2-f-mono);
    font-size: 11px;
    color: var(--v2-ink-mute);
    margin-top: 6px;
    letter-spacing: 0.02em;
}
body#outside .v2-hero-floats .vf-s.ok { color: var(--v2-ok-text); }
body#outside .v2-hero-floats .vf-bars {
    display: flex;
    align-items: flex-end;
    gap: var(--v2-sp-1);
    margin-top: 10px;
}
body#outside .v2-hero-floats .vf-bars i {
    flex: 1;
    display: block;
}
body#outside .v2-hero-floats .vf-1 {     animation: v2-float-a 8s ease-in-out infinite; }
body#outside .v2-hero-floats .vf-2 {     animation: v2-float-a 10s ease-in-out infinite reverse; }
body#outside .v2-hero-floats .vf-3 {     animation: v2-float-a 12s ease-in-out infinite; }
body#outside .v2-hero-floats .vf-4 {     animation: v2-float-a 9s ease-in-out infinite reverse; }
@keyframes v2-float-a {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -16px; }
}
@media (max-width: 991px) {
    body#outside .v2-hero-floats { display: none; }
    body#outside .v2-hero { min-height: auto; padding: 80px var(--v2-sp-5) 60px; }
}

/* Hero center column */
body#outside .v2-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 1100px;
    margin: 0 auto;
}
body#outside .v2-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-2);
    padding: var(--v2-sp-1) var(--v2-sp-4) var(--v2-sp-1) var(--v2-sp-1);
    border-radius: var(--v2-r-pill);
    background: var(--v2-glass-2);
    border: 1px solid var(--v2-line);
    backdrop-filter: var(--v2-blur);
    -webkit-backdrop-filter: var(--v2-blur);
    font-size: 13px;
    color: var(--v2-ink-dim);
    margin-bottom: 28px;
}
body#outside .v2-hero-badge .chip-new {
    background: var(--v2-yellow);
    color: var(--v2-yellow-ink);
    font-weight: 700;
    padding: var(--v2-sp-1) var(--v2-sp-3);
    border-radius: var(--v2-r-pill);
    font-size: 11px;
    letter-spacing: 0.1em;
    font-family: var(--v2-f-mono);
}
body#outside .v2-hero-h1 {
    font-family: var(--v2-f-dis);
    font-weight: 800;
    margin: 0;
    color: var(--v2-ink);
}
body#outside .v2-hero-h1 i {
    font-family: var(--v2-f-serif);
    font-style: italic;
    font-weight: 400;
}
body#outside .v2-hero-sub {
    max-width: 640px;
    margin: 28px auto 0;
    color: var(--v2-ink-dim);
    line-height: var(--v2-lh-body);
}
body#outside .v2-hero-cta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
body#outside .v2-hero-stats {
    margin-top: 52px;
    display: flex;
    gap: 40px;
    justify-content: center;
    flex-wrap: wrap;
    color: var(--v2-ink-mute);
    font-family: var(--v2-f-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
body#outside .v2-hero-stats b {
    color: var(--v2-ink);
    font-family: var(--v2-f-dis);
    font-weight: 800;
    font-size: 26px;
    text-transform: none;
    display: block;
    margin-top: 6px;
}

/* ============================================================
 *  v2 metric row (big yellow numbers, 4-col glass-strong box)
 * ============================================================ */
body#outside .v2-metric-section { padding: 40px 0 var(--v2-sp-5) !important; }
body#outside .v2-metric-row {
    padding: 36px var(--v2-sp-6);
    border-radius: var(--v2-r-xl);
    background: var(--v2-glass-3);
    border: 1px solid var(--v2-line-strong);
    backdrop-filter: var(--v2-blur-strong);
    -webkit-backdrop-filter: var(--v2-blur-strong);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--v2-sp-6);
    box-shadow: var(--v2-shadow-2);
}
@media (max-width: 700px) {
    body#outside .v2-metric-row { grid-template-columns: repeat(2, 1fr); gap: var(--v2-sp-4); padding: var(--v2-sp-6) var(--v2-sp-5); }
}
body#outside .v2-metric-row .m { text-align: center; }
body#outside .v2-metric-row .n {
    font-family: var(--v2-f-dis);
    font-size: var(--v2-fs-fluid-2);
    font-weight: 800;
    color: var(--v2-yellow);
    line-height: 1;
}
body#outside .v2-metric-row .l {
    font-family: var(--v2-f-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--v2-ink-mute);
    text-transform: uppercase;
    margin-top: 12px;
}

/* ============================================================
 *  v2 showcase feature-stack (1 big + 4 small)
 * ============================================================ */
body#outside .v2-showcase { padding: 80px 0 100px !important; }
body#outside .v2-showcase-head {
    text-align: center;
    margin-bottom: 52px;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}
body#outside .v2-showcase-head h2 {
    font-family: var(--v2-f-dis);
    font-size: var(--v2-fs-fluid-2);
    line-height: var(--v2-lh-tight);
    margin: 14px 0 12px;
    font-weight: 800;
    color: var(--v2-ink);
}
body#outside .v2-showcase-head h2 i {
    font-family: var(--v2-f-serif);
    font-style: italic;
    font-weight: 400;
    color: var(--v2-yellow-text);
}
body#outside .v2-showcase-head p {
    color: var(--v2-ink-dim);
    font-size: 14px;
    line-height: var(--v2-lh-body);
    margin: 0;
}

body#outside .v2-feature-stack {
    display: grid;
    grid-template-columns: 1.25fr 1fr 1fr;
    gap: var(--v2-sp-4);
    grid-auto-rows: minmax(0, auto);
}
@media (max-width: 1000px) {
    body#outside .v2-feature-stack { grid-template-columns: 1fr 1fr; }
    body#outside .v2-feature-stack .v2-feat-big { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 640px) {
    body#outside .v2-feature-stack { grid-template-columns: 1fr; }
}
body#outside .v2-feat {
    border-radius: var(--v2-r-xl);
    position: relative;
    overflow: hidden;
    background: var(--v2-glass-2);
    border: 1px solid var(--v2-line);
    backdrop-filter: var(--v2-blur);
    -webkit-backdrop-filter: var(--v2-blur);
}
body#outside .v2-feat:hover {
    border-color: var(--v2-line-strong);
    background: var(--v2-glass-3);
    transform: translateY(-2px);
}
body#outside .v2-feat .e {
    font-family: var(--v2-f-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--v2-ink-mute);
    text-transform: uppercase;
}
body#outside .v2-feat h3 {
    font-family: var(--v2-f-dis);
    margin: 14px 0 10px;
    font-weight: 700;
    color: var(--v2-ink);
}
body#outside .v2-feat p {
    color: var(--v2-ink-dim);
    line-height: var(--v2-lh-body);
    margin: 0;
}
body#outside .v2-feat-big {
    grid-row: span 2;
}
body#outside .v2-feat-code {
    margin-top: 24px;
    border: 1px solid var(--v2-line);
    font-family: var(--v2-f-mono);
    font-size: 12px;
    line-height: var(--v2-lh-body);
    color: var(--v2-ink-dim);
}
body#outside .v2-feat-code .muted { color: rgba(247, 247, 248, 0.50); }
body#outside .v2-feat-code .ok { color: var(--v2-yellow); display: block; margin-top: 4px; }

/* ============================================================
 *  v2 product preview frame (Mac-style browser)
 * ============================================================ */
body#outside .v2-product-section { padding: 40px 0 100px !important; }
body#outside .v2-product-frame {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--v2-sp-4);
    border-radius: var(--v2-r-xl);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
    border: 1px solid var(--v2-line-strong);
    backdrop-filter: var(--v2-blur-strong);
    -webkit-backdrop-filter: var(--v2-blur-strong);
    box-shadow: var(--v2-elev-3);
}
body#outside .v2-product-inner {
    border-radius: var(--v2-r-lg);
    background: #0d0d12;
    border: 1px solid var(--v2-line);
    padding: var(--v2-sp-5);
    min-height: 400px;
}
html.light body#outside .v2-product-inner { background: #ffffff; border-color: rgba(12,12,16,0.08); }
body#outside .v2-product-top {
    display: flex;
    gap: var(--v2-sp-2);
    padding-bottom: var(--v2-sp-3);
    border-bottom: 1px solid var(--v2-line);
    align-items: center;
}
body#outside .v2-product-top > i {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--v2-line-strong);
    display: inline-block;
}
body#outside .v2-product-top > i:nth-child(1) { background: #ff6058; }
body#outside .v2-product-top > i:nth-child(2) { background: #ffc327; }
body#outside .v2-product-top > i:nth-child(3) { background: #28cd41; }
body#outside .v2-product-url {
    margin-left: auto;
    font-family: var(--v2-f-mono);
    font-size: 11px;
    color: var(--v2-ink-mute);
    letter-spacing: 0.06em;
}
body#outside .v2-product-grid {
    display: grid;
    grid-template-columns: 200px 1fr 260px;
    gap: var(--v2-sp-4);
    margin-top: 18px;
}
@media (max-width: 900px) {
    body#outside .v2-product-grid { grid-template-columns: 1fr; }
}
body#outside .v2-product-side {
    background: var(--v2-glass);
    border-radius: var(--v2-r-md);
    padding: var(--v2-sp-3);
    font-size: 12px;
    display: flex;
    flex-direction: column;
    gap: var(--v2-sp-1);
}
body#outside .v2-product-side .pi {
    padding: var(--v2-sp-2) var(--v2-sp-2);
    border-radius: var(--v2-r-sm);
    color: var(--v2-ink-dim);
    font-family: var(--v2-f-dis);
    font-size: 13px;
    font-weight: 500;
}
body#outside .v2-product-side .pi.a {
    background: var(--v2-yellow-soft);
    color: var(--v2-yellow-text);
    font-weight: 700;
}
body#outside .v2-product-title {
    font-family: var(--v2-f-dis);
    font-size: 20px;
    margin: 10px 0 4px;
    font-weight: 700;
    color: var(--v2-ink);
}
body#outside .v2-product-sub {
    color: var(--v2-ink-mute);
    font-size: 13px;
    margin-bottom: 16px;
}
body#outside .v2-product-chart {
    height: 180px;
    display: flex;
    align-items: flex-end;
    gap: var(--v2-sp-1);
    padding: var(--v2-sp-4);
    border-radius: var(--v2-r-md);
    background: var(--v2-glass);
}
body#outside .v2-product-chart i {
    flex: 1;
    background: linear-gradient(180deg, var(--v2-yellow), var(--v2-yellow-2));
    border-radius: 3px 3px 0 0;
}
body#outside .v2-product-orders {
    background: var(--v2-glass);
    border-radius: var(--v2-r-md);
    padding: var(--v2-sp-3);
    font-size: 12px;
}
body#outside .v2-product-orders .pr-h {
    font-family: var(--v2-f-mono);
    font-size: 11px;
    color: var(--v2-ink-mute);
    letter-spacing: 0.12em;
    margin-bottom: 10px;
}
body#outside .v2-product-orders .pr-row {
    display: flex;
    justify-content: space-between;
    padding: var(--v2-sp-2) 0;
    border-bottom: 1px solid var(--v2-line);
    color: var(--v2-ink-dim);
    font-size: 12px;
    font-family: var(--v2-f-dis);
}
body#outside .v2-product-orders .pr-row:last-child { border-bottom: 0; }
body#outside .v2-product-orders .pr-ok { color: var(--v2-ok-text); }
body#outside .v2-product-orders .pr-run { color: var(--v2-yellow-text); }

/* ============================================================
 *  v2 signin section (moved login form — below hero/marketing)
 * ============================================================ */
body#outside .v2-signin-section { padding: 60px 0 !important; scroll-margin-top: 80px; }
body#outside .v2-signin-wrap {
    max-width: 540px;
    margin: 0 auto;
    text-align: center;
}
body#outside .v2-signin-head h2 {
    font-family: var(--v2-f-dis);
    font-size: var(--v2-fs-fluid-2);
    line-height: var(--v2-lh-tight);
    margin: 12px 0 10px;
    font-weight: 800;
    color: var(--v2-ink);
}
body#outside .v2-signin-head h2 i {
    font-family: var(--v2-f-serif);
    font-style: italic;
    font-weight: 400;
    color: var(--v2-yellow);
}
body#outside .v2-signin-head p {
    color: var(--v2-ink-mute);
    font-size: 14px;
    margin: 0 0 28px;
    line-height: var(--v2-lh-body);
}
body#outside .v2-signin-wrap .login-card { text-align: left; padding: var(--v2-sp-7); }

/* ============================================================
 *  v2 CTA block (glass + radial gradient)
 * ============================================================ */
body#outside .v2-cta-block-section { padding: 80px 0 !important; }
body#outside .v2-cta-block {
    border-radius: var(--v2-r-xl);
    text-align: center;
    border: 1px solid var(--v2-line-strong);
    backdrop-filter: var(--v2-blur-strong);
    -webkit-backdrop-filter: var(--v2-blur-strong);
    box-shadow: var(--v2-shadow-2);
    max-width: 1100px;
    margin: 0 auto;
}
body#outside .v2-cta-block h2 {
    font-family: var(--v2-f-dis);
    margin: 16px 0 12px;
    line-height: 1;
    font-weight: 800;
    color: var(--v2-ink);
}
body#outside .v2-cta-block h2 i {
    font-family: var(--v2-f-serif);
    font-style: italic;
    font-weight: 400;
    color: var(--v2-yellow-text);
}
body#outside .v2-cta-block p {
    color: var(--v2-ink-dim);
    margin: 16px 0 0;
    font-size: 16px;
    line-height: var(--v2-lh-body);
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}
body#outside .v2-cta-actions {
    margin-top: 32px;
    display: flex;
    gap: var(--v2-sp-3);
    justify-content: center;
    flex-wrap: wrap;
}
body#outside .v2-cta-actions .btn.btn-lg {
    border-radius: var(--v2-r-pill);
}

/* ============================================================
 *  v2 brands strip — redesigned pill row with brand colors
 * ============================================================ */
body#outside .v2-brands-section {  position: relative; z-index: 2; }
body#outside .v2-brands-label {
    text-align: center;
    font-family: var(--v2-f-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--v2-ink-mute);
    text-transform: uppercase;
    margin-bottom: 20px;
}
body#outside .v2-brands-row {
    display: flex;
    gap: var(--v2-sp-2);
    margin: 0 auto;
}
body#outside .v2-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-2);
    padding: var(--v2-sp-2) var(--v2-sp-4) var(--v2-sp-2) var(--v2-sp-2);
    background: var(--v2-glass-2);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-pill);
    font-family: var(--v2-f-dis);
    font-size: 14px;
    font-weight: 500;
    color: var(--v2-ink-dim);
    transition: border-color var(--v2-t-base), background var(--v2-t-base), transform var(--v2-t-base), color var(--v2-t-base);
    backdrop-filter: var(--v2-blur);
    -webkit-backdrop-filter: var(--v2-blur);
}
body#outside .v2-brand:hover {
    transform: translateY(-3px);
    background: var(--v2-glass-3);
    color: var(--v2-ink);
    border-color: var(--v2-line-strong);
}
body#outside .v2-brand > i {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 14px;
    color: #fff;
    flex-shrink: 0;
}
body#outside .v2-brand.b-tg > i { background: #229ED9; }
body#outside .v2-brand.b-ig > i { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
body#outside .v2-brand.b-yt > i { background: #FF0033; }
body#outside .v2-brand.b-tt > i { background: #000000; border: 1px solid rgba(255,255,255,0.15); }
body#outside .v2-brand.b-fb > i { background: #1877F2; }
body#outside .v2-brand.b-wa > i { background: #25D366; }
body#outside .v2-brand.b-x > i { background: #000000; border: 1px solid rgba(255,255,255,0.15); }
body#outside .v2-brand.b-sp > i { background: #1DB954; }
html.light body#outside .v2-brand.b-tt > i,
html.light body#outside .v2-brand.b-x > i { background: #18181b; border-color: rgba(0,0,0,0.12); }

/* ============================================================
 *  v2 split section — stats on left + login form on right
 * ============================================================ */
body#outside .v2-split-section {
    padding: 60px 0 !important;
    position: relative;
    z-index: 2;
    scroll-margin-top: 80px;
}
body#outside .v2-split-wrap {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 48px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-xl);
    backdrop-filter: var(--v2-blur);
    -webkit-backdrop-filter: var(--v2-blur);
    position: relative;
    overflow: hidden;
}
body#outside .v2-split-wrap::before {
    content: "";
    position: absolute;
    top: -80px;
    right: -80px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, var(--v2-yellow-soft), transparent 70%);
    pointer-events: none;
    filter: blur(40px);
}
@media (max-width: 900px) {
    body#outside .v2-split-wrap { grid-template-columns: 1fr;  gap: var(--v2-sp-7); }
}
body#outside .v2-split-left { position: relative; z-index: 1; }
body#outside .v2-split-title {
    font-family: var(--v2-f-dis);
    line-height: var(--v2-lh-tight);
    margin: 12px 0 10px;
    font-weight: 800;
    color: var(--v2-ink);
}
body#outside .v2-split-title i {
    font-family: var(--v2-f-serif);
    font-style: italic;
    font-weight: 400;
    color: var(--v2-yellow-text);
}
body#outside .v2-split-desc {
    color: var(--v2-ink-dim);
    font-size: 14px;
    line-height: var(--v2-lh-body);
    max-width: 480px;
    margin: 0 0 26px;
}
body#outside .v2-split-metrics {
    display: grid;
}
body#outside .v2-split-metrics .m {
    border: 1px solid var(--v2-line);
}
body#outside .v2-split-metrics .n {
    font-family: var(--v2-f-dis);
    font-weight: 800;
}
body#outside .v2-split-metrics .l {
    font-family: var(--v2-f-mono);
    color: var(--v2-ink-mute);
    text-transform: uppercase;
}
body#outside .v2-split-rating {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-2);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-pill);
    flex-wrap: wrap;
}
body#outside .v2-split-rating .v2-stars {
    color: var(--v2-yellow);
    display: inline-flex;
    gap: 2px;
}
body#outside .v2-split-rating .v2-stars i { font-size: 13px; }
body#outside .v2-split-rating strong {
    font-family: var(--v2-f-dis);
    font-weight: 800;
    color: var(--v2-ink);
    font-size: 14px;
}
body#outside .v2-split-rating span {
    font-family: var(--v2-f-mono);
    font-size: 11px;
    color: var(--v2-ink-mute);
    letter-spacing: 0.08em;
}

body#outside .v2-split-right {
    position: relative;
    z-index: 1;
}
body#outside .v2-split-right .v2-signin-head { margin-bottom: 16px; }
body#outside .v2-split-login-title {
    font-family: var(--v2-f-dis);
    font-size: 26px;
    line-height: 1;
    margin: 8px 0 6px;
    font-weight: 800;
    color: var(--v2-ink);
}
/* A23 kept the bright accent for body#outside on the reasoning that the guest
   hero sits on the dark split panel. That holds for .v2-hero-h1 and .v2-auth-h1,
   which do — measured, they pass. It does not hold here: the login title is on
   the LIGHT half of the split, at 1.43:1. The reasoning was right and the scope
   was wrong. */
body#outside .v2-split-login-title i {
    font-family: var(--v2-f-serif);
    font-style: italic;
    font-weight: 400;
    color: var(--v2-yellow-text);
}
body#outside .v2-split-right .v2-signin-head p {
    color: var(--v2-ink-mute);
    font-size: 13px;
    margin: 0;
}
body#outside .v2-split-right .login-card {
    background: var(--v2-glass);
    border: 1px solid var(--v2-line-strong);
    backdrop-filter: var(--v2-blur);
    -webkit-backdrop-filter: var(--v2-blur);
}

/* ============================================================
 *  Centered section head (v2) — shared by reviews/FAQ/blog
 * ============================================================ */
body#outside .v2-section-head-center {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--v2-sp-3);
}
body#outside .v2-section-head-center .v2-eyebrow { margin: 0; }
body#outside .v2-section-head-center h2 {
    font-family: var(--v2-f-dis);
    font-size: var(--v2-fs-fluid-2);
    line-height: var(--v2-lh-tight);
    margin: 0;
    font-weight: 800;
    color: var(--v2-ink);
}
body#outside .v2-section-head-center h2 i {
    font-family: var(--v2-f-serif);
    font-style: italic;
    font-weight: 400;
    color: var(--v2-yellow-text);
}
body#outside .v2-section-head-center p {
    color: var(--v2-ink-dim);
    font-size: 14px;
    line-height: var(--v2-lh-body);
    margin: 0;
}

/* ============================================================
 *  v2 reviews section — restyled glass testimonial cards
 * ============================================================ */
body#outside .v2-reviews-section { padding: 80px 0 !important; position: relative; z-index: 2; }
body#outside .v2-reviews-section .review-item {
    background: var(--v2-glass-2);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-lg);
    backdrop-filter: var(--v2-blur);
    -webkit-backdrop-filter: var(--v2-blur);
    transition: border-color var(--v2-t-base), transform var(--v2-t-base);
}
body#outside .v2-reviews-section .review-item:hover {
    border-color: var(--v2-line-strong);
    transform: translateY(-3px);
}
body#outside .v2-reviews-section .review-item .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--v2-sp-3);
    border-bottom: 1px dashed var(--v2-line);
}
body#outside .v2-reviews-section .review-item .r-user {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-2);
    min-width: 0;
}
body#outside .v2-reviews-section .review-item .avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--v2-yellow), var(--v2-yellow-2));
    display: grid;
    place-items: center;
    font-family: var(--v2-f-dis);
    font-weight: 800;
    font-size: 16px;
    color: var(--v2-yellow-ink);
    box-shadow: 0 4px 12px var(--v2-yellow-soft);
}
body#outside .v2-reviews-section .review-item .name {
    font-family: var(--v2-f-dis);
    font-weight: 700;
    font-size: 14px;
    color: var(--v2-ink);
    min-width: 0;
}
body#outside .v2-reviews-section .review-item .name span {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-1);
    font-family: var(--v2-f-mono);
    font-size: 11px;
    color: var(--v2-ok-text);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-top: 2px;
}
body#outside .v2-reviews-section .review-item .rate {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-1);
    padding: var(--v2-sp-1) var(--v2-sp-2);
    border-radius: var(--v2-r-pill);
    background: var(--v2-yellow-soft);
    color: var(--v2-yellow-text);
    font-family: var(--v2-f-dis);
    font-weight: 700;
    font-size: 13px;
}
body#outside .v2-reviews-section .review-item .rate i { font-size: 11px; }
body#outside .v2-reviews-section .review-item .text p {
    color: var(--v2-ink-dim);
    margin: 0;
}

/* ============================================================
 *  v2 FAQ section — glass accordion
 * ============================================================ */
body#outside .v2-faq-section { padding: 80px 0 !important; position: relative; z-index: 2; }
body#outside .v2-faq-section .faq-ss-tabs { margin: 0; }
body#outside .v2-faq-section .home-ss-tab {
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-md);
    margin-bottom: 10px;
    overflow: hidden;
    transition: border-color var(--v2-t-base), background var(--v2-t-base);
    backdrop-filter: var(--v2-blur);
    -webkit-backdrop-filter: var(--v2-blur);
}
body#outside .v2-faq-section .home-ss-tab:hover { border-color: var(--v2-line-strong); }
body#outside .v2-faq-section .home-ss-tab.active { border-color: rgba(255, 214, 10, 0.28); background: var(--v2-yellow-soft); }
body#outside .v2-faq-section .ss-tab-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--v2-sp-3);
    padding: var(--v2-sp-4) var(--v2-sp-5);
    cursor: pointer;
}
body#outside .v2-faq-section .ss-tab-head .left-p,
body#outside .v2-faq-section .ss-tab-head h4 {
    font-family: var(--v2-f-dis);
    font-weight: 600;
    font-size: 14px;
    color: var(--v2-ink);
    margin: 0;
    flex: 1;
}
body#outside .v2-faq-section .ss-tab-head .right-p {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--v2-glass-2);
    border: 1px solid var(--v2-line);
    color: var(--v2-yellow);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    position: relative;
}
body#outside .v2-faq-section .ss-tab-head .right-p i { transition: opacity var(--v2-t-base); }
body#outside .v2-faq-section .ss-tab-head .right-p i.fa-angle-up { display: none; }
body#outside .v2-faq-section .home-ss-tab.active .ss-tab-head .right-p { background: var(--v2-yellow); color: var(--v2-yellow-ink); border-color: transparent; }
body#outside .v2-faq-section .home-ss-tab.active .ss-tab-head .right-p i.fa-angle-down { display: none; }
body#outside .v2-faq-section .home-ss-tab.active .ss-tab-head .right-p i.fa-angle-up { display: inline-flex; }

body#outside .v2-faq-section .ss-tab-content {
    padding: 0 var(--v2-sp-5) var(--v2-sp-4);
    color: var(--v2-ink-dim);
    font-size: 14px;
    line-height: 1.7;
    display: none;
}
body#outside .v2-faq-section .home-ss-tab.active .ss-tab-content { display: block; }

/* ============================================================
 *  v2 blog section — card grid
 * ============================================================ */
body#outside .v2-blog-section { padding: 80px 0 !important; position: relative; z-index: 2; }
body#outside .v2-blog-section .home-articles {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: var(--v2-sp-4);
    max-width: 1200px;
    margin: 0 auto;
}
@media (max-width: 900px) {
    body#outside .v2-blog-section .home-articles { grid-template-columns: 1fr; }
}
body#outside .v2-blog-section .home-articles > a {
    display: block;
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-lg);
    overflow: hidden;
    text-decoration: none !important;
    color: inherit;
    transition: border-color var(--v2-t-base), transform var(--v2-t-base), background var(--v2-t-base);
}
body#outside .v2-blog-section .home-articles > a:hover {
    border-color: var(--v2-line-strong);
    transform: translateY(-4px);
    background: var(--v2-glass-2);
}
body#outside .v2-blog-section .home-articles > a .blog-body {
    display: flex;
    flex-direction: column;
    height: 100%;
}
body#outside .v2-blog-section .home-articles .blog-image {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--v2-glass-2);
}
body#outside .v2-blog-section .home-articles .blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
body#outside .v2-blog-section .home-articles .blog-date {
    position: absolute;
    top: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-1);
    padding: var(--v2-sp-1) var(--v2-sp-3);
    border-radius: var(--v2-r-pill);
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-family: var(--v2-f-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
body#outside .v2-blog-section .home-articles .blog-area-text { padding: var(--v2-sp-5) var(--v2-sp-5); }
body#outside .v2-blog-section .home-articles .blog-area-text h2 {
    font-family: var(--v2-f-dis);
    font-size: 20px;
    font-weight: 700;
    line-height: var(--v2-lh-tight);
    margin: 0 0 8px;
    color: var(--v2-ink);
}
body#outside .v2-blog-section .home-articles .blog-area-text p {
    color: var(--v2-ink-dim);
    font-size: 13px;
    line-height: var(--v2-lh-body);
    margin: 0;
}
body#outside .v2-blog-section .blog-three {
    display: flex;
    flex-direction: column;
    gap: var(--v2-sp-3);
}
body#outside .v2-blog-section .blog-three > a {
    flex: 1;
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-md);
    overflow: hidden;
    display: flex;
    flex-direction: row;
    min-height: 100px;
    text-decoration: none !important;
    color: inherit;
    transition: border-color var(--v2-t-base), transform var(--v2-t-base), background var(--v2-t-base);
}
body#outside .v2-blog-section .blog-three > a:hover {
    border-color: var(--v2-line-strong);
    transform: translateY(-2px);
    background: var(--v2-glass-2);
}
body#outside .v2-blog-section .blog-three .blog-body {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 0;
    width: 100%;
}
body#outside .v2-blog-section .blog-three .blog-image { aspect-ratio: auto; height: 100%; }
body#outside .v2-blog-section .blog-three .blog-image img { width: 100%; height: 100%; object-fit: cover; }
body#outside .v2-blog-section .blog-three .blog-date {
    top: 8px;
    left: 8px;
    padding: var(--v2-sp-1) var(--v2-sp-2);
    font-size: 11px;
}
body#outside .v2-blog-section .blog-three .blog-area-text { padding: var(--v2-sp-3) var(--v2-sp-4); display: flex; flex-direction: column; justify-content: center; }
body#outside .v2-blog-section .blog-three .blog-area-text h2 {
    font-size: 14px;
    line-height: 1.3;
    margin: 0 0 4px;
}
body#outside .v2-blog-section .blog-three .blog-area-text p {
    font-size: 12px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
body#outside .v2-blog-section .btn.btn-primary.mt-5 {
    margin: 40px auto 0 !important;
    display: inline-flex;
    height: 48px;
    padding: 0 var(--v2-sp-6);
    border-radius: var(--v2-r-pill);
    font-size: 14px;
    text-align: center;
    justify-content: center;
}
body#outside .v2-blog-section .container { text-align: center; }
body#outside .v2-blog-section .row { text-align: left; }

/* ============================================================
 *  v2 payments strip — clean pills with Remix icons (no logos)
 * ============================================================ */
body#outside .v2-payments-section { padding: 60px 0 !important; position: relative; z-index: 2; }
body#outside .v2-payments-row {
    display: flex;
    justify-content: center;
    gap: var(--v2-sp-2);
    flex-wrap: wrap;
    max-width: 1100px;
    margin: 0 auto;
}
body#outside .v2-pay-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-2);
    padding: var(--v2-sp-3) var(--v2-sp-5);
    background: var(--v2-glass-2);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-pill);
    font-family: var(--v2-f-dis);
    font-size: 14px;
    font-weight: 600;
    color: var(--v2-ink);
    backdrop-filter: var(--v2-blur);
    -webkit-backdrop-filter: var(--v2-blur);
    transition: border-color var(--v2-t-base), transform var(--v2-t-base), background var(--v2-t-base);
}
body#outside .v2-pay-pill:hover {
    border-color: rgba(255, 214, 10, 0.30);
    background: var(--v2-glass-3);
    transform: translateY(-2px);
}
body#outside .v2-pay-pill > i {
    font-size: 20px;
    color: var(--v2-yellow);
}

/* ============================================================
 *  v2 brands strip (legacy social-marks override)
 * ============================================================ */
body#outside #social-marks .brands-area { max-width: 1000px; padding: var(--v2-sp-3) var(--v2-sp-5); }

/* Home header (signin landing hero) */
body#outside .home-header {
    padding: 80px 0 40px;
    position: relative;
    overflow: hidden;
}
body#outside .home-header .home-fade {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}
body#outside .home-header .hf-glow {
    position: absolute;
    width: 900px;
    height: 900px;
    top: -250px;
    left: -200px;
    background: radial-gradient(circle, var(--v2-yellow-soft), transparent 70%);
    filter: blur(100px);
}
body#outside .home-images {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
    opacity: 0.6;
}
body#outside .home-hero--image { position: absolute; }
body#outside .home-hero--image.left { top: 20%; left: -80px; max-width: 320px; }
body#outside .home-hero--image.right { bottom: 15%; right: -60px; max-width: 340px; }
body#outside .home-hero--image img { width: 100%; height: auto; display: block; }
body#outside .home-hero--image.floating {
    animation: v2-float 8s ease-in-out infinite;
}
@keyframes v2-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

body#outside .home-content-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-2);
    padding: var(--v2-sp-1) var(--v2-sp-3);
    border-radius: var(--v2-r-pill);
    background: var(--v2-yellow-soft);
    border: 1px solid rgba(255, 214, 10, 0.30);
    color: var(--v2-yellow);
    font-family: var(--v2-f-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 20px;
}
body#outside .home-content-badge .icon { font-size: 14px; }

body#outside .home-content h2 {
    font-family: var(--v2-f-dis);
    font-size: var(--v2-fs-fluid-3);
    font-weight: 800;
    line-height: var(--v2-lh-tight);
    color: var(--v2-ink);
    margin: 0 0 20px;
}
body#outside .home-content h2 .primary-color { color: var(--v2-yellow); }
body#outside .home-content p {
    color: var(--v2-ink-dim);
    font-size: 14px;
    line-height: 1.7;
    max-width: 540px;
    margin: 0 0 24px;
}
body#outside .home-content .btn.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-2);
    padding: 0 var(--v2-sp-6);
    height: 50px;
    border-radius: var(--v2-r-pill);
    font-family: var(--v2-f-dis);
    font-weight: 600;
    font-size: 14px;
    background: var(--v2-yellow);
    color: var(--v2-yellow-ink);
    border: 0;
    text-decoration: none !important;
    transition: background var(--v2-t-fast), transform var(--v2-t-fast), box-shadow var(--v2-t-base);
}
body#outside .home-content .btn.btn-primary:hover {
    background: #ffe24a;
    transform: translateY(-1px);
    box-shadow: 0 12px 30px -10px var(--v2-yellow-glow);
}
body#outside .home-content .btn-signup,
body#outside .btn.btn-signup {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-2);
    padding: 0 var(--v2-sp-6);
    height: 50px;
    border-radius: var(--v2-r-pill);
    font-family: var(--v2-f-dis);
    font-weight: 600;
    font-size: 14px;
    background: var(--v2-glass-2);
    color: var(--v2-ink);
    border: 1px solid var(--v2-line-strong);
    text-decoration: none !important;
    transition: background var(--v2-t-fast);
}
body#outside .home-content .btn-signup:hover,
body#outside .btn.btn-signup:hover {
    background: var(--v2-glass-3);
    color: var(--v2-ink);
}

/* Social marks strip (platform icons row) */
body#outside #social-marks {
    padding: var(--v2-sp-7) 0 var(--v2-sp-2);
    position: relative;
    z-index: 2;
}
body#outside .brands-area {
    max-width: 1240px;
    margin: 0 auto;
    padding: var(--v2-sp-4) var(--v2-sp-6);
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-lg);
    backdrop-filter: var(--v2-blur);
    -webkit-backdrop-filter: var(--v2-blur);
}
body#outside .brands-top-active {
    display: flex;
    flex-wrap: wrap;
    gap: var(--v2-sp-2);
    justify-content: center;
}
body#outside .brands-item {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-2);
    padding: var(--v2-sp-2) var(--v2-sp-4);
    background: var(--v2-glass-2);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-pill);
    color: var(--v2-ink-dim);
    font-family: var(--v2-f-dis);
    font-size: 13px;
    font-weight: 500;
    transition: background var(--v2-t-fast), color var(--v2-t-fast), transform var(--v2-t-fast);
}
body#outside .brands-item:hover {
    background: var(--v2-glass-3);
    color: var(--v2-ink);
    transform: translateY(-2px);
}
body#outside .brands-icon {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--v2-yellow-soft);
    color: var(--v2-yellow);
    font-size: 12px;
}

/* Counter section */
body#outside .m-counter { padding: 40px 0; }
body#outside .infoDetail {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--v2-sp-4);
}
@media (max-width: 700px) {
    body#outside .infoDetail { grid-template-columns: 1fr; }
}
body#outside .infoDetail .item {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-3);
    padding: var(--v2-sp-4) var(--v2-sp-5);
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-md);
    backdrop-filter: var(--v2-blur);
    -webkit-backdrop-filter: var(--v2-blur);
}
body#outside .infoDetail .item .icon {
    width: 80px;
    height: 80px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
body#outside .infoDetail .item .icon lottie-player { max-width: 80px; max-height: 80px; }
body#outside .infoDetail .item .text {
    font-family: var(--v2-f-dis);
    font-size: 26px;
    font-weight: 800;
    color: var(--v2-ink);
    line-height: var(--v2-lh-tight);
}
body#outside .infoDetail .item .text > span { display: flex; align-items: center; gap: var(--v2-sp-2); }
body#outside .infoDetail .item .text small {
    display: block;
    font-family: var(--v2-f-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--v2-ink-mute);
    margin-top: 4px;
    font-weight: 500;
}
body#outside .infoDetail .blob.blob-red {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--v2-danger);
    box-shadow: 0 0 10px var(--v2-danger);
    animation: v2-pulse 2s infinite;
}
@keyframes v2-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.7; }
}

/* Home feature cards (4-up grid) */
body#outside .home-1-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--v2-sp-3);
    margin: 0;
}
@media (max-width: 991px) { body#outside .home-1-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { body#outside .home-1-cards { grid-template-columns: 1fr; } }
body#outside .home-1-cards > [class*="col-"] { padding: 0; }
body#outside .home-1-card {
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-lg);
    padding: 0;
    height: 100%;
    transition: border-color var(--v2-t-fast), transform var(--v2-t-fast), background var(--v2-t-fast);
}
body#outside .home-1-card:hover {
    border-color: var(--v2-line-strong);
    transform: translateY(-4px);
    background: var(--v2-glass-2);
}
body#outside .home-1-card .card-body { padding: var(--v2-sp-6); }
body#outside .home-1-card .icon-box {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--v2-r-sm);
    background: var(--v2-yellow-soft);
    color: var(--v2-yellow);
    font-size: 20px;
    margin-bottom: 16px;
}
body#outside .home-1-title {
    font-family: var(--v2-f-dis);
    font-size: 20px;
    font-weight: 700;
    color: var(--v2-ink);
    margin: 0 0 6px;
}
body#outside .home-1-text {
    color: var(--v2-ink-dim);
    font-size: 13px;
    line-height: var(--v2-lh-body);
    margin: 0;
}

/* Generic h-section spacing */
body#outside .h-section { padding: 48px 0; }
body#outside .h-section.section-0 { padding: var(--v2-sp-6) 0; }

/* FAQ page */
/* A103 · บล็อก `body#outside .faq-ss-tabs` เดิมถูกลบ — มันเขียนไว้กับ markup คนละชุด
   `.ss-tab-head .text` และ `.ss-tab-body` ไม่มีอยู่ใน faq.twig เลย (ของจริงคือ `h4.left-p`
   กับ `.ss-tab-content`) จึงไม่เคยจับอะไร ส่วนที่เหลือถูกกฎ A103 ท้ายไฟล์ทับที่ specificity
   เท่ากัน ปล่อยไว้ก็เป็นแค่ฝาแฝดที่รอหลอกคนอ่านคนต่อไป */

/* Terms / About — generic content wrappers */
body#outside .page-outside,
body#dash .page-outside { max-width: var(--v2-rail); margin: 0 auto; padding: 0 var(--v2-sp-2); }

/* Read-before list (neworder right panel + faq) */
body#dash .read-before-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--v2-sp-2);
}
body#dash .read-before-list li {
    padding: var(--v2-sp-3) var(--v2-sp-3);
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-sm);
    color: var(--v2-ink-dim);
    font-size: 13px;
    line-height: var(--v2-lh-body);
}

/* faq.twig nav-item button width (was inline <style>) */
body#outside .nav-item button,
body#dash .nav-item button { width: 100%; }

/* Signin landing — hero CTA gap (was inline style="gap:10px") */
body#outside .home-ctas {
    display: flex;
    gap: var(--v2-sp-2);
    flex-wrap: wrap;
    padding-top: var(--v2-sp-5);
}

/* ============================================================
 *  updates.twig — service-update feed
 * ============================================================ */
body#dash .updates-item-wrapper,
body#outside .updates-item-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--v2-sp-2);
}
/* A87 · แยก dash ออกจากกฎนี้ — ฝั่ง dash ถูกบล็อก "ไทม์ไลน์เป็นแถว" ท้ายไฟล์
   เขียนทับ background / border / border-radius / padding ครบทุกบรรทัดอยู่แล้ว
   ปล่อยรวมไว้จะเป็น declaration ที่ตายฝั่งเดียว ซึ่งอ่านไม่ออกว่าตั้งใจหรือหลงเหลือ
   ‼ guest ยังใช้หน้าตาการ์ดเดิม ห้ามลบทั้งกฎ */
body#outside .updates-item {
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-md);
    padding: var(--v2-sp-3) var(--v2-sp-4);
    transition: border-color var(--v2-t-fast), background var(--v2-t-fast);
}
body#dash .updates-item {
    transition: border-color var(--v2-t-fast), background var(--v2-t-fast);
}
body#dash .updates-item:hover,
body#outside .updates-item:hover {
    background: var(--v2-glass-2);
    border-color: var(--v2-line-strong);
}
body#dash .updates-item-top,
body#outside .updates-item-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--v2-sp-3);
    padding-bottom: var(--v2-sp-2);
    margin-bottom: 10px;
    border-bottom: 1px dashed var(--v2-line);
    flex-wrap: wrap;
}
body#dash .uit-first,
body#outside .uit-first { display: flex; align-items: center; gap: var(--v2-sp-3); flex: 1; min-width: 0; flex-wrap: wrap; }
body#dash .updates-id,
body#outside .updates-id {
    font-family: var(--v2-f-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--v2-yellow);
    background: var(--v2-yellow-soft);
    padding: var(--v2-sp-1) var(--v2-sp-2);
    border-radius: var(--v2-r-xs);
    flex-shrink: 0;
}
body#dash .updates-title,
body#outside .updates-title {
    color: var(--v2-ink);
    font-family: var(--v2-f-dis);
    font-weight: 600;
    font-size: 13px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
body#dash .uit-last .btn,
body#outside .uit-last .btn {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    background: var(--v2-glass-2);
    border: 1px solid var(--v2-line);
    color: var(--v2-yellow);
}
body#dash .uit-last .btn:hover,
body#outside .uit-last .btn:hover { background: var(--v2-yellow-soft); color: var(--v2-yellow); }

body#dash .updates-item-bottom,
body#outside .updates-item-bottom {
    display: flex;
    justify-content: space-between;
    gap: var(--v2-sp-3);
    flex-wrap: wrap;
    font-family: var(--v2-f-mono);
    font-size: 12px;
    color: var(--v2-ink-mute);
    align-items: center;
}
body#dash .uib-first span,
body#outside .uib-first span { display: inline-flex; align-items: center; gap: var(--v2-sp-1); }
body#dash .uib-first .added,
body#outside .uib-first .added { color: var(--v2-ok-text); }
body#dash .uib-first .removed,
body#outside .uib-first .removed { color: var(--v2-danger-text); }
body#dash .uib-first .decreased,
body#outside .uib-first .decreased { color: var(--v2-ok-text); }
/* ─── A87 · D3 · แถวอัปเดตให้ตรงคอลัมน์ (ดีไซน์ Panel D · D3) ──────────────
   ‼ อาการที่วัดได้: ป้ายสถานะกับวันที่ **ไม่ตรงกันสักแถว** เพราะแถวเป็น flex
     `space-between` สองชั้นซ้อนกัน ตำแหน่งจึงขึ้นกับความยาวชื่อบริการของแถวนั้น ๆ
     กวาดตาลงมาเทียบสถานะไม่ได้เลย ซึ่งเป็นเหตุผลเดียวที่คนเปิดหน้านี้
   ‼ `.updates-item-wrapper` มีอยู่แล้วในเทมเพลต ไม่ต้องแก้ twig
   ‼ เก็บ `.uit-last` / `.uib-last` ไว้เป็นช่อง ไม่ละลาย (บทเรียน A80 · .btn-report)
   ‼ ต่ำกว่า 1100 กลับไปเป็นบล็อกเดิม */
@media (min-width: 1100px) {
    body#dash .updates-item-wrapper .updates-item,
    body#outside .updates-item-wrapper .updates-item {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) 44px 200px 116px;
        column-gap: 14px;
        align-items: center;
    }
    body#dash .updates-item-wrapper .updates-item-top,
    body#outside .updates-item-wrapper .updates-item-top,
    body#dash .updates-item-wrapper .uit-first,
    body#outside .updates-item-wrapper .uit-first,
    body#dash .updates-item-wrapper .updates-item-bottom,
    body#outside .updates-item-wrapper .updates-item-bottom,
    body#dash .updates-item-wrapper .uib-first,
    body#outside .updates-item-wrapper .uib-first { display: contents; }

    /* เส้นประคั่นบน/ล่างไม่มีความหมายแล้วเมื่อทุกอย่างอยู่แถวเดียว */
    body#dash .updates-item-wrapper .updates-item-top,
    body#outside .updates-item-wrapper .updates-item-top {
        border-bottom: 0; margin-bottom: 0; padding-bottom: 0;
    }
    body#dash .updates-item-wrapper .updates-id,
    body#outside .updates-item-wrapper .updates-id { grid-column: 1; justify-self: start; }
    body#dash .updates-item-wrapper .updates-title,
    body#outside .updates-item-wrapper .updates-title { grid-column: 2; white-space: nowrap; }
    body#dash .updates-item-wrapper .uit-last,
    body#outside .updates-item-wrapper .uit-last { grid-column: 3; display: flex; justify-content: center; }
    body#dash .updates-item-wrapper .uib-first > span,
    body#outside .updates-item-wrapper .uib-first > span { grid-column: 4; }
    body#dash .updates-item-wrapper .uib-last,
    body#outside .updates-item-wrapper .uib-last { grid-column: 5; text-align: right; font-variant-numeric: tabular-nums; }
    body#dash .updates-item-wrapper .uit-last .btn,
    body#outside .updates-item-wrapper .uit-last .btn { width: 32px; height: 32px; }
    body#dash .updates-item-wrapper .updates-item,
    body#outside .updates-item-wrapper .updates-item { padding: var(--v2-sp-2) var(--v2-sp-4); }
}

body#dash .uib-first .increased,
body#outside .uib-first .increased { color: var(--v2-warn-text); }
body#dash .uib-last span,
body#outside .uib-last span { color: var(--v2-ink-dim); font-family: var(--v2-f-dis); font-weight: 600; font-size: 12px; }

/* ============================================================
 *  childpanel.twig + childpanel_order.twig
 * ============================================================ */
body#dash .child-item {
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-md);
    padding: var(--v2-sp-4) var(--v2-sp-4);
    transition: border-color var(--v2-t-fast), background var(--v2-t-fast);
}
body#dash .child-item:hover {
    background: var(--v2-glass-2);
    border-color: var(--v2-line-strong);
}
body#dash .child-item-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--v2-sp-3);
    padding-bottom: var(--v2-sp-2);
    margin-bottom: 10px;
    border-bottom: 1px dashed var(--v2-line);
    flex-wrap: wrap;
}
body#dash .cit-first { flex: 1; min-width: 0; }
body#dash .child-title {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-2);
    font-family: var(--v2-f-dis);
    font-weight: 700;
    color: var(--v2-ink);
    font-size: 14px;
}
body#dash .child-title > i {
    color: var(--v2-yellow);
    font-size: 16px;
}
body#dash .child-item-bottom {
    display: flex;
    justify-content: space-between;
    gap: var(--v2-sp-3);
    flex-wrap: wrap;
    font-family: var(--v2-f-mono);
    font-size: 12px;
    color: var(--v2-ink-mute);
    align-items: center;
}
body#dash .cib-first {
    display: flex;
    gap: var(--v2-sp-4);
    flex-wrap: wrap;
    align-items: center;
}
body#dash .cib-first .item {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-1);
}
body#dash .cib-first .item strong {
    color: var(--v2-ink-dim);
    font-family: var(--v2-f-dis);
    font-weight: 600;
    font-size: 12px;
}
body#dash .cib-first .item span:last-child {
    color: var(--v2-ink);
    font-family: var(--v2-f-dis);
    font-weight: 600;
    font-size: 12px;
}

/* ============================================================
 *  refunds.twig — Bootstrap 3-style refunds list
 * ============================================================ */
/* A48 · body#dash เอาออกจากลิสต์ — โทน info ของฝั่ง authed มาจากบล็อก A48 แล้ว
   กฎนี้เก็บไว้ให้ refunds.twig ฝั่ง guest เหมือนเดิม */
body#outside .alert-info {
    background: var(--v2-yellow-soft) !important;
    border-color: rgba(255, 214, 10, 0.25) !important;
    color: var(--v2-ink) !important;
}
body#dash .btn.btn-default,
body#outside .btn.btn-default {
    background: var(--v2-glass-2);
    border: 1px solid var(--v2-line-strong);
    color: var(--v2-ink);
    padding: var(--v2-sp-2) var(--v2-sp-4);
    border-radius: var(--v2-r-sm);
    font-family: var(--v2-f-dis);
    font-weight: 600;
    font-size: 14px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--v2-t-fast);
}
body#dash .btn.btn-default:hover,
body#outside .btn.btn-default:hover { background: var(--v2-glass-3); }

/* Bootstrap 3 well-float used in refunds */
body#dash .well.well-float,
body#outside .well.well-float {
    margin-top: 14px;
    padding: var(--v2-sp-1);
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-lg);
    box-shadow: none;
    overflow-x: auto;
}

/* Bootstrap 3 nav-pills used on refunds (with pull-right search) */
body#dash ul.nav.nav-pills .pull-right,
body#outside ul.nav.nav-pills .pull-right {
    margin-left: auto;
    list-style: none;
}
body#dash ul.nav.nav-pills .pull-right form,
body#outside ul.nav.nav-pills .pull-right form {
    display: flex;
    gap: var(--v2-sp-1);
    margin: 0;
}
body#dash ul.nav.nav-pills .pull-right .form-control {
    height: 40px;
    padding: 0 var(--v2-sp-3);
    border-radius: var(--v2-r-pill);
    font-size: 13px;
}
body#dash ul.nav.nav-pills .pull-right .btn {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
}

/* ============================================================
 *  confirmsemail.twig
 * ============================================================ */
body#dash .confirm-email__description,
body#outside .confirm-email__description {
    font-size: 14px;
    color: var(--v2-ink-dim);
    line-height: 1.7;
    text-align: center;
    padding: var(--v2-sp-5) var(--v2-sp-3);
}
body#dash .confirm-email__description div + div {
    margin-top: 8px;
    color: var(--v2-ink);
    font-weight: 500;
}
body#dash .confirm-email__action,
body#outside .confirm-email__action {
    display: flex;
    justify-content: center;
    gap: var(--v2-sp-2);
    flex-wrap: wrap;
    padding: var(--v2-sp-2) 0;
}

/* ============================================================
 *  account.twig — change-email modal + password fields
 * ============================================================ */
body#dash span.form-control[disabled] {
    background: var(--v2-glass-2);
    color: var(--v2-ink-dim);
    font-family: var(--v2-f-mono);
    cursor: default;
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: var(--v2-sp-3) var(--v2-sp-3);
}

/* ============================================================
 *  blogs.twig + blogpost.twig — article cards
 * ============================================================ */
/*  A123 · max-width 960 ถูกลบ ให้ตกลงมาที่รางกลาง ไม่มีเหตุผลให้แคบกว่าเพื่อน */
body#outside .blog-item,
body#dash .blog-item {
    display: block;
    padding: var(--v2-sp-4);
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-lg);
    margin-bottom: 14px;
    text-decoration: none !important;
    color: var(--v2-ink);
    transition: background var(--v2-t-fast), border-color var(--v2-t-fast), transform var(--v2-t-fast);
}
body#outside .blog-item:hover,
body#dash .blog-item:hover {
    background: var(--v2-glass-2);
    border-color: var(--v2-line-strong);
    transform: translateY(-2px);
}

/* blogpost image (was inline style) */
body#outside .blogpost-img,
body#dash .blogpost-img {
    border-radius: var(--v2-r-md);
    max-width: 700px;
    margin: 0 auto;
    display: block;
}

/* blog cards */
body#outside .card.blog-card,
body#dash .card.blog-card {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: border-color var(--v2-t-fast), transform var(--v2-t-fast), background var(--v2-t-fast);
}
body#outside .card.blog-card:hover,
body#dash .card.blog-card:hover {
    border-color: var(--v2-line-strong);
    transform: translateY(-4px);
    background: var(--v2-glass-2);
}
body#outside .blog-image,
body#dash .blog-image {
    aspect-ratio: 16 / 9;
    background: var(--v2-glass-2);
    overflow: hidden;
    position: relative;
}
body#outside .blog-image img,
body#dash .blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* A75 · G2 · การ์ดรายการบทความ (ดีไซน์ Panel G · G2)
   ‼ ทำเวอร์ชัน **สี่ฟิลด์** ตามที่ดีไซน์อนุญาตไว้เอง: `blog.twig` ส่งมาแค่
     image · title · url · created — ชิปหมวด เวลาที่ใช้อ่าน และคำโปรย **ไม่มีฟิลด์รองรับ**
     ดีไซน์เขียนไว้เองว่า "ถ้ายังไม่พร้อมเพิ่มฟิลด์ ให้ตัดสามอย่างนี้ออกได้ การ์ดยังใช้งานได้ปกติ"
   ‼ ห้ามคำนวณ "อ่าน N นาที" จากความยาว content แล้วเอามาโชว์ — นั่นคือตัวเลขที่เดา */
body#outside .blog-content,
body#dash .blog-content {
    padding: 18px;        /* ดีไซน์ระบุ 18 — --v2-sp-5 คือ 20 ไม่มี token ที่เท่ากับ 18 */
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
}
/* วันที่ขึ้นก่อนหัวข้อตามดีไซน์ — สลับด้วย order ไม่ต้องแก้ twig
   และเลิกเป็น mono/uppercase: มันคือวันที่ภาษาไทย tracking ทำให้สระหลุด */
body#outside .blog-date,
body#dash .blog-date {
    order: -1;
    padding: 0;
    font-family: var(--v2-f-thai);
    font-size: 11px;
    line-height: 1.45;
    color: var(--v2-ink-mute);
    letter-spacing: normal;
    text-transform: none;
    font-variant-numeric: tabular-nums;
}
body#outside .blog-title,
body#dash .blog-title {
    font-family: var(--v2-f-dis);
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: -0.01em;
    margin: 9px 0 0;
}
body#outside .blog-title a,
body#dash .blog-title a { color: var(--v2-ink); text-decoration: none !important; }
body#outside .blog-title a:hover,
body#dash .blog-title a:hover { color: var(--v2-yellow-text); }

/* ปุ่ม "อ่านบทความ" — ดีไซน์ให้เป็น **ลิงก์สีเน้น** ไม่ใช่ปุ่มเหลืองเต็มความกว้าง
   ‼ markup เป็น <button class="btn btn-primary btn-sm"> ซึ่งแก้ไม่ได้โดยไม่แตะ twig
     จึงถอดหน้าตาปุ่มออกด้วย CSS แทน — กดแล้วยังไปหน้าเดิม (onclick เดิมไม่ถูกแตะ)
   ‼ เหลืองเต็มความกว้างในการ์ดทุกใบทำให้ตากระโดดไปที่ปุ่มก่อนหัวข้อ ซึ่งกลับด้าน */
body#outside .blog-card .btn.btn-sm,
body#dash .blog-card .btn.btn-sm {
    align-self: flex-start;
    width: auto;
    /* A76 · ‼ เคยมี `min-height: 0` ตรงนี้ มันไปฆ่ากฎ tap target ของเว็บทิ้ง
       (`@media (max-width:991px) { body#dash .btn, body#outside .btn { min-height:44px } }`)
       วัดบนกรอบ 390 ได้ 54x32 — เล็กกว่าเกณฑ์ 44 บนปุ่มหลักของการ์ดบทความทุกใบ
       เดสก์ท็อปไม่มีกฎ min-height เลย ถอดบรรทัดนี้ออกจึงไม่กระทบ 1440 */
    height: auto;
    margin-top: auto;
    padding: 16px 0 0;
    border: 0;
    border-radius: 0;
    /* A76 · ถอด !important ทั้งสามตัวออกหลังแก้ที่ต้นทางแล้ว วัดบนหน้าจริงยืนยัน
       background: คู่แข่งสูงสุดคือ `body#dash .btn.btn-primary` (1,2,1) แพ้กฎนี้ (1,3,1)
                   ส่วนกลุ่ม !important ฝั่ง guest กันการ์ดบทความออกไปแล้วที่ A75
       box-shadow: `.btn` บังคับ none !important อยู่แล้ว บรรทัดนี้ไม่เคยทำอะไรเลย ลบทิ้ง
       ‼ A118 · บรรทัด `color` ถูกย้ายออกไปอยู่กฎข้างล่าง — คำอธิบายเดิมตรงนี้
         เทียบ specificity กับคู่แข่งฝั่ง body#dash อย่างเดียว (1,2,2) แล้วสรุปว่าชนะ
         แต่ฝั่ง guest คู่แข่งคือ `html body#outside .btn.btn-primary:not(...)`
         ซึ่ง :not() บวกน้ำหนักของอาร์กิวเมนต์เข้าไปด้วย กลายเป็น (1,3,2) และชนะ
         กฎนี้ (1,3,1)  ผลคือบน /blog ปุ่ม "อ่านต่อ" ได้ color: yellow-ink
         (เกือบดำ) บนพื้นโปร่งของการ์ดสีเข้ม — วัด contrast ได้ **1.01** */
    background: none;
    font-family: var(--v2-f-dis);
    font-size: 12.5px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
/*  A118 · สีของปุ่ม "อ่านต่อ" ย้ายมาอยู่ที่นี่ ไม่ได้เพิ่มของใหม่ —
    บรรทัด color ถูกถอดออกจากกฎข้างบนแล้ว เพราะที่นั่นมันแพ้และเป็น declaration ตาย

    ‼ ครั้งแรกเขียนเป็น `html body#outside .blog-card .btn.btn-sm.btn-primary`
      แล้วนึกว่าพอ  วัดหลัง deploy ได้ contrast 1.06 เท่าเดิม
      คู่แข่งจริงคือ `html body#outside .btn.btn-primary:not(.signup-header .btn-primary)`
      ซึ่ง :not() บวกน้ำหนักของอาร์กิวเมนต์ (0,2,0) เข้าไปด้วย รวมเป็น (1,4,2)
      **เสมอกันเป๊ะ** กับของเดิมที่ผมเขียน และมันอยู่ท้ายไฟล์กว่า จึงชนะ
      เติม `.blog-content` (คลาสของกล่องที่ปุ่มอยู่จริง) เป็น (1,5,2) จึงชนะขาด
    บทเรียน: เทียบ specificity แล้วต้อง **วัดซ้ำหลัง deploy** เสมอ
    เลขที่คำนวณในหัวพลาดได้ตรงที่ :not() ซึ่งไม่ได้นับเป็นศูนย์ */
html body#outside .blog-card .blog-content .btn.btn-sm.btn-primary,
html body#dash .blog-card .blog-content .btn.btn-sm.btn-primary {
    color: var(--v2-yellow-text);
}
body#outside .blog-card .btn.btn-sm::after,
body#dash .blog-card .btn.btn-sm::after {
    content: "\f061";              /* arrow-right */
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    font-size: 10px;
}
body#outside .blog-card .btn.btn-sm:hover,
body#dash .blog-card .btn.btn-sm:hover { filter: brightness(1.2); transform: none; }

/* Child panel extras (card-child, child-support, cs-image)
   A89 · C3 · การ์ดช่วยเหลือเป็นการ์ดธรรมดา ไม่ใช่แผ่นเหลือง-ม่วง
   ‼ หน้านี้เป็นหน้าขายของ เหลืองถูกจองให้ปุ่ม "สั่งซื้อ" ในการ์ดสรุปตัวเดียว
     ก่อนแก้: เหลืองบนหน้าเดียวกันหกที่ — ช่องราคา readonly, พื้นการ์ดช่วยเหลือ,
     ชิปไอคอนหูฟัง, ปุ่ม submit, เมนูข้างที่เลือกอยู่, การ์ดยอดคงเหลือ */
body#dash .card.card-child,
body#outside .card.card-child {
    padding: var(--v2-sp-4);
    background: linear-gradient(180deg, var(--adv-panel-top), var(--adv-panel-bot));
    border: 1px solid var(--adv-panel-line);
    border-radius: var(--v2-r-lg);
    margin-top: 12px;
}
body#dash .child-support,
body#outside .child-support {
    display: flex;
    align-items: flex-start;
    gap: var(--v2-sp-4);
    padding: 0;   /* ‼ กฎฐาน L6046 ใส่ 35px var(--v2-sp-6) ซ้อนกับ padding ของ .card-child */
    color: var(--v2-ink);
    font-size: 13px;
}
/* ‼ `position: static` ไม่ใช่ของฟุ่มเฟือย — กฎฐาน L6060 ตั้ง
   `.child-support .cs-image { position:absolute; bottom:0; right:0; width:175px }`
   เพราะเดิมมันเป็นภาพประกอบ 175px มุมการ์ด กฎ v2 เปลี่ยนเป็นชิปไอคอน 44px แต่ไม่เคย
   ยกเลิก absolute ชิปจึงไปนั่งมุมล่างขวาการ์ด ไม่ได้นำหน้าข้อความตามที่ markup เขียนไว้
   (วัดบนหน้าจริง 2026-08-10: chip x=1306 ขณะที่ข้อความเริ่มที่ x=956) */
body#dash .cs-image,
body#outside .cs-image {
    position: static;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: var(--v2-r-md);
    background: var(--adv-inner);
    color: var(--v2-ink-dim);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}
body#dash .cs-text,
body#outside .cs-text { flex: 1; min-width: 0; }
body#dash .cs-text h4,
body#outside .cs-text h4 {
    font-family: var(--v2-f-dis);
    font-size: 16px;
    font-weight: 700;
    color: var(--v2-ink);
    margin: 0 0 4px;
}
body#dash .cs-text p,
body#outside .cs-text p {
    font-size: 12px;
    color: var(--v2-ink-dim);
    margin: 0 0 10px;
    line-height: 1.5;
}

/* Nameservers block — A89 · C3 · เป็นกล่องคำอธิบายใต้ช่องโดเมน ไม่ใช่การ์ดคนละคอลัมน์
   ‼ ไอคอนกับข้อความอยู่คนละแถวเพราะ grid เป็น 1 คอลัมน์ ทำให้โลกใบใหญ่ลอยอยู่ข้างบน
     ตอนนี้เป็น auto + 1fr ไอคอนนำหน้าแบบกล่องข้อมูลทั่วเว็บ
   ‼ mono ใช้กับ "ตัวเลข/โดเมน" เท่านั้น ย้ายไปที่ <li> ตัวอธิบายเป็นไทยจึงกลับไปใช้ฟอนต์ไทย */
body#dash .nameservers,
body#outside .nameservers {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--v2-sp-3);
    align-items: start;
    margin: 0 0 var(--v2-sp-4);
    padding: var(--v2-sp-4);
    background: var(--adv-inner);
    border: 1px solid var(--adv-inner-line);
    border-radius: var(--v2-r-md);
    font-family: var(--v2-f-thai);
    font-size: 12.5px;
    line-height: var(--v2-lh-body);
    color: var(--v2-ink-dim);
}
body#dash .nameservers > .fa-globe,
body#outside .nameservers > .fa-globe {
    font-size: 15px;
    line-height: 1.55;
    color: var(--v2-ink-mute);
}
body#dash .nameservers p,
body#outside .nameservers p { margin: 0 0 var(--v2-sp-2); }
body#dash .nameservers ul,
body#outside .nameservers ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
body#dash .nameservers li,
body#outside .nameservers li {
    font-family: var(--v2-f-mono);
    font-size: 13px;
    color: var(--v2-ink);
    list-style: none;
}
body#dash .nameservers li .fa-dot-circle,
body#outside .nameservers li .fa-dot-circle { color: var(--v2-yellow); font-size: 10px; margin-right: 5px; }

/* ---------- A89 · C3 · ฟอร์มสั่ง child panel (ดีไซน์ Panel C · C3) ----------
   ‼ ปุ่ม submit ย้ายไปอยู่ในการ์ดสรุปคอลัมน์ขวา <form> ใน twig จึงครอบทั้งแถว
   ‼ ราคาเดิมเป็น `#price[readonly]` ทาพื้น --adv-stub-bg สูง 56 ตัวหนา 20px
     ซึ่งทำให้ของที่อ่านอย่างเดียวเป็นวัตถุที่โดดที่สุดในหน้า กฎนั้นถูกลบพร้อม element */
body#dash .cpo-grid { display: grid; grid-template-columns: 1fr; gap: 0 var(--v2-sp-4); }
@media (min-width: 992px) {
    body#dash .cpo-grid { grid-template-columns: 1fr 1fr; }
}
body#dash .cpo-summary { position: sticky; top: var(--v2-sp-4); }
body#dash .cpo-sum-k {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--v2-ink-mute);
}
body#dash .cpo-sum-v {
    font-family: var(--v2-f-dis);
    font-size: 34px;
    font-weight: 800;
    line-height: var(--v2-lh-tight);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--v2-ink);
    margin: 6px 0 var(--v2-sp-5);
    padding-bottom: var(--v2-sp-5);
    border-bottom: 1px solid var(--adv-hair);
}
body#dash .cpo-summary .btn.btn-primary {
    width: 100%;
    height: 52px;
    justify-content: center;
    border-radius: var(--v2-r-md);
    font-size: 14.5px;
    font-weight: 700;
}

/* fw-600 utility (used in some pages) */
body#dash .fw-600 { font-weight: 600; }

/* "first" modifier on some pills */
body#dash .first,
body#outside .first { font-weight: 700; }

/* d-icon (used for info badges) */
body#dash .d-icon,
body#outside .d-icon {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--v2-yellow-soft);
    color: var(--v2-yellow);
    font-size: 12px;
}
body#dash .d-icon.i-info::before,
body#outside .d-icon.i-info::before { content: "i"; font-family: var(--v2-f-dis); font-weight: 700; }
body#dash .me-2, body#outside .me-2 { margin-right: 8px; }

/* ============================================================
 *  Misc utility — align with legacy classes used in twigs
 * ============================================================ */
body#dash .mr-1 { margin-right: 4px; }
body#dash .mr-2 { margin-right: 8px; }
body#dash .pl-1 { padding-left: var(--v2-sp-1); }
body#dash .pl-2 { padding-left: var(--v2-sp-2); }
body#dash .pr-1 { padding-right: var(--v2-sp-1); }
body#dash .pr-2 { padding-right: var(--v2-sp-2); }
/* `body#dash .mt-3 { margin-top: 12px }` was here and could never have worked:
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
body#dash .mt-4 { margin-top: 16px; }
body#dash .mt-5 { margin-top: 20px; }
body#dash .mb-3 { margin-bottom: 12px !important; }
body#dash .mb-4 { margin-bottom: 16px !important; }
body#dash .mb-5 { margin-bottom: 20px !important; }
body#dash .primary-color { color: var(--v2-yellow-text) !important; }

/* input-group-btn (Bootstrap 3 search combo) */
body#dash .input-group-btn { display: inline-flex; align-items: stretch; }

/* ============================================================
 *  v3 Apple-grade polish pass — signin.twig (2026-04-25)
 *  Restored after accidental delete (R7).
 *  Premium SaaS rhythm, depth, motion — additive overrides only.
 * ============================================================ */

/* ---------- HERO: halo, bigger floats, confident CTAs, trust strip, scroll cue ---------- */

body#outside .v2-hero {
    padding-top: 140px;
    padding-bottom: 150px;
    isolation: isolate;
}
body#outside .v2-hero::before {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    translate: -50% -50%;
    width: min(1100px, 92vw);
    aspect-ratio: 1 / 1;
    background:
        radial-gradient(closest-side, rgba(255, 214, 10, 0.17), transparent 70%),
        radial-gradient(closest-side, rgba(255, 214, 10, 0.06) 40%, transparent 75%);
    filter: blur(40px);
    pointer-events: none;
    z-index: 0;
}
body#outside .v2-hero::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 44px;
    translate: -50% 0;
    width: 1px;
    height: 58px;
    background: linear-gradient(180deg, transparent, var(--v2-yellow) 38%, transparent);
    animation: v3-scroll-cue 2.4s ease-in-out infinite;
    opacity: 0.65;
    pointer-events: none;
    z-index: 2;
}
@keyframes v3-scroll-cue {
    0%   { transform: translateY(-14px); opacity: 0; }
    40%  { opacity: 0.85; }
    100% { transform: translateY(14px); opacity: 0; }
}
@media (max-width: 991px) {
    body#outside .v2-hero::after { display: none; }
}

body#outside .v2-hero-floats .vf {
    padding: var(--v2-sp-5) var(--v2-sp-6);
    border-radius: var(--v2-r-lg);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
        var(--v2-glass-2);
    box-shadow: var(--v2-elev-2),
        inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    min-width: 230px;
    /* keep `position: absolute` from the base rule above — earlier this was
       overridden to `position: relative` and dropped all 4 floats into the
       normal flow stacked at top-left of .v2-hero-floats. */
    position: absolute;
    isolation: isolate;
}
body#outside .v2-hero-floats .vf::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255, 214, 10, 0.14), transparent 40%);
    pointer-events: none;
    z-index: -1;
    opacity: 0.9;
}
body#outside .v2-hero-floats .vf-v { font-size: 26px; }
/* R21 (2026-04-26): adopted positions/rotations from smm-panel 4/project/index-v2a.html
   to give floats more breathing room from the top edge — earlier values clipped on
   shorter desktop heights. */
body#outside .v2-hero-floats .vf-1 { top: 14%; left: 6%;  width: 260px; transform: rotate(-6deg); }
body#outside .v2-hero-floats .vf-2 { top: 20%; right: 7%; width: 230px; transform: rotate(5deg); }
body#outside .v2-hero-floats .vf-3 { bottom: 18%; left: 10%; width: 280px; transform: rotate(4deg); }
body#outside .v2-hero-floats .vf-4 { bottom: 22%; right: 9%; width: 240px; transform: rotate(-4deg); }
@media (max-width: 900px) {
    body#outside .v2-hero-floats .vf { display: none; }
}

/* R22 — Thai-friendly hero accent + line-height fix (2026-04-26)
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
body#outside .v2-hero-h1,
body#outside .v2-hero-h1 .v2-hero-accent {
    line-height: var(--v2-lh-tight);
}
body#outside .v2-hero-accent {
    display: inline-block;
    font-family: var(--v2-f-dis);
    font-style: normal;
    font-weight: 800;
    letter-spacing: inherit;
    background: linear-gradient(180deg, #ffe24a 0%, var(--v2-yellow) 55%, var(--v2-yellow-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding-right: 0.04em;
    filter: drop-shadow(0 10px 28px rgba(255, 214, 10, 0.28));
}

/* The hero accent is painted with background-clip:text, so its computed colour
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
html.light body#outside .v2-hero-accent {
    background: linear-gradient(180deg, #a87800 0%, #8f6400 55%, #6e4c00 100%);
    -webkit-background-clip: text;
    background-clip: text;
    filter: none;
}

body#outside .v2-hero-floats .vf-bars { height: 66px; }
body#outside .v2-hero-floats .vf-bars i {
    border-radius: 4px 4px 2px 2px;
    background: linear-gradient(180deg, var(--v2-yellow), var(--v2-yellow-2));
    box-shadow: 0 0 12px -2px var(--v2-yellow-glow);
}

body#outside .v2-hero-h1 {
    font-size: var(--v2-fs-fluid-4);
    line-height: 0.92;
}
body#outside .v2-hero-h1 i {
    display: inline-block;
    background: linear-gradient(180deg, #ffe24a 0%, var(--v2-yellow) 55%, var(--v2-yellow-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding-right: 0.04em;
    filter: drop-shadow(0 10px 28px rgba(255, 214, 10, 0.28));
}
body#outside .v2-hero-sub { margin-top: 32px; font-size: 20px; letter-spacing: 0; }

body#outside .v2-hero-cta { margin-top: 44px; gap: var(--v2-sp-3); }
body#outside .v2-hero-cta .pill {
    height: 60px;
    padding: 0 34px;
    font-size: 16px;
    font-weight: 600;
    border-radius: var(--v2-r-pill);
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-2);
    transition: transform var(--v2-t-base) var(--v2-ease), box-shadow var(--v2-t-base), background var(--v2-t-base);
}
body#outside .v2-hero-cta .pill.pill-y {
    background: linear-gradient(180deg, #ffe24a, var(--v2-yellow));
    color: var(--v2-yellow-ink);
    box-shadow:
        0 20px 40px -12px var(--v2-yellow-glow),
        inset 0 -2px 0 rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
body#outside .v2-hero-cta .pill.pill-y:hover {
    transform: translateY(-2px);
    box-shadow:
        0 28px 52px -12px var(--v2-yellow-glow),
        inset 0 -2px 0 rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
body#outside .v2-hero-cta .pill.pill-g {
    background: var(--v2-glass-2);
    color: var(--v2-ink);
    border: 1px solid var(--v2-line-strong);
    backdrop-filter: var(--v2-blur);
    -webkit-backdrop-filter: var(--v2-blur);
}
body#outside .v2-hero-cta .pill.pill-g:hover {
    transform: translateY(-2px);
    background: var(--v2-glass-3);
}

body#outside .v2-hero-inner::after {
    content: "NO CREDIT CARD  ·  30-SEC SIGNUP  ·  มีประกัน เคลมฟรี";
    display: block;
    margin: 32px auto 0;
    font-family: var(--v2-f-mono);
    font-size: 11px;
    letter-spacing: 0.26em;
    color: var(--v2-ink-mute);
    text-transform: uppercase;
}


/* ---------- SPLIT stats + login ---------- */

body#outside .v2-split-wrap {
    padding: 56px 52px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
        var(--v2-glass-2);
    box-shadow: var(--v2-elev-3),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
body#outside .v2-split-wrap::after {
    content: "";
    position: absolute;
    bottom: -80px;
    left: -80px;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle, rgba(255, 214, 10, 0.08), transparent 70%);
    filter: blur(50px);
    pointer-events: none;
}
@media (max-width: 900px) {
    body#outside .v2-split-wrap { padding: var(--v2-sp-7) var(--v2-sp-6); }
}
body#outside .v2-split-title {
    font-size: var(--v2-fs-fluid-2);
}
body#outside .v2-split-metrics {
    grid-template-columns: 1fr 1fr;
    gap: var(--v2-sp-4);
    margin-bottom: 28px;
}
body#outside .v2-split-metrics .m {
    padding: var(--v2-sp-5) var(--v2-sp-5);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)),
        var(--v2-glass);
    border-radius: var(--v2-r-md);
    transition: border-color var(--v2-t-base), transform var(--v2-t-base), background var(--v2-t-base);
}
body#outside .v2-split-metrics .m:hover {
    border-color: rgba(255, 214, 10, 0.30);
    transform: translateY(-2px);
}
body#outside .v2-split-metrics .n {
    font-size: 44px;
    line-height: 1;
    background: linear-gradient(180deg, #ffffff 0%, #c7c7ce 95%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
html.light body#outside .v2-split-metrics .n {
    background: linear-gradient(180deg, #141417 0%, #46464c 95%);
    -webkit-background-clip: text;
    background-clip: text;
}
body#outside .v2-split-metrics .m:nth-child(1) .n,
body#outside .v2-split-metrics .m:nth-child(3) .n {
    background: linear-gradient(180deg, #ffe24a 0%, var(--v2-yellow) 55%, var(--v2-yellow-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
body#outside .v2-split-metrics .l {
    font-size: 11px;
    letter-spacing: 0.16em;
    margin-top: 10px;
}
body#outside .v2-split-rating {
    padding: var(--v2-sp-3) var(--v2-sp-4);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)),
        var(--v2-glass);
    border-color: var(--v2-line-strong);
}
body#outside .v2-split-right .login-card {
    padding: var(--v2-sp-6);
    border-radius: var(--v2-r-lg);
    transition: border-color var(--v2-t-base), box-shadow var(--v2-t-base);
}
body#outside .v2-split-right .login-card:focus-within {
    border-color: rgba(255, 214, 10, 0.35);
    box-shadow: 0 0 0 4px rgba(255, 214, 10, 0.08);
}


/* ---------- BRANDS marquee ---------- */

body#outside .v2-brands-section { padding: 60px 0 !important; overflow: hidden; }
body#outside .v2-brands-row {
    max-width: 100%;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow: hidden;
    padding: var(--v2-sp-1) 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
body#outside .v2-brands-track {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    align-items: center;
    gap: var(--v2-sp-3);
    flex-shrink: 0;
    animation: v3-marquee 36s linear infinite;
    padding-right: var(--v2-sp-3);
}
body#outside .v2-brands-row:hover .v2-brands-track { animation-play-state: paused; }
@keyframes v3-marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
body#outside .v2-brands-section .v2-brand { flex-shrink: 0; }


/* ---------- FEATURE stack ---------- */

body#outside .v2-feat {
    padding: var(--v2-sp-7) var(--v2-sp-6) var(--v2-sp-7);
    min-height: 320px;
    transition: border-color var(--v2-t-base), background var(--v2-t-base), transform var(--v2-t-base), box-shadow var(--v2-t-base);
}
body#outside .v2-feat::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(460px circle at 50% 115%, rgba(255, 214, 10, 0.10), transparent 60%);
    opacity: 0;
    transition: opacity var(--v2-t-base);
    pointer-events: none;
}
body#outside .v2-feat:hover::after { opacity: 1; }
body#outside .v2-feat:hover { box-shadow: var(--v2-elev-3); }
body#outside .v2-feat > * { position: relative; z-index: 1; }
body#outside .v2-feat .v2-feat-ic {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--v2-r-sm);
    background: var(--v2-yellow-soft);
    color: var(--v2-yellow);
    font-size: 20px;
    margin-bottom: 18px;
    border: 1px solid rgba(255, 214, 10, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
body#outside .v2-feat-big .v2-feat-ic {
    width: 52px;
    height: 52px;
    font-size: 26px;
    border-radius: var(--v2-r-md);
    background: rgba(255, 214, 10, 0.16);
    margin-bottom: 22px;
}
body#outside .v2-feat h3 { font-size: 26px; letter-spacing: 0; line-height: var(--v2-lh-tight); }
body#outside .v2-feat-big h3 { font-size: 34px; letter-spacing: 0; line-height: var(--v2-lh-tight); }
body#outside .v2-feat p { font-size: 14px; }
body#outside .v2-feat-big {
    padding: 44px 40px 40px;
    background:
        radial-gradient(620px circle at 100% 0%, rgba(255, 214, 10, 0.22), transparent 55%),
        linear-gradient(180deg, rgba(255, 214, 10, 0.08), rgba(255, 214, 10, 0.02));
    border-color: rgba(255, 214, 10, 0.28);
    box-shadow: 0 40px 80px -30px rgba(255, 214, 10, 0.18);
}
body#outside .v2-feat-big::before {
    content: "";
    position: absolute;
    top: 28px;
    right: 30px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--v2-ok, #28cd41);
    z-index: 2;
    animation: v3-pulse-green 1.8s ease-out infinite;
}
@keyframes v3-pulse-green {
    0%   { box-shadow: 0 0 0 0 rgba(40, 205, 65, 0.55), 0 0 12px #28cd41; }
    70%  { box-shadow: 0 0 0 12px rgba(40, 205, 65, 0), 0 0 12px #28cd41; }
    100% { box-shadow: 0 0 0 0 rgba(40, 205, 65, 0), 0 0 12px #28cd41; }
}
body#outside .v2-feat-code {
    padding: var(--v2-sp-5) var(--v2-sp-5) var(--v2-sp-5);
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.3)),
        #0c0c10;
    border-color: rgba(255, 255, 255, 0.06);
    border-radius: var(--v2-r-md);
    position: relative;
}
body#outside .v2-feat-code::before {
    content: "batch.txt";
    position: absolute;
    top: 10px;
    right: 14px;
    font-family: var(--v2-f-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--v2-ink-soft);
    text-transform: uppercase;
}


/* ---------- PRODUCT FRAME ---------- */

body#outside .v2-product-section { position: relative; overflow: hidden; }
body#outside .v2-product-section::before {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    translate: -50% -50%;
    width: 900px;
    height: 600px;
    background: radial-gradient(ellipse, rgba(255, 214, 10, 0.08), transparent 70%);
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
}
body#outside .v2-product-frame {
    position: relative;
    z-index: 1;
    transform: perspective(1600px) rotateX(2deg);
    transition: transform var(--v2-t-slow) var(--v2-ease);
}
body#outside .v2-product-frame:hover { transform: perspective(1600px) rotateX(0); }
body#outside .v2-product-orders .pr-run { position: relative; padding-left: var(--v2-sp-4); }
body#outside .v2-product-orders .pr-run::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    translate: 0 -50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--v2-yellow);
    animation: v3-pulse-yellow 1.6s ease-out infinite;
}
@keyframes v3-pulse-yellow {
    0%   { box-shadow: 0 0 0 0 rgba(255, 214, 10, 0.5); }
    70%  { box-shadow: 0 0 0 10px rgba(255, 214, 10, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 214, 10, 0); }
}


/* ---------- CTA BLOCK ---------- */

/*  A119 · glow 0.35 → 0.20 (เจ้าของสั่งให้ข้อความรองในบล็อกนี้ชัดขึ้น 2026-08-11)
    ถอดพื้นจริงออกมาแล้ว: ใต้ glow เป็น rgb(32,31,35) พอทาเหลือง 0.35 ทับ
    ตรงจุดที่เข้มที่สุดของ radial กลายเป็น rgb(110,95,26) — ข้อความรองทั้งบล็อก
    ต้องอ่านบนพื้นนั้น  วัดก่อนแก้: <p> 3.95 · ::after (แถวรับประกัน) 3.95
    (เกณฑ์ 4.5 ทั้งคู่)
    เลือกลด glow แทนการเพิ่มความเข้มตัวอักษร เพราะแก้จุดเดียวได้ทั้งบล็อก
    และ **ไม่แตะลำดับน้ำหนักของ type เลย** — <p> กับแถวรับประกันยังเป็น
    --v2-ink-dim เหมือนเดิม  ที่ 0.20: <p> และ ::after ได้ 5.64
    ‼ ไล่ค่าแล้วเลือกจากตัวเลข ไม่ใช่ตาดู: 0.30 → 4.44 (ยังไม่ผ่าน) · 0.25 → 5.01
      · 0.20 → 5.64  เลือก 0.20 เพราะเผื่อระยะให้ธีมสว่างซึ่งใช้ค่าคนละตัว */
body#outside .v2-cta-block {
    padding: 88px 48px;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(255, 214, 10, 0.20), transparent 55%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)),
        var(--v2-glass-2);
}

/*  A120 · กฎ !important ของ A119 ที่เคยเจาะเฉพาะป้ายในบล็อก CTA ถูกลบแล้ว
    A119 เลือกทางแคบเพราะไม่อยากเปลี่ยนป้ายทั้งฝั่ง guest  แต่พอวัดเต็มความสูง
    ของหน้าแรกพบว่าป้ายนอกบล็อก CTA ก็ตกอยู่ในเขต glow เหมือนกัน (BY THE
    NUMBERS, LOG IN) ปัญหาจึงเป็นของ --adv-mute เองไม่ใช่ของบล็อกใดบล็อกหนึ่ง
    แก้ที่ต้นทางแทน ดูกฎ body#outside .v2-eyebrow ที่ย้ายออกมาจากกลุ่ม !important */
body#outside .v2-cta-block h2 { font-size: var(--v2-fs-fluid-3); letter-spacing: 0; }
body#outside .v2-cta-actions .btn.btn-lg { height: 58px; padding: 0 var(--v2-sp-7); font-size: 14px; font-weight: 600; }
body#outside .v2-cta-actions .btn.btn-primary {
    background: linear-gradient(180deg, #ffe24a, var(--v2-yellow));
    color: var(--v2-yellow-ink);
    box-shadow: 0 18px 40px -12px var(--v2-yellow-glow);
    transition: transform var(--v2-t-base) var(--v2-ease), box-shadow var(--v2-t-base);
}
body#outside .v2-cta-actions .btn.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 26px 50px -14px var(--v2-yellow-glow);
}
body#outside .v2-cta-block::after {
    content: "✓ ไม่มีบัตรเครดิต    ·    ✓ ยกเลิกได้ทุกเมื่อ    ·    ✓ ซัพพอร์ต 24 ชม.";
    display: block;
    margin: 36px auto 0;
    font-family: var(--v2-f-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--v2-ink-mute);
}


/* ---------- TESTIMONIALS ---------- */

body#outside .v2-reviews-section .c-reviews {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--v2-sp-4);
    max-width: 1200px;
    padding: var(--v2-sp-2) var(--v2-sp-5);
    margin: 0 auto;
    overflow: visible;
}
@media (max-width: 540px) {
    body#outside .v2-reviews-section .c-reviews { grid-template-columns: 1fr; }
}
body#outside .v2-reviews-section .review-item {
    max-width: unset;
    margin: 0;
    padding: 36px var(--v2-sp-6) var(--v2-sp-6);
    min-height: 260px;
    position: relative;
    overflow: hidden;
}
body#outside .v2-reviews-section .review-item::before {
    content: "\201C";
    position: absolute;
    top: -30px;
    left: 16px;
    font-family: var(--v2-f-serif);
    font-style: italic;
    font-size: 130px;
    color: var(--v2-yellow);
    opacity: 0.14;
    line-height: 1;
    pointer-events: none;
}
body#outside .v2-reviews-section .review-item .text p { font-size: 14px; line-height: var(--v2-lh-body); }
body#outside .v2-reviews-section .review-item .head { margin-bottom: 18px; padding-bottom: var(--v2-sp-4); }


/* ---------- v3 polish: LIGHT MODE overrides ---------- */

html.light body#outside .v2-hero-floats .vf {
    background:
        linear-gradient(180deg, rgba(18, 18, 20, 0.04), rgba(18, 18, 20, 0.01)),
        var(--v2-glass-2);
    box-shadow: var(--v2-elev-2),
        inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}
html.light body#outside .v2-hero-floats .vf::before {
    background: linear-gradient(135deg, rgba(255, 200, 0, 0.18), transparent 40%);
}
html.light body#outside .v2-hero-cta .pill.pill-y {
    box-shadow:
        0 16px 32px -12px rgba(255, 200, 0, 0.45),
        inset 0 -2px 0 rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
html.light body#outside .v2-split-wrap {
    background:
        linear-gradient(180deg, rgba(18, 18, 20, 0.03), rgba(18, 18, 20, 0.01)),
        var(--v2-glass-2);
    box-shadow: var(--v2-elev-3),
        inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}
html.light body#outside .v2-split-metrics .m {
    background:
        linear-gradient(180deg, rgba(18, 18, 20, 0.03), rgba(18, 18, 20, 0.01)),
        var(--v2-glass);
}
html.light body#outside .v2-split-rating {
    background:
        linear-gradient(180deg, rgba(18, 18, 20, 0.03), rgba(18, 18, 20, 0.01)),
        var(--v2-glass);
}
html.light body#outside .v2-feat-code {
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.02)),
        #0c0c10;
    color: rgba(247, 247, 248, 0.78);
    border-color: rgba(0, 0, 0, 0.08);
}
html.light body#outside .v2-feat-code .muted { color: rgba(247, 247, 248, 0.55); }
html.light body#outside .v2-feat-code::before { color: rgba(247, 247, 248, 0.45); }
html.light body#outside .v2-feat:hover { box-shadow: var(--v2-elev-2); }
html.light body#outside .v2-product-frame {
    background: linear-gradient(180deg, rgba(18, 18, 20, 0.04), rgba(18, 18, 20, 0.01));
    border-color: rgba(18, 18, 20, 0.08);
    box-shadow: var(--v2-elev-3),
        inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}
html.light body#outside .v2-feat-big {
    background:
        radial-gradient(620px circle at 100% 0%, rgba(255, 200, 0, 0.24), transparent 55%),
        linear-gradient(180deg, rgba(255, 200, 0, 0.08), rgba(255, 200, 0, 0.02));
    border-color: rgba(255, 200, 0, 0.32);
    box-shadow: 0 24px 52px -24px rgba(255, 200, 0, 0.25);
}
/*  A119 · ธีมสว่างลดตามสัดส่วนเดียวกัน 0.30 → 0.17
    ที่นี่ glow ทำให้พื้น "สว่างขึ้น" ส่วนข้อความเป็น ink เข้ม ทิศทางจึงกลับกัน
    กับธีมมืด แต่ปัญหาเดียวกันคือพื้นถูกย้อมจนคู่สีเลื่อนออกจากที่ตั้งใจไว้
    วัดหลัง deploy ทั้งสองธีม ไม่คิดเอาเองว่าธีมสว่างไม่มีปัญหา */
html.light body#outside .v2-cta-block {
    background:
        radial-gradient(ellipse at 50% 0%, rgba(255, 200, 0, 0.17), transparent 55%),
        linear-gradient(180deg, rgba(18, 18, 20, 0.03), rgba(18, 18, 20, 0.01)),
        var(--v2-glass-2);
}
html.light body#outside .v2-cta-actions .btn.btn-primary {
    box-shadow: 0 14px 32px -10px rgba(255, 200, 0, 0.42);
}


/* ---------- v3 polish: MOBILE tuning ---------- */

@media (max-width: 640px) {
    body#outside .v2-hero { padding-top: 100px; padding-bottom: 110px; }
    /* สองบรรทัดนี้จูนเฉพาะช่วง ≤640 ไม่ใช้ token — token ตัวไหนก็ให้เส้นโค้งช่วงนี้ไม่ได้
       (hero บนจอ 320 ต้องลงถึง 44px ไม่ใช่ 56px ของ fluid-4 ไม่งั้นข้อความไทยล้น) */
    body#outside .v2-hero-h1 { font-size: clamp(44px, 12vw, 72px); letter-spacing: 0; }
    body#outside .v2-hero-sub { font-size: 16px; margin-top: 22px; }
    body#outside .v2-hero-cta { margin-top: 28px; gap: var(--v2-sp-2); }
    body#outside .v2-hero-cta .pill { height: 52px; padding: 0 var(--v2-sp-6); font-size: 14px; }
    body#outside .v2-hero-inner::after { font-size: 11px; letter-spacing: 0.14em; margin-top: 22px; padding: 0 var(--v2-sp-3); }
    body#outside .v2-feat { padding: var(--v2-sp-6) var(--v2-sp-5); min-height: 0; }
    body#outside .v2-feat h3 { font-size: 20px; }
    body#outside .v2-feat-big { padding: var(--v2-sp-7) var(--v2-sp-6); }
    body#outside .v2-feat-big h3 { font-size: 26px; }
    body#outside .v2-feat .v2-feat-ic { width: 40px; height: 40px; font-size: 20px; margin-bottom: 14px; }
    body#outside .v2-feat-big .v2-feat-ic { width: 44px; height: 44px; font-size: 20px; margin-bottom: 16px; }
    body#outside .v2-feat-code { padding: var(--v2-sp-4) var(--v2-sp-4) var(--v2-sp-4); font-size: 11px; }
    body#outside .v2-cta-block { padding: 52px var(--v2-sp-6); }
    body#outside .v2-cta-block h2 { font-size: clamp(32px, 8vw, 44px); }
    body#outside .v2-cta-actions { margin-top: 24px; gap: var(--v2-sp-2); }
    body#outside .v2-cta-actions .btn.btn-lg { height: 50px; padding: 0 var(--v2-sp-5); font-size: 14px; }
    body#outside .v2-cta-block::after { font-size: 11px; letter-spacing: 0.1em; margin-top: 24px; padding: 0 var(--v2-sp-2); }
    body#outside .v2-reviews-section .review-item { padding: var(--v2-sp-6) var(--v2-sp-5) var(--v2-sp-5); min-height: 0; }
    body#outside .v2-reviews-section .review-item::before { font-size: 96px; top: -20px; left: 10px; }
    body#outside .v2-brands-section { padding: 40px 0 !important; }
    body#outside .v2-brands-track { gap: var(--v2-sp-2); animation-duration: 22s; }
    body#outside .v2-brand { padding: var(--v2-sp-2) var(--v2-sp-3) var(--v2-sp-2) var(--v2-sp-2); font-size: 12px; }
    body#outside .v2-brand > i { width: 26px; height: 26px; font-size: 12px; }
}
@media (max-width: 460px) {
    body#outside .v2-hero-inner::after { display: none; }
}


/* ============================================================
 *  v3 Mobile regressions pass — verified fixes
 * ============================================================ */

/* Mobile neworder stats — บล็อกนี้ถูกลบใน A65
   ‼ มัน **ตายมาตลอด** ทุกบรรทัด: มันสั่ง display:grid แต่บล็อก 21.3/21.4 ที่อยู่ทีหลัง
     สั่ง display:flex ด้วย specificity เท่ากัน → flex ชนะทุกความกว้าง
     grid-template-columns · nth-child(3) · border-left ที่สั่งไว้จึงไม่มีความหมายสักตัว
     วัดยืนยันบน viewport 390 จริง: .neworder-stats เป็นแถวเดียว 322x58 ไม่ใช่ grid 2 คอลัมน์
   ที่อยู่ใหม่: @media (max-width: 640px) ในบล็อกสถิติของ A65 (ค้นคำว่า "การ์ดสามใบ") */

/* addfunds mega input — overflow on narrow viewports */
@media (max-width: 540px) {
    body#dash .addfunds-amount { padding: var(--v2-sp-4) var(--v2-sp-4); gap: var(--v2-sp-2); }
    body#dash .addfunds-amount .cur { font-size: 20px; }
    body#dash .addfunds-amount input.form-control { font-size: 26px; letter-spacing: 0; }
    body#dash .addBalance .addBalanceBtn { padding: var(--v2-sp-2) var(--v2-sp-3); font-size: 11px; }
    body#dash .v2-wallet-chip { min-width: 0; align-items: flex-start; padding: var(--v2-sp-2) var(--v2-sp-3); }
    body#dash .v2-wallet-chip b { font-size: 20px; }
}

/* payment-list collapse to 1-col below 540px */
@media (max-width: 540px) {
    body#dash .payment-list#method-drop { grid-template-columns: 1fr; }
}

/* pnd-ord-nav touch target on mobile */
@media (max-width: 540px) {
    body#dash .pnd-ord-nav a { padding: var(--v2-sp-2) var(--v2-sp-3); font-size: 12px; }
    body#dash .orders-search .textbox { font-size: 13px; padding: var(--v2-sp-3) var(--v2-sp-3) var(--v2-sp-3) 40px; }
}

/* page-header-v2 stack on mobile
   A106 · หัวหน้าเป็น flex + `justify-content: space-between` และมีกฎ
   `> div:last-child:not(:first-child) { margin-left: auto }` (บล็อก 23.1)
   ที่ทำงานทุกความกว้าง  พอจอแคบแถวหัวก็ wrap ลงสองบรรทัด ลูกตัวท้ายจึงได้
   margin-left ที่คำนวณจริง 179px แล้วลอยชิดขวาอยู่ตัวเดียวในบรรทัดของมัน
   ‼ ของเดิมในบล็อกนี้เขียน `align-self: flex-start` ให้ชิป ซึ่งเป็น "แกนตั้ง"
     ของ flex แถว — มันไม่เคยแตะการดันแนวนอนเลย จึงไม่เคยแก้อะไร
   แก้ที่ตัวขับจริง: ยกเลิก margin-left ของลูกตัวท้าย  กฎเดียวครอบทุกหน้าที่ใช้
   หัวนี้ (orders, services, addfunds, account, tickets, affiliates, refill,
   subscription, drip_feed, api, updates, faq, childpanel, massorder) */
@media (max-width: 767px) {
    body#dash .page-header-v2 { gap: var(--v2-sp-4); align-items: flex-start; }
    body#dash .page-header-v2 > div:last-child:not(:first-child) { margin-left: 0; }
    body#dash .page-header-v2 .v2-wallet-chip {
        align-items: flex-start;
        width: 100%;
        min-width: 0;
    }
}


/* (removed R3/R4 inline-header-right block — superseded by R8 dropdown panel below) */


/* ============================================================
 *  Auth + content page mobile/light fixes
 * ============================================================ */

/* A88 · E3 · ลบ `.signup-badge { margin-top: 40/80px }` — มันมีไว้หลบแถบหัวที่เคยเป็น
   position:fixed อย่างเดียว ตอนนี้แถบหัวอยู่ในโฟลว์แล้ว และ badge ย้ายเข้าไปในการ์ด */

@media (max-width: 540px) {
    body#outside .signup-content .form-control,
    body#outside .login-card .form-control,
    body#outside .auth-mini-card .form-control {
        min-height: 44px;
        font-size: 14px;
    }
}

html.light body#outside .card.blog-card .blog-date { color: var(--v2-ink-mute); }
html.light body#outside .card.blog-card .blog-date i { color: var(--v2-yellow); }

@media (max-width: 540px) {
    body#outside .v2-blog-section .home-articles .blog-area-text h2 { font-size: 16px; }
    body#outside .v2-blog-section .blog-three .blog-area-text h2 { font-size: 13px; }
}


/* ============================================================
 *  SIDEBAR PROFILE — definitive rebuild (R6/R7)
 *  Works with twig: <span class="blob blob-red"> has been DELETED.
 *  Dot is created via pseudo on .sidebar-text — no class-based legacy
 *  CSS can hijack a pseudo-element.
 * ============================================================ */


/* Defensive: hide any legacy .blob if Perfect Panel re-renders it */




/* ============================================================
 *  R8 Architecture rebuild (2026-04-25)
 *  - Sidebar position: fixed on desktop too (not sticky)
 *  - Real .profile-sub markup replaces ::after pseudo
 *  - Mobile chevron toggle restored with text labels
 * ============================================================ */

/* ---- 1. SIDEBAR FIXED on desktop (replaces sticky) ---- */
@media (min-width: 992px) {
    body#dash .app {
        display: block !important;
        grid-template-columns: none !important;
    }
    body#dash .page {
        margin-left: 234px;   /* A40b: 14 + 206 + 14 · ไม่ต้อง !important แล้วเพราะไม่มีคู่แข่ง */
        min-height: 100vh;
    }
    /* Sidebar-active legacy collapsed-mode (80px icon-only) — also adjust page */
}

/* ---- 2. PROFILE SUB — real markup replaces ::after ---- */

/* Suppress the legacy ::after pseudo subtitle (we now use real .profile-sub) */

/* ---- 3. MOBILE chevron + dropdown panel restored with text labels ---- */

/* Desktop: hide chevron toggle (header-right is always visible inline as icons) */

@media (max-width: 767px) {
    /* Show chevron on mobile */

    /* Header-right hidden by default on mobile (JS toggles display:block) */
    /* JS sets display: block on hdRight when open */



    /* Each item becomes a full-width row with icon + text label */

    /* Append text label after icon using ::after with attr() from data-original-title */
    /* Logout button has no data-original-title — provide explicit label */

    /* Theme switcher: keep its pill layout, add a label to the LEFT of the pill */
}


/* ============================================================
 *  R9 — Sidebar active menu legibility + mobile dropdown hardening
 * ============================================================ */

/* Sidebar menu active state — legacy uses solid yellow bg + black text (illegible
   in dark mode after v2 yellow accent shift). Restore v2 yellow-soft bg + yellow text. */

/* Light mode: yellow-soft bg + dark yellow text for contrast */


/* Mobile header-right dropdown: harden the hide-by-default behavior with !important.
   JS sets inline style="display: block" to open — inline always wins, but this
   defends against any later legacy class rule that sets display. */
@media (max-width: 767px) {
}

/* R10 — segmented nav-tab fix (2026-04-25)
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
/* A52 · แท็บ — ถอน !important 43 ตัวของ R9 ออก ค่าทุกตัวคงเดิม
   ‼ ห้ามใส่ !important กลับ · ถ้าค่าไหนไม่ลง ให้ไปลบคู่แข่ง
   ‼ ยังไม่เปลี่ยนเป็นค่า Panel A (พื้น --v2-well / แคปซูลหมึก) เพราะ background
     ของคอมโพเนนต์นี้และของ .page-link ไม่ยอมลงด้วยเหตุที่ยังหาไม่เจอ —
     ตัดออกแล้วทั้ง specificity ลำดับ token !important inline และ <style>
     ดู .claude/verify/panelA2/A52-verify.json ก่อนลองอีกครั้ง
   ‼ bootstrap ผูก tab ด้วย data-toggle="tab" — ห้ามแตะ attribute ใน twig
   git log --grep=A52 */
body#dash ul.nav[role="tablist"] {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
    gap: var(--v2-sp-1);
    padding: var(--v2-sp-1);
    margin: 0 0 16px;
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-pill);
    box-shadow: none;
}
body#dash ul.nav[role="tablist"] > .nav-item {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    list-style: none;
    margin: 0;
}
body#dash ul.nav[role="tablist"] > .nav-item > .nav-link {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: var(--v2-sp-2);
    padding: var(--v2-sp-2) var(--v2-sp-3);
    border: 1px solid transparent;
    border-radius: var(--v2-r-pill);
    background: transparent;
    color: var(--v2-ink-dim);
    font-family: var(--v2-f-dis);
    font-size: 13px;
    font-weight: 600;
    line-height: var(--v2-lh-tight);
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background var(--v2-t-base) var(--v2-ease), color var(--v2-t-base) var(--v2-ease);
}
body#dash ul.nav[role="tablist"] > .nav-item > .nav-link:hover {
    background: var(--v2-glass-2);
    color: var(--v2-ink);
}
body#dash ul.nav[role="tablist"] > .nav-item > .nav-link.active {
    background: var(--v2-yellow);
    color: var(--v2-yellow-ink);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 6px 16px -8px var(--v2-yellow-glow, rgba(255, 214, 10, 0.55));
}
body#dash ul.nav[role="tablist"] > .nav-item > .nav-link.active .icon {
    color: var(--v2-yellow-ink) !important;
}

/* Light mode — softer ring on active pill
   A67 · กัน #nav-tab / #nav-info-tabs ออกจากกฎนี้
   ‼ กฎนี้เป็น !important ที่ (1,6,3) จึงชนะกฎแท็บใหม่ของบล็อก 21.3 ทุกครั้ง
     ผลคือแท็บ neworder/addfunds ยังได้ **เงาเหลือง** ทั้งที่ตัวมันเป็นพื้นการ์ดขาวแล้ว
     ตรวจเจอตอนวัดบนหน้าจริงหลัง deploy A67 ไม่ใช่ตอนอ่านโค้ด (เหมือนเคสตัวอักษรดำของ A66)
   ‼ หน้าอื่นที่ยังเป็นแคปซูลเหลือง (เช่น notifications) ต้องได้เงานี้ต่อ จึงกันเฉพาะสอง id */
html.light body#dash ul.nav[role="tablist"]:not(#nav-tab):not(#nav-info-tabs) > .nav-item > .nav-link.active {
    border-color: rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 4px 14px -6px rgba(255, 200, 0, 0.5) !important;
}

/* Mobile — slightly tighter padding, keep label readable
   A65 · ถอน !important ทั้งสี่ตัว — บล็อกนี้อยู่หลังบล็อกฐานอยู่แล้ว ชนะด้วยลำดับ
   ‼ และถ้าคาไว้ มันจะข้ามหัวบล็อก 21.3 ไปทับแท็บของ neworder/addfunds บนมือถือ */
@media (max-width: 540px) {
    body#dash ul.nav[role="tablist"] {
        padding: var(--v2-sp-1);
        gap: var(--v2-sp-1);
    }
    body#dash ul.nav[role="tablist"] > .nav-item > .nav-link {
        padding: var(--v2-sp-2) var(--v2-sp-2);
        font-size: 12px;
        gap: var(--v2-sp-1);
    }
}

/* R11 — mobile header-right dropdown opacity fix (2026-04-25)
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
@media (max-width: 767px) {

    /* Light mode — near-solid paper with soft inner highlight */

    /* Browsers without backdrop-filter — go fully solid (defensive) */
    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    }
}

/* R12 — neworder.twig search-dropdown icon overlap fix (2026-04-25)
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
body#dash .search-dropdown {
    position: relative;
}
body#dash .search-dropdown .input-wrapper {
    position: relative;
}
body#dash .search-dropdown .form-control,
body#dash .search-dropdown #template-input,
body#dash .search-dropdown input.select2-selection {
    padding-left: 44px !important;
}
body#dash .search-dropdown .input-wrapper__prepend {
    position: absolute !important;
    left: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none;
    color: var(--v2-ink-mute);
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2 !important;
    transition: color var(--v2-t-fast) var(--v2-ease) !important;
}
body#dash .search-dropdown .input-wrapper__prepend:hover {
    color: var(--v2-ink) !important;
}
body#dash .search-dropdown .input-wrapper__prepend .fas,
body#dash .search-dropdown .input-wrapper__prepend .fa,
body#dash .search-dropdown .input-wrapper__prepend [class*="fa-"] {
    font-size: 14px !important;
    line-height: 1 !important;
}
/* Defensive: hide any other stray icon nodes that Perfect Panel
   variants might insert as direct wrapper children (svg / standalone i). */
body#dash .search-dropdown .input-wrapper > i,
body#dash .search-dropdown .input-wrapper > svg {
    display: none !important;
}
/* R15.1 — non-glass modal full reset (2026-04-26)
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
.modal-open .modal[id^="report"],
.modal-open .modal[id^="detail"],
.modal-open #changeEmailModal {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    z-index: 1055 !important;
}
body .modal[id^="report"] .modal-dialog,
body .modal[id^="detail"] .modal-dialog,
body #changeEmailModal .modal-dialog {
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto;
    position: relative;
    z-index: 1;
}
/* A57 · พื้นผิว modal — token ชุดเดียว ไม่ใช่สีเขียนตรง ๆ สองชุด
   กฎเดิมเขียน rgba ตรง ๆ พร้อม !important 15 ตัว แล้วทำสำเนา html.light อีกก้อนเพื่อ
   สลับสี — ซึ่งเป็นงานของ token อยู่แล้ว `--v2-line` ตรงกับค่าที่ hardcode ไว้ทั้งสองธีมพอดี
   ‼ !important ไม่จำเป็นเลย selector ชุดนี้เป็น (0,3,1) สูงกว่าคู่แข่งทุกตัวในไฟล์
     `opacity` เก็บ !important ไว้ตัวเดียว เพราะมันเป็นการแก้บั๊กตอนเปิด ไม่ใช่หน้าตา
   ‼ ห้ามแตะกฎ .modal-dialog ข้างบน — transform/opacity ที่นั่นคือตัวที่ทำให้ modal เปิดติด
   ‼ backdrop-filter ถูกถอด: พื้นทึบแล้วมันมองไม่เห็นผล และ /services มี modal 340 ตัวในหน้าเดียว */
/* ‼ A59 · แยก authed/guest เพราะ `--v2-surface` นิยามไว้ใต้ `body.v2-dash` เท่านั้น (A44
   ตั้งใจกันค่า Panel A ไม่ให้รั่วไปฝั่ง guest) กฎ A57 เดิมไม่มี scope แล้วเรียก token นั้น
   → ฝั่ง guest token ไม่มีค่า `background` พังทั้งบรรทัด modal 340 ตัวบน /services
   ของ guest พื้นกลายเป็นโปร่งใส จับได้ตอน sweep ปิดงาน ไม่ใช่ตอนเขียน
   ‼ ก่อนใช้ token ใน selector ที่ไม่มี scope ให้เช็คก่อนว่ามันนิยามที่ไหน:
     --v2-surface · --v2-surface-2 · --v2-well · --v2-sidebar · --v2-on-sidebar ·
     --v2-hero* · --v2-acc-line = authed เท่านั้น
     --v2-ink · --v2-line · --v2-elev-* · --v2-yellow = ใช้ได้ทั้งสองฝั่ง */
body#dash .modal[id^="report"] .modal-content,
body#dash .modal[id^="detail"] .modal-content,
body#dash #changeEmailModal .modal-content {
    background: var(--v2-surface);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-lg);
    box-shadow: var(--v2-elev-3);
    opacity: 1 !important;
    pointer-events: auto;
    color: var(--v2-ink);
}
/* guest ได้ค่าเดิมของ R15.1 ทุกตัว — คัดลอกมาตรง ๆ ไม่ใช่เขียนใหม่ ห้ามแก้ให้ "สวยขึ้น" */
body#outside .modal[id^="report"] .modal-content,
body#outside .modal[id^="detail"] .modal-content,
body#outside #changeEmailModal .modal-content {
    background: rgba(18, 20, 26, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--v2-r-lg);
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.07) inset,
        0 30px 70px -18px rgba(0, 0, 0, 0.85),
        0 0 0 1px rgba(0, 0, 0, 0.4);
    opacity: 1 !important;
    pointer-events: auto;
    color: var(--v2-ink);
}
html.light body#outside .modal[id^="report"] .modal-content,
html.light body#outside .modal[id^="detail"] .modal-content,
html.light body#outside #changeEmailModal .modal-content {
    background: rgba(255, 255, 255, 0.97);
    border-color: rgba(18, 18, 20, 0.10);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 1) inset,
        0 24px 56px -18px rgba(18, 18, 20, 0.22),
        0 0 0 1px rgba(18, 18, 20, 0.06);
    color: var(--v2-ink);
}
/* Make sure the backdrop sits at standard Bootstrap level — never above modal */
body .modal-backdrop,
body .modal-backdrop.fade.show {
    z-index: 1040 !important;
}

/* RTL — flip prepend button to the right and swap input padding */
body#dash .search-dropdown[data-dir="rtl"] .input-wrapper__prepend {
    left: auto !important;
    right: 6px !important;
}
body#dash .search-dropdown[data-dir="rtl"] .form-control,
body#dash .search-dropdown[data-dir="rtl"] #template-input,
body#dash .search-dropdown[data-dir="rtl"] input.select2-selection {
    padding-left: var(--v2-sp-3) !important;
    padding-right: 44px !important;
}

/* R13 — QR payment modal redesign (Layer A) (2026-04-25)
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
body .modal-content:has(#qr-code-image) {
    max-width: 440px;
    margin: 0 auto;
    /* R16 (2026-04-26): give QR modal-content a SOLID surface. Default
       `body .modal-content { background: var(--v2-glass-3) }` = 13% white
       in dark mode → modal looked transparent so users saw the blurred
       addfunds page bleeding through and called it "popup ใต้ modal".
       Layer our own glass: solid dark base + heavy blur for the glass feel. */
    background: rgba(14, 16, 22, 0.96) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    backdrop-filter: blur(28px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(140%) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.07) inset,
        0 30px 80px -20px rgba(0, 0, 0, 0.85),
        0 0 0 1px rgba(0, 0, 0, 0.4) !important;
    color: var(--v2-ink) !important;
}
html.light body .modal-content:has(#qr-code-image) {
    background: rgba(255, 255, 255, 0.97) !important;
    border-color: rgba(18, 18, 20, 0.10) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 1) inset,
        0 24px 56px -18px rgba(18, 18, 20, 0.22),
        0 0 0 1px rgba(18, 18, 20, 0.06) !important;
    color: #1d2433 !important;
}
body .modal-content:has(#qr-code-image) .modal-body {
    padding: 36px var(--v2-sp-6) var(--v2-sp-4);
    text-align: center;
}
body .modal-content:has(#qr-code-image) .modal-body > .text-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

/* QR frame wrapper — injected by JS to host corner brackets + watermark.
   No longer gated on .qr-ready (placeholder base64 confused that signal).
   Loading-state hide is now handled by delayed-reveal on the whole modal
   (see "Jay-pattern delayed modal reveal" rule below). */
.qr-frame-wrap {
    position: relative;
    display: inline-block;
    padding: var(--v2-sp-3);
    margin: 0 auto;
    line-height: 0;
}
/* Four yellow corner brackets — viewfinder feel */
/*  A109 · วัดแล้วบันทึกไว้ ยังไม่แก้: ตัวห่อ 304 padding 12 · รูป 280 มน 14
    วงเล็บ 22×22 มน 4 วางชิดมุมตัวห่อ  ถ้าจะให้เส้นโค้งร่วมศูนย์กับมุมรูปจริง
    รัศมีต้องเป็น 14+12 = 26 ซึ่งกล่อง 22px รับไม่ไหว (เบราว์เซอร์ย่อรัศมีลง
    เมื่อเกินด้าน วงเล็บจะกลายเป็นเสี้ยววงกลม) ทางเดียวคือขยายวงเล็บเป็น ~40px
    เป็นการตัดสินใจเชิงดีไซน์ ไม่ใช่บั๊กที่พิสูจน์ได้ — รอเจ้าของชี้ขาด */
.qr-frame-wrap::before,
.qr-frame-wrap::after,
.qr-frame-wrap > .qr-corner-tr,
.qr-frame-wrap > .qr-corner-bl {
    content: "";
    position: absolute;
    width: 22px;
    height: 22px;
    border: 2.5px solid var(--v2-yellow);
    border-radius: 4px;
    pointer-events: none;
}
.qr-frame-wrap::before {
    top: 0; left: 0;
    border-right: 0; border-bottom: 0;
}
.qr-frame-wrap::after {
    bottom: 0; right: 0;
    border-left: 0; border-top: 0;
}
.qr-frame-wrap > .qr-corner-tr {
    top: 0; right: 0;
    border-left: 0; border-bottom: 0;
}
.qr-frame-wrap > .qr-corner-bl {
    bottom: 0; left: 0;
    border-right: 0; border-top: 0;
}

/* QR image — white card so scanners can lock the contrast.
   No opacity gating: the delayed modal reveal (below) hides the
   whole modal during Perfect Panel's QR fetch, so by the time
   the modal fades in, the real QR is already painted. */
body .modal-content #qr-code-image {
    background: #FFFFFF;
    padding: var(--v2-sp-4);
    border-radius: var(--v2-r-md);
    max-width: 280px;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    box-shadow: var(--v2-elev-2),
        0 0 0 1px rgba(0, 0, 0, 0.04);
}

/* Anti-fraud watermark — white band across center of QR */
.qr-watermark-overlay {
    position: absolute;
    top: 50%;
    left: 18px;
    right: 18px;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.86);
    padding: var(--v2-sp-1) var(--v2-sp-2);
    text-align: center;
    pointer-events: none;
    z-index: 5;
    line-height: 1.3;
    border-radius: 3px;
}
.qr-watermark-overlay .wm-line1 {
    font-family: var(--v2-f-thai);
    font-size: 11px;
    font-weight: 700;
    color: rgba(160, 110, 0, 0.92);
}
.qr-watermark-overlay .wm-line2 {
    font-family: var(--v2-f-mono);
    font-size: 11px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.5);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-top: 1px;
}

/* Spinner block — keep visible while QR loads */
body .modal-content #qr-modal-spinner .fa-spinner-third {
    color: var(--v2-yellow);
    font-size: 34px;
    animation: qrSpin 0.9s linear infinite;
}
@keyframes qrSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Modal footer — single-use + 24h notices via pseudos */
body .modal-content:has(#qr-code-image) .modal-footer {
    flex-wrap: wrap;
    border-top: 1px solid var(--v2-line);
    padding: var(--v2-sp-4) var(--v2-sp-5) var(--v2-sp-5);
    justify-content: center;
    gap: 0;
}
body .modal-content:has(#qr-code-image) .modal-footer::before {
    content: "⚠ QR นี้ใช้ได้ครั้งเดียว ห้ามชำระซ้ำ";
    display: block;
    width: 100%;
    text-align: center;
    font-family: var(--v2-f-thai);
    font-size: 12px;
    font-weight: 600;
    color: var(--v2-warn);
    margin-bottom: 4px;
    order: -2;
}
body .modal-content:has(#qr-code-image) .modal-footer::after {
    content: "⏱ QR มีอายุ 24 ชั่วโมง หลังจากสร้าง";
    display: block;
    width: 100%;
    text-align: center;
    font-family: var(--v2-f-thai);
    font-size: 11px;
    color: var(--v2-ink-mute);
    margin-bottom: 12px;
    order: -1;
}
/* Yellow pill primary CTA */
body .modal-content:has(#qr-code-image) .modal-footer .btn,
body .modal-content:has(#qr-code-image) .modal-footer .btn.btn-default,
body .modal-content:has(#qr-code-image) .modal-footer .btn.btn-big-secondary {
    background: var(--v2-yellow) !important;
    color: var(--v2-yellow-ink) !important;
    border: 0 !important;
    border-radius: var(--v2-r-pill) !important;
    padding: var(--v2-sp-3) var(--v2-sp-7) !important;
    font-family: var(--v2-f-dis) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    width: 100%;
    max-width: 320px;
    box-shadow: 0 6px 18px -8px var(--v2-yellow-glow);
    transition: transform var(--v2-t-fast) var(--v2-ease), background var(--v2-t-fast) var(--v2-ease);
}
body .modal-content:has(#qr-code-image) .modal-footer .btn:hover {
    background: var(--v2-yellow-2) !important;
    transform: translateY(-1px);
}

/* Modal-body close button — repositioned for the QR layout */
body .modal-content:has(#qr-code-image) .modal-body > .close {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--v2-glass-2);
    border: 1px solid var(--v2-line);
    color: var(--v2-ink);
    opacity: 1;
    font-size: 16px;
    text-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 10;
}
body .modal-content:has(#qr-code-image) .modal-body > .close:hover {
    background: var(--v2-glass-3);
}
body .modal-content:has(#qr-code-image) .modal-body { position: relative; }

/* Light mode parity — keep QR card white (scanner contrast) but tune shadow */
html.light body .modal-content #qr-code-image {
    box-shadow: var(--v2-elev-2),
        0 0 0 1px rgba(18, 18, 20, 0.06);
}
html.light .qr-watermark-overlay { background: rgba(255, 255, 255, 0.78); }
html.light .qr-watermark-overlay .wm-line1 { color: rgba(140, 95, 0, 0.95); }
html.light .qr-watermark-overlay .wm-line2 { color: rgba(0, 0, 0, 0.55); }

/* Mobile sizing */
@media (max-width: 540px) {
    body .modal-content:has(#qr-code-image) .modal-body { padding: var(--v2-sp-6) var(--v2-sp-4) var(--v2-sp-3); }
    body .modal-content #qr-code-image { max-width: 220px; padding: var(--v2-sp-3); }
    .qr-frame-wrap { padding: var(--v2-sp-3); }
    .qr-frame-wrap::before,
    .qr-frame-wrap::after,
    .qr-frame-wrap > .qr-corner-tr,
    .qr-frame-wrap > .qr-corner-bl { width: 18px; height: 18px; border-width: 2px; }
    .qr-watermark-overlay { left: 12px; right: 12px; padding: var(--v2-sp-1) var(--v2-sp-2); }
    .qr-watermark-overlay .wm-line1 { font-size: 11px; }
    .qr-watermark-overlay .wm-line2 { font-size: 11px; }
    body .modal-content:has(#qr-code-image) .modal-footer { padding: var(--v2-sp-3) var(--v2-sp-4) var(--v2-sp-4); }
}

/* ============================================================
 *  R13.5 — Layer B additions: step indicator + pulse status +
 *  trust strip + loading skeleton (2026-04-25)
 * ============================================================ */

/* --- Step indicator above QR --- */
.qr-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--v2-sp-1);
    margin: 0 auto 18px;
    flex-wrap: nowrap;
}
.qr-step {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-2);
    padding: var(--v2-sp-2) var(--v2-sp-3) var(--v2-sp-2) var(--v2-sp-2);
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-pill);
}
.qr-step-n {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--v2-yellow);
    color: var(--v2-yellow-ink);
    font-family: var(--v2-f-dis);
    font-weight: 800;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.qr-step-t {
    font-family: var(--v2-f-thai);
    font-size: 12px;
    font-weight: 600;
    color: var(--v2-ink);
    line-height: 1;
    white-space: nowrap;
}
.qr-step-arrow {
    color: var(--v2-ink-mute);
    font-size: 16px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

/* --- Pulse status (visual reassurance — not real polling) --- */
.qr-pulse-status {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-2);
    margin: 16px auto 8px;
    padding: var(--v2-sp-2) var(--v2-sp-3);
    background: rgba(111, 228, 168, 0.10);
    border: 1px solid rgba(111, 228, 168, 0.32);
    border-radius: var(--v2-r-pill);
}
.qr-pulse-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--v2-ok);
    box-shadow: 0 0 0 0 rgba(111, 228, 168, 0.7);
    animation: qrPulse 1.6s var(--v2-ease) infinite;
    flex-shrink: 0;
}
.qr-pulse-text {
    font-family: var(--v2-f-thai);
    font-size: 12px;
    font-weight: 600;
    color: var(--v2-ok);
    line-height: 1;
}
@keyframes qrPulse {
    0%   { box-shadow: 0 0 0 0 rgba(111, 228, 168, 0.55); }
    70%  { box-shadow: 0 0 0 9px rgba(111, 228, 168, 0); }
    100% { box-shadow: 0 0 0 0 rgba(111, 228, 168, 0); }
}

/* --- Trust strip below pulse --- */
.qr-trust {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--v2-sp-2);
    margin: 4px auto 0;
    flex-wrap: wrap;
}
.qr-trust-item {
    font-family: var(--v2-f-thai);
    font-size: 11px;
    font-weight: 500;
    color: var(--v2-ink-dim);
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-1);
    line-height: var(--v2-lh-tight);
}
.qr-trust-item > i {
    color: var(--v2-yellow);
    font-size: 13px;
}
.qr-trust-sep {
    color: var(--v2-ink-mute);
    font-size: 12px;
    line-height: 1;
}

/* --- Loading skeleton (replaces default fa-spinner-third) --- */
body .modal-content #qr-modal-spinner {
    width: 280px;
    height: 280px;
    max-width: 100%;
    margin: 0 auto 14px;
    border-radius: var(--v2-r-md);
    background:
        linear-gradient(110deg,
            var(--v2-glass-2) 8%,
            rgba(255, 214, 10, 0.08) 18%,
            var(--v2-glass-2) 33%);
    background-size: 220% 100%;
    animation: qrShimmer 1.4s linear infinite;
    position: relative;
    overflow: hidden;
}
body .modal-content #qr-modal-spinner::before {
    content: "\f002";
    font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome";
    font-weight: 400;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--v2-ink-mute);
    font-size: 34px;
    opacity: 0.45;
}
body .modal-content #qr-modal-spinner > .spinner-block__wrapper {
    display: none;
}
@keyframes qrShimmer {
    0%   { background-position: 220% 0; }
    100% { background-position: -220% 0; }
}

/* Light-mode parity for new elements */
html.light .qr-step { background: rgba(18, 18, 20, 0.04); border-color: rgba(18, 18, 20, 0.10); }
html.light .qr-step-n { background: var(--v2-yellow); color: var(--v2-yellow-ink); }
html.light .qr-pulse-status {
    background: rgba(24, 160, 106, 0.10);
    border-color: rgba(24, 160, 106, 0.30);
}
html.light .qr-pulse-dot { background: var(--v2-ok); }
html.light .qr-pulse-text { color: var(--v2-ok); }
html.light body .modal-content #qr-modal-spinner {
    background:
        linear-gradient(110deg,
            rgba(18, 18, 20, 0.04) 8%,
            rgba(255, 200, 0, 0.10) 18%,
            rgba(18, 18, 20, 0.04) 33%);
    background-size: 220% 100%;
}

/* Mobile responsiveness for new elements */
@media (max-width: 540px) {
    .qr-steps { gap: var(--v2-sp-1); margin-bottom: 14px; }
    .qr-step { padding: var(--v2-sp-1) var(--v2-sp-2) var(--v2-sp-1) var(--v2-sp-1); gap: var(--v2-sp-1); }
    .qr-step-n { width: 19px; height: 19px; font-size: 11px; }
    .qr-step-t { font-size: 11px; }
    .qr-step-arrow { font-size: 13px; }
    .qr-pulse-status { padding: var(--v2-sp-2) var(--v2-sp-3); margin-top: 12px; }
    .qr-pulse-text { font-size: 11px; }
    .qr-trust { gap: var(--v2-sp-2); }
    .qr-trust-item { font-size: 11px; }
    body .modal-content #qr-modal-spinner { width: 220px; height: 220px; }
    body .modal-content #qr-modal-spinner::before { font-size: 26px; }
}
@media (max-width: 380px) {
    .qr-step-t { display: none; }
    .qr-step { padding: var(--v2-sp-1); }
    .qr-step-n { width: 22px; height: 22px; }
}

/* R13.7 — Jay-pattern delayed modal reveal (2026-04-25)
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
.modal.fade:has(#qr-code-image) .modal-dialog {
    opacity: 0;
    transform: scale(0.94) translateY(24px);
}
.modal.fade.show:has(#qr-code-image) .modal-dialog,
.modal.fade.in:has(#qr-code-image) .modal-dialog {
    animation: qrModalDelayedReveal 0.5s var(--v2-ease) 1.7s both;
}
@keyframes qrModalDelayedReveal {
    from { opacity: 0; transform: scale(0.94) translateY(24px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Backdrop blur — when a QR modal is open, blur the whole page so the
   prep overlay AND the modal itself read sharp on a soft canvas instead
   of competing with the addfunds form behind them. Scoped via :has() so
   lang/currency modals keep their original lighter feel. */
body:has(.modal.show #qr-code-image) .modal-backdrop,
body:has(.modal.in #qr-code-image) .modal-backdrop {
    backdrop-filter: blur(14px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
    background-color: #000 !important;
}
body:has(.modal.show #qr-code-image) .modal-backdrop.show,
body:has(.modal.in #qr-code-image) .modal-backdrop.show {
    opacity: 0.88 !important;
}
/* Defensive: while the QR modal is open, hard-hide the dormant
   #promoPopup element so it can never accidentally show through
   any transparent layer. The popup script is commented out anyway. */
body:has(.modal.show #qr-code-image) #promoPopup,
body:has(.modal.in #qr-code-image) #promoPopup {
    display: none !important;
}
html.light body:has(.modal.show #qr-code-image) .modal-backdrop,
html.light body:has(.modal.in #qr-code-image) .modal-backdrop {
    background-color: #121214 !important;
}
html.light body:has(.modal.show #qr-code-image) .modal-backdrop.show,
html.light body:has(.modal.in #qr-code-image) .modal-backdrop.show {
    opacity: 0.55 !important;
}

/* Skeleton spinner is now visible during the 1.5s "behind the curtain"
   loading window — useful only if Perfect Panel takes longer than 1.5s.
   Keep it styled but hidden once the modal is fully revealed (Perfect
   Panel sets inline display:none on it once QR src is set). */

/* Neutralize legacy `.modal-open .modal { z-index: 9999; backdrop-filter: blur(10px) }`
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
.modal-open .modal:has(#qr-code-image) {
    z-index: 1050 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Vertical centering for the QR modal (Bootstrap 4 default pins it near
   the top via .modal-dialog { margin: 1.75rem auto }). */
.modal.fade.show:has(#qr-code-image),
.modal.fade.in:has(#qr-code-image) {
    display: flex !important;
    align-items: center;
    justify-content: center;
}
.modal.fade:has(#qr-code-image) .modal-dialog {
    margin: 16px auto !important;
    max-width: 480px;
    width: calc(100% - 24px);
    max-height: calc(100vh - 32px);
    display: flex;
    align-items: stretch;
    justify-content: center;
}
.modal.fade:has(#qr-code-image) .modal-content {
    width: 100%;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
}

/* ============================================================
 *  R14 — QR prep loading overlay (premium SaaS-grade) (2026-04-25)
 *  Glass card centered between modal-backdrop and modal-dialog,
 *  shown during the 1.5s modal-reveal delay so the user sees brand
 *  craft instead of a blank dark overlay.
 * ============================================================ */
.qr-prep-overlay {
    position: fixed;
    inset: 0;
    /* Bootstrap 4: .modal-backdrop = 1040, .modal = 1050.
       Park overlay at 1045 — visible while .modal-dialog has
       opacity:0, hidden once the modal fades in to opacity:1
       (modal at 1050 covers it). */
    z-index: 1045;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    padding: var(--v2-sp-4);
    animation: qrPrepOverlayIn 0.32s var(--v2-ease) both;
}
.qr-prep-overlay.qr-prep-fading {
    animation: qrPrepOverlayOut 0.2s var(--v2-ease) forwards;
}
@keyframes qrPrepOverlayIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes qrPrepOverlayOut {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(0.97); }
}

.qr-prep-card {
    position: relative;
    width: 320px;
    max-width: 100%;
    padding: var(--v2-sp-6) var(--v2-sp-6) var(--v2-sp-5);
    background:
        linear-gradient(180deg, rgba(255, 214, 10, 0.04) 0%, rgba(255, 214, 10, 0) 50%),
        rgba(12, 12, 16, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--v2-r-lg);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.08) inset,
        0 30px 80px -20px rgba(0, 0, 0, 0.85),
        0 0 0 1px rgba(0, 0, 0, 0.4);
    backdrop-filter: var(--v2-blur-strong);
    -webkit-backdrop-filter: var(--v2-blur-strong);
    text-align: center;
    overflow: hidden;
    isolation: isolate;
    transform: scale(0.96);
    animation: qrPrepCardIn 0.5s var(--v2-ease) 0.05s forwards;
}
@keyframes qrPrepCardIn {
    to { transform: scale(1); }
}
.qr-prep-card-glow {
    position: absolute;
    inset: -50% -25% auto -25%;
    height: 200%;
    background: radial-gradient(60% 50% at 50% 0%, rgba(255, 214, 10, 0.20), transparent 70%);
    pointer-events: none;
    z-index: -1;
}

/* QR-grid: 7×7 yellow dots fading in with random delays + sweeping scan line */
.qr-prep-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--v2-sp-1);
    width: 96px;
    height: 96px;
    padding: var(--v2-sp-2);
    margin: 4px auto 18px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 214, 10, 0.18);
    border-radius: var(--v2-r-sm);
    overflow: hidden;
}
.qr-prep-dot {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--v2-yellow);
    border-radius: 1.5px;
    opacity: 0;
    transform: scale(0.4);
    box-shadow: 0 0 6px rgba(255, 214, 10, 0.6);
    animation: qrPrepDotIn 0.6s var(--v2-ease) forwards;
}
@keyframes qrPrepDotIn {
    0%   { opacity: 0; transform: scale(0.4); }
    60%  { opacity: 1; transform: scale(1.08); }
    100% { opacity: 0.92; transform: scale(1); }
}
.qr-prep-scan {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 14px;
    background: linear-gradient(180deg,
        rgba(255, 214, 10, 0) 0%,
        rgba(255, 214, 10, 0.85) 50%,
        rgba(255, 214, 10, 0) 100%);
    box-shadow: 0 0 10px rgba(255, 214, 10, 0.55);
    pointer-events: none;
    animation: qrPrepScan 1.5s var(--v2-ease) infinite;
}
@keyframes qrPrepScan {
    0%   { transform: translateY(-100%); opacity: 0; }
    20%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { transform: translateY(96px); opacity: 0; }
}

/* Title */
.qr-prep-title {
    font-family: var(--v2-f-thai);
    font-size: 14px;
    font-weight: 700;
    color: var(--v2-ink);
    line-height: 1.3;
    margin: 0 0 6px;
    letter-spacing: 0.005em;
}

/* Status row — rotating message + animated dots */
.qr-prep-status {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    font-family: var(--v2-f-thai);
    font-size: 12px;
    font-weight: 500;
    color: var(--v2-ink-mute);
    margin-bottom: 14px;
    min-height: 16px;
}
.qr-prep-status-text {
    transition: opacity var(--v2-t-fast) var(--v2-ease);
}
.qr-prep-status-dots {
    color: var(--v2-yellow);
    font-weight: 700;
    min-width: 14px;
    text-align: left;
}

/* Progress bar */
.qr-prep-bar {
    position: relative;
    height: 3px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: var(--v2-r-pill);
    overflow: hidden;
    margin-bottom: 18px;
}
.qr-prep-bar-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0%;
    background: linear-gradient(90deg, var(--v2-yellow-2), var(--v2-yellow));
    box-shadow: 0 0 8px rgba(255, 214, 10, 0.5);
    border-radius: var(--v2-r-pill);
    animation: qrPrepBar 1.4s var(--v2-ease) forwards;
}
@keyframes qrPrepBar {
    0%   { width: 0%; }
    50%  { width: 60%; }
    85%  { width: 88%; }
    100% { width: 100%; }
}

/* Brand mark */
.qr-prep-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-2);
    padding-top: var(--v2-sp-3);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    width: 100%;
    justify-content: center;
}
.qr-prep-brand-mark {
    width: 28px;
    height: 28px;
    border-radius: var(--v2-r-xs);
    background: linear-gradient(135deg, var(--v2-yellow), var(--v2-yellow-2));
    color: var(--v2-yellow-ink);
    font-family: var(--v2-f-dis);
    font-weight: 800;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px -4px rgba(255, 214, 10, 0.5);
    flex-shrink: 0;
    line-height: 1;
}
.qr-prep-brand-stack {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    line-height: 1;
}
.qr-prep-brand-text {
    font-family: var(--v2-f-dis);
    font-size: 12px;
    font-weight: 800;
    color: var(--v2-ink);
    letter-spacing: 0.06em;
    line-height: 1;
}
.qr-prep-brand-tag {
    font-family: var(--v2-f-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--v2-ink-mute);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1;
}

/* Light mode — softer card, paper bg */
html.light .qr-prep-card {
    background:
        linear-gradient(180deg, rgba(255, 200, 0, 0.06) 0%, rgba(255, 200, 0, 0) 50%),
        rgba(255, 255, 255, 0.96);
    border-color: rgba(18, 18, 20, 0.10);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 1) inset,
        0 30px 70px -20px rgba(18, 18, 20, 0.30),
        0 0 0 1px rgba(18, 18, 20, 0.05);
}
html.light .qr-prep-card-glow {
    background: radial-gradient(60% 50% at 50% 0%, rgba(255, 200, 0, 0.20), transparent 70%);
}
html.light .qr-prep-grid {
    background: rgba(18, 18, 20, 0.025);
    border-color: rgba(255, 200, 0, 0.30);
}
html.light .qr-prep-dot { box-shadow: 0 0 4px rgba(255, 200, 0, 0.5); }
html.light .qr-prep-bar { background: rgba(18, 18, 20, 0.06); }
html.light .qr-prep-brand { border-top-color: rgba(18, 18, 20, 0.06); }

/* Mobile sizing */
@media (max-width: 540px) {
    .qr-prep-card { width: 290px; padding: var(--v2-sp-6) var(--v2-sp-5) var(--v2-sp-4); }
    .qr-prep-grid { width: 84px; height: 84px; padding: var(--v2-sp-1); gap: var(--v2-sp-1); }
    .qr-prep-scan { height: 12px; }
    @keyframes qrPrepScan {
        0%   { transform: translateY(-100%); opacity: 0; }
        20%  { opacity: 1; }
        80%  { opacity: 1; }
        100% { transform: translateY(84px); opacity: 0; }
    }
    .qr-prep-title { font-size: 14px; }
    .qr-prep-status { font-size: 11px; }
    .qr-prep-brand-mark { width: 26px; height: 26px; font-size: 14px; }
    .qr-prep-brand-text { font-size: 12px; }
    .qr-prep-brand-tag { font-size: 11px; }
}

/* Reduced motion: skip the animations, fade in/out only */
@media (prefers-reduced-motion: reduce) {
    .qr-prep-dot { animation: none; opacity: 0.92; transform: none; }
    .qr-prep-scan { animation: none; opacity: 0; }
    .qr-prep-bar-fill { animation: none; width: 60%; }
    .qr-prep-card { animation: none; transform: none; }
}

/* R17 — blogpost.twig single-post layout (2026-04-26)
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
body#dash .blogpost-header,
body#outside .blogpost-header {
    margin-bottom: 18px;
}
body#dash .blogpost-back,
body#outside .blogpost-back {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-2);
    padding: var(--v2-sp-2) var(--v2-sp-4);
    margin-top: 12px;
    border-radius: var(--v2-r-pill);
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    color: var(--v2-ink);
    font-family: var(--v2-f-thai);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background var(--v2-t-fast), color var(--v2-t-fast), transform var(--v2-t-fast), border-color var(--v2-t-fast);
}
body#dash .blogpost-back:hover,
body#outside .blogpost-back:hover {
    background: var(--v2-yellow-soft);
    border-color: rgba(255, 214, 10, 0.35);
    color: var(--v2-yellow);
    transform: translateX(-2px);
}
body#dash .blogpost-back > i,
body#outside .blogpost-back > i { font-size: 14px; }

/* --- Single-post reading layout ---
   A73 · G3 · ‼ บล็อกเดิมทั้งก้อนผูกกับ `.blog-card-single` ซึ่ง **ไม่มีในเทมเพลตไหนเลย**
     (`grep -rn blog-card-single *.twig` = 0) blogpost.twig เรนเดอร์ `.blog-card` เฉย ๆ
     แปลว่าเนื้อหาบทความ **ไม่เคยถูกจัดตัวอักษรเลยสักครั้ง** — ขนาด ระยะบรรทัด สี
     ระยะย่อหน้า และสีลิงก์ ทั้งหมดยิงใส่คลาสที่ไม่เคยเกิดขึ้น
     ของที่เห็นบนจอตอนนี้มาจากกฎทั่วไปล้วน ๆ (วัดได้ 16px/32px สีหมึกเต็ม 63 ตัวอักษรต่อบรรทัด)
   เขียนใหม่ให้ผูกกับ `.blog-text` ซึ่งมีอยู่จริง และมีที่เดียวคือเนื้อหาบทความ
   ‼ หน้านี้ guest เห็นด้วย การเปลี่ยนจึงกระทบฝั่ง guest **โดยตั้งใจ** ต่างจากเฟสก่อน ๆ
     ที่ทำงานเฉพาะฝั่ง authed — ด่าน guest รอบนี้ต้องอ่านว่า "เปลี่ยนเฉพาะกล่องเนื้อหาบทความ" */
body#dash .blog-single .blog-card,
body#outside .blog-single .blog-card {
    max-width: 920px;
    margin: 0 auto !important;
}
body#dash .blog-single .blog-card:hover,
body#outside .blog-single .blog-card:hover {
    transform: none;   /* กันเอฟเฟกต์ยกของการ์ดในหน้ารายการมาโดนหน้าบทความ */
    background: transparent;
}

/* ‼ ขนาด · ระยะบรรทัด · ความกว้างบรรทัด **ไม่ได้อยู่ที่นี่** — อยู่ที่หัวข้อ 11 "อ่านยาว"
     (`body#outside .blog-text, body#dash .blog-text` → 16px / 2.0 / 64ch) ซึ่งอยู่ทีหลังในไฟล์
     เขียนซ้ำตรงนี้ครั้งแรกแล้วแพ้ทั้งสามบรรทัด specificity เท่ากัน ลำดับตัดสิน
   ‼ ตรวจแล้วว่าค่าที่นั่น **ดีอยู่แล้ว** จึงไม่ย้ายมาและไม่แก้ให้เป็น 15px/1.9/66ch ตามภาพ:
     64ch กับ 66ch ต่างกันสองตัวอักษร · 2.0 กับ 1.9 ต่างกัน 1.6px ต่อบรรทัด
     ส่วน 15px เล็กกว่าที่ควรสำหรับไทยที่มีสระบนล่าง — เปลี่ยนแล้วแย่ลง ไม่ใช่ดีขึ้น
   ที่ขาดจริงและเพิ่มที่นี่คือ **สี** กับการจัดองค์ประกอบในเนื้อหา (ย่อหน้า หัวข้อย่อย
   คำพูดยกมา รายการ ลิงก์ ตัวหนา) ซึ่งไม่เคยมีใครตั้งเลย */
body#dash .blog-text,
body#outside .blog-text {
    font-family: var(--v2-f-thai);
    color: var(--v2-ink-dim);
}
body#dash .blog-text p,
body#outside .blog-text p { margin: 0 0 18px; }
body#dash .blog-text p:last-child,
body#outside .blog-text p:last-child { margin-bottom: 0; }
body#dash .blog-text strong,
body#outside .blog-text strong { font-weight: 700; color: var(--v2-ink); }

/* หัวข้อย่อยในเนื้อหา — โพสต์ปัจจุบันยังไม่มี h2 แต่ระบบเก็บเป็น rich text
   ถ้าไม่ตั้งไว้ วันที่มีคนใส่หัวข้อจะได้ขนาดจากกฎ h2 ทั่วเว็บซึ่งใหญ่เกินไปในเนื้อหา */
body#dash .blog-text h2, body#outside .blog-text h2,
body#dash .blog-text h3, body#outside .blog-text h3 {
    margin: 28px 0 0;
    font-family: var(--v2-f-dis);
    font-size: 21px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -0.015em;
    color: var(--v2-ink);
}
body#dash .blog-text h2 + p, body#outside .blog-text h2 + p,
body#dash .blog-text h3 + p, body#outside .blog-text h3 + p { margin-top: 12px; }

/* คำพูดยกมา — เส้นซ้ายหนา 3px ตามดีไซน์ */
body#dash .blog-text blockquote,
body#outside .blog-text blockquote {
    margin: 22px 0;
    padding: 0 0 0 20px;
    border-left: 3px solid var(--v2-yellow);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.85;
    color: var(--v2-ink);
}

/* ‼ รายการหัวข้อย่อย — ดีไซน์ไม่ได้วาดไว้ แต่เนื้อหาจริงมี <ul><li> อยู่
   ปล่อยไว้จะได้ระยะจากกฎทั่วไปซึ่งไม่เข้ากับระยะบรรทัด 1.9 ของย่อหน้ารอบ ๆ */
body#dash .blog-text ul, body#outside .blog-text ul,
body#dash .blog-text ol, body#outside .blog-text ol {
    margin: 0 0 18px;
    padding-left: 22px;
}
body#dash .blog-text li,
body#outside .blog-text li { margin-bottom: 8px; }

body#dash .blog-text a,
body#outside .blog-text a {
    color: var(--v2-yellow-text);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}
body#dash .blog-text a:hover,
body#outside .blog-text a:hover { color: var(--v2-yellow-2); }

/* ─── A78 · G3 · แถวแชร์ท้ายบทความ (ดีไซน์ Panel G บรรทัด ~23900) ─────────
   ‼ ดีไซน์มีบล็อกชื่อผู้เขียนคู่กับปุ่มแชร์ **ไม่ทำ** เพราะไม่มีฟิลด์ผู้เขียน
     ที่ว่างฝั่งซ้ายจึงใส่ป้ายสั้น ๆ แทน ไม่งั้นเหลือวงกลมสามอันลอยใต้เส้นคั่น
   ‼ token ต้องเป็นตัวที่ประกาศบน `html, html.light` เท่านั้น หน้าบทความเปิดแบบ
     guest ได้ ถ้าใช้ --v2-well / --v2-surface ที่ผูกกับ body.v2-dash จะตายทั้งบรรทัด
     (บั๊กเดียวกับ A74 ที่ทำให้ปุ่มเข้าสู่ระบบเป็นหมึกบนหมึก contrast 1.0) */
body#dash .blog-share,
body#outside .blog-share {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 32px;
    padding-top: 22px;
    border-top: 1px solid var(--v2-line);
}
body#dash .blog-share-label,
body#outside .blog-share-label {
    font-family: var(--v2-f-thai);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--v2-ink-mute);
}
body#dash .blog-share-btns,
body#outside .blog-share-btns { display: flex; gap: 8px; }
body#dash .blog-share-b,
body#outside .blog-share-b {
    width: 36px;
    height: 36px;
    flex: none;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--adv-inner);
    color: var(--v2-ink-dim);
    display: grid;
    place-items: center;
    font-size: 13px;
    cursor: pointer;
    text-decoration: none !important;
    transition: background var(--v2-t-fast), color var(--v2-t-fast);
}
body#dash .blog-share-b:hover,
body#outside .blog-share-b:hover {
    background: var(--v2-yellow-soft);
    color: var(--v2-yellow-text);
}
body#dash .blog-share-b.is-done,
body#outside .blog-share-b.is-done {
    background: var(--v2-ok-soft, var(--v2-yellow-soft));
    color: var(--v2-ok, var(--v2-yellow-text));
}
@media (max-width: 540px) {
    body#dash .blog-share,
    body#outside .blog-share { flex-direction: column; align-items: flex-start; gap: 12px; }
}

@media (max-width: 540px) {
    body#dash .blog-text h2, body#outside .blog-text h2,
    body#dash .blog-text h3, body#outside .blog-text h3 { font-size: 19px; }
    body#dash .blogpost-back,
    body#outside .blogpost-back { font-size: 12px; padding: var(--v2-sp-2) var(--v2-sp-3); }
}

/* R20 — guest-page theme toggle (segmented pill) (2026-04-26)
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
body#outside .outside-switcher {
    display: inline-flex !important;
    align-items: center;
    gap: 2px;
    padding: var(--v2-sp-1);
    height: auto;
    width: auto;
    background: var(--v2-glass) !important;
    border: 1px solid var(--v2-line) !important;
    border-radius: var(--v2-r-pill);
    backdrop-filter: var(--v2-blur);
    -webkit-backdrop-filter: var(--v2-blur);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 4px 12px -4px rgba(0, 0, 0, 0.30);
}
/* Force BOTH buttons visible (defeat legacy display:none rules) */
body#outside .outside-switcher .switcher-item,
body#outside .outside-switcher .light-btn,
body#outside .outside-switcher .dark-btn,
.dark body#outside .outside-switcher .dark-btn,
.dark body#outside .outside-switcher .light-btn,
html.light body#outside .outside-switcher .light-btn,
html.light body#outside .outside-switcher .dark-btn {
    display: inline-flex !important;
    /* A101 · 34 → 44 · เป้ากดของสวิตช์ธีมฝั่ง guest
       ‼ ต้องแก้ที่กฎนี้เท่านั้น — กลุ่มนี้มี `html.light body#outside …` อยู่ด้วย ซึ่งเป็น (1,3,1)
         กฎใหม่ที่เขียน `body#outside .outside-switcher .switcher-item` (1,2,1) แพ้แม้ใส่
         !important แล้ว (ลองแล้ววัดแล้ว: ยังได้ 34x34 เท่าเดิม) */
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: var(--v2-r-pill)!important;
    background: transparent !important;
    border: 0 !important;
    color: var(--v2-ink-mute) !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    transition: background var(--v2-t-base) var(--v2-ease), color var(--v2-t-base) var(--v2-ease), transform var(--v2-t-base) var(--v2-ease) !important;
    box-shadow: none !important;
    font-size: 14px !important;
}
body#outside .outside-switcher .switcher-item svg {
    width: 16px;
    height: 16px;
    display: block;
}
body#outside .outside-switcher .switcher-item:hover {
    background: var(--v2-glass-2) !important;
    color: var(--v2-ink) !important;
}
/* Active state — current mode = yellow filled circle */
html.dark body#outside .outside-switcher .dark-btn,
html.light body#outside .outside-switcher .light-btn {
    background: var(--v2-yellow) !important;
    color: var(--v2-yellow-ink) !important;
    box-shadow: 0 4px 12px -4px var(--v2-yellow-glow, rgba(255, 214, 10, 0.55)) !important;
}
html.dark body#outside .outside-switcher .dark-btn:hover,
html.light body#outside .outside-switcher .light-btn:hover {
    background: var(--v2-yellow-2) !important;
}


/* ============================================================
 *  R18 — signin.twig Google Sign-In (2026-04-26)
 *  v2 SaaS-grade pattern: hairline divider + glass pill button
 *  with yellow halo on hover. Hides Perfect Panel's official GSI
 *  button (used as a click proxy) and presents our own custom UI.
 * ============================================================ */

/* Hide GSI's own widgets — we trigger them via the proxy button below.
   Simple display:none matches Likester's working pattern. Earlier sr-only
   approach (clip + 1×1 + pointer-events:none) made GSI refuse to render
   the button. */
.signin-google-hidden {
    display: none !important;
}

/* Hairline divider with centered "หรือ" text */
.signin-divider {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-3);
    margin: 22px 0 16px;
    color: var(--v2-ink-mute);
    font-family: var(--v2-f-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    user-select: none;
    -webkit-user-select: none;
}
.signin-divider::before,
.signin-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--v2-line) 30%,
        var(--v2-line) 70%,
        transparent 100%);
}
.signin-divider-text {
    flex: 0 0 auto;
    color: var(--v2-ink-mute);
}

/* Glass pill Google button — premium SaaS feel */
.btn-google-v2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--v2-sp-3);
    width: 100%;
    height: 48px;
    padding: 0 var(--v2-sp-5);
    border-radius: var(--v2-r-pill);
    background: var(--v2-glass-2);
    border: 1px solid var(--v2-line);
    color: var(--v2-ink);
    font-family: var(--v2-f-dis);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none !important;
    transition:
        background var(--v2-t-base) var(--v2-ease),
        border-color var(--v2-t-base) var(--v2-ease),
        transform var(--v2-t-base) var(--v2-ease),
        box-shadow var(--v2-t-base) var(--v2-ease);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.05) inset,
        0 4px 12px -4px rgba(0, 0, 0, 0.30);
}
.btn-google-v2::before {
    /* Yellow halo wash, hidden until hover */
    content: "";
    position: absolute;
    inset: -50% -25% auto -25%;
    height: 200%;
    background: radial-gradient(60% 50% at 50% 0%, rgba(255, 214, 10, 0.18), transparent 70%);
    opacity: 0;
    transition: opacity var(--v2-t-base) var(--v2-ease);
    pointer-events: none;
    z-index: -1;
}
.btn-google-v2:hover {
    background: var(--v2-glass-3);
    border-color: rgba(255, 214, 10, 0.35);
    transform: translateY(-1px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.08) inset,
        0 8px 22px -6px rgba(0, 0, 0, 0.45),
        0 0 0 4px rgba(255, 214, 10, 0.10);
}
.btn-google-v2:hover::before { opacity: 1; }
.btn-google-v2:active {
    transform: translateY(0);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.05) inset,
        0 3px 8px -3px rgba(0, 0, 0, 0.35);
}
.btn-google-v2:focus-visible {
    outline: 0;
    border-color: var(--v2-yellow);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.05) inset,
        0 4px 12px -4px rgba(0, 0, 0, 0.30),
        0 0 0 4px rgba(255, 214, 10, 0.22);
}
.btn-google-v2-icon {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--v2-r-xs);
    background: #fff;
    flex-shrink: 0;
    box-shadow: var(--v2-elev-1);
}
.btn-google-v2-icon svg { display: block; }
.btn-google-v2-text {
    line-height: 1;
    white-space: nowrap;
}

/* Light mode parity */
html.light .btn-google-v2 {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(18, 18, 20, 0.10);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.7) inset,
        0 4px 12px -4px rgba(18, 18, 20, 0.10);
}
html.light .btn-google-v2:hover {
    background: #ffffff;
    border-color: rgba(255, 200, 0, 0.45);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 8px 22px -6px rgba(18, 18, 20, 0.18),
        0 0 0 4px rgba(255, 200, 0, 0.14);
}

/* Mobile tighter sizing */
@media (max-width: 540px) {
    .signin-divider { margin: 18px 0 14px; font-size: 11px; gap: var(--v2-sp-2); }
    .btn-google-v2 { height: 46px; font-size: 13px; gap: var(--v2-sp-2); }
    .btn-google-v2-icon { width: 20px; height: 20px; }
    .btn-google-v2-icon svg { width: 16px; height: 16px; }
}

/* R23 — signup.twig full v2 redesign (2026-04-27)
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */

/* Outer auth section — full viewport, dark editorial bg */
body#outside .v2-auth {
    position: relative;
    min-height: 100vh;
    background: var(--v2-bg);
    color: var(--v2-ink);
    padding: var(--v2-sp-6) var(--v2-sp-6) 48px;
    overflow: hidden;
    isolation: isolate;
}
body#outside .v2-auth::before {
    /* Subtle yellow halo behind content */
    content: "";
    position: absolute;
    inset: -20% -10% 20% -10%;
    background: radial-gradient(60% 50% at 50% 50%, rgba(255, 214, 10, 0.10), transparent 70%);
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
}

/* Header — logo + back button */
body#outside .v2-auth-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1280px;
    margin: 0 auto 36px;
    padding: var(--v2-sp-3) 0;
    position: relative;
    z-index: 2;
}
body#outside .v2-auth-logo {
    display: inline-flex;
    align-items: center;
    height: 44px;
    text-decoration: none !important;
    color: var(--v2-ink);
    font-family: var(--v2-f-dis);
    font-weight: 800;
    font-size: 20px;
    letter-spacing: 0.04em;
}
body#outside .v2-auth-logo img {
    height: 38px;
    width: auto;
    display: block;
}
body#outside .v2-auth-back {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-2);
    padding: var(--v2-sp-2) var(--v2-sp-4);
    border-radius: var(--v2-r-pill);
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    color: var(--v2-ink);
    font-family: var(--v2-f-thai);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background var(--v2-t-base) var(--v2-ease), border-color var(--v2-t-base) var(--v2-ease), transform var(--v2-t-base) var(--v2-ease);
    backdrop-filter: var(--v2-blur);
    -webkit-backdrop-filter: var(--v2-blur);
}
body#outside .v2-auth-back:hover {
    background: var(--v2-glass-2);
    border-color: rgba(255, 214, 10, 0.35);
    transform: translateX(-2px);
}
body#outside .v2-auth-back > i { font-size: 14px; color: var(--v2-yellow); }

/* Wrap — 2 column grid */
body#outside .v2-auth-wrap {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 64px;
    align-items: start;
    position: relative;
    z-index: 1;
}
@media (max-width: 991px) {
    body#outside .v2-auth-wrap {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    body#outside .v2-auth-left { display: none; } /* hide benefits on mobile, form takes priority */
}

/* Left side — benefits panel */
body#outside .v2-auth-left {
    padding-top: var(--v2-sp-3);
}
body#outside .v2-auth-h1 {
    font-family: var(--v2-f-dis);
    font-size: var(--v2-fs-fluid-3);
    font-weight: 800;
    line-height: var(--v2-lh-tight);
    margin: 14px 0 18px;
    color: var(--v2-ink);
}
body#outside .v2-auth-sub {
    font-family: var(--v2-f-thai);
    font-size: 14px;
    line-height: 1.7;
    color: var(--v2-ink-dim);
    margin: 0 0 32px;
    max-width: 520px;
}
body#outside .v2-auth-sub strong {
    color: var(--v2-ink);
    font-weight: 700;
}
body#outside .v2-auth-benefits {
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
    display: grid;
    gap: var(--v2-sp-3);
}
body#outside .v2-auth-benefits li {
    display: flex;
    align-items: flex-start;
    gap: var(--v2-sp-3);
    padding: var(--v2-sp-3) var(--v2-sp-4);
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-md);
    backdrop-filter: var(--v2-blur);
    -webkit-backdrop-filter: var(--v2-blur);
    transition: background var(--v2-t-base) var(--v2-ease), border-color var(--v2-t-base) var(--v2-ease), transform var(--v2-t-base) var(--v2-ease);
}
body#outside .v2-auth-benefits li:hover {
    background: var(--v2-glass-2);
    border-color: rgba(255, 214, 10, 0.20);
    transform: translateY(-1px);
}
body#outside .v2-auth-benefits .ic {
    width: 38px;
    height: 38px;
    border-radius: var(--v2-r-sm);
    background: var(--v2-yellow-soft);
    color: var(--v2-yellow);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    border: 1px solid rgba(255, 214, 10, 0.18);
}
body#outside .v2-auth-benefits li > div {
    display: flex;
    flex-direction: column;
    gap: var(--v2-sp-1);
    min-width: 0;
}
body#outside .v2-auth-benefits strong {
    font-family: var(--v2-f-dis);
    font-size: 14px;
    font-weight: 700;
    color: var(--v2-ink);
    line-height: 1.3;
}
body#outside .v2-auth-benefits small {
    font-family: var(--v2-f-thai);
    font-size: 12px;
    line-height: 1.5;
    color: var(--v2-ink-mute);
}

/* Trust strip — star rating */
body#outside .v2-auth-trust {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-2);
    padding: var(--v2-sp-2) var(--v2-sp-4);
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-pill);
    font-family: var(--v2-f-thai);
    font-size: 12px;
    color: var(--v2-ink-dim);
    backdrop-filter: var(--v2-blur);
    -webkit-backdrop-filter: var(--v2-blur);
}
body#outside .v2-auth-trust .v2-stars {
    display: inline-flex;
    gap: 2px;
    color: var(--v2-yellow);
    font-size: 11px;
}
body#outside .v2-auth-trust strong {
    color: var(--v2-ink);
    font-family: var(--v2-f-dis);
    font-weight: 700;
    font-size: 13px;
}

/* Right side — form column (re-uses .login-card already styled in v2) */
body#outside .v2-auth-right {
    width: 100%;
    max-width: 480px;
    margin-left: auto;
}
@media (max-width: 991px) {
    body#outside .v2-auth-right {
        max-width: 100%;
        margin: 0 auto;
    }
}
body#outside .v2-auth-right .v2-signin-head {
    text-align: left;
    margin-bottom: 18px;
}
body#outside .v2-auth-right .v2-split-login-title {
    font-family: var(--v2-f-dis);
    font-size: var(--v2-fs-fluid-1);
    font-weight: 800;
    line-height: var(--v2-lh-tight);
    margin: 8px 0 6px;
    color: var(--v2-ink);
}
body#outside .v2-auth-right .v2-signin-head p {
    font-family: var(--v2-f-thai);
    font-size: 13px;
    color: var(--v2-ink-mute);
    margin: 0;
}

/* Terms checkbox row */
body#outside .v2-auth-terms {
    display: flex;
    align-items: flex-start;
    gap: var(--v2-sp-2);
    margin: 4px 0 14px !important;
    padding: var(--v2-sp-3) var(--v2-sp-3);
    background: var(--v2-glass);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-sm);
}
body#outside .v2-auth-terms input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
    accent-color: var(--v2-yellow);
    flex-shrink: 0;
    cursor: pointer;
}
body#outside .v2-auth-terms label {
    font-family: var(--v2-f-thai);
    font-size: 12px;
    line-height: 1.5;
    color: var(--v2-ink-dim);
    margin: 0;
    cursor: pointer;
}
body#outside .v2-auth-terms a {
    color: var(--v2-yellow);
    text-decoration: underline;
    text-underline-offset: 2px;
}
body#outside .v2-auth-terms a:hover { color: var(--v2-yellow-2); }

/* Submit button — pill style with arrow */
body#outside .v2-auth-right .btn-primary.btn-block {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--v2-sp-2);
    width: 100%;
    height: 50px;
    padding: 0 var(--v2-sp-6);
    border-radius: var(--v2-r-pill);
    background: var(--v2-yellow) !important;
    color: var(--v2-yellow-ink) !important;
    border: 0 !important;
    font-family: var(--v2-f-dis);
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 8px 22px -6px var(--v2-yellow-glow, rgba(255, 214, 10, 0.55)) !important;
    transition: transform var(--v2-t-base) var(--v2-ease), box-shadow var(--v2-t-base) var(--v2-ease), background var(--v2-t-base) var(--v2-ease);
}
body#outside .v2-auth-right .btn-primary.btn-block:hover {
    background: var(--v2-yellow-2) !important;
    transform: translateY(-1px);
    box-shadow: 0 12px 28px -8px var(--v2-yellow-glow, rgba(255, 214, 10, 0.65)) !important;
}
body#outside .v2-auth-right .btn-primary.btn-block:active {
    transform: translateY(0);
}
body#outside .v2-auth-right .btn-primary.btn-block > i {
    font-size: 16px;
    transition: transform var(--v2-t-base) var(--v2-ease);
}
body#outside .v2-auth-right .btn-primary.btn-block:hover > i {
    transform: translateX(2px);
}

/* Footer links — "มีบัญชีอยู่แล้ว? เข้าสู่ระบบ"
   Reset legacy `.frgt-pass { background: rgba(232,255,49,0.15); border: 1px solid var(--main-color) }`
   at style.css:7707 which painted a yellow-tinted bordered box around the link.
   Scoped to .login-card so both signin AND signup form footers get the clean look. */
body#outside .login-card .frgt-pass,
body#outside .v2-auth-right .frgt-pass {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--v2-sp-2);
    margin-top: 18px;
    padding: var(--v2-sp-3) 0 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid var(--v2-line) !important;
    border-radius: 0!important;
    font-family: var(--v2-f-thai);
    font-size: 13px;
    color: var(--v2-ink-mute);
}
body#outside .v2-auth-right .frgt-pass a {
    color: var(--v2-ink);
    text-decoration: none !important;
    transition: color var(--v2-t-base) var(--v2-ease);
}
body#outside .v2-auth-right .frgt-pass a:hover { color: var(--v2-yellow); }
body#outside .v2-auth-right .frgt-pass a strong { font-weight: 700; }

/* Mobile sizing */
@media (max-width: 540px) {
    body#outside .v2-auth { padding: var(--v2-sp-4) var(--v2-sp-4) var(--v2-sp-7); }
    body#outside .v2-auth-header { margin-bottom: 24px; padding: var(--v2-sp-2) 0; }
    body#outside .v2-auth-back { padding: var(--v2-sp-2) var(--v2-sp-3); font-size: 12px; }
    body#outside .v2-auth-back > i { font-size: 13px; }
    body#outside .v2-auth-back span { display: none; }
    body#outside .v2-auth-right .v2-split-login-title { font-size: 26px; }
    body#outside .v2-auth-right .btn-primary.btn-block { height: 46px; font-size: 14px; }
}

/* /services redesign — "boost gracefully" catalog (from design bundle
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */

/* ── HERO · signin-DNA showcase band ── */
.svc34 .cat-hero { position: relative; overflow: hidden; border-radius: var(--v2-r-lg); border: 1px solid var(--v2-line); background: var(--v2-glass); backdrop-filter: var(--v2-blur); -webkit-backdrop-filter: var(--v2-blur); box-shadow: var(--v2-shadow-1); margin-top: 6px; }
.svc34 .cat-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(900px 460px at 88% 10%, var(--v2-yellow-soft), transparent 60%), radial-gradient(700px 420px at 0% 120%, rgba(120,90,255,0.10), transparent 60%); }
.svc34 .cat-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--v2-sp-6); padding: 40px 44px; }
.svc34 .cat-hero-left { display: flex; flex-direction: column; gap: var(--v2-sp-4); justify-content: center; }
.svc34 .cat-hero h1 { font-family: var(--v2-f-dis); font-weight: 800; font-size: var(--v2-fs-fluid-2); letter-spacing: 0; line-height: 0.98; margin: 0; max-width: 14ch; text-wrap: balance; color: var(--v2-ink); }
.svc34 .cat-hero h1 i { color: var(--v2-yellow-2); font-style: italic; }
.svc34 .cat-hero h1 i.serif { font-family: var(--v2-f-serif); font-weight: 400; }
.svc34 .cat-hero .lead { color: var(--v2-ink-dim); font-size: 14px; line-height: var(--v2-lh-body); max-width: 48ch; margin: 0; }
.svc34 .cat-stats { display: flex; gap: var(--v2-sp-7); flex-wrap: wrap; margin-top: 4px; }
.svc34 .cat-stats .m { font-family: var(--v2-f-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--v2-ink-mute); text-transform: uppercase; }
.svc34 .cat-stats .m b { display: block; font-family: var(--v2-f-dis); color: var(--v2-ink); font-size: 26px; letter-spacing: 0; margin-top: 5px; text-transform: none; font-weight: 700; }
.svc34 .cat-stats .m b i { color: var(--v2-yellow-2); font-style: normal; }
.svc34 .cat-hero-cta { display: flex; gap: var(--v2-sp-2); flex-wrap: wrap; margin-top: 6px; }
.svc34 .cat-hero-right { position: relative; min-height: 260px; }
.svc34 .cat-float { position: absolute; padding: var(--v2-sp-4) var(--v2-sp-4); border-radius: var(--v2-r-lg); background: var(--v2-glass-3); border: 1px solid var(--v2-line); backdrop-filter: var(--v2-blur); -webkit-backdrop-filter: var(--v2-blur); box-shadow: var(--v2-elev-2); width: max-content; max-width: 90%; }
.svc34 .cat-float .k { font-family: var(--v2-f-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--v2-ink-mute); text-transform: uppercase; display: flex; align-items: center; gap: var(--v2-sp-2); }
.svc34 .cat-float .k .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--v2-ok); box-shadow: 0 0 10px var(--v2-ok); }
.svc34 .cat-float .v { font-family: var(--v2-f-dis); font-size: 20px; font-weight: 700; letter-spacing: 0; margin-top: 6px; color: var(--v2-ink); }
.svc34 .cat-float .v i { color: var(--v2-yellow-2); font-style: italic; }
.svc34 .cat-float .v small { color: var(--v2-ink-mute); font-size: 12px; }
.svc34 .cat-float.f1 { top: 6%; right: 4%; transform: rotate(3deg); }
.svc34 .cat-float.f2 { top: 40%; left: 2%; transform: rotate(-3deg); }
.svc34 .cat-float.f3 { bottom: 4%; right: 12%; transform: rotate(2deg); }
@media (prefers-reduced-motion: no-preference) { .svc34 .cat-float { animation: svc34Float 6s ease-in-out infinite; } .svc34 .cat-float.f2 { animation-delay: -2s; } .svc34 .cat-float.f3 { animation-delay: -4s; } }
@keyframes svc34Float { 0%,100% { translate: 0 0; } 50% { translate: 0 -8px; } }

/* ── login gate (guest) ── */
.svc34 .cat-gate { display: flex; align-items: center; gap: var(--v2-sp-3); flex-wrap: wrap; padding: var(--v2-sp-3) var(--v2-sp-4); border-radius: var(--v2-r-md); margin: 18px 0 0; background: var(--v2-yellow-soft); border: 1px solid rgba(255,200,0,0.28); }
.svc34 .cat-gate .lk { width: 34px; height: 34px; border-radius: var(--v2-r-sm); flex-shrink: 0; display: grid; place-items: center; background: var(--v2-yellow); color: var(--v2-yellow-ink); font-family: var(--v2-f-mono); }
.svc34 .cat-gate p { margin: 0; font-size: 13px; color: var(--v2-ink-dim); flex: 1; min-width: 200px; }
.svc34 .cat-gate p b { color: var(--v2-ink); }
.svc34 .cat-gate .acts { display: flex; gap: var(--v2-sp-2); flex-wrap: wrap; }
.svc34 .cat-gate .btn { text-decoration: none; }

/* ── CONTROLS · search + category filter ── */
.svc34 .cat-controls { display: flex; gap: var(--v2-sp-2); flex-wrap: wrap; align-items: center; margin: 26px 0 6px; }
.svc34 .cat-search { flex: 1 1 280px; display: flex; gap: var(--v2-sp-2); align-items: center; padding: var(--v2-sp-3) var(--v2-sp-4); border-radius: var(--v2-r-md); background: var(--v2-glass-2); border: 1px solid var(--v2-line); backdrop-filter: var(--v2-blur); }
.svc34 .cat-search:focus-within { border-color: var(--v2-yellow); }
.svc34 .cat-search .ic { color: var(--v2-ink-mute); font-family: var(--v2-f-mono); }
.svc34 .cat-search input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--v2-ink); font: inherit; font-family: var(--v2-f-thai); font-size: 14px; }
.svc34 .cat-search input::placeholder { color: var(--v2-ink-soft); }
.svc34 .cat-filter-dd { position: relative; }
.svc34 .cat-filter-dd > .btn { display: inline-flex; align-items: center; gap: var(--v2-sp-2); padding: var(--v2-sp-3) var(--v2-sp-4); border-radius: var(--v2-r-md); background: var(--v2-glass-2); border: 1px solid var(--v2-line); color: var(--v2-ink); font-family: var(--v2-f-dis); font-weight: 600; font-size: 13px; cursor: pointer; white-space: nowrap; }
.svc34 .cat-filter-dd > .btn:hover { background: var(--v2-glass-3); }
.svc34 .cat-filter-dd .dropdown-menu { background: var(--v2-glass-3); border: 1px solid var(--v2-line-strong); border-radius: var(--v2-r-md); backdrop-filter: var(--v2-blur-strong); padding: var(--v2-sp-1); max-height: 360px; overflow-y: auto; }
.svc34 .cat-filter-dd .dropdown-item { color: var(--v2-ink-dim); padding: var(--v2-sp-2) var(--v2-sp-3); border-radius: var(--v2-r-sm); font-size: 13px; text-decoration: none; display: block; }
.svc34 .cat-filter-dd .dropdown-item:hover { background: var(--v2-yellow-soft); color: var(--v2-ink); }

/* ── section label per category ── */
.svc34 .cat-sec { display: flex; gap: var(--v2-sp-3); align-items: baseline; margin: 30px 0 12px; flex-wrap: wrap; }
.svc34 .cat-sec h3 { font-family: var(--v2-f-dis); font-size: 20px; letter-spacing: 0; margin: 0; font-weight: 700; display: flex; align-items: center; gap: var(--v2-sp-2); color: var(--v2-ink); }
.svc34 .cat-sec h3 img { max-width: calc(1em + 6px); max-height: calc(1em + 6px); vertical-align: middle; }
.svc34 .cat-sec .count { font-family: var(--v2-f-mono); font-size: 11px; color: var(--v2-ink-mute); letter-spacing: 0.12em; }

/* ── nothing-found (hidden until search empties) ── */
.svc34 .nothing-found { display: none; margin: 14px 0; }
.svc34 .nothing-found .cat-empty { text-align: center; padding: 50px var(--v2-sp-5); color: var(--v2-ink-mute); background: var(--v2-glass); border: 1px solid var(--v2-line); border-radius: var(--v2-r-lg); }
.svc34 .nothing-found .big { font-family: var(--v2-f-dis); font-size: 20px; color: var(--v2-ink); letter-spacing: 0; margin-bottom: 6px; }

/* ── SERVICE TABLE (desktop) ── */
.svc34 .svc-tblwrap { background: var(--v2-glass); border: 1px solid var(--v2-line); border-radius: var(--v2-r-lg); overflow: hidden; backdrop-filter: var(--v2-blur); }
.svc34 .svc-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.svc34 .svc-tbl thead th { font-family: var(--v2-f-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--v2-ink-mute); text-transform: uppercase; text-align: left; padding: var(--v2-sp-3) var(--v2-sp-4); border-bottom: 1px solid var(--v2-line); background: var(--v2-glass-2); font-weight: 500; white-space: nowrap; }
.svc34 .svc-tbl th.num, .svc34 .svc-tbl td.num { text-align: right; }
.svc34 .svc-tbl th.act, .svc34 .svc-tbl td.act { text-align: right; }
/* neutralize theme34's .service-item card styling when it's a table row */
.svc34 .svc-tbl tr.service-item { display: table-row; background: transparent !important; border: 0 !important; padding: 0 !important; border-radius: 0!important; }
.svc34 .svc-tbl tbody td { padding: var(--v2-sp-4) var(--v2-sp-4); border-bottom: 1px dashed var(--v2-line); color: var(--v2-ink-dim); vertical-align: middle; }
.svc34 .svc-tbl tbody tr.service-item:last-child td { border-bottom: 0; }
.svc34 .svc-tbl tbody tr.service-item:hover td { background: var(--v2-glass-2); }
.svc34 .svc-tbl .services-id { display: inline-block; font-family: var(--v2-f-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: var(--v2-yellow); background: var(--v2-yellow-soft); padding: var(--v2-sp-1) var(--v2-sp-2); border-radius: var(--v2-r-xs); margin: 0; }
.svc34 .svc-tbl .name-cell { min-width: 320px; }
.svc34 .svc-tbl .nm-row { display: flex; align-items: center; gap: var(--v2-sp-2); }
.svc34 .svc-tbl .ss-name { font-family: var(--v2-f-dis); font-size: 14px; font-weight: 600; color: var(--v2-ink); letter-spacing: 0; line-height: var(--v2-lh-tight); }
.svc34 .svc-tbl .services-rate { font-family: var(--v2-f-dis); font-weight: 800; font-size: 16px; letter-spacing: 0; color: var(--v2-yellow-2); white-space: nowrap; }
.svc34 .svc-tbl td.num b { color: var(--v2-ink); font-family: var(--v2-f-dis); font-weight: 700; }
.svc34 .svc-tbl .avg-val { color: var(--v2-yellow-2); font-family: var(--v2-f-dis); font-weight: 700; white-space: nowrap; }
.svc34 .svc-tbl .btn-favorite { color: var(--v2-ink-mute); cursor: pointer; }
.svc34 .svc-tbl .btn-favorite .favorite-active, .svc34 .svc-tbl .btn-favorite span[data-favorite-icon].fas { color: var(--v2-yellow); }
.svc34 .svc-tbl .badgearea:not(:empty) { display: inline-flex; gap: var(--v2-sp-1); flex-wrap: wrap; margin-left: 6px; }
.svc34 .svc-row-actions { display: inline-flex; gap: var(--v2-sp-2); justify-content: flex-end; flex-wrap: nowrap; }
.svc34 .svc-row-actions .btn { white-space: nowrap; text-decoration: none; }

/* ── MOBILE · stack the table into cards (≤760px) ── */
@media (max-width: 760px) {
  .svc34 .svc-tblwrap { background: transparent; border: 0; border-radius: 0; overflow: visible; }
  .svc34 .svc-tbl, .svc34 .svc-tbl tbody { display: block; }
  .svc34 .svc-tbl thead { display: none; }
  .svc34 .svc-tbl tr.service-item { display: block; background: var(--v2-glass) !important; border: 1px solid var(--v2-line) !important; border-radius: var(--v2-r-lg)!important; padding: var(--v2-sp-4) !important; margin-bottom: 12px; }
  .svc34 .svc-tbl tbody tr.service-item:hover td { background: transparent; }
  .svc34 .svc-tbl tbody td { display: flex; justify-content: space-between; align-items: center; gap: var(--v2-sp-3); padding: var(--v2-sp-2) 0; border-bottom: 0; text-align: right; }
  .svc34 .svc-tbl tbody td.name-cell { padding-bottom: var(--v2-sp-3); margin-bottom: 8px; border-bottom: 1px dashed var(--v2-line); }
  .svc34 .svc-tbl td::before { content: attr(data-label); font-family: var(--v2-f-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--v2-ink-mute); text-transform: uppercase; text-align: left; flex-shrink: 0; }
  .svc34 .svc-tbl td.name-cell::before, .svc34 .svc-tbl td.act::before { display: none; }
  .svc34 .svc-tbl td.act { padding-top: var(--v2-sp-3); }
  .svc34 .svc-tbl .name-cell { min-width: 0; }
  .svc34 .svc-tbl .nm-row { width: 100%; }
  .svc34 .svc-row-actions { width: 100%; }
  .svc34 .svc-row-actions .btn { flex: 1; justify-content: center; }
}

/* ── footer meta ── */
.svc34 .cat-foot { text-align: center; margin-top: 40px; }
.svc34 .cat-foot .meta { font-family: var(--v2-f-mono); font-size: 11px; color: var(--v2-ink-mute); letter-spacing: 0.12em; margin-top: 12px; }

/* ── responsive hero ── */
@media (max-width: 920px) { .svc34 .cat-hero-grid { grid-template-columns: 1fr; padding: var(--v2-sp-7) var(--v2-sp-6); gap: var(--v2-sp-5); } .svc34 .cat-hero-right { display: none; } }
@media (max-width: 600px) { .svc34 .cat-hero-grid { padding: var(--v2-sp-6) var(--v2-sp-5); } .svc34 .cat-stats { gap: var(--v2-sp-5); } .svc34 .cat-stats .m b { font-size: 20px; } }

/* A57 · บล็อก .svc-modal (9 กฎ) ถูกลบ 2026-08-04 — class นี้ไม่เคยถูกใส่ที่ไหนเลย
   หลักฐาน: ไม่มีใน *.twig · ไม่มีใน *.js · DOM สดของ /services มี modal 340 ตัวและ
   .svc-modal นับได้ 0 · HTML ฝั่ง guest ของ /services (1.18 MB) ก็ไม่มี
   modal คำอธิบายบริการใช้ id="detail{id}" ซึ่งกฎ R15.1 คุมอยู่แล้ว
   ‼ ถ้าวันหนึ่งต้องการกล่องกว้าง 540px กลับมา ให้ดู git log ของ commit นี้ */

.api-code-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    border-radius: var(--v2-r-sm);
}

/* P1: Hide sidebar hamburger on desktop */
@media (min-width: 992px) {
    body#dash #db-menuToggle { display: none !important; }
}
/* P1: Override legacy sidebar collapse-to-80px on desktop for body#dash. */
@media (min-width: 992px) {
}

/* FIX: guest mobile menu */
@media (max-width: 991px) {
  body#outside .hm-wrapper.active {
    display: block !important;
    position: fixed; top: 60px; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: var(--v2-sp-4) var(--v2-sp-4) var(--v2-sp-6); overflow-y: auto;
    background: var(--v2-nav-bg); backdrop-filter: var(--v2-blur-strong); -webkit-backdrop-filter: var(--v2-blur-strong);
  }
  body#outside .hm-wrapper.active .row-btn { flex-direction: column; align-items: stretch; gap: var(--v2-sp-3); }
  body#outside .hm-wrapper.active .header-menu { flex-direction: column; align-items: stretch; gap: var(--v2-sp-1); }
  body#outside .hm-wrapper.active .header-menu .hm-link { justify-content: flex-start; font-size: 16px; padding: var(--v2-sp-3) var(--v2-sp-3); }
  body#outside .hm-wrapper.active .col, body#outside .hm-wrapper.active .col-auto,
  body#outside .hm-wrapper.active .col-lg-auto, body#outside .hm-wrapper.active .col-6,
  body#outside .hm-wrapper.active .col-12 { width: 100%; max-width: 100%; flex: 0 0 100%; }
  body#outside .hm-wrapper.active .btn, body#outside .hm-wrapper.active .btn-100 { width: 100%; justify-content: center; }
  body#outside .hm-wrapper.active .home-logo { display: none; }
  body#outside .hm-wrapper.active .m-hidden { display: block !important; }
  body#outside .hm-wrapper.active .row-btn > .d-flex { flex-direction: column; width: 100%; align-items: stretch; gap: var(--v2-sp-2); }
  body#outside .hm-wrapper.active .outside-switcher { display: none !important; }
}

/* FIX: /services ID badge */
body#outside .sit-first .services-id, body#dash .sit-first .services-id { margin: 0 !important; align-self: flex-start; }
body#outside .sit-first, body#dash .sit-first { align-items: flex-start; gap: var(--v2-sp-2); }
body#outside .services-title, body#dash .services-title { flex: 1; }

/* FIX: blogpost — remove fixed aspect-ratio so image shows at natural height */
body#outside .blog-image.blogpost-image,
body#dash .blog-image.blogpost-image {
  aspect-ratio: auto;
  background: transparent;
  max-height: 520px;
  border-radius: var(--v2-r-md) var(--v2-r-md) 0 0;
}
body#outside .blog-image.blogpost-image img,
body#dash .blog-image.blogpost-image img {
  width: 100%; height: auto; object-fit: cover;
  max-height: 520px; border-radius: 0;
}


/* A3 — Soft Panel  ต่อท้ายทั้งชุด ไม่แตะกฎเดิมสักบรรทัด
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */

/* ADSERVE · Soft Panel signature layer
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */

/* ─── 1 · TOKENS ─────────────────────────────────────────── */
html.dark {
    --adv-bg:            #0c0c10;
    --adv-glow:          rgba(255, 180, 0, 0.13);
    --adv-panel-top:     #1a1a22;
    --adv-panel-bot:     #16161d;
    --adv-panel-line:    #24242e;
    --adv-inner:         #20202a;
    --adv-inner-top:     #24242f;
    --adv-inner-line:    #2f2f3b;
    --adv-hair:          #2e2e3a;
    --adv-mute:          #9a9aa6;   /* 5.1:1 บนแผงที่สว่างที่สุด — ห้ามใช้เข้มกว่านี้กับตัวอักษร */
    --adv-lift:          inset 0 1px 0 rgba(255,255,255,0.06), 0 24px 48px -32px rgba(0,0,0,0.9);
    --adv-lift-sm:       inset 0 1px 0 rgba(255,255,255,0.06), 0 18px 36px -28px rgba(0,0,0,0.9);
    --adv-lift-lg:       inset 0 1px 0 rgba(255,255,255,0.06), 0 28px 56px -34px rgba(0,0,0,0.95);
    --adv-sel-glow:      0 10px 26px -14px rgba(255,214,10,0.45);
    --adv-btn:           linear-gradient(180deg, #ffe24a, #ffc400);
    --adv-btn-lift:      inset 0 1px 0 rgba(255,255,255,0.5), 0 14px 30px -12px rgba(255,190,0,0.55);
    --adv-stub-bg:       #ffd60a;       /* ผิวด้าน — ห้ามใส่ไล่สีเงา */
    --adv-stub-ink:      #1a1500;
    --adv-perf:          rgba(26,21,0,0.20);
}

html, html.light {
    --adv-bg:            #eceae4;
    --adv-glow:          rgba(255, 200, 0, 0.20);
    --adv-panel-top:     #ffffff;
    --adv-panel-bot:     #fdfcfa;
    --adv-panel-line:    #e4e2da;
    --adv-inner:         #f2f0ea;
    --adv-inner-top:     #fbf9f2;
    --adv-inner-line:    #dcd9d1;
    --adv-hair:          #dcd9d1;
    /* was #6b6b73 at 4.63:1 — measured on plain white. On the tinted CTA block
       (#eceae4) the same value is 4.39, and .v2-eyebrow lives there. */
    --adv-mute:          #666670;   /* 4.72:1 บนแผงที่เข้มที่สุดในโหมดสว่าง */
    --adv-lift:          0 1px 0 rgba(255,255,255,0.9) inset, 0 18px 36px -28px rgba(60,50,20,0.45);
    --adv-lift-sm:       0 1px 0 rgba(255,255,255,0.9) inset, 0 14px 28px -24px rgba(60,50,20,0.4);
    --adv-lift-lg:       0 1px 0 rgba(255,255,255,0.95) inset, 0 24px 48px -30px rgba(60,50,20,0.45);
    --adv-sel-glow:      0 10px 24px -14px rgba(255,200,0,0.5);
    --adv-btn:           linear-gradient(180deg, #ffd233, #ffbe00);
    --adv-btn-lift:      inset 0 1px 0 rgba(255,255,255,0.55), 0 14px 30px -12px rgba(255,190,0,0.5);
    --adv-stub-bg:       #ffc800;
    --adv-stub-ink:      #1a1500;
    --adv-perf:          rgba(26,21,0,0.20);
}

/* ─── 2 · s1 · แสงเหลืองมุมซ้ายบน ─────────────────────────── */
/* ตั้งที่ html ด้วย ไม่ใช่แค่ body ไม่งั้นพื้นไม่คลุมพื้นที่เลื่อน */
html:has(body#dash), html:has(body#outside) { background: var(--adv-bg); }

body#dash, body#outside {
    background:
        radial-gradient(900px 620px at 6% -14%, var(--adv-glow), transparent 58%),
        var(--adv-bg);
    background-attachment: fixed;
}
/* orb เดิมไม่ต้องใช้แล้ว แสงมาจากทิศเดียว */
/*  A125 · กฎ .v2-orbs ทั้งชุดถูกลบ (base + body>.v2-orbs + ตัวแปรธีมสว่าง)
    มันถูกสั่ง display:none มาตั้งแต่บล็อกก่อนหน้าพร้อมคอมเมนต์ว่า
    "orb เดิมไม่ต้องใช้แล้ว แสงมาจากทิศเดียว" แต่ทั้ง CSS และ markup ยังอยู่
    markup ที่ layout.twig:87 และ :380 ถูกลบพร้อมกันในคอมมิตนี้ */

/* ─── 3 · แผงลอย ──────────────────────────────────────────── */
/* This block is "floating panels" and forces background + border + shadow with
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
/* A46 · ‼ ห้ามใส่ body#dash .card, .app-widget, #up-header.header กลับเข้ากลุ่มนี้
   ทั้งกลุ่มเป็น !important และมันทับพื้นผิว Panel A ของสามตัวนั้นมาตลอด
   git log --grep=A46 */
body#outside .card,
body#outside .v2-card,
body#outside .login-card,
body#outside .v2-feat,
body#outside .blog-card,
body#outside .signup-content {
    background: linear-gradient(180deg, var(--adv-panel-top), var(--adv-panel-bot)) !important;
    border: 1px solid var(--adv-panel-line) !important;
    box-shadow: var(--adv-lift) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
body#dash .card > .card-body::before,
body#dash .card > .card-body::after { display: none !important; }


/* พื้นชั้นในของแผง — input, กล่องย่อย, panel-body */
/* .panel-body left this group on 2026-08-02 (phase 3 · 5.1): it sits inside a
   .card that already draws a surface, so filling it made a box in a box. It is
   now a section of its card — padding and a rule, no fill. */
/* A54 · body#dash .form-control ออกจากกลุ่มนี้แล้ว — ทั้งกลุ่มเป็น !important และทับ
   พื้นผิวของบล็อกฐาน · ห้ามใส่กลับ · guest ยังใช้กฎนี้ต่อ */
body#dash .stat,
body#dash .dw-item,
body#outside .form-control {
    background: var(--adv-inner) !important;
    border: 1px solid var(--adv-inner-line) !important;
    backdrop-filter: none !important;
}
body#outside .form-control:focus {
    background: linear-gradient(180deg, var(--adv-inner-top), var(--adv-inner)) !important;
    border-color: var(--v2-yellow) !important;
    box-shadow: var(--adv-sel-glow) !important;
}

/* เส้นคั่นเป็นเส้นประประจำแบรนด์ */
body#dash .tbl tbody td,
body#dash .step-row {
    border-bottom-color: var(--adv-hair) !important;
}

/* ─── 4 · การ์ดที่เลือกได้ ────────────────────────────────── */
/* ปกติ */
/* .service-item ออกจากกลุ่มนี้ 2026-08-02 (เฟส 3 · 3.1) — มันไม่มี state .active
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
/* A70 · H-3 · การ์ดเลือกได้ = ร่องแบน ตอนเลือกเป็นเหลืองจาง + วงแหวนใน
   ดีไซน์เรียกสถานะนี้ว่า `[data-methodon]` และให้ค่าไว้ตรง ๆ ใน panel-tokens.css:
       ปกติ    พื้น --well
       เลือก   พื้น --acc-soft · box-shadow: inset 0 0 0 2px --acc-line
   ‼ `.nwo-cat-btn` กับ `.payment-box` ใช้ชุดเดียวกัน **โดยตั้งใจ** — ดีไซน์ให้ทั้งสอง
     เป็น data-methodon ตัวเดียวกัน (การ์ดแพลตฟอร์มในขั้น 1 และกล่องช่องทางจ่ายใน addfunds)
   ‼ ถอน `!important` ห้าตัวออกจากบล็อกนี้ — ของเดิมใส่ไว้เพื่อชนะบล็อก Panel A ที่ L8756
     ตอนนี้บล็อกนั้นถูกเขียนใหม่ให้เป็น --v2-well แล้ว จึงไม่มีอะไรต้องชนะ
   ‼ ไล่สีกับเงาลอยถูกตัดออกทั้งคู่: ดีไซน์ใช้ "แบน + วงแหวน" เป็นภาษาของการถูกเลือก
     ทั่วทั้งระบบ (ชิป ยอด ช่องทางจ่าย) เงาลอยทำให้การ์ดที่ยังไม่ถูกเลือกดูเด่นเท่ากัน */
body#dash .nwo-cat-btn,
body#dash .payment-box {
    background: var(--v2-well);
    border: 0;
    box-shadow: none;
    transition: background var(--v2-t-base) var(--v2-ease), box-shadow var(--v2-t-base) var(--v2-ease);
}
body#dash .nwo-cat-btn.active,
body#dash .payment-box.active {
    background: var(--v2-yellow-soft);
    box-shadow: inset 0 0 0 2px var(--v2-yellow);
}
/* ปิดใช้งาน — ต้องแบน เพื่อไม่ให้สับสนกับ "เลือกอยู่" */
body#dash .payment-box.disabled {
    background: var(--adv-panel-bot) !important;
    box-shadow: none !important;
    opacity: .55;
}
/* .service-item เป็นแถว ไม่มีพื้นผิวให้ทำให้แบน จางอย่างเดียวพอ
   ถ้าใส่พื้นให้เฉพาะตัวที่ปิดใช้งาน แถวที่ใช้ไม่ได้จะกลายเป็นแถวที่เด่นที่สุด */
body#dash .service-item.disabled,
body#outside .service-item.disabled { opacity: .55; }

/* ─── 5 · ปุ่มหลัก ────────────────────────────────────────── */
/* A56 · body#dash ออกจากกลุ่มนี้แล้ว — ท่าเดียวกับ A46 (.card) และ A54 (.form-control)
   ‼ ทั้งกลุ่มเป็น !important และทับพื้นของบล็อก Panel A ที่ L8756 ทั้งดวง
     background: var(--v2-yellow) ที่นั่นไม่เคยขึ้นจอเลย
   ‼ guest ยังใช้กฎนี้ต่อ ห้ามใส่ body#dash กลับเข้ามา ให้แก้ที่บล็อกฐานแทน
   เช็คก่อนแก้: python3 .claude/tools/who-wins.py btn-primary --scope 'body#dash' */
/* A74 · G1 · กัน `.login-card` ออกจากกลุ่มนี้
   ‼ กลุ่มนี้เป็น !important จึงชนะกฎปุ่มเข้าสู่ระบบที่ตั้งไว้เป็นแคปซูลหมึกทุกครั้ง
     วัดบนหน้าจริงหลัง deploy แล้วเห็นว่าปุ่มยังเป็นไล่สีเหลืองอยู่ (แบบเดียวกับเคสแท็บใน A67)
   ‼ ปุ่มเหลืองฝั่ง guest ที่อื่น (สมัครสมาชิก · pill-y · การ์ด auth) ต้องได้ค่านี้ต่อ
     จึงกันเฉพาะปุ่มในการ์ดเข้าสู่ระบบ */
/* A88 · E3 · กัน `.signup-header .btn` ออกจากกลุ่มนี้ด้วย
   ‼ ปุ่ม "กลับไปที่บ้าน" ของ resetpassword/setnewpassword เป็นไล่สีเหลืองมาตลอด
     เพราะกลุ่มนี้ชนะกฎของมันที่ specificity เท่ากันด้วย !important หน้านั้นจึงมีเหลือง
     สองที่ ทั้งที่เป็นลิงก์นำทาง ไม่ใช่การกระทำหลัก */
body#outside .btn.btn-primary:not(.login-card .btn-primary):not(.blog-card .btn-primary):not(.signup-header .btn),
body#outside .pill-y,
body#outside .v2-auth-right .btn-primary.btn-block {
    background: var(--adv-btn) !important;
    box-shadow: var(--adv-btn-lift) !important;
}
body#outside .btn.btn-primary:not(.login-card .btn-primary):not(.blog-card .btn-primary):not(.signup-header .btn):hover {
    background: linear-gradient(180deg, #ffe95f, #ffcd14) !important;
}

/* ─── 6 · s2 · ตั๋วผิวด้าน ────────────────────────────────── */
/* ใช้กับ "ช่วงเวลาที่มีเงิน" เท่านั้น ~5-6 จุดทั้งเว็บ:
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
.adv-stub {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--v2-sp-4);
    padding: var(--v2-sp-5) var(--v2-sp-5);
    background: var(--adv-stub-bg);   /* ผิวด้าน — ห้ามใส่ไล่สีหรือแสงตัดเฉียง */
    color: var(--adv-stub-ink);
    overflow: hidden;
    /* The note above says the stub has to be the card's last child or it will
       ดูเหตุผลเต็มใน git log และ .claude/verify/ */
    border-radius: 0 0 var(--v2-r-md) var(--v2-r-md);
}
.adv-stub::before {                    /* รอยปรุ — แทนเอฟเฟกต์แสง */
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 9px;
    background-image: radial-gradient(circle at 7px 1px, var(--adv-perf) 2.6px, transparent 3.1px);
    background-size: 16px 9px;
    background-repeat: repeat-x;
    pointer-events: none;
}
.adv-stub .k {
    /*  A127 · ป้ายนี้เนื้อหาเป็นไทย — mono ไม่มี glyph ไทย ตัวไทยจึงตกไป
        ฟอนต์อื่นกลางป้าย · tracking ดันสระ/วรรณยุกต์หลุดจากพยัญชนะ
        ‼ แก้ที่กฎเดิม ไม่ต่อท้ายไฟล์ทับ — การทับทำให้ declaration เดิมตาย
          และ test-ledger จับได้ทันที (295 → 311) ซึ่งถูกของมัน */
    font-family: var(--v2-f-thai);
    font-size: 12px;
    font-weight: 700;
    opacity: 0.6;
}
.adv-stub b {
    font-family: var(--v2-f-dis);
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
}
/* บรรทัดรองในตั๋ว เช่น "คงเหลือหลังสั่ง" */
.adv-stub-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--v2-sp-3);
    margin-top: 11px;
    border-top: 1px dashed rgba(26,21,0,0.26);
    font-size: 12px;
    font-weight: 600;
    opacity: 0.72;
}
.adv-stub-col { flex-direction: column; align-items: stretch; gap: 0; }

/* เส้นฉีกเหนือตั๋ว */
.adv-tear {
    height: 1px;
    background: repeating-linear-gradient(90deg, var(--adv-hair) 0 6px, transparent 6px 12px);
}

/* ─── 7 · แก้บั๊กที่เจอในโค้ดจริง ─────────────────────────── */

/* 7.1 ตัวอักษรเล็กคอนทราสต์ต่ำ — ยกให้ผ่าน 4.5:1 */
body#dash .stat .l,
body#dash .dw-title,
body#dash .neworder-stats .ns span,
body#dash .form-label,
/* .blog-date removed from this blanket on 2026-08-01. It is absolutely
   positioned over the cover image on a rgba(0,0,0,0.55) scrim, and its own rule
   already says color: #fff — this !important was overriding that with dark ink
   on a dark scrim, 1.09:1. The scrim does not follow the theme, so neither can
   the text. Tenth time in this project that ink had to follow the surface. */
body#dash .control-label,
body#dash .tbl thead th { color: var(--adv-mute) !important; }

/*  A120 · ป้าย eyebrow ฝั่ง guest ถูกถอดออกจากกลุ่ม !important ข้างบน
    --adv-mute เป็นสีเทา "ทึบ" ที่คิดมาสำหรับพื้นเข้มล้วน มันเลื่อนตามพื้นไม่ได้
    หน้าแรก guest มี glow เหลืองสองชั้น (radial ระดับหน้า + radial ในบล็อก CTA)
    ป้ายที่ตกอยู่ในเขต glow จึงวัดได้ 2.8–3.9 แล้วแต่จุด
    --v2-ink-dim เป็น ink โปร่ง 0.72 เลื่อนตามพื้นได้ วัดบนฐานที่โหดที่สุดที่
    เจอ (rgb(96,81,29) ใต้ glow เต็ม ๆ) ได้ 4.69 · ฐานปกติ 6.5–8.7
    ‼ กฎ !important ของ A119 ที่เคยเจาะเฉพาะ .v2-cta-block .v2-eyebrow ถูกลบ
      เพราะไม่ต้องสู้กับ !important อีกแล้ว — หนี้กลับไปเท่าเดิม */
body#outside .v2-eyebrow { color: var(--v2-ink-dim); }

/* 7.2 หัวเรื่องไทย line-height 1.05 เตี้ยเกิน วรรณยุกต์บนกับสระล่างชนกัน */
body#outside .v2-auth-h1,
body#outside .v2-hero-h1,
body#outside .page-h1-v2,
body#dash .page-h1-v2,
body#dash .neworder-h1,
body#outside .v2-split-title,
body#outside .idx-head h2,
body#outside .cta-c h2 { line-height: var(--v2-lh-tight) !important; }
body#outside .v2-feat h3,
body#outside .v2-feat-big h3 { line-height: var(--v2-lh-tight) !important; }

/* 7.3 .payment-box.pm-* ประกาศสีไอคอนชุดเดียว ไม่มี override โหมดสว่าง
       #ff7a6a / #4da9ff บนพื้นขาวคอนทราสต์ต่ำ */
html.light body#dash .payment-box.pm-qr     .payment-icon i { color: #1f6feb; }
html.light body#dash .payment-box.pm-true   .payment-icon i { color: var(--v2-danger); }
html.light body#dash .payment-box.pm-crypto .payment-icon i { color: #b45309; }
html.light body#dash .payment-box.pm-bank   .payment-icon i { color: var(--v2-ok); }

/* ─── 8 · เมนูมือถือ ─────────────────────────────────────── */
@media (max-width: 991px) {
    /* ‼ z-index ต้องอยู่เหนือ `.header` (45) แต่ใต้ลิ้นชัก (50) — ที่ 40 ฉากหลังอยู่
       **ใต้** แถบหัว แถบหัวจึงสว่างและกดได้อยู่ทั้งที่เมนูเปิดค้าง (วัดด้วย
       elementFromPoint ที่ 340,45 ได้ปุ่ม hd-btn ไม่ใช่ฉากหลัง) */
    body#dash.sidebar-active .main-backdrop {
        position: fixed;
        inset: 0;
        z-index: 48;
        background: rgba(6,6,9,0.72);
    }
    html.light body#dash.sidebar-active .main-backdrop { background: rgba(28,24,12,0.42); }
}

/* ─── 9 · toast #notify ────────────────────────────────────
   A58 · พื้นผิวย้ายไปอยู่กับกฎ `body #notify` ที่เดียว — ที่นี่เคยเขียนซ้ำเป็นชุดที่สี่
   toast เป็นแถบมืดทั้งสองธีม (`--v2-sidebar`) เลยไม่ต้องมีสำเนา html.light อีกชุด
   ‼ เหลืองสงวนไว้ให้แผ่นไอคอนอย่างเดียว — ตัว toast ไม่ใช่ "การกระทำหลักของหน้า"
     ดูโควตาเหลืองใน RESUME */
/* A58 · แผ่นไอคอนเป็นวงกลมเหลือง — บนแถบมืด เหลืองไม่ได้แข่งกับอะไร
   ‼ A59 · ผูกกับ `body#dash` เพราะ `--v2-yellow-ink` กับพี่น้องของมันนิยามใต้ `body.v2-dash`
     เท่านั้น — เขียนไม่มี scope แล้วเรียก token พวกนี้ = declaration พังทั้งบรรทัดฝั่ง guest
     element อยู่ใน layout ส่วนที่ใช้ร่วมกัน (layout.twig:532) แต่ปุ่ม copy มีเฉพาะหน้า authed
   ‼ กฎเดิม `#notify.show i` (1,1,1) เคยชนะกฎนี้ (1,0,2) — ไอคอนออกมาเป็นสี่เหลี่ยมขาว
     แก้ด้วยการลบกฎเดิมทิ้ง ไม่ใช่ยกน้ำหนักกฎนี้ */
body#dash #notify i {
    width: 26px;
    height: 26px;
    flex: none;
    margin-right: 0;
    border-radius: 50%;
    background: var(--v2-yellow);
    color: var(--v2-yellow-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    vertical-align: middle;
}
/* ข้อความกับไอคอนอยู่แถวเดียว ห่างเท่ากันทุกครั้ง */
body#dash #notify #notifyText {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-3);
}

/* ─── 10 · promo popup ───────────────────────────────────── */
body#dash .promo-popup {
    background: linear-gradient(180deg, var(--adv-panel-top), var(--adv-panel-bot));
    border: 1px solid #2a2a35;
    border-radius: var(--v2-r-lg);
    box-shadow: var(--v2-elev-3);
    overflow: hidden;
}
body#dash .promo-popup-overlay { background: rgba(6,6,9,0.78); }
body#dash .promo-close-btn {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(12,12,16,0.72);
    border: 1px solid #3a3a46;
    color: var(--v2-ink);
}
body#dash .promo-footer {
    padding: var(--v2-sp-4) var(--v2-sp-5) var(--v2-sp-5);
    border-top: 1px solid var(--adv-panel-line);
}
body#dash .promo-checkbox-text { font-size: 13px; color: var(--adv-mute); }

/* ─── 11 · อ่านยาว (terms / about / blog) ────────────────── */
body#dash .terms-content, body#outside .terms-content,
body#dash .about-content, body#outside .about-content {
    font-size: 14px;
    line-height: 1.95;
    max-width: 66ch;
}
body#outside .blog-text, body#dash .blog-text {
    font-size: 16px;
    line-height: 2;
    max-width: 64ch;
}


/* ─── 12 · WIZARD (neworder แบบทีละขั้น) ─────────────────── */
.adv-step { display: none; }
.adv-wizard[data-step="1"] .adv-step[data-step="1"],
.adv-wizard[data-step="2"] .adv-step[data-step="2"],
.adv-wizard[data-step="3"] .adv-step[data-step="3"],
.adv-wizard[data-step="4"] .adv-step[data-step="4"] { display: block; }
.adv-wizard[data-step="1"] .adv-prev { visibility: hidden; }
.adv-wizard[data-step="4"] .adv-next { display: none; }

/* A66 · รางขั้นตอน = แคปซูลสี่ใบ — ค่าจาก A67 ตรงตาม `panel-tokens.css` ของจริง
   ‼ **แก้คำที่เคยเขียนผิดไว้ตรงนี้** A66 เขียนว่า "ดีไซน์ไม่ได้ส่ง CSS ของสถานะมา"
     — **ไม่จริง** `panel-tokens.css` นิยาม `[data-rail]` ไว้ครบทั้งสี่สถานะ
     ที่ผิดคือผมไปอ่าน**สำเนาเก่า**ใน `.claude/design/` (76 บรรทัด · ดึงมาก่อนเฟส F)
     แทนที่จะดึงไฟล์ใหม่จากโปรเจกต์ดีไซน์ ฉบับจริงมีหัวข้อ "เฟส F" ต่อท้ายอีกยาว
     บทเรียน: **สำเนาในรีโปคือภาพนิ่ง ณ วันที่ดึง — ก่อนจะบอกว่า "ดีไซน์ไม่มีของ" ให้ดึงใหม่ก่อน**
   ค่าที่ดีไซน์กำหนด (panel-tokens.css หัวข้อ "rail 4 ขั้น"):
       [data-rail]        พื้น --well            ← ทุกสถานะมีพื้น ไม่มีตัวไหนโปร่ง
       [data-rail=done]   พื้น --ok-soft  ตัว --ok   · ป้ายเลข พื้น --ok ตัว --card  (เขียวทึบ)
       [data-rail=now]    พื้น --ink      ตัว --card · ป้ายเลข พื้น --acc ตัว --acc-ink
       [data-rail=todo]   ตัว --mute                · ป้ายเลข พื้น --line ตัว --mute
   ‼ คอมเมนต์ในไฟล์ดีไซน์เตือนไว้เอง: "พื้นต้องมาจากที่นี่ที่เดียว ห้ามใส่ background ใน inline
     ไม่งั้น inline ชนะ แล้วจะได้สีตัวอักษรมาแต่พื้นไม่มา = ขาวบนครีม" — เคสเดียวกับที่เราเจอบ่อย
   ‼ token ฝั่ง authed (--v2-well / --v2-surface) ต้องมี body#dash · --v2-ink / --v2-ok / --v2-line
     เป็น root ใช้ได้ทั้งสองฝั่ง
   ‼ ขนาดตาม Panel H (44 / ป้าย 21 / 12px) ซึ่งใหม่กว่า F1 (46 / 22 / 12.5) และวาดครบทั้งสี่ขั้น */
.adv-rail { display: flex; align-items: center; gap: 6px; margin-bottom: 20px; }
.adv-rail-i {
    flex: 1; display: flex; align-items: center; gap: 9px;
    height: 44px; padding: 0 12px; border: 0; text-align: left;
    border-radius: var(--v2-r-md);
    color: var(--adv-mute); font-family: var(--v2-f-thai); font-size: 12px; font-weight: 500;
    cursor: pointer;
}
body#dash .adv-rail-i { background: var(--v2-well); }
.adv-rail-i i {
    width: 21px; height: 21px; border-radius: 50%;
    background: var(--v2-line); border: 0;
    display: grid; place-items: center; flex-shrink: 0;
    font-family: var(--v2-f-dis); font-size: 10.5px; font-weight: 700; font-style: normal;
    /*  A116 · --adv-mute → --v2-ink-dim
        เลขขั้นที่ยังไม่ถึงวัด contrast ได้ 4.19 ในธีมสว่าง (เกณฑ์ 4.5)
        มันเป็นตัวเลข 10.5px จึงคิดเกณฑ์ข้อความปกติ ไม่ใช่ข้อความใหญ่
        วัดค่าที่เป็นไปได้บนวงกลมจริงทั้งสองธีมก่อนเลือก:
          --v2-ink-dim   สว่าง 6.43 · มืด 7.64   ← ผ่านทั้งคู่
          --v2-ink-soft  สว่าง 2.02 · มืด 2.55   ✗
        ยังอ่านเป็น "ขั้นที่ยังไม่ถึง" อยู่ เพราะพื้นวงกลมกับน้ำหนักตัวอักษรไม่เปลี่ยน */
    color: var(--v2-ink-dim);
}
body#dash .adv-rail-i.is-done { background: var(--v2-ok-soft); color: var(--v2-ok); }
.adv-rail-i.is-done i { background: var(--v2-ok); color: var(--v2-surface); }
.adv-rail-i.is-active { font-weight: 600; }
body#dash .adv-rail-i.is-active { background: var(--v2-ink); color: var(--v2-surface); }
.adv-rail-i.is-active i { background: var(--v2-yellow); color: var(--v2-yellow-ink); box-shadow: var(--adv-sel-glow); }

/* หัวขั้น — ดีไซน์ให้เบากว่าหัวหน้า (600/16) และมีตัวนับ "ขั้นที่ N / 4" ชิดขวา
   ‼ ตัวนับทำด้วย ::after ล้วน ไม่ได้แตะ twig และไม่ได้เพิ่มเนื้อหาใหม่ —
     เลขขั้นเป็นสถานะที่หน้ามีอยู่แล้ว (รางขั้นตอนบอกเรื่องเดียวกัน) */
.adv-step-head {
    display: grid; grid-template-columns: 1fr auto; align-items: baseline;
    column-gap: var(--v2-sp-4); margin-bottom: 14px;
}
.adv-step-head .t { grid-column: 1; grid-row: 1; font-family: var(--v2-f-dis); font-size: 16px; font-weight: 600; letter-spacing: 0; line-height: 1.45; color: var(--v2-ink); }
.adv-step-head .d { grid-column: 1; grid-row: 2; font-size: 12.5px; line-height: 1.7; color: var(--adv-mute); margin-top: 3px; }
.adv-step-head::after {
    grid-column: 2; grid-row: 1;
    font-size: 11.5px; color: var(--adv-mute); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.adv-step[data-step="1"] .adv-step-head::after { content: "ขั้นที่ 1 / 4"; }
.adv-step[data-step="2"] .adv-step-head::after { content: "ขั้นที่ 2 / 4"; }
.adv-step[data-step="3"] .adv-step-head::after { content: "ขั้นที่ 3 / 4"; }
.adv-step[data-step="4"] .adv-step-head::after { content: "ขั้นที่ 4 / 4"; }

/* แถบสรุปบริการ — ดีไซน์ให้เป็นร่องแบน (--well) ไม่ใช่แผ่นนูนไล่สี
   A77 · ดีไซน์ (Panel F บรรทัด 138–144) วางป้ายไว้ **เหนือ** ชื่อบริการ ไม่ใช่ข้าง ๆ
   และมีแผ่นไอคอนแพลตฟอร์ม 38×38 นำหน้า → เปลี่ยนจาก flex เป็น grid สามคอลัมน์
   ‼ ไอคอนไม่ได้ฮาร์ดโค้ด สคริปต์โคลน <i> ของ `.nwo-cat-btn.active` มาใส่ (ดู neworder.twig)
     ถ้าเข้ามาทาง `?select_service_id=` จะไม่มีปุ่มไหน active เลย ช่องนั้นจะว่าง
     `:has(.adv-recap-ic:empty)` จึงยุบคอลัมน์ไอคอนทิ้ง ไม่ให้เหลือช่องว่างค้าง */
.adv-recap {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "ic k btn" "ic v btn";
    align-items: center;
    column-gap: 13px; row-gap: 2px;
    padding: var(--v2-sp-3) var(--v2-sp-4); margin-bottom: 18px;
    border-radius: var(--v2-r-md);
    background: var(--adv-inner);
    box-shadow: none;
}
.adv-recap:has(.adv-recap-ic:empty) {
    grid-template-columns: 1fr auto;
    grid-template-areas: "k btn" "v btn";
}
.adv-recap-ic {
    grid-area: ic;
    width: 38px; height: 38px;
    border-radius: 12px;
    background: var(--adv-panel-top);
    display: grid; place-items: center;
    font-size: 15px;
    color: var(--v2-ink);
}
.adv-recap-ic:empty { display: none; }
.adv-recap-k { grid-area: k; font-family: var(--v2-f-thai); font-size: 11px; font-weight: 500; text-transform: none; color: var(--adv-mute); }
.adv-recap-v { grid-area: v; min-width: 0; font-family: var(--v2-f-dis); font-size: 13px; font-weight: 600; color: var(--v2-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adv-recap-v:empty::before { content: "ยังไม่ได้เลือก"; color: var(--adv-mute); font-weight: 500; }
.adv-recap-edit { grid-area: btn; height: 32px; padding: 0 14px; border-radius: var(--v2-r-pill); background: var(--adv-panel-top); box-shadow: var(--adv-lift-sm); border: 0; color: var(--v2-ink); font-family: var(--v2-f-thai); font-size: 12px; font-weight: 500; cursor: pointer; }

.adv-nav {
    display: flex; align-items: center; justify-content: space-between; gap: var(--v2-sp-3);
    padding-top: 18px; margin-top: 20px;
    border-top: 1px solid var(--adv-panel-line);
}
/*  ปุ่มเดินขั้น
    A115 · "ถัดไป" กลับมาเป็นเหลือง (เจ้าของตัดสิน 2026-08-11)
    เดิมตรงนี้เขียนไว้ว่า **เหลืองไม่ใช่ของปุ่มนี้** ตามที่ดีไซน์สั่ง โดยเก็บเหลือง
    ไว้ให้ "สั่งซื้อเลย" บนตั๋วดำ และอ้าง panel-tokens.css บรรทัด 4–5
    (เหลืองห้ามแตะพื้นสว่าง)  แต่กฎที่เจ้าของตัดสินทีหลัง 2026-08-04 ระบุชื่อ
    `ถัดไป` ไว้ตรง ๆ ในกลุ่มที่ "คงเหลือง" — สองกติกาขัดกัน จึงถามและได้ข้อยุติ
    ที่วัดได้และเป็นเหตุผลของการเปลี่ยน: ที่ 1900 ปุ่มหลักของหน้าเป็นขาว 92×44
    ขณะที่ลิงก์เสริมในคอลัมน์ข้างเป็นเหลือง 130×36 — และ "สั่งซื้อ" ขั้นที่ 4
    ของ wizard เดียวกันก็เหลืองอยู่แล้ว ปุ่มเดินขั้นจึงเปลี่ยนสีกลางคัน
    ‼ ข้อห้าม "เหลืองห้ามแตะพื้นสว่าง" ยังอยู่ — ปุ่มนี้วางบนพื้น --adv-panel ซึ่งเข้ม
      ทั้งสองธีม ไม่ใช่พื้นสว่าง
    ‼ ห้ามแตะ .btn-primary ทั้งเว็บ — ผูกกับ .adv-nav เท่านั้น (1,3,1) ชนะ body#dash .btn.btn-primary (1,2,1)
    ‼ ของเดิมปุ่มถัดไปยืดกิน 590px เพราะ .btn ตัวฐานเป็น flex ที่โตได้ — ตรึงด้วย flex: 0 0 auto */
body#dash .adv-nav .btn.adv-prev,
body#dash .adv-nav .btn.adv-next {
    flex: 0 0 auto; width: auto; min-height: 44px; height: 44px;
    border-radius: var(--v2-r-pill); border: 0;
    font-size: 13px; font-weight: 600;
}
body#dash .adv-nav .btn.adv-prev { padding: 0 18px; background: var(--adv-inner); color: var(--v2-ink); box-shadow: none; }
body#dash .adv-nav .btn.adv-prev:hover { background: var(--adv-panel-line); }
body#dash .adv-nav .btn.adv-next { padding: 0 22px; background: var(--v2-yellow); color: var(--v2-yellow-ink); box-shadow: none; }
body#dash .adv-nav .btn.adv-next:hover { background: var(--v2-yellow-2); filter: none; }
.adv-stub-main { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--v2-sp-4); }

/* A67 · มือถือ · รางขั้นตอน — ทำตาม Panel H · H4 กฎข้อ 1
   ดีไซน์สั่งตรง ๆ ว่า **ห้ามย่อรางเป็นวงกลมเลข** เพราะเสียความหมาย
   ให้เหลือหลอดความคืบหน้าเส้นเดียวแทน ส่วนคำว่า "ขั้นที่ N / 4" กับชื่อขั้น
   มีอยู่ที่หัวขั้นแล้ว (`.adv-step-head` ของ A66) จึงไม่ต้องเขียนซ้ำ
   ‼ แลกมาด้วยการที่มือถือกดข้ามขั้นจากรางไม่ได้ — ดีไซน์เลือกทางนี้เอง
     ปุ่ม "เปลี่ยน" ในแถบ recap (`data-goto="2"`) ยังกดได้ปกติ และปุ่มย้อนกลับก็ยังอยู่
   ‼ ก่อนหน้านี้ A66 คงชื่อขั้นปัจจุบันไว้ตัวเดียวเพราะคิดว่าดีไซน์ไม่มีสเปกมือถือ
     ตอนนี้มีแล้ว ใช้ของดีไซน์แทนที่ของที่เราเดา */
@media (max-width: 767px) {
    .adv-rail-i { display: none; }
    body#dash .adv-rail {
        height: 5px;
        border-radius: var(--v2-r-pill);
        background: var(--v2-well);
        overflow: hidden;
    }
    body#dash .adv-rail::after {
        content: "";
        flex: 0 0 auto;
        height: 100%;
        border-radius: var(--v2-r-pill);
        background: var(--v2-yellow);
    }
    body#dash .adv-wizard[data-step="1"] .adv-rail::after { width: 25%; }
    body#dash .adv-wizard[data-step="2"] .adv-rail::after { width: 50%; }
    body#dash .adv-wizard[data-step="3"] .adv-rail::after { width: 75%; }
    body#dash .adv-wizard[data-step="4"] .adv-rail::after { width: 100%; }
    /* A77 · เคยเป็น `.adv-recap { flex-wrap: wrap }` — ตายไปแล้วเพราะบล็อกฐาน
       เปลี่ยนเป็น grid ที่อื่นแทน แถบนี้กว้างพอในกรอบ 390 (วัดแล้ว ไม่ล้น) */

    /* H4 กฎข้อ 3 — บอกว่าแถวแพลตฟอร์มยังมีต่อด้วย **การ์ดที่ถูกตัดครึ่ง** ที่ขอบขวา
       ดีไซน์ระบุเองว่าไม่ใช้ลูกศรหรือจุด เพราะการ์ดครึ่งใบสื่อว่าปัดได้ชัดที่สุด
       ‼ ของจริงมี 9 ปุ่ม กว้างรวม 630 ในกรอบ 319 — swiper ปัดได้อยู่แล้ว
         แต่ก่อนหน้านี้ขอบขวาตัดเรียบ เลยไม่มีอะไรบอกว่ายังมีอีก */
    body#dash .nwo-categories {
        -webkit-mask-image: linear-gradient(to right, #000 0, #000 76%, transparent 100%);
        mask-image: linear-gradient(to right, #000 0, #000 76%, transparent 100%);
    }
}

/* ─── 13 · ตั๋ว: ลิงก์แนะนำเพื่อน ────────────────────────── */
.adv-reflink { font-family: var(--v2-f-mono); font-size: 20px; font-weight: 600; margin-top: 8px; word-break: break-all;
               /* colour added 2026-07-31: the stub under this is --adv-stub-bg, yellow in
                  both themes, so the link cannot inherit theme ink — that flips to near-white
                  on dark. Set here rather than in a later override, which is what created a
                  third .adv-reflink rule and got removed again. */
               color: var(--adv-stub-ink); }
.adv-copy { height: 34px; padding: 0 var(--v2-sp-3); border-radius: var(--v2-r-sm); background: rgba(26,21,0,0.14); color: var(--adv-stub-ink); font-family: var(--v2-f-thai); font-weight: 700; font-size: 12px; border: 0; cursor: pointer; }
@media (max-width: 640px) { .adv-reflink { font-size: 14px; } .adv-stub b { font-size: 26px; } }

/* ─── 14 · แถบตั๋วแทนรายการติ๊กถูก ──────────────────────── */
.adv-terms { position: relative; border-radius: var(--v2-r-lg); overflow: hidden; background: linear-gradient(180deg, var(--adv-panel-top), var(--adv-panel-bot)); border: 1px solid var(--adv-panel-line); box-shadow: var(--adv-lift); }
.adv-terms::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 9px; background-image: radial-gradient(circle at 7px 1px, rgba(255,214,10,0.30) 2.6px, transparent 3.1px); background-size: 16px 9px; background-repeat: repeat-x; pointer-events: none; }
.adv-terms-head { padding: var(--v2-sp-4) var(--v2-sp-5) var(--v2-sp-3); font-family: var(--v2-f-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--adv-mute); }
.adv-terms-row { display: flex; gap: var(--v2-sp-5); padding: var(--v2-sp-5) var(--v2-sp-5); }
.adv-terms-row + .adv-terms-row { border-top: 1px dashed var(--adv-hair); }
.adv-terms-row .n { font-family: var(--v2-f-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; color: var(--v2-yellow-text); padding-top: var(--v2-sp-1); flex-shrink: 0; }
.adv-terms-row strong { display: block; font-family: var(--v2-f-dis); font-size: 16px; font-weight: 700; letter-spacing: 0; line-height: var(--v2-lh-tight); color: var(--v2-ink); }
.adv-terms-row small { display: block; font-size: 13px; color: var(--adv-mute); margin-top: 5px; line-height: var(--v2-lh-body); }

/* ─── 15 · ตารางแถวแบบใหม่ (refunds) ────────────────────── */
.adv-rows-head, .adv-row { display: grid; grid-template-columns: 120px 1fr 160px 150px; gap: var(--v2-sp-4); align-items: center; }
.adv-rows-head { padding: var(--v2-sp-3) var(--v2-sp-5); border-bottom: 1px solid var(--adv-panel-line); font-family: var(--v2-f-mono); font-size: 11px; color: var(--adv-mute); }
.adv-row { padding: var(--v2-sp-4) var(--v2-sp-5); border-bottom: 1px solid var(--adv-hair); }
.adv-row:last-child { border-bottom: 0; }
.adv-row-id a { font-family: var(--v2-f-mono); font-size: 12px; color: var(--v2-yellow); text-decoration: none !important; }
.adv-row-amount { font-family: var(--v2-f-mono); font-size: 13px; font-weight: 600; color: var(--v2-ok); }
.adv-row-date { font-family: var(--v2-f-mono); font-size: 12px; color: var(--adv-mute); }
.ta-r { text-align: right; }
@media (max-width: 767px) {
    .adv-rows-head { display: none; }
    .adv-row { grid-template-columns: 1fr auto; row-gap: var(--v2-sp-2); }
    .adv-row-date { grid-column: 1 / -1; text-align: left; }
}


/* A4 — สองอย่างที่ light mode ตกหล่น  (2026-07-30)
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */

html.light .order-item .order-item-bottom .oib-first .item {
    background: var(--main-bg);
}

html.light body#dash .services-id,
html.light body#outside .services-id,
html.light body#dash .updates-id,
html.light body#outside .updates-id {
    color: var(--adv-stub-ink);
}


/* A7 — the tablet dead zone: no sidebar, no way to open one  (2026-07-31)
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */

@media (min-width: 992px) and (max-width: 1199.98px) {
    /* the in-drawer close button belongs to the <=991 drawer, not to this range */
}


/* A8 — patches 3 and 4 from the handoff: the signup benefit list and the
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */

.adv-metrics {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: var(--v2-r-lg);
    overflow: hidden;
    background: linear-gradient(180deg, var(--adv-panel-top), var(--adv-panel-bot));
    border: 1px solid var(--adv-panel-line);
    box-shadow: var(--adv-lift);
    max-width: 540px;
}
.adv-metrics::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 9px;
    background-image: radial-gradient(circle at 7px 1px, rgba(255,214,10,0.30) 2.6px, transparent 3.1px);
    background-size: 16px 9px;
    background-repeat: repeat-x;
    pointer-events: none;
}
.adv-metrics .m { padding: var(--v2-sp-6); }
.adv-metrics .m:nth-child(odd) { border-right: 1px dashed var(--adv-hair); }
.adv-metrics .m:nth-child(-n+2) { border-bottom: 1px dashed var(--adv-hair); }
.adv-metrics .m b {
    display: block;
    font-family: var(--v2-f-dis);
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
    color: var(--v2-ink);
}
.adv-metrics .m.ok b { color: var(--v2-ok); }
.adv-metrics .m span {
    display: block;
    font-family: var(--v2-f-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--adv-mute);
    margin-top: 8px;
}
@media (max-width: 540px) {
    .adv-metrics { grid-template-columns: 1fr; }
    .adv-metrics .m:nth-child(odd) { border-right: 0; }
    .adv-metrics .m:not(:last-child) { border-bottom: 1px dashed var(--adv-hair); }
}


/* A10 — patches 1 and 2: the top-up total and the referral link become
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */

body#dash .af-sum-card {
    overflow: hidden;
    padding-bottom: 0;
}
body#dash .af-sum-card .adv-tear,
body#dash .af-sum-card .adv-stub {
    /*  A123 · -22 หักล้าง padding ที่เป็น 20 คือเกินข้างละ 2px แล้วให้
        overflow:hidden เก็บกวาด มันดูถูกเพราะโดนตัด ไม่ใช่เพราะเลขถูก */
    margin-left: calc(var(--v2-sp-5) * -1);
    margin-right: calc(var(--v2-sp-5) * -1);
}
body#dash .af-sum-card .adv-stub {
    border-radius: 0;
}
body#dash .af-sum-card .adv-stub .v {
    font-family: var(--v2-f-dis);
}

body#dash .adv-card-flush {
    overflow: hidden;
    padding: 0;
}
body#dash .adv-card-flush > .adv-stub {
    border-radius: 0;
    margin: 0;
}
body#dash .adv-copy {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-1);
    padding: var(--v2-sp-2) var(--v2-sp-4);
    background: var(--adv-stub-bg);
    border: 0;
    border-radius: var(--v2-r-pill);
    color: var(--adv-stub-ink);
    font-family: var(--v2-f-dis);
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
}
body#dash .adv-copy:hover {
    box-shadow: var(--adv-sel-glow);
}
@media (max-width: 640px) {
    body#dash .adv-stub-col { flex-direction: column; align-items: stretch; gap: var(--v2-sp-3); }
    body#dash .adv-copy { width: 100%; justify-content: center; }
}


/* A11 — the service category bar is yellow in both themes, so its text
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */

body#dash .service-cat-side .service-cat-header,
body#outside .service-cat-side .service-cat-header {
    color: var(--adv-stub-ink);
}
body#dash .service-cat-side .s-count,
body#outside .service-cat-side .s-count {
    /* 0.66 measured 4.23:1 on the orange chip — 0.85 clears it at 6.0 */
    color: rgba(26, 21, 0, 0.85);
}
body#dash .service-cat-side .s-count strong,
body#outside .service-cat-side .s-count strong {
    color: var(--adv-stub-ink);
}


/* A12 — sections 16-18 of the Soft Panel layer  (2026-07-31)
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */

/* ─── 16 · กลุ่มหน้า auth ที่ใช้คลาส .signup-* ─────────────
   resetpassword · setnewpassword · confirmemail · signup
   หน้ากลุ่มนี้ไม่ได้ใช้ .card เลย จึงไม่โดนส่วนที่ 3
   ============================================================ */

/* พื้น + แสง — .signup-area เป็น wrapper ตัวนอกสุด */
.signup-area {
    background:
        radial-gradient(900px 620px at 6% -14%, var(--adv-glow), transparent 58%),
        var(--adv-bg);
    min-height: 100vh;
}
/* แสงเดิมไม่ต้องใช้ แสงมาจากทิศเดียว */
.signup-area .home-fade,
.signup-area .hf-glow { display: none !important; }

/* หัวหน้า — โลโก้ + ปุ่มกลับ */
.signup-area .signup-header .signup-logo { display: flex; align-items: center; }
.signup-area .signup-header .signup-logo img { height: 30px; width: auto; display: block; }

/* A88 · E3 · ลบกฎคู่ทั้งหกที่เคยอยู่ตรงนี้ ทุกตัวเขียนทับกฎ `body#outside .signup-*`
   ข้างบนด้วย !important รวม 15 ตัว ค่าที่ขึ้นจอจริงจึงมาจากที่นี่ ไม่ใช่จากที่นั่น
   ตอนนี้ค่าถูกย้ายไปไว้ที่กฎเจ้าของเดิม และแต่ละอย่างมีเจ้าของเดียว:
     `.signup-header > .btn`  → รวมเข้ากับ `body#outside .signup-header .btn.btn-primary`
     `.signup-badge > .icon`  → กฎนี้ตายทั้งดวงอยู่แล้ว (1,2,1 ชนะ 0,3,0) วัดบนจอจริง
                                 ได้ชิปเหลืองทึบ 48px ไม่ใช่ 52px เหลืองอ่อนตามที่เขียน
     `.signup-badge .text h1/h2/h4/p` → twig ใช้ <span>/<small> ไม่มี h1/h2/h4/p เลย
                                 ทั้งสองกฎจึงไม่เคยจับอะไร (resetpassword + setnewpassword
                                 เป็นสองไฟล์เดียวที่ใช้ .signup-badge)
     `.signup-foot` / `hr + div`     → ไม่มีทั้ง .signup-foot และ <hr> ในสองไฟล์นั้น
     `.form-control`          → รวมเข้ากับ `body#outside .signup-content .form-control`
     `.btn.btn-primary`       → background/box-shadow ซ้ำกับกลุ่มหัวข้อ 5 อยู่แล้ว
     `.signup-content`        → พื้น/ขอบ/เงา/backdrop มาจากกลุ่ม `body#outside .card…`
                                 ที่ (1,1,1) ซึ่งชนะกฎนี้ที่ (0,2,0) อยู่แล้วแม้ทั้งคู่เป็น
                                 !important — เงาที่วัดได้บนจอคือ --adv-lift ไม่ใช่
                                 --adv-lift-lg ตามที่เขียนไว้ ส่วน radius กับ padding
                                 ซ้ำค่ากับ `body#outside .signup-content` ข้างบนพอดี */

/* ─── 17 · 2fa · การ์ดเดี่ยว .auth-mini-card ─────────────── */
/* A88 · E3 · ‼ กฎ `.auth-mini-title` / `.auth-mini-sub` / `.btn.btn-primary` ที่เคยอยู่
   ตรงนี้ตายทั้งหมด — มันเขียนไว้ที่ (0,1,0)/(0,3,0) แต่มีกฎคู่ `body#dash …` / `body#outside …`
   อยู่ก่อนหน้าในไฟล์ที่ (1,1,0)/(1,3,0) จึงชนะทุก property ที่ทับกัน
   ค่าที่ตั้งใจไว้ (ปุ่มสูง 52 มุม --v2-r-md) ถูกย้ายไปไว้ในกฎเจ้าของเดิมแล้ว
   เหลือที่นี่เฉพาะสิ่งที่ไม่มีคู่: พื้นการ์ด และช่องรหัส 6 หลัก */
body#dash .auth-mini-card,
body#outside .auth-mini-card,
.auth-mini-card {
    background: linear-gradient(180deg, var(--adv-panel-top), var(--adv-panel-bot)) !important;
    border: 1px solid var(--adv-panel-line) !important;
    box-shadow: var(--adv-lift-lg) !important;
}
/* ช่องรหัส 6 หลัก — ตัว mono ใหญ่ อ่านง่าย ไม่ต้องแยก 6 ช่อง
   ‼ ดีไซน์ Panel E · E3 วาดเป็นหกช่องแยก ไม่ทำตาม: ต้องใช้ JS รวมค่ากลับเข้า
     input ชื่อ `code` ก่อน submit ซึ่งเป็นความเสี่ยงบนโฟลว์ล็อกอิน แลกกับความสวย
   ‼ ค่าย้ายไปอยู่กับกลุ่ม `body#dash/#outside .auth-mini-card #code` แล้ว
     เขียนที่ (1,1,0) ตรงนี้แพ้ `body#dash .form-control` (1,1,1) ทุกครั้ง */

/* ─── 18 · child_panel_order · .form-select ──────────────── */
/* หน้านี้ใช้ .form-select ไม่ใช่ .form-control จึงไม่โดนส่วนที่ 3 */
body#dash .form-select,
body#outside .form-select {
    background-color: var(--adv-inner) !important;
    border: 1px solid var(--adv-inner-line) !important;
    color: var(--v2-ink);
    height: 46px;
    border-radius: var(--v2-r-md);
}
body#dash .form-select:focus {
    border-color: var(--v2-yellow) !important;
    box-shadow: var(--adv-sel-glow) !important;
}
/* A89 · C3 · ลบกฎ `#price[readonly]` — element ถูกเอาออกจาก twig แล้ว
   มันเป็น <input> ที่ไม่มี name จึงไม่เคยถูกส่ง เป็นการแสดงผลล้วน ๆ
   ตอนนี้ราคาเป็นข้อความในการ์ดสรุป (`.cpo-sum-v`) ไม่ใช่ช่องกรอกปลอม */


/* A13 — the yellow button keeps theme ink, and mobile taps get a floor
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */

/* A88 · E3 · กัน `.signup-header .btn` ออกด้วย — มันไม่ใช่ปุ่มเหลืองอีกแล้ว
   ‼ ถ้าปล่อยไว้ กฎนี้ที่ (2,2,1) จะชนะ `color: var(--v2-ink)` ที่ (1,3,1) และในธีมมืด
     `--v2-yellow-ink` ยังเป็นสีเข้ม → ตัวหนังสือเข้มบนแคปซูลโปร่งพื้นมืด */
html body#dash .btn.btn-primary,
html body#outside .btn.btn-primary:not(.signup-header .btn) {
    color: var(--v2-yellow-ink);
}

@media (max-width: 991px) {
    body#dash .btn,
    body#outside .btn,
    body#dash .sbar-btn,
    body#dash .hd-btn {
        min-height: 44px;
    }
    /* square icon buttons need width too, or they become tall pills */
    /* these three set an explicit height that would otherwise win */
    body#dash .order-item-bottom .oib-last .btn,
    body#dash .services-item-bottom .sib-last .btn,
    body#dash .order-item-bottom .sib-last .btn.btn-primary {
        height: auto;
        line-height: var(--v2-lh-tight);
        padding-top: var(--v2-sp-2);
        padding-bottom: var(--v2-sp-2);
    }
    /* A13 keyed the floor off .btn, and these controls do not carry it — the
       ดูเหตุผลเต็มใน git log และ .claude/verify/ */
    body#dash .btn-favorite,
    body#dash .addBalanceBtn,
    body#dash .close,
    body#dash .adv-copy,
    body#dash .adv-rail-i {
        min-height: 44px;
    }
    body#dash .btn-favorite,
    body#dash .close {
        min-width: 44px;
    }
}

/* The star is a 32px box with a 17×24 <span role="button"> inside it holding
   data-favorite-service-id. The role is on the inner span, so that 17×24 is
   what a target-size check measures and what a screen reader announces — the
   parent is only decoration. Filling the parent makes the whole control the
   button, at every width. */
body#dash .btn-favorite [data-favorite-service-id],
body#outside .btn-favorite [data-favorite-service-id] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}


/* A14 — the price on /services was yellow on mint  (2026-07-31)
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */

html.light body#dash .services-rate,
html.light body#outside .services-rate {
    color: var(--v2-ok-text);
}


/* A15 — the last two places where ink follows the theme instead of the
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */

/* หมึกเข้มบนหน้าที่กำลังอยู่ — เพราะพื้นของมันเป็น "เหลือง"
   ‼ เหลือเฉพาะ guest แล้ว (A55) — ฝั่ง authed พื้นเปลี่ยนเป็นหมึกเข้ม กฎนี้เลยกลับด้าน
     กลายเป็นหมึกดำบนพื้นดำ ห้ามใส่ body#dash กลับเข้ามา
   A15 เขียน !important ตัวนี้ตอนไล่หา "สีที่ไม่ยอมเปลี่ยน" ในธีมมืด และบันทึกไว้ว่า
   ยกน้ำหนักสองรอบแล้วยังแพ้ — ตอนนี้รู้แล้วว่าอาการแบบนั้นมักไม่ใช่ cascade:
   .page-link มี transition ที่ครอบ color อยู่ และ tab ที่ไม่ได้อยู่หน้าจอจะแช่ค่าเดิมไว้
   ดู RESUME หัวข้อ "a hidden tab freezes every transition" ก่อนยกน้ำหนักรอบต่อไป */
html body#outside .pagination .page-item.active .page-link {
    color: var(--v2-yellow-ink) !important;
}

/* light only. The first version of this had no mode scope, and .af-info-card-yellow
   is a 14-22% yellow tint — over cream it lands pale and dark ink reads, over
   #0c0c10 it lands dark olive and dark ink disappears. Measured at 19 apart in
   dark, worse than the 29 it was sent in to fix. On dark the original yellow
   already had its contrast from the near-black behind it. */
html.light body#dash .af-info-card-yellow .af-info-head,
html.light body#dash .af-info-card-yellow .af-info-head i {
    color: var(--adv-stub-ink);
}


/* A16 — Polish Pass: sections 19-32  (2026-07-31)
   ‼ 1-18 อยู่ในไฟล์แล้วจาก A3/A12 ห้าม append ไฟล์ 32 section ทั้งก้อนซ้ำ
   !important 98 ตัวในบล็อกนี้ตั้งใจให้อยู่ · git log --grep=A16 */
/* ส่วน 19–22 · POLISH PASS (31 ก.ค. 2026)
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */

/* ─── 19 · ไทยห้ามโดน letter-spacing ─────────────────────────
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
body#dash, body#outside, .signup-area { letter-spacing: normal; }

body#dash .dw-title,
body#dash .app-widget span,
body#dash .app-widget span small,
body#dash .stat .l,
body#dash .ns span,
body#dash .form-label,
body#dash .control-label,
body#dash .card-title,
body#dash .page-sub-v2,
body#outside .page-sub-v2,
body#outside .v2-feat h3,
body#outside .v2-feat p,
body#outside .signup-badge .text > span,
body#outside .signup-badge .text small,
body#outside .signup-content .form-group > label,
.auth-mini-title,
.auth-mini-sub,
.adv-step-head .t,
.adv-step-head .d,
.adv-rail-i,
.adv-terms-row strong,
.adv-terms-row small { letter-spacing: normal !important; }

/* tracking เก็บไว้เฉพาะ Latin ตัวพิมพ์ใหญ่ — ที่ที่มันช่วยจริง */
body#dash .v2-eyebrow,
body#outside .v2-eyebrow,
.adv-stub .k,
.adv-rows-head,
.adv-recap-k,
.adv-terms-head { letter-spacing: 0.18em; }

/* label ที่ "เนื้อหาเป็นไทยได้" ต้องไม่มี tracking แม้จะเป็น mono
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
body#dash .form-section,
body#dash .adv-rows-head,
body#dash .adv-rows-head span,
body#dash .tbl thead th,
body#dash .svc-tbl thead th,
.svc34 .svc-tbl thead th { letter-spacing: normal !important; text-transform: none !important; }

/* ไทยไม่มีชุด italic จริง เบราว์เซอร์จะบังคับเอียง (oblique) หัวตัวอักษรเบี้ยว
   ใช้สี + น้ำหนักเน้นแทน */
body#dash .page-h1-v2 i,
body#dash .neworder-h1 i,
body#outside .page-h1-v2 i {
    font-style: normal;
    color: var(--v2-yellow-text);
    font-weight: 800;
}
/* the guest hero and auth panel keep the bright accent — those two sit on the
   dark split panel in both themes, where #ffc800 is 10:1 and the ink version
   would be the unreadable one. Same reason the tokens are split by surface
   rather than by mode. */
body#outside .v2-hero-h1 i,
body#outside .v2-auth-h1 i {
    font-style: normal;
    color: var(--v2-yellow);
    font-weight: 800;
}

/* ─── 20 · เลิกซ้อนกล่อง ─────────────────────────────────────
   กฎ: หนึ่งพื้นที่มีได้ไม่เกิน 2 ชั้น (แผง + ช่องกรอก)
   ============================================================ */

/* 20.1 การ์ดผู้ใช้ในเมนู — 3 ชั้น 232px → แถวเดียว 64px */
/* Two things are dead here and both should stay that way. `.user-card` is not in
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
/* รูปเป็นสี่เหลี่ยมมน เข้าชุดกับไอคอนอื่นทั้งเว็บ ไม่ต้องมีวงแหวน */
/* ป้ายที่จบด้วย … แล้วไม่บอกอะไร — ซ่อนไว้ ใส่ยอดคงเหลือแทนใน twig */


/* 20.3 ปุ่มจ่ายเงิน — ป้ายชื่อต้องอยู่ในการ์ดเดียวกัน ไม่ใช่กล่องต่อท้าย */
body#dash .payment-box .payment-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--v2-r-md);
    display: grid;
    place-items: center;
    font-size: 20px;
    flex-shrink: 0;
    margin: 0 !important;
}
body#dash .payment-box .payment-label,
body#dash .payment-box > span:last-child {
    flex: 1;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0!important;
    font-family: var(--v2-f-dis);
    font-size: 14px;
    font-weight: 700;
    color: var(--v2-ink);
    text-align: left;
}

/* ─── 21 · ความหนาแน่น ─────────────────────────────────────── */

/* 21.1 เมนู 52px → 38px · 9 รายการประหยัด 162px */
body#dash #nav-reg > li > a {
    height: 38px;
    gap: var(--v2-sp-3);
    padding: 0 var(--v2-sp-3);
    border-radius: var(--v2-r-sm);
    font-size: 14px;
}
body#dash #nav-reg > li + li { margin-top: 2px; }
body#dash #nav-reg > li > a > i { width: 18px; text-align: center; font-size: 16px; }
/* หัวข้อกลุ่ม — ทำแล้วใน A20: layout.twig ปล่อย <div class="nav-group"> สี่อัน
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */

/* 21.2 หัวหน้า — หน้าทำงานไม่ใช่หน้าขายของ */
body#dash .page-h1-v2,
body#dash .neworder-h1 { font-size: 26px; line-height: var(--v2-lh-tight); }
body#dash .page-sub-v2,
body#dash .neworder-sub { font-size: 12px; margin-top: 3px; }
body#dash .neworder-header {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-4);
    flex-wrap: wrap;
}
/* A65 · สถิติ 3 ตัว = การ์ดสามใบ ตามดีไซน์ Panel F (F1 บรรทัด 98–103)
   ของเดิมเป็นตัวหนังสือชิดขวาคั่นด้วยเส้น — ดีไซน์ให้เป็นการ์ดพื้นขาวมีเงา ชิดซ้าย
   ‼ `!important` สามตัวเดิมออกได้ เพราะกฎนี้อยู่หลัง L9313 อยู่แล้ว ชนะด้วยลำดับ
   ‼ ป้ายเลิกเป็น mono/uppercase — ดีไซน์ใช้ตัวปกติ 11px และภาษาไทยไม่มีตัวพิมพ์ใหญ่
     (บทเรียนเดิมจาก A54 · uppercase กับไทยได้แต่เสียฟอนต์ที่มีสระครบ) */
body#dash .neworder-stats {
    margin-left: auto;
    display: flex;
    align-items: stretch;
    gap: var(--v2-sp-2);
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}
/* ‼ ต้องเป็น `min-width` ไม่ใช่ `flex-basis` — ลองมาแล้วทั้งสองแบบบนหน้าจริง
     `flex: 1 1 124px` ให้กล่องนอกกว้างแค่ 351 แล้วการ์ดหักเป็น 2+1 ตั้งแต่จอ 1440
     เพราะ flex-basis ของลูกไม่ได้เข้าไปคิดใน max-content ของกล่องนอก แต่ min-width เข้า
     ใส่ min-width แล้วได้ 388 = 124×3 + gap 8×2 ตรงตามดีไซน์เป๊ะ
   ‼ ปล่อยให้ห่อบรรทัดได้ (flex-wrap: wrap ที่บล็อก A61) — ที่ 390 แถวนี้เหลือ 359
     388 ไม่พอ มันจะห่อเป็น 2+1 แทนที่จะดันหน้าให้เลื่อนแนวนอน */
body#dash .neworder-stats .ns {
    flex: 0 1 auto;
    min-width: 124px;
    text-align: left;
    padding: var(--v2-sp-3) var(--v2-sp-4);
    border-radius: var(--v2-r-md);
    background: var(--v2-surface);
    box-shadow: var(--v2-elev);
}
body#dash .neworder-stats .ns b {
    font-size: 19px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--v2-ink);
}
body#dash .neworder-stats .ns:nth-child(2) b { color: var(--v2-yellow-text); }
/* A95 · การ์ดสามใบบนมือถือ — บล็อกนี้คือที่ที่คอมเมนต์สองแห่ง (ราว L9407 และ L15139)
   อ้างถึงมาตลอดว่า "ค่าใหม่อยู่ในบล็อก @media (max-width: 640px)" แต่ไม่เคยมีใครเขียน
   ‼ `min-width: 124px` → 124x3 + gap 8x2 = 388 ไม่พอในแถว 359 ที่ viewport 390
     แถวจึงห่อเป็น 2+1 เหลือช่องว่าง 140px ท้ายแถวสอง (วัดบนเครื่องจริง 390x844)
     ที่นี่ปล่อย min-width เป็น 0 ให้สามใบแบ่งแถวกันเอง ~114px ต่อใบ
     ไม่เกิดการเลื่อนแนวนอน ซึ่งเป็นเหตุผลเดียวที่บล็อก A65 ยอมให้ห่อ */
@media (max-width: 640px) {
    /* ‼ `margin-left: auto` ของกฎเดสก์ท็อปดันแถวไปชิดขวา บนมือถือแถวนี้อยู่ใต้หัวเรื่อง
       ไม่ได้อยู่ข้างมัน จึงเหลือช่องว่าง 49px ทางซ้ายและการ์ดถูกบีบเหลือ 100px จนข้อความห่อ
       (วัดจริง 390: แถว 317 ที่ x=61 การ์ดสูง 87 → เต็มความกว้าง 366 การ์ด 117 สูง 68) */
    body#dash .neworder-stats { flex-wrap: nowrap; margin-left: 0; width: 100%; }
    body#dash .neworder-stats .ns {
        flex: 1 1 0;
        min-width: 0;
        padding: var(--v2-sp-3);
    }
    body#dash .neworder-stats .ns b { font-size: 17px; }
    body#dash .neworder-stats .ns span { font-size: 10.5px; }
}
body#dash .neworder-stats .ns span {
    margin-top: 5px;
    font-family: var(--v2-f-thai);
    font-size: 11px;
    text-transform: none;
}

/* 21.3 แท็บของ neworder / addfunds — แผ่นพับต่อกับการ์ด (ดีไซน์ Panel F · F1 บรรทัด 110–119)
   ‼ บล็อกเดิมตรงนี้ **แพ้ทั้งก้อน** ไม่เคยขึ้นจอเลย:
     เดิมเขียน `body#dash #nav-tab` = (2,0,1) ส่วนคู่แข่งที่บล็อก A52 เขียน
     `body#dash ul.nav#nav-tab` = (2,1,2) → ของ A52 ชนะทุกบรรทัด
     ลูกก็เหมือนกัน `#nav-tab .nav-link` (2,1,1) แพ้ `ul.nav#nav-tab > .nav-item > .nav-link` (2,3,3)
     เขียนใหม่ด้วย "รูปทรง selector เดียวกับตัวที่ต้องชนะ" แล้ววางไว้ทีหลังในไฟล์
     → specificity เท่ากัน ลำดับตัดสิน ไม่ต้องพึ่ง !important แม้แต่ตัวเดียว
   ‼ `[role="tablist"]` ทั้งเว็บยังใช้แคปซูลเหลืองของ A52 ต่อ — ห้ามแก้ที่นั่นเพื่อสองหน้านี้
     หน้าอื่น (orders · services · tickets) เป็นงานของ Panel B–E
   ‼ แท็บที่เลือกใช้ **พื้นเดียวกับการ์ด** ไม่ใช่เหลือง เพื่อให้อ่านเป็นชิ้นเดียวกับการ์ดข้างล่าง
     เหลืองถูกเก็บไว้ให้ปุ่ม "สั่งซื้อเลย" บนตั๋วดำ ตามกติกาใน panel-tokens.css บรรทัด 4–5 */
/* A100 · ‼ `padding: 0 var(--v2-sp-1)` ถูกลบ — 4px นั้นคือสาเหตุที่ขอบแท็บกับขอบการ์ด
   ไม่ตรงกัน **ทั้งมือถือและเดสก์ท็อป** (เจ้าของทักเอง 2026-08-10)
   ทุกอย่างที่เหลือถูกวางมาให้เชื่อมกันพอดีอยู่แล้ว วัดได้: แท็บชนการ์ดแนวตั้ง 0px
   สีพื้นเดียวกัน rgb(26,28,36) การ์ดมี radius `0 20px 20px` คือทำมุมซ้ายบนเป็นเหลี่ยม
   ไว้รับแท็บโดยเฉพาะ เหลือแค่ 4px นี้ที่ดันแท็บออกไปทางขวา
   วัดก่อนแก้: มือถือ แท็บ x=16 การ์ด x=12 · เดสก์ท็อป แท็บ x=262 การ์ด x=258 */
body#dash ul.nav#nav-tab,
body#dash ul.nav#nav-info-tabs {
    display: flex;
    width: 100%;
    gap: var(--v2-sp-1);
    padding: 0;
    margin: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}
body#dash ul.nav#nav-tab > .nav-item,
body#dash ul.nav#nav-info-tabs > .nav-item { flex: 0 1 auto; }
body#dash ul.nav#nav-tab > .nav-item > .nav-link,
body#dash ul.nav#nav-info-tabs > .nav-item > .nav-link {
    height: 42px;
    padding: 0 var(--v2-sp-5);
    border: 0;
    border-radius: var(--v2-r-lg) var(--v2-r-lg) 0 0;
    background: none;
    box-shadow: none;
    color: var(--adv-mute);
    font-weight: 500;
}
body#dash ul.nav#nav-tab > .nav-item > .nav-link:hover,
body#dash ul.nav#nav-info-tabs > .nav-item > .nav-link:hover {
    background: var(--v2-glass);
    color: var(--v2-ink);
}
/* A67 · เงาบาง ๆ ใต้แท็บที่เลือก มาจาก `panel-tokens.css` → `[data-tabon="true"]`
   มันคือเงาที่ทำให้แท็บดู "ยกขึ้นมาต่อกับการ์ด" ไม่ใช่แค่แปะสีเดียวกัน */
body#dash ul.nav#nav-tab > .nav-item > .nav-link.active,
body#dash ul.nav#nav-info-tabs > .nav-item > .nav-link.active {
    background: var(--v2-surface);
    color: var(--v2-ink);
    border-color: transparent;
    box-shadow: 0 -3px 10px -6px rgba(0, 0, 0, 0.3);
    font-weight: 600;
}
body#dash ul.nav#nav-tab > .nav-item > .nav-link.active .icon,
body#dash ul.nav#nav-info-tabs > .nav-item > .nav-link.active .icon { color: inherit !important; }

/* มุมการ์ดต้องเปิดรับแท็บที่กำลังเลือก — ฝั่งไหน active มุมฝั่งนั้นหาย
   ‼ ผูกกับ .active จริง ไม่ฮาร์ดโค้ด เพราะ #nav-tab เริ่มที่แท็บซ้าย
     แต่ #nav-info-tabs เริ่มที่แท็บขวา และ bootstrap ย้าย .active ตอนกด */
body#dash ul.nav#nav-tab:has(> .nav-item:first-child > .nav-link.active) + .card,
body#dash ul.nav#nav-info-tabs:has(> .nav-item:first-child > .nav-link.active) + .card {
    border-top-left-radius: 0;
}
body#dash ul.nav#nav-tab:has(> .nav-item:last-child > .nav-link.active) + .card,
body#dash ul.nav#nav-info-tabs:has(> .nav-item:last-child > .nav-link.active) + .card {
    border-top-right-radius: 0;
}
@media (max-width: 640px) {
    body#dash ul.nav#nav-tab > .nav-item > .nav-link,
    body#dash ul.nav#nav-info-tabs > .nav-item > .nav-link { padding: 0 var(--v2-sp-3); }
}

/* 21.4 ตัวเตือน 7 การ์ด → แผงเดียวเส้นประคั่น */
body#dash .read-before-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-radius: var(--v2-r-lg);
    overflow: hidden;
    background: linear-gradient(180deg, var(--adv-panel-top), var(--adv-panel-bot));
    border: 1px solid var(--adv-panel-line);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
    counter-reset: rb;
}
/* background/border/border-radius below are dead: `#nav-read ul li` carries two
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
body#dash .read-before-list > li {
    counter-increment: rb;
    display: flex;
    gap: var(--v2-sp-3);
    padding: var(--v2-sp-3) var(--v2-sp-4);
    background: none;
    border: 0;
    border-radius: 0;
    font-size: 13px;
    line-height: var(--v2-lh-body);
    color: var(--adv-mute);
}
body#dash .read-before-list > li + li { border-top: 1px dashed var(--adv-hair); }
/* เลข 01–07 แทนอีโมจิ 👉 ที่ซ้ำทุกข้อ */
body#dash .read-before-list > li::before {
    content: counter(rb, decimal-leading-zero);
    font-family: var(--v2-f-mono);
    font-size: 11px;
    color: var(--adv-mute);
    padding-top: 2px;
    flex-shrink: 0;
}

/* ─── 22 · โหมดสว่าง — เลิกไล่สีครีม ─────────────────────────
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
html.light {
    --adv-bg:        #f1efe9;
    --adv-glow:      transparent;   /* ปิดแสง — โหมดสว่างไม่ต้องมี */
    --adv-panel-top: #ffffff;
    --adv-panel-bot: #ffffff;
    --adv-lift:      0 1px 2px rgba(60,50,20,0.06);
    --adv-lift-sm:   0 1px 2px rgba(60,50,20,0.05);
    --adv-lift-lg:   0 2px 8px -2px rgba(60,50,20,0.10);
}
html.light body#dash,
html.light body#outside,
html.light .signup-area { background: var(--adv-bg); }

/* A70 · ลบกฎ "การ์ดที่เลือกในโหมดสว่าง" ที่เคยอยู่ตรงนี้
   ‼ มันเป็น !important สามตัวที่ทับสถานะ `[data-methodon]` ของดีไซน์ทั้งดวง
     (พื้น --acc-soft + วงแหวนใน) แล้วคืนพื้นครีม + เงาเหลืองลอยกลับมา
   ‼ ค่าที่ใช้จริงตอนนี้อยู่ในบล็อก "การ์ดเลือกได้" หัวข้อ 4 — ตัวเดียว ใช้ได้ทั้งสองธีม
     เพราะ --v2-yellow-soft กับ --v2-yellow สลับค่าตามธีมอยู่แล้ว */


/* ส่วน 23–29 · POLISH PASS 2 · หน้าที่เหลือทั้งหมด
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */

/* ─── 23 · ระบบร่วมทุกหน้า ───────────────────────────────── */

/* 23.1 หัวหน้า — หัวเรื่องกับปุ่มอยู่แถวเดียวกัน */
body#dash .page-header-v2 {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-4);
    flex-wrap: wrap;
    margin-bottom: 16px;
}
body#dash .page-header-v2 > div:first-child { min-width: 0; }
body#dash .page-header-v2 > div:last-child:not(:first-child) { margin-left: auto; }
body#dash .v2-eyebrow { font-size: 11px; }

/* 23.2 padding การ์ด — 26px → 20px */
body#dash .card > .card-body { padding: var(--v2-sp-5) var(--v2-sp-5); }
body#dash .card { margin-bottom: 14px; }

/* 23.3 ฟอร์ม — ช่อง 50→44px · ช่องไฟ 24→18px */
body#dash .form-group { margin-bottom: 18px; }
body#dash .form-group:last-child { margin-bottom: 0; }
/* .form-select also matches .select2-hidden-accessible — the original <select>
   that select2 collapses to 1px and hides behind its own widget. The audit
   reports these declarations as losing there; that is the hidden element, not a
   visible one, and the widget is styled separately. */
/* A54 · ความสูง/มุม/ขนาดของ input ย้ายไปอยู่ในบล็อกฐานที่เดียว — เหลือแต่ .form-select */
body#dash .form-select { height: 46px; border-radius: var(--v2-r-md); font-size: 13px; }
/* A54 · ขนาด label ย้ายไปบล็อกฐาน · comment เดิมบอกว่า font-weight แพ้ให้ .card-body label
   ซึ่งตอนนี้ถูกทำให้ตรงกันแล้ว ไม่มีใครแพ้ใคร */

/* 23.4 alert — 20px → 14px
   A49 · guest เท่านั้น · ห้ามใส่ body#dash กลับ — มันอยู่หลัง A48 และทับ padding/font-size
   ของบล็อกนั้น · .claude/verify/panelA2/A49-verify.json */
body#outside .alert {
    padding: var(--v2-sp-3) var(--v2-sp-4);
    border-radius: var(--v2-r-md);
    font-size: 13px;
    line-height: var(--v2-lh-body);
}

/* 23.5 หน้าว่าง — จัดกลาง 320px → แนวนอน 148px */
/* .noorders ใน orders.twig อยู่ใน {% if orderList is empty %} เซิร์ฟเวอร์เป็นคน
   ตัดสินว่าจะ render ไหม บังคับให้แสดงได้ */
body#dash .noorders {
    display: flex !important;
    align-items: center;
    gap: var(--v2-sp-4);
    padding: var(--v2-sp-6) var(--v2-sp-6) !important;
    text-align: left !important;
}
/* .nothing-found คนละเรื่อง — services.twig วางไว้ตลอดโดยไม่มีเงื่อนไข แล้วให้
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
body#outside .nothing-found.show {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-4);
    padding: var(--v2-sp-6) var(--v2-sp-6) !important;
    text-align: left !important;
}
/* A49 · หน้าว่าง — token ของ Panel A บนเลย์เอาต์แนวนอนของ A16 (320px → 148px)
   ‼ คู่ display:none / .show ต้องอยู่ครบ และห้ามใส่ !important (นั่นคือบั๊ก A36)
   .claude/verify/panelA2/A49-verify.json */
body#dash .nothing-found {
    display: none;
    background: var(--v2-well);
    border-radius: var(--v2-r-lg);
    padding: var(--v2-sp-5);
}
body#dash .nothing-found.show { display: block; }
/* services.twig ห่อ .card ไว้ข้างใน tickets.twig ไม่ห่อ — การ์ดชั้นในไม่ต้องวาดพื้นซ้ำ
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
body#dash .nothing-found > .card {
    background: none;
    box-shadow: none;
    border-radius: 0;
}
body#dash .nothing-found > .card::before,
body#dash .nothing-found > .card::after { display: none; }
body#dash .nothing-found > .card > .card-body { padding: 0; }
body#dash .nothing-found .nothing-found-body {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-4);
    text-align: left;
    width: 100%;
}
body#dash .nothing-found-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--v2-surface);
    color: var(--v2-ink-mute);
    display: grid;
    place-items: center;
    font-size: 17px;
    flex-shrink: 0;
    margin: 0;
}
body#dash .nothing-found h3 {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--v2-ink);
    margin: 0 0 var(--v2-sp-1);
}
body#dash .nothing-found p {
    margin: 0;
    font-size: 12px;
    line-height: 1.65;
    color: var(--v2-ink-mute);
}
/* .noorders เป็นของ orders.twig ที่เซิร์ฟเวอร์ตัดสินว่าจะ render ไหม — คงเดิม */
body#dash .noorders p {
    margin: 0;
    font-family: var(--v2-f-dis);
    font-size: 14px;
    font-weight: 700;
    color: var(--v2-ink);
}

/* 23.6 modal — หัว 4 บรรทัด → 1 แถว
   ‼ A57 · ขอบเคยเป็น #2a2a35 เขียนตรง ๆ ซึ่งเป็นสีของธีมมืด พอสลับเป็นธีมสว่างจะได้
     เส้นเกือบดำรอบกล่องขาว ตอนนี้ใช้ token เดียวกับ modal ตัวอื่น
   modal ที่ render จริงทุกตัว (report / detail / changeEmail) ไม่ได้ใช้กฎนี้ — มันคุม
   langModal กับ currencyModal ซึ่งจะโผล่ก็ต่อเมื่อเจ้าของเปิดภาษา/สกุลเงินมากกว่าหนึ่ง
   เก็บไว้เพื่อวันนั้น และให้หน้าตาตรงกันตั้งแต่แรก */
body#dash .modal-content {
    background: var(--v2-surface);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-lg);
    box-shadow: var(--v2-elev-3);
}
body#dash .modal-header {
    padding: var(--v2-sp-4) var(--v2-sp-5);
    border-bottom: 1px solid var(--adv-panel-line);
    align-items: center;
    gap: var(--v2-sp-3);
}
body#dash .modal-title {
    font-family: var(--v2-f-dis);
    font-size: 16px;
    font-weight: 700;
    line-height: var(--v2-lh-tight);
    letter-spacing: normal;
}
body#dash .modal-body { padding: var(--v2-sp-4) var(--v2-sp-5); }
body#dash .modal-footer { padding: 0 var(--v2-sp-5) var(--v2-sp-5); border-top: 0; gap: var(--v2-sp-2); }
body#dash .modal-footer .btn { height: 44px; border-radius: var(--v2-r-sm); font-size: 13px; }

/* 23.7 pagination — ย้ายไปอยู่บล็อกเดียวข้างบน (A55)
   ‼ ที่นี่เคยเขียน body#dash .pagination .page-link ซ้ำ specificity เท่ากันเป๊ะแต่อยู่
     ทีหลัง เลยชนะบล็อก Panel A ทั้งก้อน 11 declaration โดยไม่มี gate ไหนเห็น
     ห้ามเขียน selector ที่มีอยู่แล้วซ้ำที่นี่ เช็คก่อน:
     python3 .claude/tools/who-wins.py <class> --scope 'body#dash' */

/* ─── 24 · การ์ดออเดอร์ · ใช้ร่วม 5 หน้า ─────────────────────
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
/* border-radius ออกจากกฎนี้ 2026-08-02 (เฟส 3 · 3.1) — สองตัวนี้เป็นแถวในลิสต์
   แล้ว ไม่ใช่การ์ด  ระยะซ้ายขวาออกด้วยเพราะแถวควรชิดขอบการ์ดแม่ */
/* A80 · ถอด `!important` ออก — บล็อกฐานที่มันตั้งใจชนะคือ `body#dash .order-item`
   (บรรทัด ~9988) ซึ่ง specificity เท่ากันเป๊ะและอยู่ **ก่อน** กฎนี้ ลำดับตัดสินให้อยู่แล้ว
   `!important` ที่ค้างไว้ทำให้กฎตารางของ A80 ที่เจาะจงกว่าแพ้ ทั้งที่ควรชนะ */
body#dash .order-item,
body#dash .child-item {
    padding: var(--v2-sp-3) 0;
}
body#dash .order-item-top { gap: var(--v2-sp-3); margin-bottom: 10px; }
body#dash .oit-first { gap: var(--v2-sp-2); flex-wrap: nowrap; }
body#dash .oit-first .g-ticon,
body#dash .child-item .g-ticon {
    width: 34px !important; height: 34px !important;
    border-radius: var(--v2-r-sm)!important;
    font-size: 16px !important;
    flex-shrink: 0;
}
/* ID เป็นตัวหนังสือเปล่า ไม่ต้องเป็นแคปซูล */
body#dash .oit-first .order-id {
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    height: auto !important;
    font-family: var(--v2-f-mono);
    font-size: 11px;
    color: var(--v2-yellow-text);
}
body#dash .order-item-bottom { gap: var(--v2-sp-2); }
body#dash .oib-first { gap: var(--v2-sp-3); row-gap: var(--v2-sp-1); }
/* ลิงก์ย่อ ไม่กินเต็มบรรทัด */
body#dash .oib-first .link.order-link-url {
    max-width: 340px;
    font-family: var(--v2-f-mono);
    font-size: 11px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* ตัวเลข — แถว mono เดียว ไม่ใช่บล็อกละหัวข้อ */
body#dash .oib-first .item {
    font-family: var(--v2-f-mono);
    font-size: 11px;
    color: var(--adv-mute);
}
/* was #d6d6de — a grey chosen against the dark panel and left unscoped, so in
   light mode every order date read at 1.45:1. 454 rows across /orders and
   /subscriptions, the largest single contrast defect on the site, and mine.
   --v2-ink-dim follows the mode and keeps the step down from the label. */
body#dash .oib-first .item strong { color: var(--v2-ink-dim); font-weight: 500; }
/* height and padding lose to .btn-report.c-pointer .btn.btn-report-support, which
   makes a 40px circle. Looked at on /orders: that report button is the only
   button in the row, so there is no 28px sibling for it to look uneven against.
   Measured, looked at, left alone. */
body#dash .oib-last .btn { height: 28px; padding: 0 var(--v2-sp-3); border-radius: var(--v2-r-sm); font-size: 12px; }

/* ─── 25 · services ──────────────────────────────────────────
   เหลือแค่ลดความสูงแถวกับเก็บรายละเอียด — ห้ามรื้อเป็นการ์ด
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
.svc34 .svc-tblwrap {
    background: linear-gradient(180deg, var(--adv-panel-top), var(--adv-panel-bot));
    border-color: var(--adv-panel-line);
    box-shadow: var(--adv-lift);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.svc34 .svc-tbl tbody td { padding: var(--v2-sp-3) var(--v2-sp-4); border-bottom-color: var(--adv-hair); }
.svc34 .svc-tbl thead th { padding: var(--v2-sp-3) var(--v2-sp-4); background: var(--adv-inner); }
.svc34 .svc-tbl tbody tr.service-item:hover td { background: var(--adv-inner); }
/* ID เป็นตัวหนังสือเปล่า — แคปซูลเหลืองแย่งความสนใจจากราคา */
.svc34 .svc-tbl .services-id {
    background: none;
    padding: 0;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: normal;
    color: var(--adv-mute);
}
.svc34 .svc-tbl .ss-name { font-size: 13px; letter-spacing: normal; }
.svc34 .svc-tbl .services-rate { font-size: 14px; color: var(--v2-ink); }
.svc34 .svc-tbl .badgearea [class*="svc34-"] { height: 18px; padding: 0 var(--v2-sp-2); font-size: 11px; }

/* ─── 26 · ตาราง .tbl ────────────────────────────────────── */
body#dash .tbl thead th { padding: var(--v2-sp-3) var(--v2-sp-4); font-size: 11px; }
body#dash .tbl tbody td { padding: var(--v2-sp-3) var(--v2-sp-4); font-size: 13px; }
body#dash .tbl tbody tr:hover td { background: var(--adv-inner); }
/* มือถือ — ยุบเป็นการ์ด (ต้องมี data-label บน td เหมือนที่ svc-tbl ทำ) */
@media (max-width: 767px) {
    body#dash .tbl thead { display: none; }
    body#dash .tbl tbody tr {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: var(--v2-sp-1) var(--v2-sp-3);
        padding: var(--v2-sp-3) var(--v2-sp-4);
        margin-bottom: 9px;
        border-radius: var(--v2-r-md);
        background: linear-gradient(180deg, var(--adv-panel-top), var(--adv-panel-bot));
        border: 1px solid var(--adv-panel-line);
    }
    body#dash .tbl tbody td { padding: 0; border: 0 !important; }
    body#dash .tbl tbody td[data-label]::before {
        content: attr(data-label) " ";
        font-family: var(--v2-f-mono);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.14em;
        color: var(--adv-mute);
        margin-right: 6px;
    }
}

/* ─── 27 · api · updates ─────────────────────────────────── */
body#dash .api-top > div { padding: var(--v2-sp-4) var(--v2-sp-4); border-radius: var(--v2-r-lg); }
body#dash .api-code {
    background: #0d0d11 !important;
    border: 1px solid #2a2a35 !important;
    border-radius: var(--v2-r-md);
    padding: var(--v2-sp-4) var(--v2-sp-5);
    font-family: var(--v2-f-mono);
    font-size: 12px;
    line-height: 2;
}
html.light body#dash .api-code { background: #faf9f5 !important; border-color: var(--adv-panel-line) !important; }
/* updates — ไทม์ไลน์เป็นแถว ไม่ใช่การ์ดซ้อน
   A87 · ถอด `!important` ออกจาก display / padding / border-radius / background / border
   ‼ กฎที่ทั้งห้าตัวตั้งใจชนะคือ `body#dash .updates-item` (บรรทัด ~13821) ซึ่ง
     specificity เท่ากันเป๊ะและอยู่ **ก่อน** กฎนี้ — ลำดับตัดสินให้อยู่แล้ว
   ‼ `display: flex !important` ทำให้กฎตารางของ A87 ที่เจาะจงกว่า (1,2,1) แพ้
     วัดบนหน้าจริงหลัง deploy: `display` คืนค่า `flex` ทั้งที่ตั้ง `grid` ไว้
     คอลัมน์จึงยังเรียงตามความยาวชื่อบริการของแต่ละแถว ไม่ตรงกันสักแถว */
body#dash .updates-item {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-3);
    padding: var(--v2-sp-3) var(--v2-sp-5);
    border-radius: 0;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--adv-hair);
    box-shadow: none;
}
body#dash .updates-item:hover { background: var(--adv-inner) !important; }
body#dash .updates-item:last-child { border-bottom: 0 !important; }

/* ─── 28 · tickets · viewticket ──────────────────────────────
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
body#dash .ticket-item {
    padding: var(--v2-sp-3) var(--v2-sp-4);
    border-radius: var(--v2-r-md);
    background: linear-gradient(180deg, var(--adv-panel-top), var(--adv-panel-bot));
    border: 1px solid var(--adv-panel-line);
    box-shadow: var(--adv-lift-sm);
}
body#dash .ticket-item + .ticket-item { margin-top: 9px; }
/* ─── A87 · D1 · แถวเคสให้กระชับ ───────────────────────────────────────────
   ‼ ดีไซน์ Panel D · D1 วางรายการเคสเป็นตารางเต็มความกว้าง ห้านี้ทำไม่ได้:
     ของจริงลิสต์อยู่ในคอลัมน์ขวากว้าง **361px** คู่กับฟอร์มเปิดเคสทางซ้าย
     ยัดห้าคอลัมน์ลงไปแล้วอ่านไม่ออก — เก็บโครงสองบรรทัดไว้ แต่เอาส่วนที่เกินออก
   ‼ เส้นประคั่นกลางการ์ดสูง 108px ที่มีบรรทัดเดียวบนล่าง เป็นการแบ่งของที่ไม่ต้องแบ่ง
     ดีไซน์ไม่มีเส้นนี้ · วัดก่อนแก้: การ์ด 361x108 */
body#dash .ticket-list .ticket-item-top {
    margin-bottom: var(--v2-sp-2);
    padding-bottom: 0;
    border-bottom: 0;
}
body#dash .ticket-list .ticket-item { padding: var(--v2-sp-3); }
body#dash .ticket-item:hover { background: var(--adv-inner); }
body#dash .ticket-item-new { border-left: 3px solid var(--v2-yellow); }
body#dash .ticket-id { font-family: var(--v2-f-mono); font-size: 11px; color: var(--adv-mute); }
body#dash .ticket-title { font-family: var(--v2-f-dis); font-size: 13px; font-weight: 600; letter-spacing: normal; }
body#dash .ticket-status { height: 24px; padding: 0 var(--v2-sp-2); font-size: 11px; }

/* แชท — บับเบิลไม่เกิน 74% ไม่ยืดเต็มความกว้าง
   A90 · D2 · `margin-bottom` ออก — `.ticket-body` มี `gap: var(--v2-sp-4)` อยู่แล้ว
   ระยะจริงระหว่างข้อความเลยเป็น 36px ดีไซน์ Panel D · D2 ใช้ 18 */
body#dash .ticket-message { display: flex; flex-direction: column; align-items: flex-start; gap: var(--v2-sp-2); }
body#dash .ticket-message-support { align-items: flex-end; }
/* ─── A86 · D2 · ฟองข้อความในเคส (ดีไซน์ Panel D · D2) ─────────────────────
   ‼ **บั๊กจริงที่แก้ที่นี่:** สีตัวอักษรเคยเป็น `#e4e4ea` ฮาร์ดโค้ด ซึ่งเป็นสีสำหรับ
     พื้นเข้ม แต่พื้นของฟองคือ `--adv-inner` ที่ **สว่างในโหมดสว่าง** (#f2f0ea)
     วัดบนเคสจริง #71: เทาอ่อนบนเทาอ่อน contrast ~1.1 — **คำตอบของแอดมินอ่านไม่ออก
     ทั้งข้อความในโหมดสว่าง** ซึ่งเป็นโหมดตั้งต้นของเว็บ
     ให้สีเดินตามพื้นด้วย `--v2-ink` เหมือนทุกที่ในธีม
   ‼ ดีไซน์: "ข้อความของเราเป็นก้อนเข้ม ของแอดมินเป็นพื้นเทา" — ของเราเคยเป็นก้อนเหลือง
     ซึ่งทำให้ป้ายไฟล์แนบข้างในกลายเป็นเหลืองบนเหลืองด้วย */
body#dash .ticket-message-box {
    max-width: 74%;
    padding: var(--v2-sp-4) var(--v2-sp-4);
    font-size: 13px;
    line-height: var(--v2-lh-body);
    background: var(--adv-inner);
    color: var(--v2-ink);
    border-radius: var(--v2-r-lg) var(--v2-r-lg) var(--v2-r-lg) var(--v2-r-xs);
}
/* ฝั่งเรา (มี .ticket-owner-tag "คุณ") = .ticket-message-support */
body#dash .ticket-message-support .ticket-message-box {
    background: var(--v2-ink);
    color: var(--v2-surface);
    border-radius: var(--v2-r-lg) var(--v2-r-lg) var(--v2-r-xs) var(--v2-r-lg);
}
/* ป้ายไฟล์แนบอยู่ในฟองทั้งสองแบบ พื้นเดิมผูกกับพื้นการ์ด ไม่ใช่พื้นฟอง
   ในฟองหมึกเข้มจึงกลายเป็นสว่างบนเข้ม ให้ใช้พื้นโปร่งตามฟองที่มันอยู่แทน */
body#dash .ticket-message-support .ticket-file {
    background: rgba(255, 255, 255, 0.14);
    color: var(--v2-surface);
}
body#dash .ticket-message-support .ticket-files small { color: rgba(255, 255, 255, 0.62); }
body#dash .ticket-message-info { display: flex; align-items: center; gap: var(--v2-sp-2); font-size: 11px; color: var(--adv-mute); }
body#dash .ticket-owner-tag { height: 19px; padding: 0 var(--v2-sp-2); border-radius: var(--v2-r-pill); background: var(--adv-inner); font-size: 11px; display: inline-flex; align-items: center; }
body#dash .ticket-time { font-family: var(--v2-f-mono); }
body#dash .ticket-file {
    display: inline-flex; align-items: center; gap: var(--v2-sp-2);
    height: 34px; padding: 0 var(--v2-sp-3);
    border-radius: var(--v2-r-sm);
    background: var(--adv-panel-line);
    font-size: 12px;
}

/* ─── 29 · affiliates · addfunds ─────────────────────────────
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
/* ─── A83 · C2 · สถิติพาร์ทเนอร์เป็นการ์ดตัวเลข (ดีไซน์ Panel C · C2) ───────
   เดิมเป็นแถวป้าย/ค่าเต็มความกว้างหกแถวซ้อนกัน ตัวเลขซึ่งเป็นเหตุผลเดียวที่คนเปิดหน้านี้
   อยู่ชิดขอบขวาห่างจากป้ายของตัวเองครึ่งจอ ดีไซน์ให้เป็นการ์ด: ป้ายบน ตัวเลขใหญ่ล่าง
   ‼ ดีไซน์วาดไว้สี่ใบ ของจริงมีหกค่า — **เก็บครบหกใบ** ไม่ตัดทิ้งเพื่อให้เท่าภาพ
   ‼ ถอด `d-flex align-items-center justify-content-between` ออกจาก markup ที่ต้นทางแล้ว
     (affiliates.twig) สามคลาสนั้นเป็น `!important` ของ bootstrap ทั้งชุด ถ้าไม่ถอด
     ต้องเขียน !important สู้สามบรรทัดเพื่อผลลัพธ์เดียวกัน
   ‼ ผูกกับ `.card-body:has(.aff-item)` — `.card-body` ใช้ทั้งเว็บ ห้ามทำเป็น grid ทั้งหมด */
body#dash .card-body:has(.aff-item) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--v2-sp-3);
}
body#dash .card-body:has(.aff-item) > .btn { grid-column: 1 / -1; }
body#dash .aff-item {
    display: flex;
    flex-direction: column;
    gap: var(--v2-sp-2);
    padding: var(--v2-sp-4);
    border-bottom: 0;
    border-radius: var(--v2-r-md);
    background: var(--adv-inner);
    font-size: 13px;
}
body#dash .aff-item:last-child { border-bottom: 0; }
body#dash .aff-item > span:first-child {
    font-family: var(--v2-f-thai);
    font-size: 12px;
    line-height: 1.45;
    letter-spacing: normal;
    text-transform: none;
    color: var(--v2-ink-mute);
}
/* ‼ ขนาดตัวเลขไม่ได้อยู่ตรงนี้ — `body#dash .aff-item .aff-bold` (1,2,1) ที่บรรทัด ~11009
   ชนะกฎที่ผูกกับ `.aff-bold` เฉย ๆ เสมอ ค่าจึงถูกย้ายไปรวมไว้ที่กฎนั้นแล้ว */
@media (max-width: 980px) {
    body#dash .card-body:has(.aff-item) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    body#dash .card-body:has(.aff-item) { grid-template-columns: 1fr; }
}

/* ปุ่มแชร์ลิงก์อ้างอิง — อยู่บนตั๋วเหลือง ใช้หมึกของตั๋วเดียวกับปุ่มคัดลอกข้าง ๆ */
body#dash .adv-share-b,
body#outside .adv-share-b {
    width: 34px;
    height: 34px;
    flex: none;
    display: inline-grid;
    place-items: center;
    border-radius: var(--v2-r-pill);
    background: rgba(26, 21, 0, 0.14);
    color: var(--adv-stub-ink);
    font-size: 13px;
    text-decoration: none !important;
}
body#dash .adv-share-b:hover,
body#outside .adv-share-b:hover { background: rgba(26, 21, 0, 0.24); }
/* ‼ `.adv-stub-note` เป็น `justify-content: space-between` — เดิมมีลูกตัวเดียว
   พอเพิ่มปุ่มแชร์เข้าไป มันดันสามปุ่มไปคนละมุมของตั๋ว (วัดบนหน้าจริงหลัง deploy)
   แถวนี้เป็นแถวปุ่ม ไม่ใช่แถวป้ายซ้าย-ค่าขวา จึงจัดชิดซ้ายพร้อมระยะห่างเท่ากัน */
body#dash .adv-stub-note:has(.adv-share-b),
body#outside .adv-stub-note:has(.adv-share-b) {
    justify-content: flex-start;
    gap: var(--v2-sp-2);
    opacity: 1;
}

/* ─── A84 · C1 · ปุ่มของอันตราย + กุญแจ API (ดีไซน์ Panel C · C1) ──────────
   ‼ ดีไซน์เขียนกติกาไว้เอง: "ของอันตราย (สร้าง API key ใหม่, ลบแผง) ใช้สีแดงอ่อน
     ไม่ใช่ปุ่มแดงเต็ม เพราะกดพลาดแล้วกู้ไม่ได้" — ปุ่มออกคีย์ใหม่เคยเป็น btn-primary
     สีเดียวกับปุ่ม "บันทึก" ที่อยู่เหนือมันสองบรรทัด
   ‼ ใช้ --v2-danger-text ไม่ใช่ --v2-danger: ตัวหลังเป็นสีของ **พื้น** ที่จูนมาให้เห็นบนพื้นเข้ม
     ส่วนตัวอักษรบนพื้นแดงอ่อนต้องเข้มกว่านั้น (โหมดสว่างวัดได้ 4.9 เทียบกับ 3.1) */
body#dash .btn.btn-danger-soft,
body#outside .btn.btn-danger-soft {
    background: var(--v2-danger-soft);
    color: var(--v2-danger-text);
    border: 0;
    box-shadow: none;
    font-weight: 600;
}
body#dash .btn.btn-danger-soft:hover,
body#outside .btn.btn-danger-soft:hover {
    background: var(--v2-danger-soft);
    color: var(--v2-danger-text);
    filter: brightness(0.96);
}

/* คีย์ API เป็นแถวเดียวกับปุ่มคัดลอก — ตัวคีย์เป็น mono และยาวเกินช่องเสมอ */
body#dash .acc-key-row,
body#outside .acc-key-row { display: flex; align-items: center; gap: var(--v2-sp-2); }
body#dash .acc-key-row .form-control,
body#outside .acc-key-row .form-control {
    flex: 1;
    min-width: 0;
    font-family: var(--v2-f-mono);
    font-size: 12.5px;
    text-overflow: ellipsis;
}
body#dash .acc-key-copy,
body#outside .acc-key-copy {
    width: 44px;
    height: 46px;
    flex: none;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: var(--v2-r-md);
    background: var(--adv-inner);
    color: var(--v2-ink-dim);
    font-size: 13px;
    cursor: pointer;
}
body#dash .acc-key-copy:hover,
body#outside .acc-key-copy:hover { background: var(--v2-yellow-soft); color: var(--v2-yellow-text); }

/* ─── A84 · C3 · แผงลูกเป็นตาราง (ดีไซน์ Panel C · C3) ─────────────────────
   ‼ ดีไซน์มีคอลัมน์ "ออเดอร์เดือนนี้" กับ "รายได้" — ไม่มีฟิลด์รองรับ ตัดออก ไม่เติมช่องเปล่า
   ‼ ท่าเดียวกับ A80: ละลาย wrapper ที่มีลูกตัวเดียว เก็บ `.cib-last` ไว้เป็นช่องเพราะมันคือกลุ่มปุ่ม
   ‼ ต่ำกว่า 1100 กลับไปเป็นบล็อกเดิม */
body#dash .child-head { display: none; }

@media (min-width: 1100px) {
    body#dash .child-list .child-head,
    body#dash .child-list .child-item {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 168px 168px 132px 132px;
        column-gap: 12px;
        row-gap: 2px;
        align-items: center;
    }
    body#dash .child-list .child-head {
        padding: var(--v2-d-compact);
        margin-bottom: 4px;
        background: var(--v2-well);
        border-radius: var(--v2-r-sm);
        font-family: var(--v2-f-thai);
        font-size: 11px;
        font-weight: 500;
        /*  A127 · letter-spacing + uppercase ถูกลบ (ทั้งสามหัวตาราง)
            หัวคอลัมน์เป็นไทยทั้งหมด — วันที่สั่ง · งาน · ความคืบหน้า ·
            ยอดเริ่มงาน · ยอดที่ชำระ · สถานะงาน
            uppercase ไม่ทำอะไรกับไทย ส่วน tracking 0.06em (วัดได้ 0.66px)
            ดันสระกับวรรณยุกต์ให้ลอยออกจากพยัญชนะที่มันเกาะอยู่
            ‼ G5 ของ design-gates.js จับจุดนี้เองในการรันครั้งแรก */
        color: var(--v2-ink-mute);
    }
    body#dash .child-list .child-item-top,
    body#dash .child-list .child-item-bottom,
    body#dash .child-list .cit-first,
    body#dash .child-list .cit-last,
    body#dash .child-list .cib-first { display: contents; }
    body#dash .child-list .child-item-top { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }

    body#dash .child-list .child-title   { grid-column: 1; grid-row: 1 / 3; min-width: 0; }
    body#dash .child-list .cib-first > .item.date:nth-of-type(1) { grid-column: 2; grid-row: 1 / 3; }
    body#dash .child-list .cib-first > .item.date:nth-of-type(2) { grid-column: 3; grid-row: 1 / 3; }
    body#dash .child-list .order-status  { grid-column: 4; grid-row: 1 / 3; }
    body#dash .child-list .cib-last {
        grid-column: 5; grid-row: 1 / 3;
        display: flex; align-items: center; justify-content: flex-end; gap: var(--v2-sp-1);
    }
    /* หัวตารางบอกชื่อช่องแล้ว ในแถวเหลือแต่ค่า */
    body#dash .child-list .cib-first > .item.date > strong { display: none; }
    body#dash .child-list .child-title span {
        display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    body#dash .child-list .child-item { padding: var(--v2-d-compact); margin-top: 0; }
}
body#dash .af-sum-head { font-family: var(--v2-f-dis); font-size: 13px; font-weight: 700; letter-spacing: normal; }
body#dash .af-sum-row { padding: var(--v2-sp-2) 0; font-size: 13px; }

/* ปุ่มจ่ายเงิน — ป้ายชื่อต้องอยู่ในการ์ดเดียวกัน ไม่ใช่กล่องต่อท้าย */
body#dash .payment-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--v2-sp-2); }
body#dash .payment-box {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: var(--v2-sp-3);
    padding: var(--v2-sp-3) var(--v2-sp-4) !important;
    border-radius: var(--v2-r-md)!important;
    text-align: left;
}
body#dash .payment-box .payment-top { margin: 0 !important; padding: 0 !important; flex-shrink: 0; }
body#dash .payment-box .payment-icon {
    width: 42px; height: 42px;
    border-radius: var(--v2-r-md);
    display: grid; place-items: center;
    font-size: 20px;
    margin: 0 !important;
}
body#dash .payment-box .payment-bottom {
    flex: 1;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0!important;
    text-align: left;
    /* the stock rule makes this a centred flex container, and text-align has no
       say over a flex item — the label drifted away from its icon */
    justify-content: flex-start;
}
body#dash .payment-box .payment-bottom span {
    font-family: var(--v2-f-dis);
    font-size: 14px;
    font-weight: 700;
    color: var(--v2-ink);
    letter-spacing: normal;
}
@media (max-width: 640px) { body#dash .payment-list { grid-template-columns: minmax(0,1fr); } }

/* ─── 30 · hover · focus (ทำงานบน markup เดิม) ───────────── */

/* 30.1 hover — พื้นสว่างขึ้น 1 ขั้น ไม่ต้องขยับหรือเรืองแสง */
body#dash #nav-reg > li > a:hover,
body#dash .order-item:hover,
body#dash .child-item:hover,
body#dash .blog-card:hover { background: var(--adv-inner) !important; }
/* A70 · การ์ดเลือกได้ไม่มี border แล้ว hover จึงย้ายไปเปลี่ยนพื้นแทน
   ตรงกับ style-hover ที่ดีไซน์เขียนไว้บนการ์ดแพลตฟอร์ม: background: var(--line) */
body#dash .nwo-cat-btn:hover:not(.active),
body#dash .payment-box:hover:not(.active) { background: var(--v2-line); }

/* 30.2 focus-visible — โผล่เฉพาะตอนกด Tab ไม่โผล่ตอนคลิก */
body#dash a:focus-visible,
body#dash button:focus-visible,
body#dash input:focus-visible,
body#dash select:focus-visible,
body#dash textarea:focus-visible,
body#dash [tabindex]:focus-visible,
body#outside a:focus-visible,
body#outside button:focus-visible,
body#outside input:focus-visible,
.signup-area a:focus-visible,
.signup-area button:focus-visible,
.signup-area input:focus-visible {
    outline: 2px solid var(--v2-yellow);
    outline-offset: 2px;
    border-radius: var(--v2-r-sm);
}
body#dash :focus:not(:focus-visible) { outline: none; }


/* ส่วน 31 · ต้องเติมคลาสใหม่ในโค้ดก่อน ถึงจะทำงาน
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */

/* 31.1 .form-pair — จับ 2 .form-group ที่เกี่ยวกันไว้แถวเดียว */
body#dash .form-pair { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--v2-sp-2); }
body#dash .form-pair.wide-first { grid-template-columns: 1.6fr minmax(0,1fr); }
@media (max-width: 767px) { body#dash .form-pair, body#dash .form-pair.wide-first { grid-template-columns: minmax(0,1fr); } }

/* 31.2 .form-section — หัวข้อกลุ่มในฟอร์ม */
body#dash .form-section {
    /*  A127 · ป้ายนี้เนื้อหาเป็นไทย — mono ไม่มี glyph ไทย ตัวไทยจึงตกไป
        ฟอนต์อื่นกลางป้าย · tracking ดันสระ/วรรณยุกต์หลุดจากพยัญชนะ
        ‼ แก้ที่กฎเดิม ไม่ต่อท้ายไฟล์ทับ — การทับทำให้ declaration เดิมตาย
          และ test-ledger จับได้ทันที (295 → 311) ซึ่งถูกของมัน */
    font-family: var(--v2-f-thai);
    font-size: 12px;
    color: var(--adv-mute);
    margin-bottom: 11px;
}
body#dash .form-section:not(:first-child) { padding-top: var(--v2-sp-4); border-top: 1px solid var(--adv-hair); }
/* A heading that opens its own container is :first-child there and misses the
   rule above, so it read as a label floating over the next field rather than as
   a divider. That is the shape the ticket form needs — the headings sit inside
   #order-section and #payment-section so they hide with the fields they name. */
body#dash .form-group > .form-section:first-child {
    padding-top: var(--v2-sp-3);
    border-top: 1px solid var(--adv-hair);
}

/* 31.3 .nav-group — นิยามอยู่ในส่วน 21.1 แล้ว ไม่ประกาศซ้ำ */


/* A60 · .af-amount-wrap ถูกลบ 2026-08-05 — class นี้ไม่เคยถูกใส่ที่ไหนเลย
   หลักฐาน: ไม่มีใน *.twig · ไม่มีใน *.js · DOM สดของ /addfunds นับได้ 0
   และดีไซน์ Panel F ก็ไม่ได้อ้างถึงมันเลย (0 ครั้ง)
   ช่องกรอกเงินจริงใช้ #amount ซึ่ง setAmount() ใน script.js:349 เขียนค่าลงไปตรง ๆ
   ‼ ถ้า Panel F จะทำกรอบ ฿ + ตัวเลขระนาบเดียวกัน ให้เขียนใหม่บน markup ที่มีอยู่จริง
     อย่าปลุกชื่อนี้กลับมา */

/* 31.5 .filter-sticky — ตรึงแถบกรองบนหน้ารายการยาว */
body#dash .filter-sticky {
    position: sticky;
    top: 0;
    z-index: 20;
    padding: var(--v2-sp-3) 0;
    margin-bottom: 4px;
    background: linear-gradient(180deg, var(--adv-bg) 72%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
@media (max-width: 991px) { body#dash .filter-sticky { position: static; backdrop-filter: none; } }

/* 31.6 .adv-skeleton — ลบแล้ว 2026-08-04 (A58)
   โครงร่างตอนโหลดชุดนี้ (4 กฎ + keyframe adv-shimmer + กฎ prefers-reduced-motion)
   ไม่เคยถูกใช้เลย: ไม่มีใน *.twig · ไม่มีใน *.js · หกหน้าที่ตรวจ (/, /orders, /services,
   /affiliates, /account, /addfunds) นับ .adv-skeleton ได้ 0 ทั้งหมด
   keyframe adv-shimmer มีผู้ใช้แค่บล็อกนี้บล็อกเดียว จึงไปด้วยกัน
   ‼ ถ้าจะทำ loading state จริง ให้ดู git log ของ commit นี้ก่อนเขียนใหม่ */


/* ─── 32 · ป้ายแคปซูลห้ามตัดคำ ───────────────────────────────
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
body#dash .os-widget,
body#dash .ticket-status,
body#dash .ticket-owner-tag,
body#dash .ticket-new-badge,
body#dash .pnd-ord-nav > li > a,
body#dash .oit-first .order-id,
body#outside .v2-brand,
.svc34 .svc-tbl .services-id,
.svc34 .svc-tbl .badgearea > *,
.adv-stub .k,
.adv-copy { white-space: nowrap; }


/* A17 — the sidebar profile is two spans, not two cards  (2026-07-31)
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */



/* A18 — the payment buttons, second markup mismatch in section 20
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */

body#dash .payment-box .payment-top {
    width: auto;
    aspect-ratio: auto;
    flex: 0 0 auto;
    background: none;
    padding: 0;
    overflow: visible;
}
body#dash .payment-box .payment-bottom {
    flex: 1;
    min-width: 0;
    padding: 0;
    text-align: left;
    font-family: var(--v2-f-dis);
    font-size: 14px;
    font-weight: 700;
    color: var(--v2-ink);
    white-space: normal;
}


/* A19 — ตัวอักษรไทยเลิกรับ tracking  (2026-07-31)
   ‼ ห้ามใส่ letter-spacing บวกให้ element ที่ข้อความเป็นไทย สระกับวรรณยุกต์จะหลุดจากพยัญชนะ
   tracking เก็บไว้เฉพาะ Latin ตัวพิมพ์ใหญ่ (ดูกฎ 0.18em ท้ายบล็อก)
   git log --grep=A19 */

html body#dash .oib-first,
html body#dash .sib-first,
html body#outside .sib-first,
html body#dash .s-count,
html body#outside .s-count,
html body#dash .card-body label,
/* the affiliates cards put their Thai label in the first flex row, and that row
   carries 0.12em which every child inherits — found by walking up from the text,
   not by matching a rule against it */
html body#dash .card-body > .d-flex:first-child,
html body#dash .aff-item > span:first-child,
html body#dash .af-sum-row .k,
html body#dash .v2-wallet-chip .l,
html body#dash .adv-stub .k,
html body#outside .adv-stub .k,
html body#dash .adv-recap-k,
html body#outside .adv-recap-k,
html body#dash .adv-terms-head,
html body#outside .adv-terms-head,
html body#dash .neworder-promo strong {
    letter-spacing: normal;
}


/* A20 — the sidebar menu never got the density pass  (2026-07-31)
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */



/* A29 — the sidebar role label stopped fitting when the type scale landed
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */



/* A30 — หนึ่งความคิด หนึ่งพื้นผิว  (2026-08-02)
   ‼ ห้ามเปลี่ยนชื่อ .panel-body — layout.twig:779 อ่าน $("#service_description>.panel-body")
   git log --grep=A30 */

/* the description panel and the summary panel are sections, not cards */
body#dash .card .card-body .panel-body,
body#dash #service_description .panel-body,
body#dash .panel-body.service-desc,
body#dash .panel-body.border-solid {
    background: none;
    border: 0;
    border-top: 1px solid var(--v2-line);
    border-radius: 0;
    box-shadow: none;
    padding: var(--v2-sp-3) 0 0;
    margin-bottom: 0;
}

/* deposit history is a list of rows, so it gets rules between them, not 43 cards */
body#dash .history-item {
    background: none;
    border: 0;
    border-bottom: 1px solid var(--v2-line);
    border-radius: 0;
    box-shadow: none;
    padding: var(--v2-sp-3) 0;
}
body#dash .history-item:last-child { border-bottom: 0; }
body#dash .history-item:hover { border-color: var(--v2-line); background: none; }

/* A66 · ลบกฎ `.adv-recap { border-radius: var(--v2-r-sm) }` ที่เคยอยู่ตรงนี้
   เหตุผลเดิมคือ "มุมในต้องเท่ามุมนอกลบระยะขอบ" ซึ่งเป็นกฎที่เราตั้งเอง
   ดีไซน์ Panel F (F1 บรรทัด 138) ให้แถบนี้เป็น var(--ri) = 14px เท่ากับช่องกรอกที่อยู่ใต้มัน
   และนั่นคือประเด็น: recap กับช่องลิงก์เป็นของระดับเดียวกัน ต้องมุมเท่ากัน
   ค่าที่ใช้จริงตอนนี้มาจากบล็อกฐาน (--v2-r-md) — ไม่ต้องมีกฎซ้ำที่นี่อีก */

/* A34 · เฟส 3 · พื้นผิว 50 จุด — จาก handoff รอบสอง
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */

/* ── 3.1 · รายการในการ์ด (24 จุด) ───────────────────────────────────────────
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
body#dash .api-item,
body#dash .api-top-item,
body#dash .ticket-item,
body#dash .ns-info .ns-item,
body#dash .updates-item,
body#dash .child-item,
body#dash .service-item,
body#dash .order-item,
body#outside .api-top-item,
body#outside .service-item,
body#outside .updates-item {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
}

/* เส้นวางบน "ทุกแถวที่มีแถวก่อนหน้า" ไม่ใช่ล่างทุกแถวแล้วลบตัวสุดท้าย
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
body#dash .api-item ~ .api-item,
body#dash .api-top-item ~ .api-top-item,
body#dash .ticket-item ~ .ticket-item,
body#dash .ns-info .ns-item ~ .ns-item,
body#dash .updates-item ~ .updates-item,
body#dash .child-item ~ .child-item,
body#dash .service-item ~ .service-item,
body#dash .order-item ~ .order-item,
body#outside .api-top-item ~ .api-top-item,
body#outside .service-item ~ .service-item,
body#outside .updates-item ~ .updates-item { border-top: 1px solid var(--v2-line); }

/* hover เคยเปลี่ยนพื้นการ์ด พอไม่มีการ์ดแล้วก็ไม่มีอะไรให้เปลี่ยน */
body#dash .ticket-item:hover,
body#dash .child-item:hover,
body#dash .service-item:hover,
body#outside .service-item:hover { background: none; }

/* zebra บน /orders เคยทำหน้าที่แยกแถว ตอนนี้เส้นคั่นทำแทนแล้ว
   ปล่อยไว้จะกลายเป็นสองระบบซ้อนกัน */
body#dash .order-item:nth-child(even) { background: none; }

/* ── 3.3 · แจ้งเตือนในการ์ด (20 จุด) ────────────────────────────────────────
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
body#dash .card .alert,
body#dash .v2-card .alert,
body#dash .login-card .alert,
body#outside .card .alert,
body#outside .v2-card .alert,
body#outside .login-card .alert,
body#outside .signup-content .alert {
    border-radius: var(--v2-r-sm);
    box-shadow: none;
}
/* ยกเว้นแถบสีชิดซ้ายของ promo — เป็น inset ที่ทำหน้าที่บอกประเภท ไม่ใช่เงายก */
body#dash .card .alert.neworder-promo,
body#dash .v2-card .alert.neworder-promo {
    box-shadow: inset 3px 0 0 var(--adv-stripe, var(--v2-yellow));
}

/* ── 3.4 · ตั๋วที่ตั้งใจให้ซ้อน (7 จุด) ─────────────────────────────────────
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
body#dash .af-sum-total,
body#dash .addfunds-amount { border-radius: var(--v2-r-sm); }

/* ไม่ลด 2 ตัว แม้สเปกจะลิสต์ไว้:
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */

/* A35 · หัวข้อหมวดบน /services · วรรณยุกต์ไทยชนบรรทัดบนที่จอ 360
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
/* ตัวจริงที่ทำให้เกิดคือ h2 { line-height: 1.2 } และ h3 { line-height: 1.2 }
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
h1, h2, h3, h4, h5, h6 { line-height: var(--v2-lh-tight); }

/* A40b — sidebar: 110 rules become one  (2026-08-03)
   ‼ 1 · dMenuToggle() ใส่ class ที่ <body> ไม่ใช่แถบข้าง → ต้องเขียน .sidebar-active .sidebar
   ‼ 2 · drawer ใช้ left อย่างเดียว ห้ามเพิ่ม transform กลับ (เคยรวมกันได้ -560px = ช่องโหว่ 992-1199)
   ‼ 3 · โหมดยุบเหลือ 80px ถูกลบแล้ว วัดแล้วว่าไม่มีใครได้ประโยชน์
   git log --grep=A40b */

/* ── โครง ─────────────────────────────────────────────────────────────── */
.sidebar {
    display: flex;
    flex-direction: column;
    background: var(--v2-sidebar);
    color: var(--v2-on-sidebar);
    border-radius: var(--v2-r-lg);
    padding: var(--v2-sp-5) var(--v2-sp-3) var(--v2-sp-3);
    /* A47 · เดิมเป็น --v2-elev-2 · Panel A มีความลึกระดับเดียว และตั้งแต่ A46 การ์ดกับ
       ดูเหตุผลเต็มใน git log และ .claude/verify/ */
    box-shadow: var(--v2-elev);
    overflow-y: auto;
    z-index: 50;
}

@media (min-width: 992px) {
    /* กรอบเว้นขอบ 14px ตามที่ดีไซน์วาด แถบข้างจึงเป็นการ์ดลอย ไม่ใช่แถบชนขอบจอ */
    .sidebar {
        position: fixed;
        left: 14px;
        top: 14px;
        width: 206px;
        height: calc(100vh - 28px);
    }
    /* 14 + 206 + 14 — เลขนี้ผูกกับ left/width ข้างบน แก้ทีต้องแก้พร้อมกัน */
    body#dash .page { margin-left: 234px; }
}

@media (max-width: 991.98px) {
    /* drawer เต็มความสูง ชนขอบจอ ไม่มีมุมโค้ง */
    .sidebar {
        position: fixed;
        top: 0;
        left: -280px;
        width: 280px;
        height: 100vh;
        border-radius: 0;
        transition: left var(--v2-t-base) var(--v2-ease);
    }
    .sidebar-active .sidebar { left: 0; }
    body#dash .page { margin-left: 0; }
}

/* ── โลโก้ ────────────────────────────────────────────────────────────── */
.sidebar-header {
    display: flex;
    align-items: center;
    padding: 0 var(--v2-sp-2) var(--v2-sp-5);
}
.sidebar-header a { display: inline-flex; align-items: center; }
.sidebar-header img { max-height: 24px; width: auto; }
/* แถบข้างเป็นพื้นเข้มในทั้งสองธีมแล้ว โลโก้จึงไม่ต้องสลับตามธีมอีก
   ("logo-dark" ในธีมนี้แปลว่า "ตัวที่ใช้บนพื้นเข้ม" ไม่ใช่ "ตัวของธีมมืด") */
.sidebar-header .logo-light,
.sidebar-header .logo-small { display: none; }
.sidebar-header .logo-dark { display: block; }

/* ── ปุ่มปิด drawer ───────────────────────────────────────────────────── */
.sidebar-dismiss {
    display: none;
    position: absolute;
    top: 14px;
    right: 14px;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
    color: var(--v2-on-sidebar-dim);
    cursor: pointer;
}
@media (max-width: 991.98px) {
    .sidebar-dismiss { display: inline-flex; }
}

/* ── เมนู ─────────────────────────────────────────────────────────────── */
.sidebar-content { flex: 1; overflow-y: auto; }
.sidebar-menu,
.sidebar-menu-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.nav-group {
    /*  A123 · 10px → sp-3 ให้ตรงกับ .sidebar-menu-link (13px → sp-3)
        ทั้งคู่เป็นพี่น้องใน layout.twig:136-141 แต่ระยะซ้าย 10 กับ 13
        หัวข้อกลุ่มกับเมนูใต้มันไม่ตรงขอบซ้าย เหลื่อม 3px ทั้ง 4 กลุ่ม ทุกหน้า */
    padding: var(--v2-sp-4) var(--v2-sp-3) var(--v2-sp-2);
    font-size: 10px;
    font-weight: 500;
    line-height: var(--v2-lh-ui);
    /*  A125 · letter-spacing 0.14em ถูกลบ
        เนื้อหาของป้ายนี้เป็น "ไทย" ทั้งสี่ตัว — สั่งซื้อ / ติดตามงาน /
        บริการและรายได้ / ข่าวสารและช่วยเหลือ (layout.twig:136-139)
        tracking บนไทยดันสระกับวรรณยุกต์ให้หลุดจากพยัญชนะที่มันเกาะอยู่
        ‼ บทเรียนนี้ถูกวินิจฉัยคำต่อคำมาแล้ว 4 รอบ (A54 · A65 · A74 · A88)
          แล้วแก้เฉพาะ selector ตรงหน้าทุกครั้ง เพราะสิ่งที่กันไว้เป็น
          allowlist ไม่ใช่กฎ — เฟส 5 จะทำให้มันเป็น gate */
    text-transform: uppercase;
    color: var(--v2-on-sidebar-dim);
}
.nav-group:first-child { padding-top: 0; }
.sidebar-menu-link {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-3);
    height: 40px;
    padding: 0 var(--v2-sp-3);
    border-radius: var(--v2-r-sm);
    font-size: 13px;
    font-weight: 400;
    color: var(--v2-on-sidebar-dim);
    transition: background-color var(--v2-t-fast) var(--v2-ease),
                color var(--v2-t-fast) var(--v2-ease);
}
.sidebar-menu-link:hover {
    background: rgba(255, 255, 255, 0.07);
    color: var(--v2-on-sidebar);
}
.sidebar-menu-link.active {
    background: var(--v2-yellow);
    color: var(--v2-yellow-ink);
    font-weight: 600;
}
/* ไอคอนกับข้อความรับสีจากแถวเสมอ แถวที่เลือกจึงเป็นหมึกเข้มบนเหลืองทั้งก้อน
   ไม่ใช่ตัวอักษรเหลืองบนพื้นเหลืองจางแบบเดิม */
.sidebar-menu-link .sidebar-menu-icon,
.sidebar-menu-link .sidebar-menu-text { color: inherit; }
.sidebar-menu-icon { width: 16px; flex-shrink: 0; font-size: 13px; text-align: center; }
.sidebar-menu-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* A41b — topbar: the survivors move into one block  (2026-08-03)
   ‼ ลำดับ at-rule เรียงตามที่เคยอยู่ในไฟล์ ไม่ใช่ตามที่ควรเป็น — เรียงใหม่ = สลับผู้ชนะ
   ‼ สองกฎท้ายอยู่ใน @media > @supports ซ้อนสองชั้น ห้ามทำให้แบน
   ‼ dropdown มือถือผูกกับ script.js:219-262 ที่เขียน display เป็น inline — อ่านก่อนแตะ
   git log --grep=A41b */
.sbar-btn {
    line-height: 26px;
    font-size: 20px;
    padding: var(--v2-sp-3) var(--v2-sp-4);
    width: 50px;
    height: 50px;
    background: var(--second-bg);
    border-radius: var(--v2-r-md);
    color: var(--text-color);
}

/* A42: เดิมเป็น `#up-header span` เฉยๆ ซึ่ง (1,0,1) ชนะทุก class selector ที่
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
#up-header > .row > span {
    font-size: 20px;
}

#up-header.active {
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    position: fixed;
    left: 335px;
    z-index: 1019;
    right: 15px;
    top: 5px;
    -webkit-transition: 0.2s;
    transition: var(--v2-t-base);
}

#up-header.active + .container-fluid,
.page .container-fluid:has(#up-header.active) {
    padding-top: 90px;
}

body:has(#up-header.active) .container-fluid {
    padding-top: 90px;
}

.header-right {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: var(--v2-sp-2);
}

.switcher {
    /* Panel A · แคปซูล 44px ให้สูงเท่าปุ่มไอคอนข้างๆ ลูกในเป็นวงกลม 36 */
    height: 44px;
    border-radius: var(--v2-r-pill);
    background-color: var(--v2-surface);
    box-shadow: var(--v2-elev-1);
    padding: var(--v2-sp-1);
    display: inline-flex;
    gap: var(--v2-sp-1);
    position: relative;
}

.switcher .active-bg {
    content: "";
    position: absolute;
    background:
        radial-gradient(
            397.75% 81.29% at 109.6% 34.26%,
            #319cff 0%,
            #1467b4 99.99%,
            #319cff 100%
        ),
        #1e81dc;
    box-shadow:
        0px 1.182px 2.365px 0px rgb(49 155 91),
        0px 0px 0px 1.182px #23a055;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--border-radius);
    left: 5px;
    top: 5px;
    width: 40px;
    height: 40px;
    z-index: 1;
    -webkit-transition: 0.14s ease;
    transition: var(--v2-t-fast) var(--v2-ease);
}

.switcher .switcher-item {
    position: relative;
    z-index: 3;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: transparent;
    height: 36px;
    width: 36px;
    border: none;
    outline: none;
    border-radius: 50%;
    font-size: 14px;
    line-height: 17px;
    color: var(--text-color);
    -webkit-transition: 0.14s ease;
    transition: var(--v2-t-fast) var(--v2-ease);
}

.switcher .switcher-item.active {
    /* เหลืองทึบ หมึกเข้ม — กติกาของ Panel A คือเหลืองห้ามแตะพื้นสว่างในฐานะตัวอักษร
       ใช้ได้เป็นพื้นที่ตัวหนังสือเป็นสีดำเท่านั้น #fff บนเหลืองคือสิ่งที่กติกาห้าม */
    background: var(--v2-yellow);
    border: 0;
    border-radius: 50%;
    color: var(--v2-yellow-ink);
}

.switcher {
    height: 50px;
}

body#dash #up-header.header {
    padding: var(--v2-sp-1);
    /* พื้นทึบ ไม่ใช่กระจก — Theme Audit นับ backdrop-filter ได้ 151 จุด และหลายจุด
       ดูเหตุผลเต็มใน git log และ .claude/verify/ */
    border-radius: var(--v2-r-pill);
    background: var(--v2-surface);
    border: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    margin-bottom: 22px;
    position: fixed;
    /* 14 + 206 + 14 — ผูกกับ .sidebar ในบล็อก A40b แก้ทีต้องแก้พร้อมกัน */
    top: 14px;
    left: 234px;
    right: 14px;
    z-index: 45;
    /* A46 · เปลี่ยนจาก --v2-elev-2 เป็น --v2-elev พร้อมกับตอนที่พื้นผิวนี้เพิ่งได้ทำงานจริง
       ดูเหตุผลเต็มใน git log และ .claude/verify/ */
    box-shadow: var(--v2-elev);
}

body#dash #up-header .row {
    margin: 0;
    align-items: center;
    gap: var(--v2-sp-2);
    flex-wrap: nowrap;
}

body#dash #up-header .col,
body#dash #up-header .col-auto {
    padding: 0;
}

body#dash #up-header .col.text-center .mob-logo { display: none; }

body#dash #up-header .menuBtn,
body#dash #up-header .sbar-btn,
body#dash #up-header .hd-btn,
body#dash .header-right .sbar-btn,
body#dash .header-right .hd-btn {
    /* Panel A · ปุ่มไอคอนเป็นวงกลม 44px ซึ่งเป็นขนาดเป้าแตะขั้นต่ำของ WCAG 2.2 พอดี
       ของเดิม 38px แล้วมี media query ที่ 991 มาดันเป็น 44 เฉพาะมือถือ ตอนนี้ไม่ต้อง */
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--v2-surface);
    border: 0;
    box-shadow: var(--v2-elev-1);
    color: var(--v2-ink-dim);
    font-size: 14px;
    cursor: pointer;
    padding: 0;
    transition: background var(--v2-t-fast), color var(--v2-t-fast);
    text-decoration: none !important;
}

body#dash #up-header .menuBtn:hover,
body#dash .sbar-btn:hover,
body#dash .hd-btn:hover {
    background: var(--v2-glass-2);
    color: var(--v2-ink);
    border-color: var(--v2-line-strong);
}

body#dash .hd-btn .fa-chevron-down { transition: transform var(--v2-t-base); }

body#dash #up-header.active .hd-btn .fa-chevron-down { transform: rotate(180deg); }

body#dash .header-right {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-2);
    position: relative;
}

body#dash .header-right .hdi { display: inline-flex; }

body#dash .header-right .hd-shadow { display: none; }

body#dash #up-header > .row > .col-auto > #hd-btn.hd-btn { display: none; }

@media (max-width: 1199.98px) {
        body:has(#up-header.active) .container-fluid,
        .page .container-fluid:has(#up-header.active) {
            padding-top: 80px;
        }
}

@media (max-width: 640px) {
        body:has(#up-header.active) .container-fluid,
        .page .container-fluid:has(#up-header.active) {
            padding-top: var(--v2-sp-7);
        }

        .header-right {
            display: block;
            position: absolute;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: reverse;
            -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
            margin-top: 20px;
            right: 25px;
            text-align: right;
            width: 100%;
            opacity: 0;
        }

        .header-right .hd-shadow {
            content: "";
            position: absolute;
            right: -500px;
            top: -500px;
            width: 500px;
            height: 500px;
            border-radius: 50%;
            background: transparent;
            -webkit-box-shadow: -160px 260px 300px rgb(234 255 49 / 20%);
            box-shadow: -160px 260px 300px #ffce3133;
            z-index: 1001;
            -webkit-transition: 0.14s ease;
            transition: var(--v2-t-fast) var(--v2-ease);
        }

        .header-right .hdi {
            margin-bottom: 10px;
            z-index: 1002;
            position: relative;
        }

        .header-right .hdi.active > * {
            -webkit-transform: scale(1);
            transform: scale(1);
        }

        .header-right .hdi > * {
            -webkit-transform: scale(0);
            transform: scale(0);
            -webkit-transition: 0.14s ease;
            transition: var(--v2-t-fast) var(--v2-ease);
        }

        .hd-btn {
            display: block;
            z-index: 1004;
            position: relative;
        }
}

@media (max-width: 992px) {
        #up-header.active {
            left: 0;
            right: 0;
            top: 0;
        }

        #up-header .col img {
            margin: auto;
        }
}

@media (max-width: 991px) {
        body#dash #up-header.header {
            left: 14px;
            right: 14px;
        }

        body#dash .sbar-btn,
        body#dash .hd-btn {
            min-width: 44px;
        }
}

@media (max-width: 767px) {
        body#dash #up-header .col.text-center .mob-logo { display: inline-flex; }

        body#dash #up-header .col.text-center .mob-logo img.mob-logo-img {
            max-height: 26px;
            width: auto;
        }

        html.dark body#dash #up-header .mob-logo .logo-light,
        html:not(.dark) body#dash #up-header .mob-logo .logo-dark,
        html.light body#dash #up-header .mob-logo .logo-dark { display: none; }

        html.dark body#dash #up-header .mob-logo .logo-dark,
        html:not(.dark) body#dash #up-header .mob-logo .logo-light,
        html.light body#dash #up-header .mob-logo .logo-light { display: inline-block; }

        body#dash #up-header > .row > .col-auto > #hd-btn.hd-btn {
            display: inline-flex !important;
        }

        body#dash .header-right,
        body#dash .header-right.mobHid {
            display: none;
            position: absolute !important;
            top: calc(100% + 10px) !important;
            right: 0 !important;
            min-width: 240px !important;
            flex-direction: column !important;
            align-items: stretch !important;
            padding: var(--v2-sp-2) !important;
            border-radius: var(--v2-r-md) !important;
            z-index: 100 !important;
            gap: var(--v2-sp-1) !important;
            backdrop-filter: var(--v2-blur-strong) !important;
            -webkit-backdrop-filter: var(--v2-blur-strong) !important;
            opacity: 1 !important;
        }

        body#dash .header-right[style*="display: block"],
        body#dash .header-right[style*="display:block"] {
            display: flex !important;
        }

        body#dash .header-right .hd-shadow { display: none !important; }

        /*  A107 · เปลือกของแถวย้ายมาอยู่ที่ .hdi ทุกแถว
            เดิมแถวที่มี <a>/<button> วาดกรอบไว้ที่ "ลูก" ส่วนแถวสลับธีมวาดไว้ที่
            "ตัว .hdi" เอง (เพราะข้างในเป็น .switcher ไม่ใช่ปุ่มเดี่ยว) และแถว
            โปรไฟล์ไม่มีกรอบเลย — วัดที่ 390 ได้ radius 12/12/12/12/0 และสูง
            44/44/44/44/48  ตาเห็นเป็นลิสต์ที่ขอบไม่ตรงกันและใบสุดท้ายหลุดชุด
            แก้โดยให้ .hdi เป็นตัวถือกรอบเสมอ ลูกข้างในเหลือแค่เนื้อหา
            จำนวนกฎเท่าเดิม ไม่ได้ทับด้วย override ใหม่ */
        /*  A107b · ฐานแถวเป็น 48 ไม่ใช่ 44
            แถวสลับธีมมี .switcher-item ที่ถูกบังคับ min-height 44px โดย A101
            (กฎเป้าแตะ 44 ทั้งเว็บ) บวก padding 2px ของ .switcher สองข้าง = 48
            ถ้าฐานแถวเป็น 44 แถวนั้นจะสูงกว่าเพื่อนอยู่ดี — วัดได้ 46/52/46/46/48
            ยกฐานให้แถวที่สูงที่สุดเป็นคนกำหนด แทนที่จะบีบเป้าแตะลง
            วัดกล่องสวิตช์จริงหลังแก้: สูง 50 (ปุ่ม 44 + padding 2 สองข้าง + 2)
            ฐานแถวจึงเป็น 50 ไม่ใช่ 48 — ตัวเลขนี้มาจากการวัด ไม่ใช่การเดา */
        body#dash .header-right .hdi {
            width: 100% !important;
            min-height: 50px;
            display: flex;
            align-items: center;
            padding: 0 var(--v2-sp-3);
            border-radius: var(--v2-r-sm);
            background: var(--v2-glass);
            border: 1px solid var(--v2-line);
            opacity: 0;
            transform: translateY(-4px);
            transition: opacity var(--v2-t-base) var(--v2-ease), transform var(--v2-t-base) var(--v2-ease);
        }

        body#dash .header-right .hdi.active {
            opacity: 1;
            transform: translateY(0);
        }

        body#dash .header-right .hdi .sbar-btn,
        body#dash .header-right .hdi .hd-btn,
        body#dash .header-right .hdi > a,
        body#dash .header-right .hdi > button {
            width: 100% !important;
            height: 48px !important;
            padding: 0 !important;
            border-radius: 0 !important;
            background: none !important;
            border: 0 !important;
            color: var(--v2-ink-dim) !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: flex-start !important;
            gap: var(--v2-sp-3) !important;
            font-family: var(--v2-f-thai) !important;
            font-size: 14px !important;
            font-weight: 500 !important;
            text-decoration: none !important;
        }

        /*  A107 · hover ย้ายตามเปลือกมาที่ .hdi — ถ้าปล่อยไว้ที่ลูก พื้นหลัง
            จะโผล่เป็นสี่เหลี่ยมมุมฉากทับอยู่ในกรอบมนของแถว */
        body#dash .header-right .hdi:hover {
            background: var(--v2-glass-2);
        }

        body#dash .header-right .hdi .sbar-btn:hover,
        body#dash .header-right .hdi .hd-btn:hover {
            color: var(--v2-ink) !important;
        }

        /*  A110 · กฎ width:18px / font-size:16px / text-align:center ของไอคอนถูกลบ
            ไม่ใช่ทับ — selector เดียวกันเป๊ะกับกฎกระเบื้องข้างล่าง ปล่อยไว้ก็เป็น
            declaration ตายสามตัวที่หลอกคนอ่านว่าไอคอนกว้าง 18 */

        /*  A110 · ป้ายของแถวมาจาก <span class="hdi-t"> ใน layout.twig
            สองกฎที่เคยอยู่ตรงนี้เขียนป้ายด้วย content: attr(data-original-title)
            คือยืมชื่อจาก attribute ที่ Bootstrap สร้างให้ tooltip — พอ A108 ถอด
            attribute นั้นทิ้ง (เพื่อฆ่า tooltip ที่ค้างบนทัชสกรีน) ป้ายก็หายเกลี้ยง
            เหลือไอคอนเปล่าทั้งแถว  บทเรียน: ข้อความที่ผู้ใช้ต้องอ่านห้ามอาศัย
            attribute ที่สคริปต์อื่นเป็นเจ้าของ */
        body#dash .header-right .hdi-t {
            display: block;
            flex: 1;
            min-width: 0;
            font-family: var(--v2-f-thai);
            font-size: 14px;
            font-weight: 500;
            line-height: var(--v2-lh-ui);
            color: var(--v2-ink);
            text-align: left;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        body#dash .header-right .hdi a.hd-btn[href="/logout"] > i,
        body#dash .header-right .hdi a.hd-btn[href="/logout"] .hdi-t {
            color: var(--v2-danger);
        }

        /*  A107 · แถวสลับธีมเคยเป็นแถวเดียวที่วาดเปลือกไว้ที่ .hdi
            ตอนนี้ .hdi ทุกแถววาดเองแล้ว เหลือเฉพาะสิ่งที่แถวนี้ต่างจริง:
            ดันสวิตช์ไปชิดขวาและบีบ padding ขวาให้พอดีเม็ดกลม */
        body#dash .header-right .hdi:has(> .switcher) {
            padding-right: var(--v2-sp-2);
            justify-content: space-between;
            gap: var(--v2-sp-2) !important;
        }

        /*  A110 · กฎ content:"ธีมสี" ถูกถอดออก ป้ายมาจาก <span class="hdi-t"> ใน markup แล้ว */
        body#dash .header-right .hdi > .hdi-ic {
            display: inline-flex;
            width: 30px;
            height: 30px;
            flex: none;
            align-items: center;
            justify-content: center;
            margin-right: var(--v2-sp-3);
            border-radius: 9px;
            background: var(--v2-well);
            color: var(--v2-ink-dim);
            font-size: 14px;
        }

        body#dash .header-right .switcher {
            /*  A110 · กฎฐานตั้ง height: 50px ตายตัว ไม่ได้มาจากเนื้อหา
                ปุ่ม 44 + padding 2 สองข้าง = 48 พอดี ส่วนที่เกินมา 2px คือค่าที่
                ตั้งไว้เฉย ๆ แล้วดันแถวสลับธีมให้สูงกว่าเพื่อนทั้งลิสต์ */
            height: 48px;
            padding: 2px;
            border: 0;
            background: var(--v2-glass-2);
        }

        body#dash .header-right .switcher .switcher-item { width: 28px; height: 28px; }

        /*  A110 · ไอคอนอยู่ในกระเบื้อง ไม่ใช่ลอยเปล่า
            ก่อนหน้านี้แถวคือ [ไอคอน 18px] [ป้าย] บนพื้นเรียบ ๆ ตาไม่มีอะไรให้เกาะ
            กระเบื้อง 30px ให้ไอคอนมีขอบเขตของตัวเอง ป้ายจึงเรียงเป็นคอลัมน์จริง */
        body#dash .header-right .hdi .sbar-btn > i,
        body#dash .header-right .hdi .hd-btn > i,
        body#dash .header-right .hdi > button > i {
            width: 30px;
            height: 30px;
            flex: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 9px;
            background: var(--v2-well);
            font-size: 14px;
        }

        body#dash .header-right .hdi a.hd-btn[href="/logout"] > i {
            background: var(--v2-danger-soft);
        }

        /*  A107 · แถวโปรไฟล์ — ใบเดียวในลิสต์ที่หลุดชุดที่สุด
            วัดที่ 390 ก่อนแก้: กว้างจริง 72px ลอยอยู่ในแถว 222px, radius 999px
            ขณะที่แถวอื่น 12px, สูง 48 ขณะที่แถวอื่น 44 — เพราะ .hd-profile
            ถูกออกแบบไว้เป็น "เม็ดยา" ของแถบบนจอใหญ่ แล้วถูกยกมาวางในลิสต์ทั้งดุ้น
            ในลิ้นชักมันต้องเป็นแถว ไม่ใช่เม็ดยา
            A110 · และมันไม่ใช่ "รายการ" ด้วย — มันคือหัวของแผง บอกว่าใครล็อกอินอยู่
            ย้ายขึ้นบนสุดด้วย order (ลำดับใน DOM แก้ไม่ได้ ปุ่มอื่นอยู่ก่อน)
            ถอดกรอบออกแล้วคั่นด้วยเส้นเดียว เพื่อให้ 4 แถวล่างอ่านเป็นชุดคำสั่ง */
        body#dash .header-right .hdi-profile {
            order: -1;
            display: flex;
            min-height: 56px;
            margin-bottom: var(--v2-sp-1);
            padding-bottom: var(--v2-sp-2);
            background: none;
            border: 0;
            border-bottom: 1px solid var(--v2-line);
            border-radius: 0;
        }
        body#dash .header-right .hdi-profile:hover { background: none; }
        body#dash .header-right .hdi-profile > .dropdown { width: 100%; }
        body#dash .header-right .hdi-profile .hd-profile {
            width: 100%;
            height: 44px;
            padding: 0;
            background: none;
            border-radius: 0;
            cursor: default;
        }
        body#dash .header-right .hdi-profile .hd-profile .sp-box {
            height: 44px;
            justify-content: space-between;
        }
        body#dash .header-right .hdi-profile .hd-profile .sp-wrapper { flex: 1; min-width: 0; }
        /*  A110 · ชื่อผู้ใช้กลับมาในหัวลิ้นชัก
            กฎที่ 20171 ซ่อน .hd-profile .hd-user ตั้งแต่ ≤991 พร้อมคอมเมนต์ว่า
            "ชื่อกับป้ายลงไปอยู่ในเมนู dropdown ที่มีอยู่แล้ว" — dropdown นั้นไม่เคยมีจริง
            (A94 ตรวจแล้ว: .dd-custom ไม่เคยมี .dropdown-menu และไม่มี handler)
            ชื่อจึงหายไปเฉย ๆ บนมือถือมาตลอด เหลือรูปโปรไฟล์ลอยเดี่ยว
            ที่ 768–991 แถบยังเป็นแนวนอนและที่แคบจริง กฎเดิมคงไว้ ปลดเฉพาะในลิ้นชัก */
        body#dash .header-right .hdi-profile .hd-user { display: flex; }
        body#dash .header-right .hdi-profile .hd-user .profile-name { font-size: 14px; }
        body#dash .header-right .hdi-profile .hd-avatar,
        body#dash .header-right .hdi-profile .hd-avatar img { width: 34px; height: 34px; }
        body#dash .header-right .hdi-profile .hd-avatar::after {
            width: 9px; height: 9px; box-shadow: 0 0 0 2px var(--v2-surface);
        }

        body#dash .header-right:not([style*="display: block"]):not([style*="display:block"]),
        body#dash .header-right.mobHid:not([style*="display: block"]):not([style*="display:block"]) {
            display: none !important;
        }

        body#dash .header-right,
        body#dash .header-right.mobHid {
            background:
                linear-gradient(180deg, rgba(255, 214, 10, 0.04) 0%, rgba(255, 214, 10, 0) 60%),
                rgba(8, 8, 11, 0.96) !important;
            border: 1px solid rgba(255, 255, 255, 0.10) !important;
            box-shadow:
                0 1px 0 rgba(255, 255, 255, 0.06) inset,
                0 24px 60px -20px rgba(0, 0, 0, 0.85),
                0 0 0 1px rgba(0, 0, 0, 0.4) !important;
        }

        html.light body#dash .header-right,
        html.light body#dash .header-right.mobHid {
            background:
                linear-gradient(180deg, rgba(255, 200, 0, 0.05) 0%, rgba(255, 200, 0, 0) 60%),
                rgba(255, 255, 255, 0.98) !important;
            border: 1px solid rgba(18, 18, 20, 0.10) !important;
            box-shadow:
                0 1px 0 rgba(255, 255, 255, 1) inset,
                0 20px 50px -16px rgba(18, 18, 20, 0.25),
                0 0 0 1px rgba(18, 18, 20, 0.05) !important;
        }
}

@media (max-width: 767px) {
    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
                body#dash .header-right,
                body#dash .header-right.mobHid {
                    background: #08080b !important;
                }

                html.light body#dash .header-right,
                html.light body#dash .header-right.mobHid {
                    background: #ffffff !important;
                }
    }
}

@media (max-width: 991px) {
    /* ยกออกมาจากบล็อก A13 ซึ่งรวมปุ่มหลายชนิดไว้ใน selector list เดียว
       ค่าเท่าเดิม ตำแหน่งท้ายเท่าเดิม เปลี่ยนแค่ที่อยู่ */
    body#dash .switcher .switcher-item {
        min-height: 44px;
        min-width: 44px;
    }
}

/* A42 — ของสี่ชิ้นที่ดีไซน์เพิ่ม แต่ละชิ้นผูกกับข้อมูลที่มีอยู่จริง  (2026-08-03)
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */

/* ── การ์ดยอดเงินท้ายแถบข้าง ─────────────────────────────────────────── */
.sb-balance {
    display: block;
    margin-top: var(--v2-sp-4);
    padding: var(--v2-sp-4);
    background: var(--v2-yellow);
    color: var(--v2-yellow-ink);
    border-radius: var(--v2-r-md);
}
.sb-balance:hover { color: var(--v2-yellow-ink); }
.sb-balance-label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    line-height: var(--v2-lh-ui);
    opacity: 0.72;
}
.sb-balance-amount {
    display: block;
    margin-top: 7px;
    font-size: 21px;
    font-weight: 700;
    line-height: var(--v2-lh-tight);
    font-variant-numeric: tabular-nums;
}
.sb-balance-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 36px;
    margin-top: var(--v2-sp-3);
    border-radius: var(--v2-r-sm);
    background: var(--v2-sidebar);
    color: var(--v2-yellow);
    font-size: 12.5px;
    font-weight: 600;
    line-height: var(--v2-lh-ui);
}

/* ── ช่องค้นหาบนแถบบน ────────────────────────────────────────────────── */
.hd-search-col { flex: 1; min-width: 0; }
.hd-search {
    display: flex;
    align-items: center;
    gap: 11px;
    height: 44px;
    padding: 0 18px;
    background: var(--v2-well);
    border-radius: var(--v2-r-pill);
}
.hd-search > i { font-size: 12px; color: var(--v2-ink-mute); }
.hd-search input {
    flex: 1;
    min-width: 0;
    background: none;
    border: 0;
    outline: 0;
    font-family: var(--v2-f-thai);
    font-size: 13px;
    color: var(--v2-ink);
}
.hd-search input::placeholder { color: var(--v2-ink-mute); }
/* ที่แคบกว่า 768 แถบบนต้องเก็บทั้งแฮมเบอร์เกอร์ โลโก้ และปุ่ม chevron ไว้แล้ว
   ช่องค้นหาจึงลงไปอยู่หน้า services แทน ไม่เบียดสามอย่างนั้นให้เล็กกว่า 44px */
@media (max-width: 767px) {
    .hd-search-col { display: none; }
}

/*  A110 · ป้ายในแถบบนจอกว้างไม่มีที่ยืน — ปุ่มเป็นไอคอน 44×44 เรียงกัน
    ที่นั่นยังใช้ tooltip เป็นชื่อปุ่มเหมือนเดิม ป้ายโผล่เฉพาะตอนกลายเป็นลิ้นชัก
    ‼ .hdi-ic ต้องเจาะจงกว่า (0,1,0) — Font Awesome ประกาศ
      `.fa,.fab,.fad,.fal,.far,.fas { display: inline-block }` ที่ specificity
      เท่ากันเป๊ะ และ <link> ของมันอยู่ "หลัง" ชีตธีม (ลำดับ 5 ต่อ 3) มันจึงชนะ
      ด้วยลำดับไฟล์ล้วน ๆ  วัดครั้งแรกได้ค่า `block` ไม่ใช่ `inline-block`
      เพราะไอคอนเป็น flex item ซึ่งถูก blockify — เกือบหลงประเด็นเพราะจุดนี้ */
.hdi-t { display: none; }
body#dash .hdi > .hdi-ic { display: none; }

/*  A110 · สวิตช์ธีมบนแถบบนจอกว้างสูง 50 ขณะที่ปุ่มข้าง ๆ สูง 44 — วัดที่ 1392
    ได้แถว 44/50/44/48 กฎฐาน .switcher ตั้ง height: 50px ไว้ตายตัว
    ‼ ไม่แตะกฎฐาน เพราะ .switcher ใช้ร่วมกับ .outside-switcher ของหน้า guest
      ซึ่งอยู่นอกขอบเขตงานนี้ จึงจำกัดที่แถบบนของฝั่งสมาชิกเท่านั้น */
@media (min-width: 768px) {
    body#dash .header-right .switcher { height: 44px; }
}

/* ── กระดิ่ง → กล่องข้อความ ──────────────────────────────────────────── */
.hd-bell { position: relative; }
.hd-bell-dot {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: grid;
    place-items: center;
    border-radius: var(--v2-r-pill);
    background: var(--v2-danger);
    color: var(--v2-bg);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* ── การ์ด profile บนแถบบน ───────────────────────────────────────────────
   ‼ line-height ของ .profile-sub จำเป็น ไม่ใช่ของประดับ: .hd-profile เป็น
   ดูเหตุผลเต็มใน git log และ .claude/verify/ */
.hdi-profile { display: inline-flex; }
.hd-profile {
    padding: 0 var(--v2-sp-2) 0 5px;
    height: 44px;
    background: var(--v2-well);
    border: 0;
    border-radius: var(--v2-r-pill);
    color: var(--v2-ink);
    text-align: left;
    cursor: pointer;
}
.hd-profile .sp-box { display: flex; align-items: center; gap: var(--v2-sp-2); height: 44px; }
.hd-profile .sp-wrapper { display: flex; align-items: center; min-width: 0; gap: var(--v2-sp-2); }
.hd-profile .hd-avatar { position: relative; display: inline-flex; width: 34px; height: 34px; flex: none; }
.hd-profile .hd-avatar img {
    width: 34px; height: 34px; margin: auto;
    border-radius: 50%; object-fit: cover; display: block;
}
.hd-profile .hd-avatar::after {
    content: ""; position: absolute; right: 0; bottom: 0;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--v2-ok); box-shadow: 0 0 0 2.5px var(--v2-well);
}
.hd-user { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.hd-user .profile-name {
    display: flex; align-items: center; gap: var(--v2-sp-1); min-width: 0;
    font-size: 12.5px; font-weight: 600; line-height: var(--v2-lh-tight);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hd-user .profile-name > .verified { flex-shrink: 0; color: var(--v2-yellow); display: inline-flex; }
.hd-user .profile-name > .verified svg { width: 14px; height: 14px; }
.hd-user .profile-sub {
    font-family: var(--v2-f-mono); font-size: 10px; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--v2-ink-mute);
    line-height: var(--v2-lh-tight);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/*  A108 · ปุ่มออกจากระบบมีสองอันจริง วัดบนเดสก์ท็อป 1912: ไอคอนในแถบ
    (.hd-btn 44×44 ที่ x=1633) และเม็ดในการ์ดโปรไฟล์ (.power-off 30×30 ที่
    x=1849) — ปลายทาง /logout เหมือนกัน tooltip เหมือนกัน ห่างกัน 216px
    ไม่ลบอันไหนออกจาก markup เพราะแต่ละอันเป็นตัวที่ใช้งานได้ดีกว่าคนละความกว้าง
      ≤767 ลิ้นชัก: ใช้แถวที่มีป้าย "ออกจากระบบ" — เม็ด 30px ในลิสต์อ่านไม่ออก
      ≥768 แถบบน: ใช้เม็ดในการ์ดโปรไฟล์ ซึ่งอยู่ติดชื่อผู้ใช้ตามดีไซน์
    ‼ 30px ยังต่ำกว่าเกณฑ์ 44 ที่ไล่เก็บไปทั้งเว็บ — รอบนั้นกวาดแค่ .sbar-btn
      .v2-tabbar-i .menu-btn .switcher-item จึงไม่เคยเห็นตัวนี้ ขยายเป็น 34
      ให้เท่ารูปโปรไฟล์ข้าง ๆ (เพดานคือความสูงเม็ดยา 44 ลบ padding) */
@media (min-width: 768px) {
    /* ซ่อนที่ตัวห่อ ไม่ใช่ที่ <a> — .header-right เป็น flex ที่มี gap ถ้าซ่อน
       เฉพาะลูก ตัวห่อจะยุบเหลือ 0 แต่ยังกิน gap อยู่ กลายเป็นช่องว่างลอย */
    body#dash .header-right .hdi:has(> a.hd-btn[href="/logout"]) { display: none; }
}
@media (max-width: 767px) {
    body#dash .header-right .hd-profile .power-off { display: none; }
}
.hd-profile .power-off {
    width: 34px; height: 34px; min-width: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    color: var(--v2-ink-mute);
    background: var(--v2-surface);
}
.hd-profile .power-off:hover { color: var(--v2-danger); background: var(--v2-danger-soft); }
/* บนจอแคบเหลือแค่รูป — ชื่อกับป้ายลงไปอยู่ในเมนู dropdown ที่มีอยู่แล้ว */
@media (max-width: 991px) {
    .hd-profile { padding: 0; background: none; }
    .hd-profile .hd-user { display: none; }
}

/* ─── A61 · ตั๋วสรุปราคาในคอลัมน์ขวาของหน้าสั่งงาน (Panel F · F1) ──────────
   เจ้าของอนุมัติ 2026-08-05 · ไม่ได้แทนที่คำเตือน 7 ข้อ นั่นยังอยู่ใต้แท็บเดิม
   ‼ พื้นใช้ --v2-sidebar ซึ่ง "เข้มทั้งสองธีม" ไม่ใช่ --v2-hero ที่ดีไซน์เขียนไว้
     เหตุผล (เจ้าของตัดสิน 2026-08-05): --v2-hero เป็นเหลืองในธีมมืด ตั๋วใบเดียวกัน
     จึงเปลี่ยนความหมายตอนสลับธีม — สว่าง = "ข้อมูล" มืด = "สิ่งที่ต้องกด"
     ทั้งที่มันกดไม่ได้ และในธีมมืดจะมีเหลืองสองก้อนบนจอเดียว โดยก้อนใหญ่กว่า
     คือก้อนที่กดไม่ได้ สายตาเลยไปผิดที่
     จุดเน้นย้ายไปอยู่ที่ "ตัวเลขยอด" แทน — ท่าเดียวกับ .neworder-stats
   ‼ ผูกกับ body#dash เพราะ --v2-sidebar / --v2-on-sidebar ประกาศไว้ใต้
     body.v2-dash เท่านั้น กฎที่ไม่มี scope จะพังทั้งบรรทัดบนหน้า guest
     (A57/A58 พลาดแบบนี้มาแล้ว modal ฝั่ง guest 340 ตัวพื้นหาย)
   ‼ ตัวเลขใช้ tabular-nums ตามดีไซน์ — คอลัมน์เงินต้องกวาดตาลงตรง ๆ ได้
   ‼ ซ่อนไว้จนกว่าจะมีราคาจริง (twig ตั้ง hidden, JS ปลดเมื่อ #charge > 0)
     ห้ามประกาศ display ที่นี่ ไม่งั้นจะไปทับ [hidden] */
body#dash .nos-quote {
    position: relative;
    margin-bottom: var(--v2-sp-3);
    padding: var(--v2-sp-5);
    border-radius: var(--v2-r-lg);
    background: var(--v2-sidebar);
    color: var(--v2-on-sidebar);
}
body#dash .nos-quote-main .k {
    font-size: 12px;
    font-weight: 500;
    color: var(--v2-on-sidebar-dim);
}
body#dash .nos-quote-main b {
    display: block;
    margin-top: var(--v2-sp-2);
    font-family: var(--v2-f-dis);
    font-size: 40px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.035em;
    font-variant-numeric: tabular-nums;
    color: var(--v2-yellow);
}
/* รอยปรุของตั๋ว — วงกลมสองข้างกินเข้าไปในขอบ คั่นด้วยเส้นประ */
body#dash .nos-quote-rows {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: var(--v2-sp-4);
    padding-top: var(--v2-sp-4);
    border-top: 1px dashed var(--v2-on-sidebar-dim);
}
body#dash .nos-quote-rows::before,
body#dash .nos-quote-rows::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--v2-bg);
    margin-top: calc(-1 * var(--v2-sp-4) - 7px);
}
body#dash .nos-quote-rows::before { left: -7px; }
body#dash .nos-quote-rows::after { right: -7px; }
body#dash .nos-quote-rows > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--v2-sp-3);
    font-size: 12.5px;
}
body#dash .nos-quote-rows span { color: var(--v2-on-sidebar-dim); }
body#dash .nos-quote-rows b {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
/* ยอดติดลบ = เงินไม่พอ ต้องเห็นทันที ไม่ใช่รู้ตอนกดสั่งแล้วเด้ง error */
body#dash .nos-quote-rows b.is-short { color: var(--v2-danger); }

/* A67 · H4 กฎข้อ 2 — มือถือ: ตั๋วราคาตรึงขอบล่างจอ
   คอลัมน์ขวาไปอยู่ล่างสุดแล้ว (ลบ order:-1 ออก) แต่ "ยอดที่ต้องชำระ" คือตัวเลข
   ที่ต้องเห็นตลอดตอนกรอก ดีไซน์จึงให้ตรึงเฉพาะตั๋ว ไม่ใช่ดันทั้งคอลัมน์ขึ้นบน
   ‼ ต้องอยู่ **หลัง** บล็อกฐานของ .nos-quote ข้างบน — specificity เท่ากัน ลำดับตัดสิน
     ครั้งแรกเขียนไว้ที่บล็อก media ของ .neworder-summary (บรรทัด ~9418) แล้วไม่ทำงานเลย
   ‼ ตัวตั๋วมี `hidden` จาก JS ตอนยังไม่มีราคา จึงไม่มีแถบดำลอยตอนเพิ่งเข้าหน้า */
@media (max-width: 1100px) {
    body#dash .nos-quote {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 60;
        margin: 0;
        border-radius: var(--v2-r-lg) var(--v2-r-lg) 0 0;
        box-shadow: 0 -10px 30px -12px rgba(0, 0, 0, 0.45);
    }
    /* ย่อตั๋วให้กระชับตามจอมือถือของดีไซน์ — ตัวเลข 26px ไม่ใช่ 40px
       และเหลือแถวเดียว "คงเหลือหลังสั่ง" ตามภาพ H4 (ราคาต่อ 1,000 กับ จำนวน ตัดออก
       เพราะสองตัวนั้นอ่านได้จากฟอร์มที่กำลังกรอกอยู่แล้ว)
       ‼ วัดครั้งแรกได้สูง 231px = 27% ของจอ 844 — บังเนื้อหาที่อยู่ใต้มัน */
    body#dash .nos-quote { padding: var(--v2-sp-4); }
    body#dash .nos-quote-main { display: flex; align-items: baseline; justify-content: space-between; gap: var(--v2-sp-3); }
    body#dash .nos-quote-main b { font-size: 26px; }
    body#dash .nos-quote-rows > div:nth-child(1),
    body#dash .nos-quote-rows > div:nth-child(2) { display: none; }
    /* เผื่อที่ให้เนื้อหาไม่โดนตั๋วบัง เฉพาะตอนที่ตั๋วโผล่จริง */
    body#dash .neworder-wrap:has(#nos-quote:not([hidden])) { padding-bottom: 150px; }
}

/* A77 · F1-15 · ตั๋วราคาอยู่ **ใต้**การ์ดข้อมูลบริการ ตามดีไซน์ (Panel F บรรทัด 194)
   ของจริงวางตั๋วไว้บนสุดของคอลัมน์ ทำให้แท็บกับการ์ดที่เป็นข้อมูลประกอบถูกดันลงไป
   ‼ CSS `order:` ล้วน ไม่แตะลำดับใน twig — `#nos-quote` ต้องอยู่ก่อนในสาย DOM
     เพราะสคริปต์ A61 หามันด้วย getElementById และตั๋วตรึงขอบล่างบนมือถือ
   ‼ ผูกกับ min-width: 1101 เท่านั้น ต่ำกว่านั้นตั๋วเป็น position: fixed อยู่แล้ว
     `order` ไม่มีผลกับ element ที่ถูกถอดออกจาก flow — เขียนไว้ก็ตาย */
@media (min-width: 1101px) {
    body#dash .neworder-summary .nos-quote { order: 1; margin: 12px 0 0; }
    body#dash .neworder-summary .app-widget { order: 2; }
}

/* ─── H-2 · ขั้นที่ 4 "ตรวจอีกครั้งก่อนยืนยัน" (ดีไซน์ Panel H · H2) ──────────
   ของเดิมขั้นนี้มีแค่ตั๋วเหลืองในการ์ด + ปุ่มสั่งซื้อ ผู้ใช้จึงยืนยันโดยไม่เห็นว่าตัวเอง
   กรอกอะไรไว้บ้าง ดีไซน์ให้สรุปห้าแถวก่อน แล้วค่อยยืนยัน
   ‼ ตั๋วในการ์ด (.adv-tear + .adv-stub) ถูกซ่อนที่นี่ ไม่ได้ลบออกจาก twig
     เพราะ #charge-display ข้างในเป็น hook ที่สคริปต์ A61 เขียนค่าลงทุก 600ms
     และตั๋วคอลัมน์ขวาอ่านต่อจากจังหวะเดียวกัน — ลบเมื่อไหร่ ราคาบนตั๋วขวาหยุดอัปเดต
   ‼ ดีไซน์วางปุ่มยืนยันไว้บนตั๋วดำในคอลัมน์ขวา **เราไม่ทำตามจุดนี้**
     ตั๋วนั้นอยู่ **นอก `<form>`** โดยตั้งใจ การย้ายปุ่ม submit ออกไปต้องพึ่ง
     `form="order-form"` ซึ่งทดสอบจริงไม่ได้โดยไม่เสียเงินหนึ่งออเดอร์
     ปุ่มจึงอยู่ในฟอร์มที่เดิม แต่ปรับขนาด/น้ำหนักตามดีไซน์ — บันทึกไว้ใน PLAN-panelH */
body#dash .adv-step[data-step="4"] > .adv-tear,
body#dash .adv-step[data-step="4"] > .adv-stub { display: none; }

body#dash .adv-review {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: var(--v2-sp-4);
}
body#dash .adv-review-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 16px;
    border-radius: var(--v2-r-md);
    background: var(--v2-well);
}
body#dash .adv-review-row[hidden] { display: none; }
body#dash .adv-review-row .ic {
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 10px;
    background: var(--v2-surface);
    color: var(--adv-mute);
    display: grid;
    place-items: center;
    font-size: 13px;
}
body#dash .adv-review-row .k {
    flex: none;
    width: 104px;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--adv-mute);
}
body#dash .adv-review-row .v {
    flex: 1;
    min-width: 0;
    font-family: var(--v2-f-dis);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--v2-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body#dash .adv-review-row .edit {
    flex: none;
    border: 0;
    background: none;
    padding: 0;
    font-family: var(--v2-f-thai);
    font-size: 11.5px;
    font-weight: 500;
    color: var(--adv-mute);
    cursor: pointer;
}
body#dash .adv-review-row .edit:hover { color: var(--v2-ink); text-decoration: underline; }

/* คำเตือนก่อนยืนยัน — โทน wr ตาม [data-tone="wr"] ของ panel-tokens */
body#dash .adv-review-warn {
    display: flex;
    gap: 11px;
    padding: 13px 15px;
    border-radius: var(--v2-r-md);
    background: var(--v2-warn-soft);
    color: var(--v2-warn-text);
    font-size: 12px;
    line-height: 1.7;
}
body#dash .adv-review-warn i { font-size: 12px; margin-top: 3px; flex: none; }

/* ปุ่มยืนยัน — ดีไซน์ให้สูง 54 หนัก 700 15px */
body#dash .adv-step[data-step="4"] .neworder-actions { margin-top: var(--v2-sp-5); }
body#dash .adv-step[data-step="4"] .neworder-actions .btn-primary {
    min-height: 54px;
    border-radius: var(--v2-r-md);
    font-size: 15px;
    font-weight: 700;
}
body#dash .neworder-actions-note {
    margin-top: 11px;
    text-align: center;
    font-size: 10.5px;
    line-height: 1.55;
    color: var(--adv-mute);
}

/* ─── A77 · F1-09 · ช่องกรอกในขั้นที่ 3 (ดีไซน์ Panel F บรรทัด 147–158) ─────
   ‼ A62 เคยปฏิเสธความสูง 50px ด้วยเหตุผลว่า "จะได้ช่องสูงไม่เท่ากันสามช่องในฟอร์มเดียว"
     เหตุผลนั้นถูก **เพราะตอนนั้นตั้งให้ช่องเดียว** คราวนี้ตั้งทั้ง `#fields` พร้อมกัน
     ทุกช่องจึงสูงเท่ากันที่ 50 ตามดีไซน์ และไม่มีช่องไหนในเว็บนอก `#fields` ขยับเลย
   ‼ ผูกกับ `input` / `select` เท่านั้น — `textarea` ใน `#fields` มีจริงเจ็ดตัว
     (คีเวิร์ด · คอมเมนต์ · usernames · hashtags · groups) ถ้าโดนด้วยจะถูกบีบเหลือ 50px */
body#dash #fields input.form-control,
body#dash #fields select.form-control {
    height: 50px;
    padding: 0 16px;
}
/* ไอคอนโซ่นำหน้าช่องลิงก์ — วางจาก **ขอบล่าง** ของ .form-group ไม่ใช่ขอบบน
   เพราะข้างบน input มี <label> ที่ความสูงเปลี่ยนตามการตัดบรรทัดของภาษาไทย
   input เป็นลูกตัวสุดท้ายเสมอ (วัด markup ที่ระบบ inject แล้ว: label + input) */
body#dash #order_link { position: relative; }
body#dash #order_link::before {
    content: "\f0c1";
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    font-size: 12px;
    color: var(--v2-ink-mute);
    position: absolute;
    left: 16px;
    bottom: 0;
    height: 50px;
    display: flex;
    align-items: center;
    pointer-events: none;
}
body#dash #order_link input.form-control {
    padding-left: 39px;
    font-size: 13.5px;
}

/* ─── A62 · ช่อง "จำนวนที่สั่ง" — ตัวเลขที่กลายเป็นเงิน (Panel F · F1) ─────
   ‼ ห้ามแตะ .form-control ตัวกลาง — A54 ตั้งไว้ 46px ทั้งเว็บโดยตั้งใจ
     กฎที่นี่ผูกกับ #order_quantity ตัวเดียว ตัวอื่นใน #fields ไม่กระทบ
   ‼ ความสูง 50px ของดีไซน์ทำแล้วที่บล็อก A77 ข้างบน (ทั้ง `#fields` พร้อมกัน)
     ที่บล็อกนี้ทำคือน้ำหนักและ tabular-nums ซึ่งเป็นประเด็นจริง
     ของดีไซน์: เลขนี้คือเลขที่กลายเป็นยอดเงิน ต้องอ่านง่ายและเทียบหลักได้
   ‼ min–max ย้ายขึ้นไปอยู่บรรทัดเดียวกับ label ด้วย grid — ไม่ได้แก้ twig
     `small.help-block.min-max` เป็นพี่น้องของ input ไม่ใช่ลูกของ label
     ระบบเป็นคนเขียนข้อความนั้น (PerfectPanel) ห้ามไปยุ่งกับตัวหนังสือ */
body#dash #order_quantity {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    column-gap: var(--v2-sp-3);
}
body#dash #order_quantity > .control-label { grid-column: 1; grid-row: 1; }
body#dash #order_quantity > .help-block.min-max {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    text-align: right;
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    color: var(--v2-ink-mute);
}
body#dash #order_quantity > .form-control {
    grid-column: 1 / -1;
    grid-row: 2;
    font-family: var(--v2-f-dis);
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* ─── A63 · สามสถานะของ QR ที่ยังไม่เคยมีดีไซน์ (Panel F · F4) ────────────
   หมดอายุ · ล้มเหลว · เวลาสิ้นสุด — ดีไซน์ Panel F ทำมาแค่ทางสวย
   (เตรียม → พร้อมสแกน → สำเร็จ) คำว่า "ล้มเหลว" ไม่ปรากฏในไฟล์ดีไซน์เลยสักครั้ง
   ‼ ผูก body#dash เพราะ --v2-well / --v2-surface-2 เป็น token ฝั่ง authed เท่านั้น
   ‼ ห้ามใส่ animation ให้จอพวกนี้ — มันไม่ใช่ของที่ควรดึงดูดสายตาให้ตื่นเต้น
     ผู้ใช้กำลังเสียเงินอยู่ ต้องอ่านออกในครั้งเดียว */
body#dash .qr-state {
    margin-top: var(--v2-sp-4);
    padding: var(--v2-sp-4);
    border-radius: var(--v2-r-md);
    background: var(--v2-well);
    text-align: center;
}
body#dash .qr-state-title {
    font-family: var(--v2-f-dis);
    font-size: 15px;
    font-weight: 700;
    color: var(--v2-ink);
}
body#dash .qr-state-text {
    margin-top: var(--v2-sp-2);
    font-size: 12.5px;
    line-height: var(--v2-lh-body);
    color: var(--v2-ink-dim);
}
body#dash .qr-state-actions {
    display: flex;
    gap: var(--v2-sp-2);
    justify-content: center;
    margin-top: var(--v2-sp-4);
}
body#dash .qr-state-actions .btn { flex: 1; max-width: 190px; }
/* ปุ่มที่ยังกดไม่ได้ต้องดู "ยังไม่ได้" ไม่ใช่ดูเหมือนพัง */
body#dash .qr-state-actions .btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
/* QR ที่หมดอายุ — จางลงแต่ยังเห็น เพื่อให้รู้ว่าอันนี้คือของเดิมที่ใช้ไม่ได้แล้ว
   ไม่ใช่ซ่อนไปเฉย ๆ จนผู้ใช้สงสัยว่ารูปหายไปไหน */
body#dash #qr-code-image.is-expired {
    opacity: 0.25;
    filter: grayscale(1);
}
/* เวลาสิ้นสุด — เงียบ ๆ จนกว่าจะเหลือน้อยกว่าหนึ่งชั่วโมง */
body#dash .qr-deadline {
    margin-top: var(--v2-sp-3);
    text-align: center;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--v2-ink-mute);
}
body#dash .qr-deadline.is-urgent {
    color: var(--v2-danger);
    font-weight: 600;
}

/* ─── H-4 · โครงจอ QR ที่ไม่สำเร็จ (ดีไซน์ Panel H · H3) ────────────────────
   A63 ทำสามจอไว้เป็นข้อความล้วนเพราะตอนนั้นยังไม่มีดีไซน์ ตอนนี้มีแล้ว
   ‼ จอที่สามของดีไซน์ ("โอนแล้วยอดไม่เข้า" พร้อม timeline 3 ขั้น) **ตัดทิ้งถาวร**
     เจ้าของยืนยัน 2026-08-06 ว่า backend บอกไม่ได้ว่า gateway ยืนยันยอดถึงขั้นไหน
     ไทม์ไลน์ที่ไม่มีสถานะจริงหนุน = ของปลอมบนจอที่คนกำลังกลัวว่าเงินหาย
     **ห้ามหยิบกลับมาทำใหม่เพราะ "ดีไซน์มี"** ถ้าวันหนึ่ง backend ส่งสถานะได้ ค่อยเปิดใหม่
   ‼ "รหัสอ้างอิงปัญหา" ในจอที่หนึ่งก็ไม่ทำ ด้วยเหตุผลเดียวกัน (ดูคอมเมนต์ใน layout.twig) */
body#dash .qr-state-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 28px;
    margin: 0 auto var(--v2-sp-4);
}
body#dash .qr-state-icon[data-tone="dg"]   { background: var(--v2-danger-soft); color: var(--v2-danger-text); }
body#dash .qr-state-icon[data-tone="mute"] { background: var(--v2-well); color: var(--adv-mute); }
body#dash .qr-state-text b { font-weight: 700; color: var(--v2-ink); }

/* กล่องคำแนะนำ "ถ้ากดแล้วยังไม่ได้" */
/* ‼ ต้องเป็น --v2-surface ไม่ใช่ --v2-well: แผง .qr-state เป็น --v2-well อยู่แล้ว
   ใส่ well ซ้อน well กล่องจะหายไปกับพื้น (วัดแล้วได้ #f4f4f0 เท่ากันทั้งคู่)
   ดีไซน์วางกล่องนี้เป็น --well บนการ์ด --card ซึ่งของเราสลับกัน */
body#dash .qr-state-tips {
    margin-top: var(--v2-sp-4);
    padding: 14px 16px;
    border-radius: var(--v2-r-md);
    background: var(--v2-surface);
    text-align: left;
}
body#dash .qr-state-tips-head {
    font-family: var(--v2-f-dis);
    font-size: 11.5px;
    font-weight: 600;
    margin-bottom: 9px;
    color: var(--v2-ink);
}
body#dash .qr-state-tips > div:not(.qr-state-tips-head) {
    display: flex;
    gap: 9px;
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--v2-ink-dim);
}
body#dash .qr-state-tips > div + div { margin-top: 8px; }
body#dash .qr-state-tips > div > span {
    width: 5px;
    height: 5px;
    flex: none;
    margin-top: 7px;
    border-radius: 50%;
    background: var(--v2-yellow);
}

/* บรรทัดข้อมูลโทน info — ใช้บอกว่า "โอนไปแล้วไม่ต้องโอนซ้ำ" */
body#dash .qr-state-note {
    display: flex;
    gap: 10px;
    margin-top: var(--v2-sp-3);
    padding: 12px 14px;
    border-radius: var(--v2-r-md);
    background: var(--v2-info-soft);
    color: var(--v2-info-text);
    font-size: 11.5px;
    line-height: 1.65;
    text-align: left;
}
body#dash .qr-state-note i { font-size: 11px; margin-top: 3px; flex: none; }
body#dash .qr-state-note b { font-weight: 700; }

/* ป้ายทับรูป QR ที่หมดอายุ — กันคนสแกนรูปที่ยังค้างบนจอ */
body#dash .qr-expired-stamp {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 14px;
    border-radius: var(--v2-r-pill);
    background: var(--v2-sidebar);
    color: var(--v2-on-sidebar);
    font-family: var(--v2-f-dis);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    z-index: 3;
}
body#dash .qr-expired-stamp i { font-size: 11px; }

/* ─── H-5 · แท็บล่างสำหรับมือถือ (ดีไซน์ Panel H · H4) ──────────────────────
   เจ้าของอนุมัติ 2026-08-06 · เดสก์ท็อปไม่แสดง เพราะมีแถบข้างอยู่แล้ว
   ‼ ของสองอย่างแย่งขอบล่างกัน: ตั๋วราคาบน neworder ก็ `position: fixed; bottom: 0`
     เหมือนกัน (H4 กฎข้อ 2) ถ้าไม่จัดการ ตั๋วจะทับแท็บบาร์จนกดไม่ได้
     แก้ด้วยการยกตั๋วขึ้นมาเท่าความสูงแท็บบาร์ ผูกกับตัวแปรตัวเดียวเพื่อไม่ให้เลขหลุดกัน
   ‼ บล็อกนี้ต้องอยู่ **ท้ายไฟล์** เพราะต้องชนะ `bottom: 0` ของ .nos-quote ที่อยู่ก่อนหน้า
     (specificity เท่ากัน ลำดับตัดสิน — บทเรียนเดียวกับตอน A68)
   ‼ เผื่อ safe-area ของ iPhone ด้วย ไม่งั้นแถบจะไปนอนใต้แถบ home indicator */
body#dash .v2-tabbar { display: none; }

@media (max-width: 767px) {
    body#dash {
        /* A100 · 64 → 68 เพื่อให้ปุ่มในแถบสูงถึง 44 ตามมาตรฐานเป้ากดของธีมนี้เอง
           (วัดก่อนแก้: ปุ่ม 51x38 ในแถบสูง 63) `.page` padding-bottom ผูกกับตัวแปรนี้อยู่แล้ว
           จึงขยับตามเอง ไม่ต้องแก้เลขที่ไหนอีก */
        --v2-tabbar-h: 68px;
        --v2-tabbar-total: calc(var(--v2-tabbar-h) + env(safe-area-inset-bottom, 0px));
    }
    body#dash .v2-tabbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 70;
        display: flex;
        align-items: center;
        justify-content: space-around;
        gap: var(--v2-sp-1);
        padding: 10px 8px calc(14px + env(safe-area-inset-bottom, 0px));
        background: var(--v2-surface-2);
        border-top: 1px solid var(--v2-line);
    }
    /*  A111 · ช่องกว้างเท่ากันทุกอัน
        เดิมเป็น space-around + padding ตามเนื้อหา ความกว้างจึงผันตามความยาวป้าย
        ("เพิ่มเติม" กว้างกว่า "ออเดอร์") แคปซูลของตัวที่เลือกเลยกว้างไม่เท่ากัน
        ตามไปด้วย และเขตแตะก็ไม่เท่ากัน  flex: 1 1 0 ทำให้ทั้งสี่ช่องเท่ากันเป๊ะ */
    body#dash .v2-tabbar-i {
        flex: 1 1 0;
        min-width: 0;
        min-height: 44px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        padding: 3px 2px;
        border: 0;
        border-radius: var(--v2-r-sm);
        background: none;
        color: var(--adv-mute);
        font-family: var(--v2-f-thai);
        text-decoration: none !important;
        cursor: pointer;
    }
    /*  A111 · แคปซูลอยู่หลังไอคอนอย่างเดียว ไม่ครอบป้ายด้วย
        ของเดิมย้อมทั้งช่อง (ไอคอน+ป้าย) เป็นสี่เหลี่ยมทึบ ตาอ่านเป็นสติกเกอร์
        แปะทับแถบ ไม่ใช่สถานะของแท็บ  แยกเป็นเม็ดยารอบไอคอนแล้วให้ป้ายบอก
        สถานะด้วยสีกับน้ำหนักแทน เป็นรูปแบบเดียวกับแถบล่างของแอปทั่วไป */
    body#dash .v2-tabbar-i i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 26px;
        border-radius: var(--v2-r-pill);
        font-size: 15px;
        transition: background var(--v2-t-base) var(--v2-ease), color var(--v2-t-base) var(--v2-ease);
    }
    body#dash .v2-tabbar-i span {
        font-size: 9.5px;
        font-weight: 500;
        line-height: 1;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* ตัวที่อยู่หน้านั้น = แคปซูลหมึก ตาม [data-mob="true"] ของ panel-tokens
       ดีไซน์เขียนกำกับไว้เองว่าไม่ใช้เหลือง เพราะไอคอน 15px บนพื้นสว่างอ่านไม่ออก */
    body#dash .v2-tabbar-i.is-on i { background: var(--v2-ink); color: var(--v2-surface); }
    body#dash .v2-tabbar-i.is-on span { color: var(--v2-ink); font-weight: 600; }

    /* เว้นที่ให้เนื้อหาไม่โดนแถบบัง */
    body#dash .page { padding-bottom: var(--v2-tabbar-total); }
    /* ตั๋วราคาลอยเหนือแท็บบาร์ ไม่ใช่ใต้มัน */
    body#dash .nos-quote { bottom: var(--v2-tabbar-total); }
    body#dash .neworder-wrap:has(#nos-quote:not([hidden])) {
        padding-bottom: calc(150px + var(--v2-tabbar-total));
    }
}

/* ─── A74 · G1 · การ์ดเข้าสู่ระบบ (ดีไซน์ Panel G · G1) ──────────────────────
   ‼ **ห้ามแตะ hero ฝั่งซ้าย** (`.v2-split-left`) — คำสั่งเจ้าของ และดีไซน์ก็เขียนกำกับ
     ไว้เองว่าแตะแค่การ์ดฝั่งขวา ทุกกฎในบล็อกนี้ผูกกับ `.login-card` หรือ `.v2-split-right`
   ‼ ผูก `body#outside` ทุกกฎ — signin เป็นหน้า guest ล้วน และ `.form-control`
     ของ A54 เป็นของทั้งเว็บ ห้ามไปแตะที่นั่น
   วัดของเดิมไว้ก่อนแก้: ช่องกรอก 405x55 มุม 10 มีขอบ 1px ไม่มีไอคอน ·
   ปุ่มเข้าสู่ระบบกว้างแค่ 351 เพราะแชร์แถวกับปุ่ม "จำฉันไว้" · ปุ่ม Google มุม 999 */

/* ช่องกรอก — ร่องแบน มุม 14 มีไอคอนนำ และวงแหวนเหลืองตอนโฟกัส
   (กติกาใน panel-tokens บรรทัด 5: เหลืองใช้เป็นขอบหนา 2px รอบช่องที่โฟกัสได้) */
/* A88 · E2 · ‼ เดิมเขียนไว้แค่ `#username` / `#password` ซึ่งเป็น id ของ **signin**
   แต่ `.login-card` ใช้ที่ signup ด้วย และ signup ใช้ id `#login` `#email`
   `#password` `#password_again` ผลคือทั้งสี่ช่องได้ padding-left 40px ครบ
   แต่มีไอคอนโผล่ช่องเดียว (วัดบนหน้า guest จริง 2026-08-10) */
body#outside .login-card .form-group { position: relative; }
body#outside .login-card .form-group:has(#username)::before,
body#outside .login-card .form-group:has(#login)::before,
body#outside .login-card .form-group:has(#email)::before,
body#outside .login-card .form-group:has(#password_again)::before,
body#outside .login-card .form-group:has(#password)::before {
    position: absolute;
    left: 16px;
    bottom: 0;
    height: 50px;
    display: grid;
    place-items: center;
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    font-size: 12px;
    color: var(--v2-ink-mute);
    pointer-events: none;
}
body#outside .login-card .form-group:has(#username)::before,
body#outside .login-card .form-group:has(#login)::before { content: "\f007"; }
body#outside .login-card .form-group:has(#email)::before { content: "\f0e0"; }
body#outside .login-card .form-group:has(#password)::before,
body#outside .login-card .form-group:has(#password_again)::before { content: "\f023"; }

/* แถว "จำฉันไว้" — ของเดิมเป็นไอคอน 46x46 ไม่มีข้อความ ต้องเอาเมาส์ไปชี้ถึงจะรู้
   ตอนนี้มีข้อความจริงต่อท้าย (มาจาก lang เดิม ไม่ใช่คำใหม่) */

/* ปุ่มเข้าสู่ระบบ — เต็มความกว้าง สูง 52 พื้นหมึก
   ‼ ดีไซน์ให้เป็นหมึกไม่ใช่เหลือง เพราะเหลืองในหน้านี้ถูกจองไว้ให้ตัวเลข uptime
     ในก้อนดำฝั่งซ้ายและวงแหวนโฟกัส — สามที่เหลืองในจอเดียวคือเยอะไป
   ‼ ผูกกับ .login-card เท่านั้น ปุ่มเหลืองที่อื่นทั้งเว็บไม่กระทบ */
body#outside .login-card .btn.btn-primary:hover { filter: brightness(1.25); }

/* ปุ่ม Google — ร่องแบนมุม 14 เข้าชุดกับช่องกรอก แทนแคปซูลขาว */
body#outside .btn-google-v2 {
    height: 46px;
    border: 0;
    border-radius: var(--v2-r-md);
    background: var(--adv-inner);
    font-size: 13px;
    font-weight: 500;
}
body#outside .btn-google-v2:hover { background: var(--v2-line); }

/* แถบความน่าเชื่อถือใต้การ์ด */
body#outside .v2-signin-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
}
body#outside .v2-signin-trust > span {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--v2-f-thai);
    font-size: 11px;
    color: var(--v2-ink-mute);
}
body#outside .v2-signin-trust > span > i { font-size: 9px; }
body#outside .v2-signin-trust .sep {
    width: 1px;
    height: 11px;
    padding: 0;
    background: var(--v2-line-strong);
}

/* ─── A97 · มือถือ · การ์ดออเดอร์ (ใช้ร่วมกับ /subscriptions และ /drip-feed) ────────
   ‼ กฎฐาน `@media (max-width: 991.98px)` สั่ง `.order-item-top` และ `.order-item-bottom`
     เป็น `flex-direction: column` ทั้งที่ลูกของมันแคบมาก — วัดบนเครื่องจริง 390x844:
     `.oit-first` กว้าง 100 กับ `.oit-last` กว้าง 60 เรียงลงมาในแถวที่กว้าง 364
     และปุ่มแจ้งปัญหา 40x44 ได้บรรทัดของตัวเองทั้งบรรทัด
     ผลคือการ์ดละ 379px = เห็นออเดอร์ได้ 2 ใบต่อจอ และหน้าเดียว (100 ใบ) ยาว 39,642px
   ‼ ที่ลองแล้วไม่ได้ผล บันทึกไว้กันคนทำซ้ำ: บังคับ `.oib-first` เป็น grid 2 คอลัมน์
     ทำให้การ์ด **สูงขึ้น** 379 → 456 เพราะแถวนั้นห่อบรรทัดได้ดีอยู่แล้ว
   ‼ ต้องมี `flex-wrap: nowrap` ด้วย — `body#dash .order-item-bottom` ตั้ง `flex-wrap: wrap`
     ไว้ พอเปลี่ยนเป็น row เฉย ๆ `.oib-first` ยังกินเต็มบรรทัดแล้วดันปุ่มตกไปบรรทัดใหม่เหมือนเดิม
   วัดหลังแก้: การ์ด 379 → 289 · หน้า 39,642 → 30,661 · ไม่ล้นแนวนอน */
@media (max-width: 991.98px) {
    body#dash .order-item .order-item-top {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }
    body#dash .order-item .oit-last { margin-top: 0; }
    /* ‼ `align-items: center` ของกฎฐานทำให้เลขออเดอร์กับชื่อบริการลอยกลางกล่องกว้าง 292
       (วัดจริง: x=109 ทั้งที่กล่องเริ่มที่ 13) ไม่ใช่ของใหม่ ของเดิมก็เป็นแบบนี้ */
    body#dash .order-item .oit-first { align-items: flex-start; text-align: left; }
    body#dash .order-item .order-item-bottom {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: flex-start;
        gap: var(--v2-sp-3);
    }
    body#dash .order-item .oib-first { flex: 1 1 0; min-width: 0; justify-content: flex-start; }
    body#dash .order-item .oib-last { flex: none; margin-top: 0; }
    body#dash .order-item .btn-report { margin-top: 0; }
}

/* ─── A98 · มือถือ · การ์ดบริการ (/services) ──────────────────────────────────
   วัดบนเครื่องจริง 390x844: 338 การ์ด เฉลี่ย 396px → หน้ายาว 153,990px
   ที่มาของความสูง (วัดทีละชั้น ไม่ได้เดา):
     `.services-item-top` 154 = `.sit-first` เต็มความกว้าง + `.sit-last` **กว้าง 69** ที่ถูก
       วางเป็นแถวใหม่ข้างล่าง เพราะกฎฐานสั่ง `flex-direction: column`
     `.sib-last` 96 = ปุ่ม "สั่งซื้อเลยตอนนี้" กับ "คำอธิบาย" กว้างเต็ม 330 ทั้งคู่ ซ้อนกันสองบรรทัด
   ‼ `padding-right` ไม่ใช่ของประดับ — `.btn-favorite` เป็น `position: absolute; top:10; right:10`
     (กฎฐาน L7162) ตอนที่ `.sit-last` อยู่แถวล่าง ป้ายราคาอยู่ y=127 จึงไม่ชนดาวที่ y=10
     พอยกแถวขึ้นมาข้างบน **ป้ายราคาไปทับปุ่มดาวทันที** — ผมทำพังเองตอนลองรอบแรกและวัดเจอ
     ดาวกินพื้นที่ขวาสุด 54px (44 + right 10) จึงกันไว้ 60 เหลือช่องว่าง 6px
     วัดยืนยัน: สุ่ม 40 การ์ด ทับ 0 ใบ ป้ายจบที่ 300 ดาวเริ่ม 306
   ‼ `text-align: center` ของกฎฐานทำให้ชื่อบริการจัดกลาง — ในลิสต์ที่ต้องกวาดตาหาชื่อ ชิดซ้ายอ่านเร็วกว่า
   วัดหลังแก้: การ์ดเฉลี่ย 396 → 322 · หน้า 153,990 → 124,803 · ไม่ล้นแนวนอน */
@media (max-width: 991.98px) {
    body#dash .service-item .services-item-top {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--v2-sp-3);
        padding-right: 60px;
    }
    body#dash .service-item .sit-first { flex: 1 1 auto; min-width: 0; align-items: flex-start; text-align: left; }
    body#dash .service-item .services-title { text-align: left; }
    body#dash .service-item .sit-last { flex: none; margin-top: 0; align-items: center; }
    body#dash .service-item .sib-last { flex-wrap: nowrap; gap: var(--v2-sp-2); }
    body#dash .service-item .sib-last > .btn { flex: 1 1 0; min-width: 0; width: auto; }
    body#dash .service-item .sib-last > .btn.btn-success { flex: 1.4 1 0; }
}

/* ─── A103 · หน้า /faq (ทั้ง authed และ guest) ────────────────────────────────────────────
   ‼ หน้านี้เพิ่งได้ route วันนี้ (เจ้าของเพิ่มหน้าในแอดมิน url=faq → PerfectPanel จับคู่กับ
     faq.twig ที่มีอยู่ในธีมอยู่แล้ว) ก่อนหน้านั้น /faq เป็น 404 มาตลอด เนื้อหา 24 ข้อ
     จึงไม่เคยมีใครได้อ่าน และ **ไม่เคยมีกฎ CSS ฝั่ง authed สักบรรทัด**
     กฎ FAQ ทุกตัวในไฟล์นี้ผูก `body#outside` เพราะเดิมมันเป็นแค่ section บนหน้าแรกของ guest
   วัดบนหน้าจริงหลัง route เปิด (390x844):
     · แท็บหกอันถูกบีบเหลืออันละ 56px จนป้ายขาด — "Payment" "Child Panel" "Account"
       อ่านไม่ครบ เพราะ #pills-tab มี role="tablist" เลยไปกินกฎแคปซูลของ A52
     · วงกลมลูกศรพื้น rgb(25,70,112) = น้ำเงินของธีมฐาน ไม่มีสีนี้ในชุดสีของธีมเลย
     · การ์ดคำถามพื้น rgb(8,8,11) ขณะที่การ์ดอื่นทั้งเว็บเป็น rgb(26,28,36)
   ‼ แท็บใช้ **ห่อบรรทัด ไม่ใช่เลื่อนแนวนอน** — บทเรียน A99: ซ่อนตัวเลือกไว้หลังการปัด
     ทำให้คนไม่รู้ว่ามีต่อ หกหมวดต้องเห็นครบพร้อมกัน */
body#dash ul.nav#pills-tab,
body#outside ul.nav#pills-tab {
    display: flex;
    flex-wrap: wrap;
    gap: var(--v2-sp-2);
    width: 100%;
    padding: 0;
    margin: 0 0 var(--v2-sp-4);
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}
body#dash ul.nav#pills-tab > .nav-item,
body#outside ul.nav#pills-tab > .nav-item { flex: 0 0 auto; }
body#dash ul.nav#pills-tab > .nav-item > .nav-link,
body#outside ul.nav#pills-tab > .nav-item > .nav-link {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-2);
    width: auto;
    min-width: 0;
    height: 40px;
    padding: 0 var(--v2-sp-4);
    border: 0;
    border-radius: var(--v2-r-pill);
    background: var(--adv-inner);
    color: var(--v2-ink-dim);
    font-family: var(--v2-f-thai);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: none;
}
body#dash ul.nav#pills-tab > .nav-item > .nav-link i,
body#outside ul.nav#pills-tab > .nav-item > .nav-link i { font-size: 13px; }
body#dash ul.nav#pills-tab > .nav-item > .nav-link.active,
body#outside ul.nav#pills-tab > .nav-item > .nav-link.active {
    background: var(--v2-ink);
    color: var(--v2-surface);
}
/* การ์ดคำถาม — พื้นเดียวกับการ์ดอื่นทั้งเว็บ */
body#dash .faq-ss-tabs,
body#outside .faq-ss-tabs { margin: 0; display: grid; gap: var(--v2-sp-3); }
body#dash .faq-ss-tabs .home-ss-tab,
body#outside .faq-ss-tabs .home-ss-tab {
    background: linear-gradient(180deg, var(--adv-panel-top), var(--adv-panel-bot));
    border: 1px solid var(--adv-panel-line);
    border-radius: var(--v2-r-lg);
    box-shadow: var(--adv-lift);
    margin: 0;
    /* ‼ กฎฐาน L4341 ให้การ์ดเอง `padding: 12px 20px` และ `.ss-tab-head` ข้างในมีอีก 16px 20px
       ระยะขอบซ้ายขวาจึงซ้อนกันเป็น 40px — ให้หัวข้อกับเนื้อหาถือ padding ของตัวเองที่เดียว */
    padding: 0;
    overflow: hidden;
}
body#dash .faq-ss-tabs .ss-tab-head,
body#outside .faq-ss-tabs .ss-tab-head {
    display: flex;
    align-items: center;
    gap: var(--v2-sp-3);
    padding: var(--v2-sp-4) var(--v2-sp-5);
    cursor: pointer;
}
body#dash .faq-ss-tabs .ss-tab-head h4,
body#outside .faq-ss-tabs .ss-tab-head h4 {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-family: var(--v2-f-dis);
    font-size: 14.5px;
    font-weight: 600;
    line-height: var(--v2-lh-body);
    color: var(--v2-ink);
}
/* วงกลมลูกศร — เดิมเป็นน้ำเงินของธีมฐาน */
body#dash .faq-ss-tabs .ss-tab-head .right-p,
body#outside .faq-ss-tabs .ss-tab-head .right-p {
    flex: none;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--adv-inner);
    border: 0;
    color: var(--v2-ink-mute);
    font-size: 12px;
}
body#dash .faq-ss-tabs .home-ss-tab.active .ss-tab-head .right-p,
body#outside .faq-ss-tabs .home-ss-tab.active .ss-tab-head .right-p {
    background: var(--v2-yellow);
    color: var(--v2-yellow-ink);
}
body#dash .faq-ss-tabs .ss-tab-content,
body#outside .faq-ss-tabs .ss-tab-content {
    padding: 0 var(--v2-sp-5) var(--v2-sp-5);
    font-family: var(--v2-f-thai);
    font-size: 13px;
    line-height: 1.85;
    color: var(--v2-ink-dim);
    max-width: 66ch;
}

/* ─── A105 · หัวข้อในหน้าอ่านยาว (/terms · /about-us) ────────────────────────────
   ‼ สองหน้านี้เพิ่งมีเนื้อหาจริงครั้งแรกวันนี้ ก่อนหน้านั้นตัวแปรของ backend ว่าง
     หน้าจึงเรนเดอร์แต่โครง ไม่มีใครเคยเห็น h2/ul/li ในนั้นเลย
   วัดหลังใส่เนื้อหา: คอลัมน์ 554 (66ch ทำงานถูก) เนื้อความ 14px/1.95 แต่ `h2` ได้ 32px
     จากกฎ h2 ระดับโลก = ใหญ่กว่าเนื้อความ 2.3 เท่า และกฎที่ L9335 ตั้ง h1/h2/h3
     ด้วยค่าชุดเดียวกันหมด สามระดับจึงหน้าตาเท่ากัน อ่านไม่ออกว่าอันไหนย่อยกว่า */
body#dash .terms-content h1,
body#outside .terms-content h1,
body#dash .about-content h1,
body#outside .about-content h1 { font-size: 22px; margin: 32px 0 12px; }
body#dash .terms-content h2,
body#outside .terms-content h2,
body#dash .about-content h2,
body#outside .about-content h2 {
    font-size: 18px;
    line-height: var(--v2-lh-tight);
    margin: 30px 0 10px;
}
body#dash .terms-content h3,
body#outside .terms-content h3,
body#dash .about-content h3,
body#outside .about-content h3 { font-size: 15px; margin: 22px 0 8px; }
/* หัวข้อแรกไม่ต้องดันลงมาจากขอบบนของการ์ด */
body#dash .terms-content > :first-child,
body#outside .terms-content > :first-child,
body#dash .about-content > :first-child,
body#outside .about-content > :first-child { margin-top: 0; }


/*  A124 · เฟส 3 · ภาษาเส้น — แผนที่ .claude/PLAN-unify.md
 *
 *  เฟส 1 ทำให้ข้อนี้หดลงเองตามที่แผนคาดไว้: ในไฟล์มี `dashed` 29 declaration
 *  แต่สำรวจของที่ **ขึ้นจอจริง** หลังเฟส 1 เหลือ 8 element ทั้งเว็บ
 *  และสองกลุ่มในนั้นถูกต้องอยู่แล้ว ไม่ต้องแตะ:
 *    · .tickets-uploader — dropzone ลากไฟล์มาวาง เส้นประ = "ช่องนี้ยังว่าง"
 *      เป็น convention สากล
 *    · .read-before-list li — ภาษา "ตั๋ว/ใบเสร็จ" ที่จงใจ มีรอยปรุประกอบครบ
 *
 *  ที่เหลือ 6 จุดเป็นตัวคั่นธรรมดา ซึ่งเส้นทึบทำงานเหมือนกันเป๊ะ — เส้นประ
 *  ไม่ได้แปลว่า "ชั่วคราว" หรือ "ตัดตรงนี้" มันแปลว่าคนเขียนวันนั้นอยากได้เส้นประ
 *  ‼ และเส้นประที่ alpha 10% มี duty cycle ~50% น้ำหนักที่ตาเห็นจึงเหลือครึ่งเดียว
 *    ของเส้นทึบสีเดียวกัน ที่ 13px มันไม่อ่านว่า "โครงสร้าง" แต่อ่านว่า "รอยเปื้อน"
 *
 *  กติกาตั้งแต่นี้: เส้นประใช้ได้ 2 กรณีเท่านั้น — ของที่ยังว่าง (dropzone)
 *  และภาษาตั๋ว/ใบเสร็จ — และห้ามอยู่หน้าเดียวกัน
 */

/* ═══════════════════════════════════════════════════════════════════════
 *  A117 · ตัวกรองบนหน้ารายการบริการไม่ใช่ปุ่มหลัก  (2026-08-11)
 *
 *  วัดที่ 1900 บน /services เรียงปุ่มตามพื้นที่:
 *    "ตัวกรองบริการ"     164×36 = 5,951px²  พื้น rgb(255,214,10)  ← เหลือง
 *    "คำอธิบาย"          152×35 = 5,320px²  พื้น glass
 *    "สั่งซื้อเลยตอนนี้"  116×35 = 4,074px²  พื้น rgb(255,214,10)  ← เหลือง
 *  เหลืองสองที่ในหน้าเดียวและตัวที่ใหญ่กว่าคือ "ตัวกรอง" ซึ่งเป็นเครื่องมือ
 *  ช่วยดู ไม่ใช่การกระทำที่หน้านี้มีไว้เพื่อทำ  ปุ่มซื้อเสียเปรียบทั้งขนาดและ
 *  จำนวนครั้งที่ตาไปเจอเหลือง
 *  กฎเจ้าของ 2026-08-04: "ปุ่มรอง → --v2-well" · ตัวกรองเข้าข่ายนั้น
 *
 *  ‼ ผูกกับ .dropdown-toggle ที่อยู่ใน .row ของหัวหน้ารายการเท่านั้น
 *    ไม่แตะ .btn-primary ตัวอื่น และไม่แตะ .btn-order-now
 *  ‼ ไม่ใช้ !important — เติม html นำหน้าให้ได้ (1,3,2) ซึ่งพอชนะ
 *    `html body#dash .btn.btn-primary` (1,2,2) ที่เป็นเจ้าของสีเดิม
 * ═══════════════════════════════════════════════════════════════════════ */
html body#dash .service-filter-row .btn.btn-primary.dropdown-toggle,
html body#dash .dropdown > .btn.btn-primary.dropdown-toggle {
    background: var(--v2-well);
    color: var(--v2-ink);
    border: 1px solid var(--v2-line);
}
html body#dash .service-filter-row .btn.btn-primary.dropdown-toggle:hover,
html body#dash .dropdown > .btn.btn-primary.dropdown-toggle:hover {
    background: var(--v2-glass-2);
    color: var(--v2-ink);
}

/* ═══════════════════════════════════════════════════════════════════════
 *  A122 · เฟส 1 · ชั้นระนาบ — แผนเต็มที่ .claude/PLAN-unify.md
 *  เจ้าของอนุมัติ 2026-08-11 · เลือกสูตร "ทึบ · ไร้ขอบ · เงาเดียว"
 *
 *  ‼ ราก R1: ธีมนี้ไม่มี class หรือ token ไหนที่แปลว่า "นี่คือระนาบระดับ 1"
 *    ทุกหน้าจึงประกาศเองด้วยชื่อของตัวเอง — ในไฟล์มีคลาสที่มีคำว่า card 47 ตัว
 *    และมีสูตรพื้นผิวอยู่ร่วมกัน 4 แบบโดยไม่มีกฎว่าอะไรได้แบบไหน
 *
 *  ‼ และบล็อกที่ 19356 ("รายการในการ์ด (24 จุด)") ถอด background/border/
 *    border-radius/box-shadow/padding-inline ออกจาก 11 selector พร้อมกัน
 *    โดยเชื่อว่า "ทุกแถวมีการ์ดแม่อยู่แล้ว" — จริงกับ .ticket-item .api-item
 *    .service-item เท่านั้น  ไม่จริงกับ .order-item (5 หน้า) .child-item
 *    .updates-item  ห้าหน้านั้นแถวจึงลอยบนพื้นหน้าเปล่า ๆ
 *
 *  วัดบนจอจริงก่อนแก้ /orders ที่ 1900:
 *    .order-item → padding 10px 4px · border-radius 0 · background transparent
 *    .orders-list → ไม่มีกฎฐานเลยสักบรรทัด
 *  และ .card ที่ orders.twig:47 ห่อ .noorders (สถานะ "ไม่มีออเดอร์") ปิดที่ :60
 *  ไม่ได้ห่อลิสต์
 *
 *  ‼ ในไฟล์เขียนเตือนไว้เองแล้วที่ 10372:
 *    "ผูกกับ .orders-list เท่านั้น อีกสี่หน้าที่ใช้ .order-item ร่วมกันไม่มี wrapper นี้"
 * ═══════════════════════════════════════════════════════════════════════ */

/*  สูตรระนาบเดียวของทั้งเว็บ — ค่าตรงกับ body#dash .card ที่ 8410 เป๊ะ
    ประกาศแยกไว้เพื่อให้ "ระนาบ" เป็นของที่เรียกใช้ได้ ไม่ใช่ของที่ต้องจำ */
body#dash .v2-surface-1,
body#dash .list-surface,
body#dash .orders-list,
body#dash .child-list,
body#dash .updates-item-wrapper {
    background: var(--v2-surface);
    border: 0;
    border-radius: var(--v2-r-lg);
    box-shadow: var(--v2-elev);
    color: var(--v2-ink);
    padding: var(--v2-sp-2) var(--v2-sp-4);
}

/*  ‼ ห้ามใส่ .payment-history ในกลุ่มข้างบน — มันอยู่ใน .card.form-card แล้ว
    (addfunds.twig:118) จะกลายเป็นกล่องซ้อนกล่องทันที
    กฎที่คู่กับเฟส 1: ห้ามระนาบซ้อนระนาบ แบ่งข้างในด้วยเส้นหรือระยะ */
body#dash .card .list-surface,
body#dash .card .orders-list,
body#dash .card .child-list,
body#dash .card .updates-item-wrapper {
    background: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
}


/* ═══════════════════════════════════════════════════════════════════════
 *  A127 · เก็บของที่ design-gates.js จับได้ในการรันครั้งแรก
 *  แผนเต็มที่ .claude/PLAN-unify.md — เฟส 5 คือจุดที่กฎกลายเป็นของที่ fail ได้
 * ═══════════════════════════════════════════════════════════════════════ */

/*  G7 · ราง — bootstrap `.container` ยังถือ max-width ของตัวเอง 1140px
    และมันโผล่กลางหน้า /orders (orders.twig:230 · แถวปุ่มโหลดเพิ่ม)
    ทำให้หน้าเดียวมีสองราง ซึ่งเป็นอาการที่เฟส 2 ตั้งใจปิดไปแล้ว
    ‼ ทับที่ตัว .container ตัวเดียว ไม่ไล่ทับทีละหน้า — bootstrap คุมหน้า guest
      อยู่ 15 ไฟล์ ถ้าไล่ทับทีละหน้าจะกลับไปเป็น allowlist อีก */
body#dash .container,
body#outside .container { max-width: var(--v2-rail); }