/* HUMAN HEALTH (@BANGKOK) — GUI กลางของแอพ (header / footer / หน้าแรก / ปรับหน้าเดิมให้เป็นชุดเดียวกัน) */
:root{
  --hl-green:#0f6b45;--hl-green-deep:#0a4a30;--hl-green-mid:#1f8a5b;--hl-green-tint:#e6f3ec;--hl-mint:#f1f8f4;
  --hl-gold:#c8963e;--hl-gold-tint:#f8efd9;--hl-ink:#14261c;--hl-ink-soft:#495b50;--hl-ink-faint:#86948b;
  --hl-rule:#d7e3da;--hl-paper:#f6f9f7;--hl-card:#fff;--hl-red:#b23a2a;--hl-amber:#c78a07;--hl-blue:#2c6b9a;
  --hl-r:16px;--hl-shadow:0 2px 10px rgba(10,74,48,.07);--hl-shadow-lg:0 16px 36px rgba(10,74,48,.15);
}
html{scroll-behavior:smooth}
body.hl{font-family:'Sarabun','Noto Sans Thai',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--hl-ink);background:var(--hl-paper);font-size:16px;line-height:1.6;padding-top:0!important}
body.hl a{color:var(--hl-green)}
body.hl h1,body.hl h2,body.hl h3,body.hl h4,body.hl h5{font-family:inherit;color:var(--hl-green-deep);font-weight:700;line-height:1.3}

