/* Happy — ແບຣນແບບຍັບຍັ້ງ ສຳລັບໜ້າເຮັດວຽກສາທາລະນະ (brand1 · 2/10/2026): ຕິດຕາມອໍເດີ · ຄ່ານາຍໜ້າ · ຕົວແທນ (ໜ້າງານ + ສະໝັກ) · ອະນຸມັດໂພສ · ບົດເດືອນ
   ໂຫຼດ **ຫຼັງ** <style> ຂອງໜ້າ (ທັບດ້ວຍລຳດັບ · ຄວາມສະເພາະເທົ່າກັນ) — ກົດໃນໜ້າຍັງຢູ່ (ເທສຜູກ) ແຕ່ໜ້າຕາຕາມມາດຕະຖານ:
   ຫົວຂໍ້ Noto Serif Lao · ມຸມສາກ · ປຸ່ມຫຼັກ = ໝຶກເທິງເຈ້ຍແດງ (ອັນດຽວ) · ສິ່ງທີ່ເລືອກຢູ່ = ໝຶກ · ປ້າຍສະຖານະ = ໝຶກເທິງເຈ້ຍສີ · ວົງໂຟກັສໝຶກ
   ບໍ່ມີ ຮາວ · ປ້າຍຫ້ອຍ · ປຸ່ມຮູບປ້າຍ · ແຖບສີ (DESIGN.md: ໜ້າເຮັດວຽກ — ວຽກໄວມາກ່ອນ) · ສີແບຣນຂອງຮ້ານ (ຖ້າມີ) ບໍ່ຖືກແຕະ */

html, body { font-family: var(--font-body); }
h1, h2 { font-family: var(--font-head); font-weight: 900; }
header b { font-family: var(--font-display); font-weight: 900; line-height: 1.25; }
header b > span[data-i], header b > span[data-i18n="af.h"], header b > .sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 13px/1.35 var(--font-body); color: var(--text-dim); }   /* ຊື່ໜ້າ ຢູ່ແຖວລຸ່ມຂອງຊື່ແບຣນ — ບໍ່ຕັດແຖວກາງປະໂຫຍກ */   /* ຊື່ໃນຫົວ = ຕົວ sans ຄືຫົວເວັບໜ້າຫຼັກ */
.hero, .acct, .tile .v, .stat b, .kip { font-family: var(--font-display); }   /* ຕົວເລກ = ຕົວລະຫັດ (sans) */

/* ມຸມສາກ */
.card, .stat, .tile, .btn, input, select, textarea, .langbar button, .pill, .months a, .seg button, .terms, code, .err, .say, .shot, .rv-reply,
.ed-q button, .qty button, .sticky, .lq-ph, .qr img, .prod img, .prod .ph, .rv-imgs img, .skip-link, .slip-prev,
.theme-tg, .tg-wrap:has(.lang-pair) .theme-tg, .theme-tg.is-float, .mgrid .d, #rtForm select, #rtForm textarea, #edForm input, #edForm textarea, #edForm select, nav.tabs button .n { border-radius: 0; }

/* ປຸ່ມຫຼັກ: ໝຶກເທິງເຈ້ຍແດງ (ຂາວເທິງແດງ ຕົກ 4.5:1 ໃນໂໝດມືດ — audit AF-1 · AG-1 · JO-2) */
.btn-live, .btn.btn-live { background: var(--paper-r); border-color: var(--paper-r); color: var(--ink); }
.btn-live:hover, .btn.btn-live:hover { background: color-mix(in srgb, var(--paper-r) 88%, #000); border-color: color-mix(in srgb, var(--paper-r) 88%, #000); }
.btn:disabled, .btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ສິ່ງທີ່ເລືອກຢູ່ (ພາສາ · ເດືອນ · ແຖບ) = ໝຶກ ບໍ່ແມ່ນແດງ — ແດງສະຫງວນໃຫ້ການກະທຳຫຼັກ */
.langbar button.on, .months a.on, .seg button.on { background: var(--text); border-color: var(--text); color: var(--ground-deep); font-weight: 700; }

/* ປ້າຍສະຖານະ: ໝຶກເທິງເຈ້ຍສີ */
.pill { color: var(--text); }
.pill.ok, .pill.published { background: var(--paper-g); border-color: var(--paper-g); color: var(--ink); }
.pill.warn, .pill.due { background: var(--paper-y); border-color: var(--paper-y); color: var(--ink); }
.pill.bad, .pill.failed, .pill.canceled { background: var(--paper-r); border-color: var(--paper-r); color: var(--ink); }
nav.tabs button .n { background: var(--paper-r); color: var(--ink); }
.pill.pending, .mgrid button.d.pend { background: var(--paper-y); border-color: var(--paper-y); color: var(--ink); }
.btn.ok { background: var(--paper-g); border-color: var(--paper-g); color: var(--ink); }   /* /care: ປຸ່ມຫຼັກ = ຂຽວ (ຄືໜ້າ /care) */

/* ຂັ້ນຕອນ (ຕິດຕາມ): ຂັ້ນປັດຈຸບັນ = ເຈ້ຍແດງ + ໝຶກ */
.steps .now .dot { background: var(--paper-r); border-color: var(--paper-r); color: var(--ink); }
.steps .now .st-t { color: var(--live-text); }
.steps .done .dot, .steps .now:last-child .dot { background: var(--paper-g); border-color: var(--paper-g); color: var(--ink); }
.steps .now:last-child .st-t { color: var(--text); }   /* ໄດ້ຮັບແລ້ວ = ຈົບ ບໍ່ແມ່ນ «ຕ້ອງເບິ່ງ» */

/* ວົງໂຟກັສ: ໝຶກ ມຸມສາກ (ແທນເສັ້ນຟ້າມົນ) */
:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; border-radius: 0; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid var(--text); outline-offset: 1px; border-color: var(--text); }
.langbar button:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; }

a { color: var(--text); }
a:where(:not(.btn)) { text-decoration: underline; text-underline-offset: 3px; }   /* tokens.css ຕັດເສັ້ນກ້ອງ ⇒ ລິ້ງສີໝຶກ ຕ້ອງມີເສັ້ນ */
.months a { text-decoration: none; }

/* ແດງ = ການກະທຳຫຼັກອັນດຽວຕໍ່ຈໍ: ປຸ່ມແຈ້ງເຕືອນ (ຕິດຕາມ) ເປັນປຸ່ມຮອງ · ປຸ່ມ + ໃນແຖວສິນຄ້າ = ໝຶກ · ແຖບທີ່ເລືອກ = ໝຶກ · ຕິກ = ໝຶກ */
#notifyBtn { background: var(--panel); border-color: var(--text); color: var(--text); }
.prod .btn-live { background: var(--text); border-color: var(--text); color: var(--ground-deep); min-width: 44px; }
nav.tabs button { border-top: 3px solid transparent; border-radius: 0; }
nav.tabs button.on { color: var(--text); border-top-color: var(--text); }
input[type="checkbox"] { accent-color: var(--text); }
@media (max-width: 480px) { header b > .sub { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; } }
.err { border-color: var(--live-text); }