/* ========== Base (global) ========== */
*{box-sizing:border-box}
img{max-width:100%;height:auto;display:block}

:root{
  /* Brand */
  --apa-green:#1B5E20;
  --apa-gold:#f6ca3b;

  /* Tokens */
  --bg:#ffffff;
  --panel:rgba(27,94,32,.44);
  --panel2:rgba(27,94,32,.06);
  --panel3:rgba(0,0,0,.10);

  --border:rgba(0,0,0,.10);
  --border2:var(--apa-green);
  --border3:var(--apa-green);

  --text:#101418;
  --muted:#1B5E20;
  --link:#0b3d20;

  --pri1:var(--apa-gold);
  --pri2:var(--apa-green);

  --sb-open-w:240px; --sb-collapsed-w:64px;
  --topbar-h:64px; --topbar-b:1px;
  --container-w:1100px;

  --gap-2:.5rem; --gap-3:1rem;
  --radius:12px;
  --shadow:0 6px 18px var(--apa-green);

  --scroll-track:var(--apa-green);
  --scroll-thumb:var(--apa-gold);
  --scroll-thumb-hover:#6aa2ff;

  --control-h:44px;
}

body{margin:0;font-family:'Poppins',sans-serif;background:var(--bg);color:var(--text)}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}

/* ========== Buttons ========== */
.btn{
  display:inline-block;padding:.45rem .8rem;border-radius:.5rem;
  border:1px solid var(--border);background:transparent;color:var(--text);
  cursor:pointer;transition:.2s
}
.btn:hover{background:rgba(255,255,255,.04)}
.btn.primary{
  background:linear-gradient(90deg,var(--pri1),var(--pri2));
  border-color:transparent;color:#fff
}
.btn.ghost{background:transparent;color:#000;border:1px solid rgba(203,213,255,.3)}

/* ========== Forms / Inputs ========== */
.input,.form-control,.form-select{
  width:100%;height:var(--control-h);padding:0 12px;border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.03);
  color:var(--text);font-size:.9rem;line-height:1.25rem;outline:none
}
.input:focus,.form-control:focus,.form-select:focus{
  border-color:#4c84ff;box-shadow:0 0 0 .15rem rgba(76,132,255,.15)
}
.form-label{display:block;margin:0 0 .35rem .1rem;font-size:.9rem;color:var(--muted)}