/* ---------- header ---------- */
.hl-top{position:sticky;top:0;z-index:1030;background:#fff;border-bottom:3px solid var(--hl-gold);box-shadow:0 2px 14px rgba(10,74,48,.10)}
.hl-bar{max-width:1240px;margin:0 auto;padding:8px 20px;display:flex;align-items:center;gap:18px;position:relative}
.hl-brand{display:flex;align-items:center;gap:12px;text-decoration:none!important;color:var(--hl-green-deep)!important;min-width:0}
.hl-brand img{height:44px;width:auto;display:block}
.hl-brand-t{display:flex;flex-direction:column;line-height:1.15;border-left:1px solid var(--hl-rule);padding-left:12px}
.hl-brand-t b{font-size:17px;font-weight:700;color:var(--hl-green-deep)}
.hl-brand-t small{font-size:11px;letter-spacing:.12em;color:var(--hl-ink-faint);text-transform:uppercase}
.hl-nav-toggle{display:none}
.hl-burger{display:none;margin-left:auto;font-size:26px;line-height:1;cursor:pointer;padding:6px 10px;border:1px solid var(--hl-rule);border-radius:10px;color:var(--hl-green-deep)}
.hl-nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.hl-nav>a,.hl-dd>summary{display:block;padding:9px 14px;border-radius:10px;text-decoration:none!important;color:var(--hl-ink)!important;font-weight:600;font-size:15px;cursor:pointer;list-style:none;white-space:nowrap}
.hl-dd>summary::-webkit-details-marker{display:none}
.hl-dd>summary::after{content:"▾";margin-left:6px;font-size:11px;color:var(--hl-ink-faint)}
.hl-nav>a:hover,.hl-dd>summary:hover,.hl-nav>a.on,.hl-dd.on>summary{background:var(--hl-green-tint);color:var(--hl-green-deep)!important}
.hl-dd{position:relative}
.hl-dd-m{position:absolute;right:0;top:calc(100% + 6px);min-width:260px;background:#fff;border:1px solid var(--hl-rule);border-top:3px solid var(--hl-gold);border-radius:12px;box-shadow:var(--hl-shadow-lg);padding:8px;z-index:5}
.hl-dd-m a{display:block;padding:10px 12px;border-radius:8px;text-decoration:none!important;color:var(--hl-ink)!important;font-size:14.5px;font-weight:500}
.hl-dd-m a:hover{background:var(--hl-mint);color:var(--hl-green-deep)!important}
.hl-nav>a.hl-login,.hl-login{background:var(--hl-green);color:#fff!important;padding:9px 18px!important;box-shadow:0 4px 12px rgba(15,107,69,.28)}
.hl-nav>a.hl-login:hover{background:var(--hl-green-deep)!important;color:#fff!important}
.hl-user{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--hl-ink-soft);padding-left:6px}
.hl-user b{color:var(--hl-green-deep)}
.hl-user button{border:1px solid var(--hl-rule);background:#fff;border-radius:10px;padding:7px 12px;font-weight:600;color:var(--hl-ink);cursor:pointer}
.hl-user button:hover{background:var(--hl-mint)}
.hl-nav .langsw{margin:0 6px}

/* ---------- เนื้อหา / ท้ายหน้า ---------- */
.hl-main{min-height:calc(100vh - 260px)}
.hl-main>.container{max-width:1240px;padding-top:22px;padding-bottom:40px}
.hl-foot{background:linear-gradient(135deg,#0a4a30,#0f6b45);color:#d6eadf;margin-top:30px}
.hl-foot-in{max-width:1240px;margin:0 auto;padding:22px 20px;display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;font-size:14px}
.hl-foot a{color:#fff}
.hl-foot b{color:#fff}

/* ---------- หน้าแรก ---------- */
.hl-hero{position:relative;border-radius:24px;overflow:hidden;color:#fff;background:#0a4a30 center/cover no-repeat;box-shadow:var(--hl-shadow-lg);margin-bottom:26px}
.hl-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(7,52,33,.93) 0%,rgba(10,74,48,.80) 55%,rgba(15,107,69,.45) 100%)}
.hl-hero-in{position:relative;padding:54px 46px 46px;max-width:780px}
.hl-eyebrow{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:#f3d89b;font-weight:700;margin:0 0 8px}
body.hl .hl-hero h1{color:#fff;font-size:clamp(28px,4vw,44px);margin:0 0 8px}
.hl-hero p.hl-vision{font-size:clamp(17px,2vw,22px);margin:0 0 22px;color:#e6f3ec}
.hl-cta{display:flex;flex-wrap:wrap;gap:12px}
.hl-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:99px;font-weight:700;text-decoration:none!important;border:2px solid transparent;transition:transform .12s,box-shadow .15s,background .15s}
.hl-btn:hover{transform:translateY(-1px)}
.hl-btn.gold{background:var(--hl-gold);color:#241a05!important;box-shadow:0 8px 20px rgba(200,150,62,.4)}
.hl-btn.gold:hover{background:#d8a64e}
.hl-btn.ghost{background:rgba(255,255,255,.1);color:#fff!important;border-color:rgba(255,255,255,.55)}
.hl-btn.ghost:hover{background:rgba(255,255,255,.2)}
.hl-btn.green{background:var(--hl-green);color:#fff!important}
.hl-quick{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:-40px 24px 28px;position:relative;z-index:2}
.hl-q{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid var(--hl-rule);border-radius:var(--hl-r);padding:16px 18px;text-decoration:none!important;color:var(--hl-ink)!important;box-shadow:var(--hl-shadow-lg);transition:transform .15s}
.hl-q:hover{transform:translateY(-3px)}
.hl-q-n{flex:none;width:42px;height:42px;border-radius:12px;background:var(--hl-green-tint);color:var(--hl-green);display:grid;place-items:center;font-weight:800;font-size:19px}
.hl-q b{display:block;color:var(--hl-green-deep);font-size:16px;line-height:1.3}
.hl-q span{font-size:13px;color:var(--hl-ink-soft)}
.hl-sec{margin:34px 0 14px}
.hl-sec h2{font-size:clamp(22px,2.6vw,28px);margin:0}
.hl-sec h2::after{content:"";display:block;width:52px;height:3px;background:var(--hl-gold);border-radius:2px;margin-top:8px}
.hl-sec p{margin:8px 0 0;color:var(--hl-ink-soft)}
.hl-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.hl-kpi{background:#fff;border:1px solid var(--hl-rule);border-left:4px solid var(--hl-gold);border-radius:var(--hl-r);padding:16px 18px;box-shadow:var(--hl-shadow)}
.hl-kpi b{display:block;font-size:28px;line-height:1.15;color:var(--hl-green-deep);font-variant-numeric:tabular-nums}
.hl-kpi span{font-size:13.5px;color:var(--hl-ink-soft)}
.hl-res{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.hl-resc{background:#fff;border:1px solid var(--hl-rule);border-top:4px solid var(--hl-green);border-radius:var(--hl-r);padding:16px 18px;box-shadow:var(--hl-shadow)}
.hl-resc h3{font-size:16px;margin:0 0 8px;line-height:1.4}
.hl-resc .m{display:flex;justify-content:space-between;font-size:13px;color:var(--hl-ink-soft);margin-top:6px}
.hl-bar2{height:9px;border-radius:99px;background:#e6ece8;overflow:hidden}
.hl-bar2 i{display:block;height:100%;background:linear-gradient(90deg,var(--hl-green),var(--hl-green-mid));border-radius:99px}
.hl-filter{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 16px;background:#fff;border:1px solid var(--hl-rule);border-radius:var(--hl-r);padding:12px;box-shadow:var(--hl-shadow)}
.hl-filter input,.hl-filter select{border:2px solid var(--hl-rule);border-radius:12px;padding:9px 12px;font-size:15px;background:#fff;color:var(--hl-ink);min-width:0}
.hl-filter input{flex:1 1 240px}
.hl-filter input:focus,.hl-filter select:focus{outline:0;border-color:var(--hl-green);box-shadow:0 0 0 3px rgba(15,107,69,.15)}
.hl-count{margin-left:auto;align-self:center;font-size:14px;color:var(--hl-ink-soft)}
.hl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.hl-pc{display:flex;flex-direction:column;gap:9px;background:#fff;border:1px solid var(--hl-rule);border-radius:var(--hl-r);padding:16px 18px;text-decoration:none!important;color:var(--hl-ink)!important;box-shadow:var(--hl-shadow);transition:box-shadow .15s,transform .15s}
.hl-pc:hover{box-shadow:var(--hl-shadow-lg);transform:translateY(-3px)}
.hl-pc-h{display:flex;gap:12px;align-items:flex-start}
.hl-pc-h img{flex:none;width:44px;height:44px;object-fit:contain;border-radius:10px;border:1px solid var(--hl-rule);background:#fff;padding:3px}
.hl-pc-t{font-weight:700;font-size:15.5px;line-height:1.4;color:var(--hl-green-deep);overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.hl-pc-r{font-size:12.5px;color:var(--hl-ink-soft);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.hl-pc-f{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13px;color:var(--hl-ink-soft);margin-top:auto}
.hl-chip{display:inline-block;padding:3px 10px;border-radius:99px;font-size:12px;font-weight:700;background:var(--hl-mint);color:var(--hl-green-deep)}
.hl-chip.s-done{background:#dff1e6;color:#0f6b45}.hl-chip.s-doing{background:#fdf1d3;color:#8a5f00}.hl-chip.s-todo{background:#eceeec;color:#57635b}.hl-chip.s-hold{background:#e1ecf6;color:#2c6b9a}.hl-chip.s-stop{background:#f7dfdb;color:#b23a2a}
.hl-empty{display:none;text-align:center;padding:30px;color:var(--hl-ink-soft);background:#fff;border:1px dashed var(--hl-rule);border-radius:var(--hl-r)}
.hl-res2{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.hl-lk{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--hl-rule);border-radius:var(--hl-r);padding:14px 16px;text-decoration:none!important;color:var(--hl-ink)!important;box-shadow:var(--hl-shadow)}
.hl-lk:hover{box-shadow:var(--hl-shadow-lg)}
.hl-lk i{font-style:normal;font-size:24px}
.hl-lk b{display:block;color:var(--hl-green-deep);font-size:15px}.hl-lk span{font-size:12.5px;color:var(--hl-ink-soft)}
.hl-st9{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}
.hl-sc{background:#fff;border:1px solid var(--hl-rule);border-top:4px solid var(--hl-gold);border-radius:var(--hl-r);padding:14px 16px;box-shadow:var(--hl-shadow);display:flex;flex-direction:column;gap:8px}
.hl-sc-h{display:flex;gap:12px;align-items:center}
.hl-sc-h img{width:46px;height:46px;object-fit:contain;border:1px solid var(--hl-rule);border-radius:12px;padding:3px;background:#fff}
.hl-sc-h b{display:block;font-size:15.5px;color:var(--hl-green-deep);line-height:1.3}.hl-sc-h small{color:var(--hl-ink-soft)}
.hl-sc .m{display:flex;justify-content:space-between;font-size:13px;color:var(--hl-ink-soft)}

/* ---------- ปรับหน้าเดิม (Bootstrap เก่า / kartik) ให้เป็นชุดเดียวกัน ---------- */
body.hl .glyphicon{display:none}
body.hl .alert{border:1px solid var(--hl-rule);border-left:5px solid var(--hl-green);border-radius:12px;background:#fff;color:var(--hl-ink);box-shadow:var(--hl-shadow)}
body.hl .alert-info,body.hl .alert-primary{border-left-color:var(--hl-blue);background:#f2f8fc}
body.hl .alert-warning{border-left-color:var(--hl-amber);background:#fffaf0}
body.hl .alert-danger{border-left-color:var(--hl-red);background:#fff5f3}
body.hl .alert-success{border-left-color:var(--hl-green);background:#f3faf6}
body.hl .panel{background:#fff;border:1px solid var(--hl-rule);border-radius:var(--hl-r);box-shadow:var(--hl-shadow);margin-bottom:18px;overflow:hidden}
body.hl .panel-heading{padding:12px 18px;background:var(--hl-green-tint);border-bottom:1px solid var(--hl-rule)}
body.hl .panel-title{margin:0;font-size:17px;color:var(--hl-green-deep)}
body.hl .panel-body{padding:18px}
body.hl .card{border:1px solid var(--hl-rule);border-radius:var(--hl-r);box-shadow:var(--hl-shadow);overflow:hidden}
body.hl .card-img{max-width:100%;border-radius:12px}
body.hl .jumbotron{padding:20px 0}
body.hl .btn{border-radius:12px;font-weight:600}
body.hl .btn-primary,body.hl .btn-success{background:var(--hl-green);border-color:var(--hl-green);color:#fff}
body.hl .btn-primary:hover,body.hl .btn-success:hover{background:var(--hl-green-deep);border-color:var(--hl-green-deep)}
body.hl .btn-outline-primary{color:var(--hl-green);border-color:var(--hl-green)}
body.hl .btn-warning{background:var(--hl-gold);border-color:var(--hl-gold);color:#241a05}
body.hl .btn-danger{background:var(--hl-red);border-color:var(--hl-red)}
body.hl .btn-info{background:var(--hl-blue);border-color:var(--hl-blue);color:#fff}
body.hl .form-control,body.hl .form-select{border:2px solid var(--hl-rule);border-radius:12px;min-height:42px}
body.hl .form-control:focus,body.hl .form-select:focus{border-color:var(--hl-green);box-shadow:0 0 0 3px rgba(15,107,69,.15)}
body.hl .table{background:#fff;border-radius:12px;overflow:hidden}
body.hl .table thead th,body.hl .kv-grid-table thead th{background:var(--hl-green-tint);color:var(--hl-green-deep);border-bottom:2px solid var(--hl-green);font-weight:700;vertical-align:middle}
body.hl .table-hover tbody tr:hover{background:var(--hl-mint)}
body.hl .grid-view,body.hl .kv-grid-container{border-radius:12px}
body.hl .table-bordered td,body.hl .table-bordered th{border-color:var(--hl-rule)}
body.hl .progress{height:18px;border-radius:99px;background:#e6ece8;overflow:hidden}
body.hl .progress-bar{background:linear-gradient(90deg,var(--hl-green),var(--hl-green-mid));font-weight:700;font-size:12px}
body.hl .page-link{color:var(--hl-green);border-radius:8px;margin:0 2px;border-color:var(--hl-rule)}
body.hl .page-item.active .page-link{background:var(--hl-green);border-color:var(--hl-green);color:#fff}
body.hl .breadcrumb{background:transparent;padding:0;margin-bottom:12px}
body.hl .site-login{margin-top:0}
body.hl .badge{border-radius:99px}

/* ---------- มือถือ ---------- */
@media(max-width:991px){
  .hl-burger{display:block}
  .hl-nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:3px solid var(--hl-gold);box-shadow:0 12px 24px rgba(10,74,48,.15);flex-direction:column;align-items:stretch;gap:2px;padding:10px 16px 16px;margin:0}
  .hl-nav-toggle:checked~.hl-nav{display:flex}
  .hl-dd-m{position:static;box-shadow:none;border:0;border-left:3px solid var(--hl-gold);border-radius:0;padding:2px 0 2px 8px;margin-left:10px}
  .hl-nav .langsw{align-self:flex-start;margin:6px 0}
  .hl-quick{grid-template-columns:1fr;margin:-26px 12px 22px}
  .hl-kpis{grid-template-columns:repeat(2,1fr)}
  .hl-hero-in{padding:34px 24px 40px}
  .hl-brand-t small{display:none}
}
@media(max-width:560px){.hl-brand-t b{font-size:15px}.hl-brand img{height:38px}}
@media print{.hl-top,.hl-foot,.langsw{display:none!important}}

/* ---------- ตารางความคืบหน้า (healthcomkr/index): มุมมอง Card / List / Table ---------- */
.hv-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;background:#fff;border:1px solid var(--hl-rule);border-radius:var(--hl-r);padding:12px;box-shadow:var(--hl-shadow)}
.hv-bar input,.hv-bar select{border:2px solid var(--hl-rule);border-radius:12px;padding:9px 12px;font-size:15px;background:#fff;color:var(--hl-ink);min-width:0}
.hv-bar input{flex:1 1 260px}.hv-bar select{flex:0 1 240px;max-width:100%}
.hv-bar input:focus,.hv-bar select:focus{outline:0;border-color:var(--hl-green);box-shadow:0 0 0 3px rgba(15,107,69,.15)}
.hv-switch{display:inline-flex;border:2px solid var(--hl-rule);border-radius:12px;overflow:hidden;margin-left:auto;background:#fff}
.hv-switch button{display:flex;align-items:center;gap:6px;border:0;background:transparent;padding:8px 14px;font-weight:600;font-size:14px;color:var(--hl-ink-soft);cursor:pointer}
.hv-switch button svg{width:16px;height:16px;fill:currentColor}
.hv-switch button[aria-pressed=true]{background:var(--hl-green);color:#fff}
.hv-switch button:not([aria-pressed=true]):hover{background:var(--hl-mint)}
.hv-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px 0 16px}
.hv-chips button{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--hl-rule);background:#fff;border-radius:99px;padding:6px 14px;font-size:13.5px;font-weight:600;color:var(--hl-ink-soft);cursor:pointer}
.hv-chips button.on{background:var(--hl-green-tint);border-color:var(--hl-green);color:var(--hl-green-deep)}
.hv-chips .d{width:10px;height:10px;border-radius:50%;display:inline-block}
.d.a{background:#1e8a44}.d.b{background:#2c8a9a}.d.c{background:#d9a400}.d.d2{background:#c0392b}
.hv-count{margin-left:auto;font-size:14px;color:var(--hl-ink-soft)}
.hv-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:16px}
.hv-card{display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid var(--hl-rule);border-top:4px solid var(--hl-green);border-radius:var(--hl-r);padding:16px 18px;text-decoration:none!important;color:var(--hl-ink)!important;box-shadow:var(--hl-shadow);transition:box-shadow .15s,transform .15s}
.hv-card:hover{box-shadow:var(--hl-shadow-lg);transform:translateY(-3px)}
.hv-tag{align-self:flex-start;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:var(--hl-gold-tint);color:#7a5a1f;border-radius:99px;padding:3px 12px;font-size:12px;font-weight:700}
.hv-t{font-weight:700;font-size:15.5px;line-height:1.45;color:var(--hl-green-deep);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hv-pr{display:flex;align-items:center;gap:10px}
.hv-pr b{flex:none;min-width:58px;text-align:right;font-variant-numeric:tabular-nums}
.hv-pb{flex:1;height:10px;border-radius:99px;background:#e6ece8;overflow:hidden;display:block}
.hv-pb i{display:block;height:100%;border-radius:99px;background:var(--hl-green)}
.hv-pb.l-a i{background:linear-gradient(90deg,#1e8a44,#38a85c)}.hv-pb.l-b i{background:linear-gradient(90deg,#2c8a9a,#3ba6b8)}.hv-pb.l-c i{background:linear-gradient(90deg,#d9a400,#f0bd2e)}.hv-pb.l-d i{background:linear-gradient(90deg,#c0392b,#e0584a)}
b.l-a{color:#1e8a44}b.l-b{color:#2c7f8d}b.l-c{color:#a67b00}b.l-d{color:#c0392b}
.hv-kv{display:flex;gap:18px;font-size:13.5px;color:var(--hl-ink)}
.hv-kv em,.hv-rv em{display:block;font-style:normal;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--hl-ink-faint)}
.hv-rv em{display:inline}
.hv-dept{font-size:13px;color:var(--hl-ink-soft);margin-top:auto;padding-top:8px;border-top:1px dashed var(--hl-rule)}
.hv-rows{display:flex;flex-direction:column;gap:10px}
.hv-row{display:grid;grid-template-columns:130px minmax(0,1fr) minmax(0,260px) 150px;gap:16px;align-items:center;background:#fff;border:1px solid var(--hl-rule);border-left:5px solid var(--hl-green);border-radius:14px;padding:12px 18px;text-decoration:none!important;color:var(--hl-ink)!important;box-shadow:var(--hl-shadow);transition:box-shadow .15s}
.hv-row:hover{box-shadow:var(--hl-shadow-lg)}
.hv-rp{display:flex;flex-direction:column;gap:5px}.hv-rp b{font-size:18px;font-variant-numeric:tabular-nums}
.hv-rm{display:flex;flex-direction:column;gap:2px;min-width:0}.hv-rm .hv-t{-webkit-line-clamp:2}
.hv-sub{font-size:12.5px;color:var(--hl-ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hv-rd{font-size:13.5px;color:var(--hl-ink-soft)}
.hv-rv{font-size:13px;line-height:1.7;text-align:right}
.hv-tw{overflow:auto;border:1px solid var(--hl-rule);border-radius:var(--hl-r);background:#fff;box-shadow:var(--hl-shadow)}
.hv-table{width:100%;border-collapse:collapse;font-size:14.5px}
.hv-table th{position:sticky;top:0;background:var(--hl-green-tint);color:var(--hl-green-deep);text-align:left;padding:11px 14px;border-bottom:2px solid var(--hl-green);white-space:nowrap;cursor:pointer;user-select:none;z-index:1}
.hv-table th:hover{background:#d3ead9}
.hv-table td{padding:10px 14px;border-bottom:1px solid var(--hl-rule);vertical-align:middle}
.hv-table tbody tr:hover{background:var(--hl-mint)}
.hv-table td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.hv-td-res{font-weight:700;color:#7a5a1f;max-width:260px}
.hv-td-pct{min-width:200px}
.hv-table a{font-weight:600;text-decoration:none}.hv-table a:hover{text-decoration:underline}
.hv-more{text-align:center;margin:18px 0 0}
@media(max-width:991px){.hv-row{grid-template-columns:100px minmax(0,1fr);}.hv-rd,.hv-rv{grid-column:2;text-align:left}.hv-switch{margin-left:0}}
@media(max-width:560px){.hv-switch button span{display:none}.hv-bar select{flex:1 1 100%}}
/* ---------- มุมมองข้อมูลทั่วไป (views/_shared/_viewer.php) ---------- */
.vw-card .hv-t{text-decoration:none}.vw-card .hv-t:hover,.vw-main .hv-t:hover{text-decoration:underline}
.vw-kv{display:flex;flex-direction:column;font-size:13.5px;line-height:1.5}
.vw-kv em,.vw-m em{font-style:normal;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--hl-ink-faint)}
.vw-long{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;color:var(--hl-ink-soft)}
.vw-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:10px;border-top:1px dashed var(--hl-rule)}
.vw-b{display:inline-block;border:1px solid var(--hl-rule);background:#fff;border-radius:10px;padding:5px 12px;font-size:13px;font-weight:600;color:var(--hl-green-deep)!important;text-decoration:none!important;cursor:pointer}
.vw-b:hover{background:var(--hl-mint);border-color:var(--hl-green)}
.vw-b.vw-go{background:var(--hl-green);border-color:var(--hl-green);color:#fff!important}.vw-b.vw-go:hover{background:var(--hl-green-deep)}
.vw-b.vw-del{color:var(--hl-red)!important}.vw-b.vw-del:hover{background:#fbe9e6;border-color:var(--hl-red)}
.vw-rows{display:flex;flex-direction:column;gap:10px}
.vw-row{display:grid;grid-template-columns:70px minmax(0,1fr) auto;gap:14px;align-items:center;background:#fff;border:1px solid var(--hl-rule);border-left:5px solid var(--hl-green);border-radius:14px;padding:12px 16px;box-shadow:var(--hl-shadow)}
.vw-row .vw-acts{margin:0;padding:0;border:0}
.vw-id{font-weight:800;color:var(--hl-green);font-variant-numeric:tabular-nums}
.vw-main{display:flex;flex-direction:column;gap:3px;min-width:0}.vw-meta{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:13px;color:var(--hl-ink-soft)}
.hv-table .vw-acts{margin:0;padding:0;border:0;flex-wrap:nowrap}.vw-th-a{cursor:default!important}
.vw-tdl{max-width:360px;color:var(--hl-ink-soft)}
@media(max-width:700px){.vw-row{grid-template-columns:1fr}.vw-id{display:none}}
.vw-kvs{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}.vw-kvl{grid-column:1/-1}