:root { --g-dark:#1b5e20; --g-main:#2e7d32; --g-light:#e8f5e9; --bg:#f4f6f4; }
body { font-family: 'Noto Sans Lao', 'Noto Sans', 'Phetsarath OT', system-ui, sans-serif; background: var(--bg); color:#263238; }
.app-shell { display:flex; min-height:100vh; }
.sidebar { width:250px; background:var(--g-dark); color:#fff; flex-shrink:0; position:sticky; top:0; height:100vh; height:100dvh; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.sidebar .brand { padding:1rem 1.25rem; font-size:1.2rem; font-weight:700; border-bottom:1px solid rgba(255,255,255,.15); }
.sidebar .nav-link { color:rgba(255,255,255,.85); padding:.5rem 1.25rem; display:flex; gap:.6rem; align-items:center; }
.sidebar .nav-link:hover { background:rgba(255,255,255,.1); color:#fff; }
.sidebar .nav-link.active { background:var(--g-main); color:#fff; font-weight:600; }
.sidebar .nav-title { margin-top:.5rem; border-top:1px solid rgba(255,255,255,.1); padding:.8rem 1.25rem .3rem; font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; color:rgba(255,255,255,.5); }
.main { flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar { background:var(--g-main); color:#fff; padding:.6rem 1rem; display:flex; align-items:center; gap:.75rem; position:sticky; top:0; z-index:100; }
.topbar-title { font-weight:600; }
.content { padding:1.25rem; flex:1; }
.footer { text-align:center; padding:.75rem; font-size:.8rem; color:#78909c; }
.card { border:0; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.card-header { background:#fff; font-weight:600; border-bottom:2px solid var(--g-light); }
.btn-primary { --bs-btn-bg:var(--g-main); --bs-btn-border-color:var(--g-main); --bs-btn-hover-bg:var(--g-dark); --bs-btn-hover-border-color:var(--g-dark); --bs-btn-active-bg:var(--g-dark); }
.btn-outline-primary { --bs-btn-color:var(--g-main); --bs-btn-border-color:var(--g-main); --bs-btn-hover-bg:var(--g-main); --bs-btn-hover-border-color:var(--g-main); }
a { color:var(--g-main); }
.stat-card { border-left:4px solid var(--g-main); }
.stat-card .num { font-size:1.9rem; font-weight:700; line-height:1; }
.stat-card.danger { border-left-color:#dc3545; }
.stat-card.warn { border-left-color:#ffc107; }
.stat-card.info { border-left-color:#0d6efd; }
.table thead th { background:var(--g-light); white-space:nowrap; }
.table td { vertical-align:middle; }
.timeline { list-style:none; padding:0; margin:0; position:relative; }
.timeline::before { content:''; position:absolute; left:15px; top:4px; bottom:4px; width:2px; background:#cfd8dc; }
.timeline li { position:relative; padding:0 0 1rem 42px; }
.timeline .dot { position:absolute; left:0; top:0; width:32px; height:32px; border-radius:50%; background:var(--g-main); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.9rem; }
.timeline li:first-child .dot { background:#fb8c00; }
.login-wrap { position:relative; overflow:hidden; min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--g-dark),var(--g-main)); padding:1rem; }
.login-card { position:relative; z-index:1; width:100%; max-width:400px; box-shadow:0 10px 40px rgba(0,0,0,.25); }
#netBg { position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
.detail dt { color:#607d8b; font-weight:600; font-size:.85rem; }
.detail dd { margin-bottom:.8rem; }
@media (max-width: 991.98px) {
  .sidebar { position:fixed; z-index:1040; left:0; top:0; bottom:0; width:min(290px,85vw); transform:translateX(-105%); transition:transform .25s ease; box-shadow:none; }
  .sidebar.open { transform:none; box-shadow:0 0 30px rgba(0,0,0,.4); }
  .sidebar .nav-link { padding:.75rem 1.25rem; }       /* ແຕະງ່າຍ */
}
@media print {
  .sidebar, .topbar, .footer, .no-print { display:none !important; }
  .content { padding:0; }
  .tab-content > .tab-pane { display:block !important; opacity:1 !important; }
}

/* ເມນູຕັ້ງຄ່າ (admin) ໃນແຖບເທິງ */
.topbar .dropdown-menu .dropdown-item.active { background:var(--g-main); color:#fff; }
.topbar .dropdown-menu .dropdown-item i { width:1.25rem; }
.login-logo { max-width:100%; max-height:96px; object-fit:contain; }
.logo-preview { background:#f8f9fa; border:1px dashed #ced4da; border-radius:.5rem; padding:1.5rem 1rem; }

/* ================= Responsive: ມືຖື / ແທັບເລັດ ================= */
html { -webkit-text-size-adjust:100%; }
img, canvas, svg { max-width:100%; }
.sidebar-backdrop { display:none; position:fixed; inset:0; z-index:1030; background:rgba(0,0,0,.5); opacity:0; transition:opacity .25s; }
.sidebar-backdrop.show { display:block; opacity:1; }
body.no-scroll { overflow:hidden; }
.topbar { padding-top:calc(.6rem + env(safe-area-inset-top)); padding-left:calc(1rem + env(safe-area-inset-left)); padding-right:calc(1rem + env(safe-area-inset-right)); }
.topbar-title { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.topbar .user-name { display:inline-block; max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; }
.footer { padding-bottom:calc(.75rem + env(safe-area-inset-bottom)); }
.pagination { flex-wrap:wrap; gap:.15rem; }
.perm-table { min-width:640px; }
.perm-table th:first-child, .perm-table td:first-child { position:sticky; left:0; background:#fff; z-index:1; min-width:200px; }
.perm-table thead th:first-child { background:var(--g-light); }
.perm-table tr.table-secondary td:first-child { background:#e2e3e5; }
.swal2-popup { max-width:92vw; }
.dropdown-menu { max-width:92vw; }

/* ແທັບເລັດ (768-991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .content { padding:1rem 1.25rem; }
  .btn-sm { padding:.4rem .75rem; }
}

/* ມືຖື (<768px) */
@media (max-width: 767.98px) {
  .content { padding:.75rem; }
  h4 { font-size:1.2rem; }
  .topbar { gap:.5rem; }
  .topbar .user-name { max-width:90px; }
  .stat-card .num { font-size:1.5rem; }
  .stat-card .bi.fs-1 { font-size:1.6rem !important; }
  .card-body { padding:.9rem; }

  /* ກັນ iOS ຊູມເອງເວລາແຕະຊ່ອງກອກ + ຂະໜາດແຕະໃຫ້ພໍດີ */
  .form-control, .form-select, .input-group-text { font-size:16px; min-height:44px; }
  .form-control-sm, .form-select-sm { font-size:16px; min-height:40px; }
  .btn { min-height:42px; }
  .btn-sm { min-height:38px; padding:.4rem .75rem; font-size:.9rem; }
  .form-check-input { width:1.25em; height:1.25em; }
  .d-flex.flex-wrap > .btn, .card-footer .btn { flex:1 1 auto; }

  /* ຕາຕະລາງ -> ການ໌ດ (ຍົກເວັ້ນ .no-stack) */
  .table-responsive { overflow-x:visible; }
  .card > .table-responsive { padding:.5rem; }
  table.table:not(.no-stack), table.table:not(.no-stack) tbody, table.table:not(.no-stack) tr, table.table:not(.no-stack) td { display:block; width:100%; }
  table.table:not(.no-stack) thead { display:none; }
  table.table:not(.no-stack) tbody tr { border:1px solid #dfe5df; border-radius:.6rem; margin-bottom:.65rem; padding:.35rem .75rem; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.04); }
  table.table:not(.no-stack) td { display:flex; justify-content:space-between; align-items:flex-start; gap:.75rem; border:0; border-bottom:1px dashed #e9edea; padding:.45rem 0; text-align:right; white-space:normal !important; min-width:0 !important; }
  table.table:not(.no-stack) td:last-child { border-bottom:0; }
  table.table:not(.no-stack) td[data-label]::before { content:attr(data-label); flex:0 0 38%; max-width:38%; text-align:left; font-weight:600; font-size:.8rem; color:#607d8b; }
  table.table:not(.no-stack) td:not([data-label]) { justify-content:flex-end; flex-wrap:wrap; }
  table.table:not(.no-stack) td[colspan] { justify-content:center; text-align:center; }
  table.table:not(.no-stack) td.text-end { text-align:right; }
  .table-hover > tbody > tr:hover > * { --bs-table-bg-state:transparent; }
  .timeline li { padding-left:40px; }
}

/* ມືຖືນ້ອຍ (<576px) */
@media (max-width: 575.98px) {
  .login-wrap { padding:.75rem; }
  .login-card .card-body { padding:1.25rem !important; }
  .topbar-title { font-size:.9rem; }
}

/* ໜ້າຈໍແນວນອນຂອງມືຖື: ບໍ່ໃຫ້ການ໌ດ login ສູງເກີນຈໍ */
@media (max-height: 520px) and (orientation: landscape) {
  .login-wrap { align-items:flex-start; }
}

/* ອຸປະກອນແຕະ: ເພີ່ມພື້ນທີ່ແຕະ ແລະ ເອົາ hover ທີ່ບໍ່ຈຳເປັນອອກ */
@media (pointer: coarse) {
  .dropdown-item { padding-top:.6rem; padding-bottom:.6rem; }
  .page-link { padding:.45rem .8rem; }
}

/* ================= Landing page ================= */
body.lp { background:#fff; }
.lp-hero { position:relative; isolation:isolate; overflow:hidden; min-height:100vh; min-height:100svh; display:flex; flex-direction:column; color:#fff; background:linear-gradient(135deg,var(--g-dark),var(--g-main)); }
.lp-hero-bg { position:absolute; inset:0; z-index:-1; background-size:cover; background-position:center; background-repeat:no-repeat; }
.lp-nav, .lp-body, .lp-down { position:relative; z-index:1; }
.lp-nav { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding-top:calc(1rem + env(safe-area-inset-top)); padding-bottom:1rem; }
.lp-brand { display:flex; align-items:center; gap:.6rem; color:#fff; text-decoration:none; font-weight:700; min-width:0; }
.lp-brand span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lp-brand img { height:44px; width:auto; max-width:120px; object-fit:contain; background:rgba(255,255,255,.92); border-radius:.5rem; padding:3px; }
.lp-brand i { font-size:1.8rem; }
.lp-body { flex:1; display:flex; align-items:center; padding-top:1.5rem; padding-bottom:4rem; }
.lp-chip { display:inline-flex; align-items:center; gap:.4rem; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.3); padding:.3rem .8rem; border-radius:2rem; font-size:.85rem; margin-bottom:1rem; }
.lp-title { font-size:clamp(1.9rem,5vw,3.2rem); font-weight:700; line-height:1.3; margin-bottom:1rem; }
.lp-lead { font-size:clamp(1rem,2.2vw,1.2rem); opacity:.92; max-width:34rem; margin-bottom:1.5rem; }
.lp-track { box-shadow:0 12px 40px rgba(0,0,0,.28); border-radius:1rem; }
.lp-down { position:absolute; left:50%; bottom:1rem; transform:translateX(-50%); color:#fff; font-size:1.5rem; opacity:.8; text-decoration:none; animation:lpBounce 1.8s infinite; }
.lp-down:hover { color:#fff; opacity:1; }
.lp-section { padding:4rem 0; }
.lp-alt { background:var(--g-light); }
.lp-h2 { font-weight:700; color:var(--g-dark); font-size:clamp(1.4rem,3.5vw,2rem); }
.lp-feature { border:1px solid #e3ebe3; box-shadow:0 1px 3px rgba(0,0,0,.05); border-radius:.9rem; transition:transform .2s, box-shadow .2s; }
.lp-feature:hover { transform:translateY(-4px); box-shadow:0 10px 24px rgba(27,94,32,.15); }
.lp-icon { width:52px; height:52px; border-radius:.9rem; background:var(--g-light); color:var(--g-main); display:flex; align-items:center; justify-content:center; font-size:1.6rem; margin-bottom:1rem; }
.lp-step { width:56px; height:56px; margin:0 auto; border-radius:50%; background:var(--g-main); color:#fff; font-size:1.5rem; font-weight:700; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 8px rgba(46,125,50,.15); }
/* ວິທີການເຮັດວຽກ: ເອັບເຟັກ hover / focus */
.lp-how { position:relative; height:100%; background:#fff; border:1px solid #e3ebe3; border-radius:1rem; padding:1.75rem 1.25rem; box-shadow:0 1px 3px rgba(0,0,0,.05); overflow:hidden; cursor:default; outline:none; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.lp-how::before { content:""; position:absolute; left:0; right:0; top:0; height:4px; background:linear-gradient(90deg,var(--g-main),#d4a72c); transform:scaleX(0); transform-origin:left; transition:transform .35s ease; }
.lp-how .lp-step { transition:transform .35s cubic-bezier(.34,1.56,.64,1), background-color .25s, color .25s, box-shadow .35s; }
.lp-how .lp-how-title { transition:color .25s; }
.lp-how:hover, .lp-how:focus-visible { transform:translateY(-8px); border-color:#d4a72c; box-shadow:0 16px 32px rgba(27,94,32,.18); }
.lp-how:hover::before, .lp-how:focus-visible::before { transform:scaleX(1); }
.lp-how:hover .lp-step, .lp-how:focus-visible .lp-step { transform:scale(1.15) rotate(360deg); background:#d4a72c; color:#0d3d12; box-shadow:0 0 0 12px rgba(212,167,44,.22); }
.lp-how:hover .lp-how-title, .lp-how:focus-visible .lp-how-title { color:var(--g-main); }
.lp-footer { background:var(--g-dark); color:rgba(255,255,255,.85); padding:1.25rem 0 calc(1.25rem + env(safe-area-inset-bottom)); font-size:.9rem; }
html { scroll-behavior:smooth; }
.lp-fade { animation:lpFade .7s ease both; }
.lp-fade-2 { animation-delay:.15s; }
@keyframes lpFade { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
@keyframes lpBounce { 0%,100% { transform:translate(-50%,0); } 50% { transform:translate(-50%,6px); } }
/* ເມນູ Landing: ແຖບສີຂຽວເຂັ້ມ + ເສັ້ນທອງ */
.lp-topbar { position:sticky; top:0; z-index:50; background:#0d3d12; border-bottom:3px solid #d4a72c; box-shadow:0 2px 8px rgba(0,0,0,.25); }
.lp-topbar .lp-nav { padding-top:calc(.6rem + env(safe-area-inset-top)); padding-bottom:.6rem; }
.lp-hero { min-height:calc(100vh - 70px); min-height:calc(100svh - 70px); }
.lp-brand { gap:.7rem; }
.lp-brand-ico { width:44px; height:44px; border-radius:.75rem; background:#d4a72c; color:#0d3d12; display:flex; align-items:center; justify-content:center; font-size:1.5rem; flex-shrink:0; }
.lp-brand-txt { display:flex; flex-direction:column; line-height:1.15; min-width:0; }
.lp-brand-txt b { font-size:1.3rem; color:#f1c64a; overflow:hidden; text-overflow:ellipsis; }
.lp-brand-txt small { font-size:.62rem; letter-spacing:.3em; color:rgba(255,255,255,.7); font-weight:400; }
.lp-nav .lp-menu { flex:1; justify-content:space-between; margin-left:2rem; }
.lp-nav .lp-links { margin:0 auto; gap:1.75rem; }
.lp-links a { font-weight:600; }
.lp-links a:hover, .lp-links a:focus-visible { color:#f1c64a; border-bottom-color:#f1c64a; }
.btn-gold { background:#d4a72c; border-color:#d4a72c; color:#0d3d12; font-weight:700; }
.btn-gold:hover, .btn-gold:focus { background:#f1c64a; border-color:#f1c64a; color:#0d3d12; }

.lp-nav { flex-wrap:wrap; }
.lp-menu { display:flex; align-items:center; gap:1.25rem; }
.lp-links { list-style:none; margin:0; padding:0; display:flex; gap:1.25rem; }
.lp-links a { color:rgba(255,255,255,.9); text-decoration:none; font-size:.95rem; padding:.25rem 0; border-bottom:2px solid transparent; transition:border-color .15s; }
.lp-links a:hover, .lp-links a:focus-visible { color:#fff; border-bottom-color:#fff; }
.lp-toggle { display:none; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.35); color:#fff; border-radius:.5rem; padding:.2rem .6rem; font-size:1.5rem; line-height:1.2; }
.hero-preview { min-height:180px; border-radius:.75rem; color:#fff; display:flex; align-items:flex-end; padding:1rem; background:linear-gradient(135deg,var(--g-dark),var(--g-main)); background-size:cover; background-position:center; }
@media (max-width: 767.98px) {
  .lp-toggle { display:inline-flex; }
  .lp-nav .lp-menu { display:none; flex-basis:100%; flex-direction:column; align-items:stretch; gap:.75rem; background:rgba(255,255,255,.07); border-radius:.75rem; padding:1rem; margin:.5rem 0 0; }
  .lp-nav .lp-links { margin:0; }
  .lp-nav.open .lp-menu { display:flex; }
  .lp-toggle { border-color:#d4a72c; color:#f1c64a; background:transparent; }
  .lp-links { flex-direction:column; gap:.25rem; }
  .lp-links a { display:block; padding:.5rem 0; border-bottom:0; }
}

/* ===== Landing: ສ່ວນເພີ່ມເຕີມ ===== */
.lp-hero .lp-track { color:#212529; }
.lp-strip { background:#fff; padding:1.5rem 0; border-bottom:1px solid #e3ebe3; }
.lp-hl { display:flex; align-items:center; gap:.75rem; padding:.5rem .25rem; }
.lp-hl > i { flex-shrink:0; width:46px; height:46px; border-radius:.8rem; background:var(--g-light); color:var(--g-main); display:flex; align-items:center; justify-content:center; font-size:1.4rem; transition:background-color .25s, color .25s, transform .25s; }
.lp-hl:hover > i { background:var(--g-main); color:#fff; transform:scale(1.08); }
.lp-hl b { display:block; line-height:1.25; color:var(--g-dark); }
.lp-hl small { display:block; color:#6c757d; line-height:1.3; }
.lp-role { background:#fff; border:1px solid #e3ebe3; border-radius:1rem; padding:1.5rem 1.25rem; box-shadow:0 1px 3px rgba(0,0,0,.05); transition:transform .25s, box-shadow .25s, border-color .25s; }
.lp-role:hover { transform:translateY(-6px); border-color:#d4a72c; box-shadow:0 14px 28px rgba(27,94,32,.15); }
.lp-role:hover .lp-icon { background:var(--g-main); color:#fff; }
.lp-role .lp-icon { transition:background-color .25s, color .25s; }
.lp-faq details { background:#fff; border:1px solid #e3ebe3; border-radius:.8rem; margin-bottom:.75rem; overflow:hidden; transition:box-shadow .2s, border-color .2s; }
.lp-faq details:hover { border-color:#b9d3bb; }
.lp-faq details[open] { border-color:var(--g-main); box-shadow:0 6px 18px rgba(27,94,32,.1); }
.lp-faq summary { cursor:pointer; list-style:none; padding:1rem 3rem 1rem 1.1rem; font-weight:600; color:var(--g-dark); position:relative; }
.lp-faq summary::-webkit-details-marker { display:none; }
.lp-faq summary::after { content:"\F282"; font-family:"bootstrap-icons"; position:absolute; right:1.1rem; top:50%; transform:translateY(-50%); transition:transform .25s; color:var(--g-main); }
.lp-faq details[open] summary::after { transform:translateY(-50%) rotate(180deg); }
.lp-faq details p { margin:0; padding:0 1.1rem 1.1rem; color:#555; }
.lp-cta { background:linear-gradient(135deg,#0d3d12,var(--g-main)); color:#fff; padding:3.5rem 0; border-top:3px solid #d4a72c; }
.lp-cta-h { font-weight:700; font-size:clamp(1.4rem,3.5vw,2rem); }
.lp-cta-p { opacity:.9; margin-bottom:1.5rem; }
.lp-footer { padding-top:2.5rem; }
.lp-footer a { color:rgba(255,255,255,.85); text-decoration:none; }
.lp-footer a:hover { color:#f1c64a; }
.lp-footer h6 { color:#f1c64a; font-weight:700; margin-bottom:.75rem; }
.lp-footer li { margin-bottom:.4rem; }
.lp-footer li > i { color:#f1c64a; margin-right:.25rem; }
.lp-foot-brand { display:flex; align-items:center; gap:.7rem; font-size:1.15rem; color:#f1c64a; }
.lp-foot-brand img { height:40px; width:auto; }
.lp-foot-brand .lp-brand-ico { width:40px; height:40px; font-size:1.3rem; }
.lp-foot-copy { margin-top:1.75rem; padding-top:1rem; border-top:1px solid rgba(255,255,255,.15); text-align:center; font-size:.85rem; opacity:.85; }
.lp-links a.active { color:#f1c64a; border-bottom-color:#f1c64a; }
.lp-totop { position:fixed; right:1rem; bottom:calc(1rem + env(safe-area-inset-bottom)); width:44px; height:44px; border-radius:50%; background:#d4a72c; color:#0d3d12 !important; display:flex; align-items:center; justify-content:center; font-size:1.25rem; box-shadow:0 4px 14px rgba(0,0,0,.3); opacity:0; visibility:hidden; transform:translateY(12px); transition:opacity .25s, transform .25s, visibility .25s, background-color .2s; z-index:60; text-decoration:none; }
.lp-totop.show { opacity:1; visibility:visible; transform:none; }
.lp-totop:hover { background:#f1c64a; }
.js .lp-reveal { opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; }
.js .lp-reveal.in { opacity:1; transform:none; }
/* ຮັກສາ hover + transition ຂອງກາດ ເມື່ອ reveal ແລ້ວ */
.js .lp-how.lp-reveal, .js .lp-feature.lp-reveal, .js .lp-role.lp-reveal { transition:opacity .6s ease, transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.js .lp-how.lp-reveal.in:hover, .js .lp-how.lp-reveal.in:focus-visible { transform:translateY(-8px); }
.js .lp-feature.lp-reveal.in:hover { transform:translateY(-4px); }
.js .lp-role.lp-reveal.in:hover { transform:translateY(-6px); }
@media (max-width: 991.98px) { .lp-hero .lp-track { margin-top:.5rem; } }
@media (prefers-reduced-motion: reduce) {
  .js .lp-reveal { opacity:1; transform:none; transition:none; }
  .lp-totop, .lp-role, .lp-hl > i { transition:none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .lp-fade, .lp-down { animation:none; }
  .lp-feature { transition:none; }
  .lp-how, .lp-how::before, .lp-how .lp-step, .lp-how .lp-how-title { transition:none; }
  .lp-how:hover, .lp-how:focus-visible { transform:none; }
  .lp-how:hover .lp-step, .lp-how:focus-visible .lp-step { transform:none; }
}
@media (max-width: 575.98px) {
  .lp-section { padding:2.5rem 0; }
  .lp-body { padding-bottom:3.5rem; }
  .lp-brand img { height:34px; }
}

/* ===== ປຸ່ມປ່ຽນພາສາ (ລາວ / EN / VI) ===== */
.lang-sw { display:inline-flex; border:1px solid rgba(255,255,255,.5); border-radius:.45rem; overflow:hidden; flex-shrink:0; }
.lang-sw a { padding:.2rem .6rem; font-size:.8rem; font-weight:600; line-height:1.4; color:#fff; text-decoration:none; }
.lang-sw a + a { border-left:1px solid rgba(255,255,255,.35); }
.lang-sw a:hover, .lang-sw a:focus-visible { background:rgba(255,255,255,.18); }
.lang-sw a.active { background:#d4a72c; color:#0d3d12; }
.lang-sw.dark { border-color:#b9c9bb; }
.lang-sw.dark a { color:#2e7d32; }
.lang-sw.dark a + a { border-left-color:#d5dfd6; }
.lang-sw.dark a:hover { background:#eef5ee; }
.lang-sw.dark a.active { background:#2e7d32; color:#fff; }
.lang-fixed { position:fixed; top:calc(.75rem + env(safe-area-inset-top)); right:calc(.75rem + env(safe-area-inset-right)); z-index:200; background:rgba(13,61,18,.55); }

/* ================= Login ແບບ 2 ຄໍລຳ (ຮູບພື້ນຫຼັງຊ້າຍ + ຟອມຂວາ) ================= */
.auth-split { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); min-height:100vh; min-height:100dvh; background:#fff; }
.auth-hero { position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; padding:2rem 3rem 3rem; color:#fff; background:linear-gradient(135deg,var(--g-dark),var(--g-main)); background-size:cover; background-position:center; background-repeat:no-repeat; }
.auth-hero-shade { position:absolute; inset:0; z-index:0; pointer-events:none; background:linear-gradient(180deg,rgba(13,61,18,.35) 0%,rgba(13,61,18,.25) 40%,rgba(13,61,18,.85) 100%); }
.auth-hero > *:not(canvas):not(.auth-hero-shade) { position:relative; z-index:1; }
.auth-hero-top { display:flex; flex-direction:column; align-items:flex-start; gap:.6rem; font-weight:700; font-size:1.1rem; }
.auth-chip { display:inline-flex; align-items:center; justify-content:center; width:4.5rem; height:4.5rem; border-radius:1rem; background:#fff; color:var(--g-main); font-size:2.2rem; overflow:hidden; flex-shrink:0; }
.auth-chip img { max-width:85%; max-height:85%; object-fit:contain; }
.auth-chip-sm { width:2.2rem; height:2.2rem; background:var(--g-main); color:#fff; font-size:1.2rem; }
.auth-chip-sm img { max-width:100%; max-height:100%; width:100%; height:100%; object-fit:cover; background:#fff; }
.auth-pill { display:inline-block; padding:.25rem .85rem; border:1px solid rgba(255,255,255,.5); border-radius:999px; background:rgba(0,0,0,.25); font-size:.8rem; font-weight:600; margin-bottom:1rem; }
.auth-hero-bottom h2 { font-size:clamp(1.8rem,3.2vw,2.8rem); font-weight:700; line-height:1.3; margin:0; text-shadow:0 2px 12px rgba(0,0,0,.35); }
.auth-panel { position:relative; display:flex; align-items:center; justify-content:center; padding:2rem 1.5rem; }
.auth-box { width:100%; max-width:400px; }
.auth-brand { display:flex; flex-direction:column; align-items:flex-start; gap:.75rem; font-weight:700; font-size:1.1rem; color:#212529; margin-bottom:2rem; }
.auth-logo { height:96px; width:auto; max-width:100%; object-fit:contain; }
.auth-logo-icon { font-size:4.5rem; line-height:1; color:var(--g-main); }
.auth-title { font-size:1.6rem; font-weight:700; margin:0 0 .25rem; color:#212529; }
.auth-sub { color:#6c757d; font-size:.9rem; margin-bottom:1.5rem; }
.auth-box .form-control { background:#eaf0fb; border-color:#dde5f3; }
.auth-box .form-control:focus { background:#eaf0fb; border-color:var(--g-main); box-shadow:0 0 0 .2rem rgba(46,125,50,.2); }
.auth-eye { position:absolute; top:0; right:0; height:100%; width:3rem; border:0; background:transparent; color:#6c757d; }
.auth-eye:hover { color:var(--g-main); }
.auth-box a { color:var(--g-main); text-decoration:none; }
.auth-box a:hover { text-decoration:underline; }
.auth-lang { position:absolute; z-index:5; top:calc(1rem + env(safe-area-inset-top)); right:1rem; }
@media (max-width: 991.98px) {
  .auth-split { display:flex; flex-direction:column; position:relative; }
  .auth-hero { flex:0 0 auto; min-height:clamp(230px,36vh,340px); padding:calc(1.1rem + env(safe-area-inset-top)) 1.5rem 3.25rem; }
  .auth-hero-name { display:none; }
  .auth-chip { width:3.75rem; height:3.75rem; }
  .auth-hero-bottom h2 { font-size:clamp(1.35rem,5.5vw,1.9rem); }
  .auth-hero-bottom .auth-pill { margin-bottom:.6rem; }
  .auth-panel { flex:1 1 auto; align-items:flex-start; position:relative; z-index:2; margin-top:-1.75rem; background:#fff; border-radius:1.75rem 1.75rem 0 0; box-shadow:0 -8px 24px rgba(0,0,0,.18); padding:2rem 1.5rem calc(2rem + env(safe-area-inset-bottom)); }
  .auth-brand { display:none; }
  .auth-title { font-size:1.45rem; }
  .auth-lang { background:rgba(13,61,18,.45); border-color:rgba(255,255,255,.55); }
  .auth-lang a, .auth-lang a:hover { color:#fff; }
  .auth-lang a + a { border-left-color:rgba(255,255,255,.35); }
  .auth-lang a.active { background:#d4a72c; color:#0d3d12; }
}
@media (max-width: 991.98px) and (max-height: 560px) and (orientation: landscape) {
  .auth-hero { display:none; }
  .auth-panel { margin-top:0; border-radius:0; box-shadow:none; padding-top:3.5rem; }
  .auth-lang { background:transparent; border-color:#b9c9bb; }
  .auth-lang a, .auth-lang a:hover { color:#2e7d32; }
  .auth-lang a + a { border-left-color:#d5dfd6; }
  .auth-lang a.active { background:#2e7d32; color:#fff; }
}