/* Date input (unified) */
input[type="date"]{
  height:var(--control-h);line-height:var(--control-h);
  padding:0 10px 0 12px;appearance:none;
  border:1px solid var(--border);border-radius:12px;
  background:rgba(255,255,255,.03);color:var(--text);
  color-scheme:light;
}
input[type="date"]:focus{
  border-color:#4c84ff;box-shadow:0 0 0 .15rem rgba(76,132,255,.15)
}
input[type="date"]::-webkit-datetime-edit{padding:0}
input[type="date"]::-webkit-calendar-picker-indicator{
  width:20px;height:20px;margin-right:6px;opacity:1;cursor:pointer;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f6ca3b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") no-repeat center/15px 15px;
  filter:none;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover{
  filter:drop-shadow(0 0 2px rgba(255,255,255,.35))
}

/* ========== Layout ========== */
.content{padding:16px;transition:margin-left .25s ease}
.container{max-width:var(--container-w);margin:0 auto}
.row{display:flex;flex-wrap:wrap;gap:var(--gap-2)}
.col-12{flex:0 0 100%}
.col-6{flex:0 0 100%}
@media(min-width:576px){.col-6{flex:0 0 50%}}
.col-md-2{flex:0 0 100%}
@media(min-width:768px){.col-md-2{flex:0 0 16.6667%}}
.gap-2{gap:var(--gap-2)}
.mb-3{margin-bottom:var(--gap-3)}
.mb-4{margin-bottom:1.25rem}

/* ========== Cards ========== */
.card{
  border:1px solid rgba(27,94,32,.25);
  border-radius:18px;padding:20px;background:var(--panel2);
  box-shadow:var(--shadow)
}
.card-body{padding:0}

/* ========== Tables ========== */
.table-responsive{
  width:100%;overflow-x:auto;scrollbar-width:thin;
  scrollbar-color:var(--scroll-thumb) var(--scroll-track);
  scrollbar-gutter: stable;    /* ← เอา both-edges ออก */
}

.table-responsive::-webkit-scrollbar{height:10px}
.table-responsive::-webkit-scrollbar-track{
  background:var(--scroll-track);border-radius:999px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)
}
.table-responsive::-webkit-scrollbar-thumb{
  background:linear-gradient(90deg,var(--scroll-thumb),var(--scroll-thumb-hover));
  border-radius:999px;border:1px solid rgba(255,255,255,.18)
}
.table{width:100%;border-collapse:separate;border-spacing:0}
.table thead th{
  background:var(--border2);color:#fff;font-weight:600;border-bottom:none;text-align:center;white-space:nowrap
}
.table tbody td,.table tfoot th,.table tfoot td{
  border-top:1px solid var(--border);text-align:center;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;vertical-align:middle
}
.table-striped tbody tr:nth-child(odd){background-color:rgba(255,255,255,.02)}
.align-middle td,.align-middle th{vertical-align:middle}
.text-end{text-align:right}
.fw-semibold{font-weight:600}
.thead-clean th{color:#000000 !important;background:transparent !important}

/* ========== Topbar & Sidebar ========== */
.topbar{
  position: fixed;           /* เปลี่ยน sticky -> fixed */
  top: 0; left: 0; right: 0; /* ยึดเต็มความกว้างหน้าจอ */
  z-index: 130;

  display:flex;align-items:center;justify-content:space-between;
  height:var(--topbar-h);min-height:var(--topbar-h);
  padding:0 16px;
  background:var(--apa-green);isolation:isolate;
  border-bottom:var(--topbar-b) solid var(--border2);
  max-width:100vw;           /* กันล้นแนวนอน */
}

/* ดันเนื้อหาลงเท่าความสูงแถบ */
body{ padding-top: var(--topbar-h); }

body.sb-open .topbar{padding-left:calc(var(--sb-open-w) + 16px)}
body.sb-collapsed .topbar{padding-left:calc(var(--sb-collapsed-w) + 16px)}
.topbar::after{
  content:"";position:absolute;top:0;bottom:0;width:1px;background:var(--border2);
  left:var(--sb-open-w);transition:left .25s;pointer-events:none
}
body.sb-collapsed .topbar::after{left:var(--sb-collapsed-w)}
.sb-slot{
  position:absolute;left:0;top:0;bottom:0;width:var(--sb-open-w);transition:width .25s;
  display:flex;align-items:center;justify-content:center;pointer-events:auto
}
body.sb-collapsed .sb-slot{width:var(--sb-collapsed-w)}
.top-left{display:flex;align-items:center;gap:10px}
.brand{font-weight:800}
.topbar .brand{display:none !important}

.sidebar{
  position:fixed;left:0;top:calc(var(--topbar-h) + var(--topbar-b));bottom:0;
  z-index:120;background:var(--panel);border-right:1px solid var(--border2);
  width:var(--sb-open-w);display:flex;flex-direction:column;transition:width .25s,transform .25s
}
.sidebar.collapsed{width:var(--sb-collapsed-w)}
@media(min-width:1025px){
  body.sb-collapsed .sidebar.hover-open{width:var(--sb-open-w);box-shadow:0 8px 20px rgba(0,0,0,.25)}
}
@media(max-width:1024px){
  .sidebar{transform:translateX(0);transition:transform .25s}
  .sidebar.mobile{transform:translateX(-100%)}
  .sidebar.mobile.mobile-open{transform:translateX(0)}
}

.sb-nav{padding:8px}
.sb-nav .nav-item{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;
  color:#f3f7ec;border:1px solid transparent
}
.sb-nav .nav-item:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
.sb-nav .nav-item.active{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22)}
.nav-ico{width:22px;text-align:center;opacity:.9}
.sidebar.collapsed .nav-text{display:none}

