/* =========================================================
   menu_modern.css — Topbar + Sidebar redesign (topprobooking)
   วางไว้ที่ ../layout/menu_modern.css
   include หลัง base.css และหลัง <style> เดิมของ header/sidebar
   ========================================================= */
   :root {
    --tpb-primary: #4f46e5;
    --tpb-primary-2: #6366f1;
    --tpb-primary-soft: #eef0ff;
    --tpb-ink: #1e2340;
    --tpb-muted: #6b7290;
    --tpb-line: #eceef5;
    --tpb-bg: #f6f7fb;
    --tpb-hover: #f3f4fa;
    --tpb-danger: #e5484d;
    --tpb-gold: #d4a017;
    --tpb-radius: 10px;
    --tpb-header-h: 64px;
  }
  
  /* ---------------------------------------------------------
     TOPBAR
     --------------------------------------------------------- */
  .app-header {
    height: var(--tpb-header-h) !important;
    background: rgba(255, 255, 255, .92) !important;
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--tpb-line);
    box-shadow: 0 1px 2px rgba(30, 35, 64, .04), 0 6px 20px -12px rgba(30, 35, 64, .15) !important;
  }
  .fixed-header .app-main { padding-top: var(--tpb-header-h) !important; }
  .fixed-header.fixed-sidebar .app-sidebar { top: var(--tpb-header-h) !important; }
  
  .app-header .app-header__logo {
    height: var(--tpb-header-h);
    background: transparent !important;
    border-right: 1px solid var(--tpb-line);
  }
  
  .app-header__content { padding: 0 20px 0 12px !important; height: var(--tpb-header-h) !important; }
  
  /* เมนูซ้าย: เรียงแถวเดียว ไม่ซ้อน 2 บรรทัด */
  .app-header-left { flex: 1 1 auto; min-width: 0; }
  .app-header .header-megamenu.nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 4px;
  }
  .app-header .header-megamenu > .nav-item { margin: 0 !important; }
  .app-header .header-megamenu > .nav-item > .nav-link {
    display: inline-flex !important;
    align-items: center;
    height: 40px;
    padding: 0 14px !important;
    border-radius: 999px;
    color: var(--tpb-ink) !important;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
  }
  .app-header .header-megamenu > .nav-item > .nav-link:hover,
  .app-header .header-megamenu > .nav-item.show > .nav-link,
  .app-header .header-megamenu > .nav-item > .nav-link[aria-expanded="true"] {
    background: var(--tpb-primary-soft);
    color: var(--tpb-primary) !important;
  }
  .app-header .header-megamenu .nav-link-icon {
    font-size: 15px !important;
    width: 18px;
    margin-right: 8px !important;
    color: var(--tpb-primary) !important;
    opacity: 1 !important;
  }
  .app-header .header-megamenu .nav-link .fa-angle-down { font-size: 12px; margin-left: 6px !important; }
  
  /* dropdown ทั่วไปใน header */
  .app-header .dropdown-menu {
    border: 1px solid var(--tpb-line) !important;
    border-radius: 14px !important;
    box-shadow: 0 18px 40px -12px rgba(30, 35, 64, .25) !important;
    padding: 8px !important;
    margin-top: 10px !important;
  }
  .app-header .dropdown-menu .dropdown-item,
  .app-header .dropdown-menu .nav-link {
    border-radius: 8px;
    padding: 9px 12px;
    color: var(--tpb-ink);
    font-size: 14px;
  }
  .app-header .dropdown-menu .dropdown-item:hover,
  .app-header .dropdown-menu .nav-link:hover {
    background: var(--tpb-primary-soft);
    color: var(--tpb-primary);
  }
  .app-header .dropdown-menu .dropdown-menu-header { border-radius: 10px; overflow: hidden; }
  
  /* ฝั่งขวา */
  .app-header-right { display: flex; align-items: center; gap: 10px; }
  .app-header .header-dots { display: flex; align-items: center; gap: 10px; margin: 0 !important; }
  .app-header .header-dots > div,
  .app-header .header-dots > a { margin: 0 !important; padding: 0 !important; }
  
  /* ปุ่มโปรโมชัน: pill เล็กลง สมส่วน */
  .app-header .promo-pulse-btn {
    height: 40px !important;
    min-height: 0 !important;
    width: auto !important;
    padding: 0 16px 0 14px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #ff5a5f 0%, #e11d48 100%) !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 8px;
    box-shadow: 0 6px 16px -6px rgba(225, 29, 72, .6) !important;
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .app-header .promo-pulse-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 20px -8px rgba(225, 29, 72, .7) !important; }
  .app-header .promo-pulse-btn i { font-size: 16px !important; margin: 0 !important; }
  
  /* กระดิ่งแจ้งเตือน */
  .app-header .header-dots .dropdown > .btn-link {
    margin: 0 !important;
    width: 40px;
    height: 40px;
    border-radius: 50% !important;
    background: var(--tpb-hover);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: background .15s ease;
  }
  .app-header .header-dots .dropdown > .btn-link:hover { background: #ffe9ea; }
  .app-header .header-dots .dropdown > .btn-link .icon-wrapper {
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    background: transparent !important;
  }
  .app-header .header-dots .dropdown > .btn-link .icon-wrapper-bg { display: none !important; }
  .app-header .header-dots .dropdown > .btn-link .icon {
    font-size: 22px !important;
    color: var(--tpb-danger) !important;
    margin: 0 !important;
    position: static !important;
  }
  .app-header .header-dots .dropdown > .btn-link .badge-dot {
    position: absolute !important;
    top: 8px !important;
    right: 9px !important;
    width: 9px !important;
    height: 9px !important;
    border: 2px solid #fff;
    margin: 0 !important;
  }
  
  /* ปุ่ม Register Member */
  .app-header .Btn {
    height: 40px !important;
    width: auto !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    border: 1px solid #f0d58a !important;
    background: linear-gradient(135deg, #fff8e1 0%, #fdecb6 100%) !important;
    color: #8a6400 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
  }
  .app-header .Btn svg { width: 14px; height: 14px; fill: #c48a00 !important; }
  .app-header .Btn.is-expired {
    background: #f1f2f6 !important;
    border-color: #e1e3eb !important;
    color: #8a90a6 !important;
  }
  .app-header .Btn.is-expired svg { fill: #a3a8bb !important; }
  
  /* user widget */
  .app-header .header-btn-lg { padding: 0 0 0 12px !important; margin: 0 !important; border-left: 1px solid var(--tpb-line); height: 36px; display: flex; align-items: center; }
  .app-header .header-btn-lg::before { display: none !important; }
  .app-header .header-user-info .widget-heading { font-weight: 600; color: var(--tpb-ink); font-size: 14px; }
  .app-header .header-user-info .widget-subheading { color: var(--tpb-muted); font-size: 12px; }
  .app-header .header-user-info:empty,
  .app-header .header-btn-lg:has(.header-user-info:empty) { display: none !important; }
  
  /* จอเล็ก: ย่อ label เมนูซ้ายให้เหลือไอคอน */
  @media (max-width: 1400px) {
    .app-header .header-megamenu > .nav-item > .nav-link { padding: 0 11px !important; font-size: 13.5px; }
  }
  
  /* ---------------------------------------------------------
     SIDEBAR
     --------------------------------------------------------- */
  .app-sidebar {
    background: #fff !important;
    border-right: 1px solid var(--tpb-line);
    box-shadow: 4px 0 24px -16px rgba(30, 35, 64, .18) !important;
  }
  .app-sidebar .app-sidebar__inner { padding: 8px 14px 24px !important; }
  
  /* หัวข้อกลุ่ม */
  .app-sidebar .vertical-nav-menu li.app-sidebar__heading {
    margin: 18px 0 6px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #9aa0b8 !important;
  }
  .app-sidebar .vertical-nav-menu li.app-sidebar__heading:first-child { margin-top: 6px !important; }
  
  /* รายการหลัก */
  .app-sidebar .vertical-nav-menu > li { margin-bottom: 2px; }
  .app-sidebar .vertical-nav-menu li a {
    position: relative;
    display: flex !important;
    align-items: center;
    height: auto !important;
    min-height: 42px;
    line-height: 1.35 !important;
    padding: 8px 34px 8px 50px !important;
    margin: 0 !important;
    border-radius: var(--tpb-radius) !important;
    color: var(--tpb-ink) !important;
    font-size: 14px;
    font-weight: 500 !important;
    background: transparent !important;
    white-space: normal;
    transition: background .15s ease, color .15s ease;
  }
  .app-sidebar .vertical-nav-menu li a:hover { background: var(--tpb-hover) !important; color: var(--tpb-primary) !important; }
  
  /* ไอคอนในกล่อง */
  .app-sidebar .vertical-nav-menu > li > a > i.metismenu-icon,
  .app-sidebar .vertical-nav-menu > li > a > img {
    position: absolute !important;
    left: 6px !important;
    top: 50% !important;
    margin: -16px 0 0 0 !important;
    width: 32px !important;
    height: 32px !important;
    line-height: 32px !important;
    border-radius: 9px;
    background: var(--tpb-hover) !important;
    color: var(--tpb-muted) !important;
    font-size: 15px !important;
    text-align: center;
    opacity: 1 !important;
    transition: background .15s ease, color .15s ease;
  }
  .app-sidebar .vertical-nav-menu > li > a:hover > i.metismenu-icon { background: var(--tpb-primary-soft) !important; color: var(--tpb-primary) !important; }
  
  /* active */
  .app-sidebar .vertical-nav-menu > li.mm-active > a,
  .app-sidebar .vertical-nav-menu > li > a.mm-active,
  .app-sidebar .vertical-nav-menu > li > a.menu-active {
    background: var(--tpb-primary-soft) !important;
    color: var(--tpb-primary) !important;
    font-weight: 600 !important;
  }
  .app-sidebar .vertical-nav-menu > li.mm-active > a > i.metismenu-icon,
  .app-sidebar .vertical-nav-menu > li > a.mm-active > i.metismenu-icon,
  .app-sidebar .vertical-nav-menu > li > a.menu-active > i.metismenu-icon {
    background: linear-gradient(135deg, var(--tpb-primary-2), var(--tpb-primary)) !important;
    color: #fff !important;
    box-shadow: 0 6px 14px -6px rgba(79, 70, 229, .7);
  }
  
  /* ลูกศรเปิด/ปิด */
  .app-sidebar .vertical-nav-menu i.metismenu-state-icon {
    position: absolute !important;
    right: 10px !important;
    left: auto !important;
    top: 50% !important;
    margin-top: -8px !important;
    width: 16px !important;
    height: 16px !important;
    line-height: 16px !important;
    font-size: 18px !important;
    color: #a3a8bb !important;
    opacity: 1 !important;
    transition: transform .2s ease;
  }
  .app-sidebar .vertical-nav-menu li.mm-active > a > i.metismenu-state-icon { transform: rotate(-180deg); color: var(--tpb-primary) !important; }
  
  /* เมนูย่อย */
  .app-sidebar .vertical-nav-menu ul {
    margin: 4px 0 8px 22px !important;
    padding: 0 0 0 14px !important;
    border-left: 2px solid var(--tpb-line);
  }
  .app-sidebar .vertical-nav-menu ul::before { display: none !important; }
  .app-sidebar .vertical-nav-menu ul > li > a {
    min-height: 36px;
    padding: 7px 10px 7px 14px !important;
    font-size: 13.5px;
    font-weight: 400 !important;
    color: #4a5070 !important;
  }
  .app-sidebar .vertical-nav-menu ul > li > a > i.metismenu-icon { display: none !important; }
  .app-sidebar .vertical-nav-menu ul > li > a::before {
    content: "";
    position: absolute;
    left: -19px;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #d5d8e5;
    transition: border-color .15s ease, background .15s ease;
  }
  .app-sidebar .vertical-nav-menu ul > li > a:hover::before { border-color: var(--tpb-primary); }
  .app-sidebar .vertical-nav-menu ul > li > a.mm-active,
  .app-sidebar .vertical-nav-menu ul > li.mm-active > a {
    color: var(--tpb-primary) !important;
    font-weight: 600 !important;
    background: transparent !important;
  }
  .app-sidebar .vertical-nav-menu ul > li > a.mm-active::before,
  .app-sidebar .vertical-nav-menu ul > li.mm-active > a::before {
    background: var(--tpb-primary);
    border-color: var(--tpb-primary);
  }
  /* ป้าย "ใหม่" / "เร็วๆ นี้" */
  .app-sidebar .vertical-nav-menu ul > li > a .badge {
    margin-left: 6px;
    padding: 3px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    vertical-align: middle;
  }
  .app-sidebar .vertical-nav-menu ul > li > a[href^="javascript"] { color: #a3a8bb !important; cursor: default; }
  .app-sidebar .vertical-nav-menu ul > li > a[href^="javascript"]:hover { background: transparent !important; }
  
  /* ไอคอนสีประจำเมนูพิเศษ */
  .app-sidebar .vertical-nav-menu a > i.fa-crown { background: #fff6dc !important; color: var(--tpb-gold) !important; }
  .app-sidebar .vertical-nav-menu a > i.fa-user-plus { background: #e9f2ff !important; color: #3b82f6 !important; }
  .app-sidebar .vertical-nav-menu a > i.fa-bullhorn { background: #e7f8ef !important; color: #16a34a !important; }
  .app-sidebar .vertical-nav-menu a.promo-btn,
  .app-sidebar .vertical-nav-menu a[class*="promo-"] { background: transparent !important; box-shadow: none !important; border: 0 !important; }
  .app-sidebar .vertical-nav-menu a.promo-btn > i,
  .app-sidebar .vertical-nav-menu a[class*="promo-"] > i { color: #16a34a !important; }
  .app-sidebar .vertical-nav-menu a > i.fa-facebook { background: #eaf1ff !important; color: #1877f2 !important; }
  .app-sidebar .vertical-nav-menu a > i.fa-youtube { background: #ffecec !important; color: #ff0000 !important; }
  .app-sidebar .vertical-nav-menu a > i.fa-tiktok { background: #f1f2f6 !important; color: #111 !important; }
  .app-sidebar .vertical-nav-menu a > i.fa-lightbulb { background: #fff6dc !important; color: #e0a800 !important; }
  .app-sidebar .vertical-nav-menu a > i.fa-sign-out-alt { background: #ffecec !important; color: var(--tpb-danger) !important; }
  .app-sidebar .vertical-nav-menu a[href*="logout"]:hover { background: #fff3f3 !important; color: var(--tpb-danger) !important; }
  
  /* scrollbar บาง */
  .app-sidebar .ps__rail-y { width: 6px !important; background: transparent !important; }
  .app-sidebar .ps__thumb-y { width: 4px !important; background: #d5d8e5 !important; right: 1px !important; }
  
  /* ---------------------------------------------------------
     SIDEBAR แบบย่อ (closed-sidebar) — เหลือไอคอน
     --------------------------------------------------------- */
  @media (min-width: 992px) {
    .closed-sidebar .app-sidebar:not(:hover) .app-sidebar__inner { padding: 8px 10px 24px !important; }
    .closed-sidebar .app-sidebar:not(:hover) .vertical-nav-menu li.app-sidebar__heading {
      height: 1px;
      margin: 12px 12px !important;
      padding: 0 !important;
      background: var(--tpb-line);
      font-size: 0 !important;
      color: transparent !important;
      overflow: hidden;
    }
    .closed-sidebar .app-sidebar:not(:hover) .vertical-nav-menu li.app-sidebar__heading::before { display: none !important; }
    .closed-sidebar .app-sidebar:not(:hover) .vertical-nav-menu > li > a {
      width: 48px;
      min-height: 44px;
      padding: 0 !important;
      margin: 0 auto !important;
      font-size: 0 !important;
      text-indent: -9999px;
      overflow: hidden;
      background: transparent !important;
    }
    .closed-sidebar .app-sidebar:not(:hover) .vertical-nav-menu > li > a > i.metismenu-icon {
      left: 50% !important;
      margin-left: -18px !important;
      margin-top: -18px !important;
      width: 36px !important;
      height: 36px !important;
      line-height: 36px !important;
      font-size: 16px !important;
      text-indent: 0;
    }
    .closed-sidebar .app-sidebar:not(:hover) .vertical-nav-menu i.metismenu-state-icon,
    .closed-sidebar .app-sidebar:not(:hover) .vertical-nav-menu ul { display: none !important; }
  
    /* hover แล้วกางออก — ให้เงาลอยเหนือเนื้อหา */
    .closed-sidebar .app-sidebar:hover { box-shadow: 12px 0 40px -12px rgba(30, 35, 64, .25) !important; }
  }
  
  /* มือถือ */
  @media (max-width: 991.98px) {
    .app-header .app-header__content { background: #fff; border-top: 1px solid var(--tpb-line); }
    .app-header .header-megamenu.nav { flex-wrap: wrap !important; }
    .app-header .header-dots { gap: 6px; }
  }