/* fly-out submenu — APA Green/Gold theme */
.nav-group{ position:relative; }
.nav-item.has-sub{ justify-content:space-between; gap:8px; }
.nav-item.has-sub .caret{ margin-left:auto; opacity:.7; transition:transform .2s; }
.nav-group[data-open="1"]>.sub{ display:block; }
.nav-group[data-open="1"]>.has-sub .caret{ transform:rotate(90deg); }

/* โหมดปกติ (ไม่พับ) */
.sub{
  display:none;
  margin:6px 0 8px 38px;
  border-left:1px dashed rgba(246,202,59,.45);        /* เส้นทอง */
  padding-left:10px;
}
.sub .sub-item{
  display:block;
  padding:8px 10px;
  border-radius:10px;
  color:#ffffff;
  opacity:.95;
}
.sub .sub-item:hover{
  background:rgba(246,202,59,.12);                    /* โฮเวอร์ทองบาง ๆ */
}

/* โหมดพับ (fly-out) */
.sidebar.collapsed .sb-nav .sub{
  position:fixed;
  left:var(--sb-collapsed-w);
  top:0;
  width:280px;
  max-height:70vh;
  overflow:auto;
  display:none;
  z-index:3000;

  background:rgba(27,94,32,.96);                      /* เขียวแบรนด์ */
  border:1px solid rgba(246,202,59,.55);              /* ขอบทอง */
  border-radius:14px;
  box-shadow:0 16px 32px rgba(0,0,0,.40), 0 0 0 1px rgba(27,94,32,.35) inset;
  padding:8px 0;
  margin:0;
  border-left:0;
}
.sidebar.collapsed .sb-nav .sub.show{ display:block; }

/* ลูกศรชี้ออกจากไอคอน */
.sidebar.collapsed .sb-nav .sub::before{
  content:"";
  position:absolute;
  left:-8px;
  top:16px;
  width:12px; height:12px;
  transform:rotate(45deg);
  background:rgba(27,94,32,.96);
  border-left:1px solid rgba(246,202,59,.55);
  border-top: 1px solid rgba(246,202,59,.55);
  border-radius:2px;
}

/* รายการภายใน fly-out */
.sidebar.collapsed .sb-nav .sub .sub-item{
  display:block;
  padding:12px 14px;
  margin:0 6px;
  border-radius:10px;
  color:#eaf3e8;
  font-weight:600;
  letter-spacing:.2px;
}
.sidebar.collapsed .sb-nav .sub .sub-item:hover,
.sidebar.collapsed .sb-nav .sub .sub-item:focus{
  background:rgba(246,202,59,.16);                    /* ไฮไลต์ทอง */
  color:#fff;
  outline:none;
}
.sidebar.collapsed .sb-nav .sub .sub-item.active{
  background:rgba(246,202,59,.25);
  color:#fff;
  box-shadow:inset 0 0 0 1px rgba(246,202,59,.35);
}

.sidebar.collapsed .sb-nav .sub.show{display:block}

.backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:110}
.backdrop.show{display:block}

/* content shift */
body.sb-open .content{margin-left:var(--sb-open-w)}
body.sb-collapsed .content{margin-left:var(--sb-collapsed-w)}
.no-sidebar .topbar{padding-left:16px !important}
.no-sidebar .topbar::after{left:0 !important}
.no-sidebar .sb-slot{display:none !important}
.no-sidebar .content{margin-left:0 !important}
.content-full{margin-left:0 !important;padding-left:16px}

/* Profile button/dropdown */
.profile-btn{
  display:flex;align-items:center;gap:10px;padding:6px 12px;border-radius:12px;
  background:rgba(27,94,32,.08);border:1px solid rgba(27,94,32,.25);text-decoration:none;color:var(--text);
  cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 0 0 2px rgba(91,140,255,.18),0 8px 22px rgba(91,140,255,.20)
}
.profile-btn:hover{transform:translateY(-1px);border-color:var(--apa-gold)}
.profile-btn .avatar{width:34px;height:34px;border-radius:50%;overflow:hidden;border:1px solid rgba(255,255,255,.25)}
.profile-btn .name,[aria-hidden]{display:none !important}
.profile-menu{
  position:absolute;right:0;top:calc(100% + 8px);min-width:220px;background:var(--panel2);
  border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:8px;display:none;z-index:200
}
.profile-menu.open{display:block}

/* ========== Dropdown/Tooltip visibility (generic) ========== */
.dropdown-menu,.popover,.tooltip,.tooltip .tooltip-inner,.hover-card,.select-menu{
  background:rgba(12,18,32,.96);color:#fff;border:1px solid rgba(27,94,32,.45);
  border-radius:14px;box-shadow:0 10px 28px rgba(0,0,0,.35);backdrop-filter:blur(4px);z-index:3000
}
.dropdown-menu a,.hover-card a,.select-menu .item{
  color:#f3f7ec;display:block;padding:10px 12px;border-radius:10px
}
.dropdown-menu a:hover,.hover-card a:hover,.select-menu .item:hover{background:rgba(27,94,32,.18)}

/* ========== Utilities ========== */
.h4{font-size:1.25rem;margin:0}
.h6{font-size:1rem;margin:0}
.small-muted{font-size:.875rem;color:var(--muted)}
.mt-1{margin-top:.5rem}



























/* === Restore legacy logo toggle button (as before) === */
.sb-toggle-btn{
  pointer-events:auto;
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  padding:8px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.14);
  border-radius:20px;
  cursor:pointer; overflow:hidden;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 0 0 2px rgba(91,140,255,.18),
    0 8px 22px rgba(91,140,255,.20);
  position:relative; z-index:5;
}
.sb-toggle-btn:hover{
  transform:translateY(-1px);
  border-color:#f6ca3b;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    0 0 0 2px rgba(91,140,255,.38),
    0 12px 28px rgba(91,140,255,.28);
}
.sb-toggle-btn img{
  height:100%; max-height:100%; width:auto;
  object-fit:contain;
  transition:transform .25s;
}
body.sb-open .sb-toggle-btn img{ transform:scale(1.06); }










/* ===== HOTFIX: Dashboard filters & avatars alignment ===== */

/* ทำให้กล่องฟิลเตอร์สูงเท่ากัน + เรียง baseline */
.content .filters{ 
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
  gap: 14px 18px;
  align-items: end;                         /* ฐานเสมอกัน */
}
.content .filters .mb-3{ margin:0 !important; }
.content .filters .form-label{ margin:0 0 6px 2px; }

/* คุมความสูงอินพุต/เซเล็กต์/เดท */
.content .filters .form-control,
.content .filters .form-select,
.content .filters input[type="date"],
.content .filters .input, 
.content .filters .dropdown-toggle{ 
  height: 44px !important;
  line-height: 44px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  background:#fff !important;
  border:1px solid rgba(27,94,32,.22) !important;
  color:#0f1a12 !important;
}

/* กรณีเป็น input-group มีปุ่มไอคอนปฏิทินด้านขวา */
.content .filters .input-group > .form-control{ height:44px !important; }
.content .filters .input-group .input-group-text{
  height:44px !important; padding:0 10px !important;
  display:flex; align-items:center; border-radius:12px !important;
}
.content .filters input[type="date"]::-webkit-calendar-picker-indicator{
  width:18px; height:18px; margin-right:6px; opacity:1;
}

/* โฟกัสสไตล์เดียวกับหน้า login */
.content .filters .form-control:focus,
.content .filters .form-select:focus,
.content .filters input[type="date"]:focus,
.content .filters .dropdown-toggle:focus{
  border-color:#1B5E20 !important;
  box-shadow:0 0 0 .16rem rgba(27,94,32,.18) !important;
  outline:0 !important;
}

/* ปุ่ม Apply / Reset ให้สูงพอดีตา */
.content .filters .btn{ min-width:88px; height:38px; }

/* ===== Avatars/ชื่อในคอลัมน์ซ้ายให้ตรงแนวกลางเสมอ ===== */

/* ถ้าเป็นตาราง */
.content .table td,
.content .table th{ vertical-align: middle !important; }
.content .table td:first-child{
  white-space: nowrap;
}
.content .table td:first-child,
.content .table th:first-child{
  width: 260px;                                /* ปรับตามต้องการ */
}
.content .table td:first-child > *{
  display:flex; align-items:center; gap:12px;  /* รูป + ชื่อกึ่งกลางบรรทัด */
}
.content .table td:first-child img{
  width:52px; height:52px; border-radius:50%;
  object-fit:cover; display:block;
  border:1px solid rgba(27,94,32,.20);
}

/* ถ้าเป็นลิสต์ในการ์ด (ไม่ใช่ table) */
.content .card .sr-item,
.content .card .list-group-item{
  display:grid; grid-template-columns:56px 1fr;
  align-items:center; gap:12px; min-height:68px; padding:10px 12px;
}
.content .card .sr-item img,
.content .card .list-group-item img{
  width:52px; height:52px; border-radius:50%;
  object-fit:cover; border:1px solid rgba(27,94,32,.20);
}











/* Footer: slide left/right with sidebar without vertical shift */
.app-footer{
  padding:16px 0;
  transform: translateX(0);                /* ไม่ทำให้เกิด reflow แนวตั้ง */
  transition: transform .25s ease;
}

body.sb-open      .app-footer{ transform: translateX(var(--sb-open-w)); }
body.sb-collapsed .app-footer{ transform: translateX(var(--sb-collapsed-w)); }
.no-sidebar       .app-footer{ transform: none !important; }

/* การ์ดด้านในเหมือนหน้า login */
.footer-card{
  max-width:var(--container-w);
  margin:0 auto 16px;
  background:var(--panel2);
  border:1px solid rgba(27,94,32,.25);
  border-radius:12px;
  padding:14px 16px;
  /*box-shadow:var(--shadow); */
  text-align:center;
  color:#0b3d20;
}

/* มือถือ/แท็บเล็ต – ให้ติดที่ตำแหน่งเดิม */
@media (max-width:1024px){
  .app-footer{ transform:none !important; }
}



/* ==== Fix horizontal overflow / right gap near avatar ==== */

/* 1) ปิดการเลื่อนแนวนอนระดับหน้า */
html, body { overflow-x: hidden; }

/* 2) ตอนเปิดโมดัล อย่าให้ body มี padding-right ชดเชยสกอลบาร์ (เราทำ modal เอง ไม่ใช่ Bootstrap เต็มๆ) */
body.modal-open { padding-right: 0 !important; }

/* 3) กันองค์ประกอบในโมดัลแหกขอบขวา */
#historyModal .modal-dialog,
#historyModal .modal-content,
#historyModal .modal-header,
#historyModal .modal-body {
  max-width: 100%;
  overflow-x: hidden;
}

/* 4) ส่วนหัวด้านขวา (ที่มีรูป) ให้ชิดขวาแบบไม่ดันกรอบ */
#historyModal .hist-head-right{
  margin-left: auto;           /* ดันไปชิดขวา แต่ไม่กินพื้นที่เกิน */
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
}

/* 5) ซ่อมจุดที่เคยทำให้ล้นขวา */
.table-wrap, #historyModal .hist-table-wrap{
  scrollbar-gutter: stable;    /* ถ้ายังไม่ได้เปลี่ยน ให้เปลี่ยนเป็น stable (ไม่ both-edges) */
}
#historyModal .hist-table-wrap{ /* ถ้ามีบรรทัดนี้อยู่ให้ลบทิ้ง */
  /* padding-right:12px;  ← ลบทิ้งแล้ว */
}

/* 6) กันเงา/เอฟเฟกต์หรือ element ใดๆ ดันกล่องล้นขวา */
.container, .card, .table-wrap, #historyModal .hist-table-wrap{
  max-width: 100%;
  box-sizing: border-box;
}
















/* ===== APA Profile Button + Menu (scoped; no impact to auth-links) ===== */
.topbar .profile-wrap{ position:relative; }

.topbar .profile-btn{
  display:flex; align-items:center; gap:10px;
  padding:6px 12px; border-radius:14px;
  background:rgba(27,94,32,.18);
  border:1px solid rgba(246,202,59,.35);
  color:#fff; cursor:pointer;
  box-shadow:0 0 0 2px rgba(27,94,32,.25) inset, 0 8px 22px rgba(0,0,0,.25);
  transition:.18s ease;
}
.topbar .profile-btn:hover{
  transform:translateY(-1px);
  border-color:rgba(246,202,59,.65);
  box-shadow:0 0 0 2px rgba(246,202,59,.35) inset, 0 12px 28px rgba(0,0,0,.35);
}
.topbar .profile-btn .avatar{
  width:28px; height:28px; border-radius:50%;
  overflow:hidden; border:1px solid rgba(246,202,59,.55);
}
.topbar .profile-btn .name{ display:inline-block !important; color:#fff; font-weight:700; letter-spacing:.2px; }
.topbar .profile-btn .caret{
  width:10px; height:10px; margin-left:2px; opacity:.9;
  border: solid rgba(246,202,59,.95);
  border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* กล่องเมนู */
.topbar .profile-menu{
  position:absolute; right:0; top:calc(100% + 8px);
  min-width:260px;
  background:rgba(27,94,32,.96);
  color:#fff;
  border:1px solid rgba(246,202,59,.55);
  border-radius:14px;
  box-shadow:0 16px 32px rgba(0,0,0,.40), 0 0 0 1px rgba(27,94,32,.35) inset;
  backdrop-filter: blur(6px);
  padding:10px;
  display:none; z-index:3000;
}
.topbar .profile-menu.open{ display:block; }
.topbar .profile-menu::before{
  content:""; position:absolute; right:18px; top:-6px;
  width:12px; height:12px; transform:rotate(45deg);
  background:rgba(27,94,32,.96);
  border-left:1px solid rgba(246,202,59,.55);
  border-top: 1px solid rgba(246,202,59,.55);
  border-radius:2px;
}

/* ส่วนหัวเมนู */
.topbar .profile-menu .pm-head{
  display:flex; gap:10px; align-items:center;
  padding:8px 10px 12px;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.topbar .profile-menu .pm-head .ava{
  width:48px; height:48px; border-radius:50%;
  overflow:hidden; border:1px solid rgba(246,202,59,.55);
}
.topbar .profile-menu .pm-head .nm{ font-weight:800; color:#fff; line-height:1.2; }
.topbar .profile-menu .pm-head .em{ font-size:.9rem; color:rgba(255,255,255,.78); }

/* รายการ */
.topbar .profile-menu .item{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; margin:2px 0; border-radius:10px;
  color:#eaf3e8; text-decoration:none;
}
.topbar .profile-menu .item:hover,
.topbar .profile-menu .item:focus{
  background:rgba(246,202,59,.16);
  outline:none;
}
.topbar .profile-menu .item .ico{ width:18px; text-align:center; opacity:.9; }
.topbar .profile-menu .item.danger{ color:#ffc2c2; }

/* กันล้นขวา (เมนู/ลูกศร) */
html,body{ overflow-x:hidden; }











/* Force show page title on topbar */
.topbar .brand{
  display:block !important;
  color:#dfd4d4;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:clamp(140px, 30vw, 420px);
}


.top-left .brand{
  font-weight:800;
  color:#fff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:clamp(140px, 30vw, 420px); /* ปรับตามดีไซน์ */
}