/* ============================================================
   public/css/theme-connectvietnam.css
   Theme màu Connect Vietnam – dựa trên logo chính thức
   Nhúng vào TẤT CẢ trang, SAU mobile.css:
   <link rel="stylesheet" href="/css/theme-connectvietnam.css"/>
   ============================================================

   PALETTE (từ logo Connect Vietnam):
   ┌─────────────────────────────────────────────────────┐
   │  Teal Light   #36B793  (xanh lá tươi – logo top)   │
   │  Teal Mid     #289E8E  (trung bình)                 │
   │  Teal Dark    #238483  (xanh dương đậm – logo bot)  │
   │  Teal Darker  #1A6B6B  (hover / shadow)             │
   │  Teal BG      #EAF7F4  (nền nhạt)                   │
   │  Teal BG2     #D0EFE9  (nền đậm hơn)                │
   │  Gradient     #36B793 → #238483                     │
   └─────────────────────────────────────────────────────┘
   ============================================================ */

/* ── 1. CSS VARIABLES OVERRIDE ────────────────────────────── */
:root {
  /* Màu chủ đạo – thay thế orange */
  --or:   #289E8E;   /* primary – teal mid   */
  --orl:  #36B793;   /* primary light        */
  --or2:  #238483;   /* primary dark         */

  /* Gradient chính */
  --grad-primary: linear-gradient(135deg, #36B793 0%, #238483 100%);
  --grad-hover:   linear-gradient(135deg, #3BC99E 0%, #27918F 100%);

  /* Backgrounds */
  --bg:    #F4FBFA;   /* thay #fffbf5 */
  --teal-bg:  #EAF7F4;
  --teal-bg2: #D0EFE9;

  /* Text & borders */
  --bo: #B8DED8;      /* border nhẹ hơn, có tông teal */

  /* Green accent (giữ lại nhưng điều chỉnh) */
  --gr: #2EC4A5;      /* dùng cho success/download */

  /* Shadow teal */
  --sh:  0 4px 24px rgba(40,158,142,.10);
  --shl: 0 12px 48px rgba(40,158,142,.18);
}

/* ── 2. BODY & PAGE BACKGROUND ────────────────────────────── */
body {
  background: var(--bg);
}

/* ── 3. NAVBAR ─────────────────────────────────────────────── */
.nav {
  box-shadow: 0 2px 16px rgba(40,158,142,.12);
  border-bottom: 1px solid var(--teal-bg2);
}

.nav-logo {
  color: var(--or2) !important;
}

/* Logo image in nav */
.nav-logo img {
  height: 36px;
  width: auto;
  object-fit: contain;
}

/* Hamburger spans */
.nav-hamburger span { background: var(--or2); }

/* Create button */
.btn-create, .n-create {
  background: var(--grad-primary) !important;
  box-shadow: 0 4px 14px rgba(40,158,142,.35) !important;
}
.btn-create:hover, .n-create:hover {
  background: var(--grad-hover) !important;
  box-shadow: 0 6px 20px rgba(40,158,142,.45) !important;
}

/* Nav dropdown hover */
.di:hover, .nav-dd-item:hover {
  background: var(--teal-bg) !important;
  color: var(--or2) !important;
}

/* Mobile menu link hover */
.mobile-menu-link:hover { background: var(--teal-bg) !important; color: var(--or2) !important; }
.mobile-menu-link.primary {
  background: var(--grad-primary) !important;
}
.mobile-menu-search:focus { border-color: var(--or) !important; }

/* ── 4. HERO SECTION ───────────────────────────────────────── */
.hero { background: linear-gradient(160deg, #F0FAF8 0%, #E4F5F1 60%, #D5EDE8 100%); }

/* Background blobs */
.b1 { background: #B2E8DC !important; }
.b2 { background: #7ACFC2 !important; }
.b3 { background: #A8D8D3 !important; }

/* Hero badge */
.hero-badge {
  background: var(--teal-bg) !important;
  color: var(--or2) !important;
  border-color: var(--or) !important;
}

/* Highlight text gradient */
.hl, .highlight {
  background: var(--grad-primary) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Hero buttons */
.bp, .btn-primary {
  background: var(--grad-primary) !important;
  box-shadow: 0 6px 20px rgba(40,158,142,.38) !important;
}
.bp:hover, .btn-primary:hover {
  background: var(--grad-hover) !important;
  box-shadow: 0 10px 28px rgba(40,158,142,.48) !important;
}
.bs, .btn-ghost {
  color: var(--or2) !important;
  border-color: var(--or) !important;
}
.bs:hover, .btn-ghost:hover {
  background: var(--or) !important;
  color: #fff !important;
}

/* Preview cards */
.fp1 { background: linear-gradient(135deg,#C8EEE7,#9FD9CF) !important; border-color: #36B793 !important; }
.fp2 { background: linear-gradient(135deg,#B8E8DF,#8ECFC6) !important; border-color: #289E8E !important; }
.fp3 { background: linear-gradient(135deg,#A8DEDA,#7EC8C2) !important; border-color: #238483 !important; }

/* ── 5. BUTTONS – GLOBAL ───────────────────────────────────── */
.btn-primary, .bp, .bcr, .btn-create-now, .n-create,
.ep-export-btn, .dlobtn, .tdlobtn {
  background: var(--grad-primary) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(40,158,142,.32) !important;
}
.btn-primary:hover { background: var(--grad-hover) !important; }

/* Ghost / outline */
.btn-ghost, .bs, .bcl {
  color: var(--or2) !important;
  border-color: var(--or) !important;
}
.btn-ghost:hover { background: var(--or) !important; color: #fff !important; }

/* Success / download */
.btn-success, .dlobtn, .ep-export-btn, .tdlobtn {
  background: linear-gradient(135deg, #36B793, #289E8E) !important;
  box-shadow: 0 4px 12px rgba(54,183,147,.30) !important;
}

/* ── 6. FRAME CARDS ────────────────────────────────────────── */
.frame-card:hover, .scard:hover {
  border-color: var(--or) !important;
  box-shadow: 0 8px 32px rgba(40,158,142,.20) !important;
}
.scard:hover { border-color: var(--or) !important; }

/* Frame action button hover */
.frame-action-btn:hover { background: var(--teal-bg) !important; }

/* Frame status badge */
.badge-green  { background: #E0F5F0 !important; color: #1A8070 !important; }
.badge-orange { background: var(--teal-bg) !important; color: var(--or2) !important; }

/* ── 7. FILTER / CATEGORY BAR ──────────────────────────────── */
.cat-btn.active, .cat-btn:hover,
.filter-chip.active, .filter-chip:hover,
.sort-btn.active, .sort-btn:hover {
  border-color: var(--or) !important;
  background: var(--or) !important;
  color: #fff !important;
}

/* ── 8. SEARCH BOX ─────────────────────────────────────────── */
.search-box:focus, .tinput:focus,
.form-control:focus, .ep-tinput:focus {
  border-color: var(--or) !important;
  box-shadow: 0 0 0 3px rgba(40,158,142,.12) !important;
}

/* Search page hero */
.search-hero {
  background: linear-gradient(135deg, var(--teal-bg), var(--teal-bg2)) !important;
}
.search-big {
  border-color: var(--or) !important;
  box-shadow: 0 4px 20px rgba(40,158,142,.18) !important;
}
.search-big:focus { box-shadow: 0 6px 28px rgba(40,158,142,.30) !important; }
.search-submit { background: var(--grad-primary) !important; }

/* ── 9. MODAL ──────────────────────────────────────────────── */
.ftype.sel, .frame-type.selected {
  border-color: var(--or) !important;
  background: var(--teal-bg) !important;
  box-shadow: 0 0 0 3px rgba(40,158,142,.12) !important;
}
.ftype:hover, .frame-type:hover {
  border-color: var(--or) !important;
  background: var(--teal-bg) !important;
}
.bnew, .badge-new { background: var(--or) !important; }

/* Frame type icons */
.ftico.t1, .ft-basic { background: linear-gradient(135deg,#C8EEE7,#9FD9CF) !important; }
.ftico.t2, .ft-photo { background: linear-gradient(135deg,#D5F0EB,#AADDD4) !important; }
.ftico.t3, .ft-card  { background: linear-gradient(135deg,#BFE8E4,#93D0CB) !important; }
.ftico.t4, .ft-bg    { background: linear-gradient(135deg,#C8EDE9,#9FDAD5) !important; }

/* ── 10. TABS ──────────────────────────────────────────────── */
.dash-tab.active, .tab-btn.active { color: var(--or2) !important; border-bottom-color: var(--or) !important; }
.tab-btn.active, .dash-tab.active { color: var(--or) !important; }

/* Toolbar buttons (editor) */
.ep-tbtn.act, .tbtn.act {
  border-color: var(--or) !important;
  background: var(--teal-bg) !important;
  color: var(--or2) !important;
}
.ep-tbtn:hover, .tbtn:hover {
  border-color: var(--or) !important;
  background: var(--teal-bg) !important;
  color: var(--or2) !important;
}

/* ── 11. UPLOAD BUTTONS ────────────────────────────────────── */
.ubtn, .ep-ubtn, .upload-btn {
  border-color: var(--or) !important;
  background: var(--teal-bg) !important;
  color: var(--or2) !important;
}
.ubtn:hover, .ep-ubtn:hover, .upload-btn:hover {
  background: var(--teal-bg2) !important;
}

/* Upload dropzone */
.upload-dropzone, .tool-upload-zone, .tupz {
  border-color: var(--or) !important;
  background: var(--teal-bg) !important;
}
.upload-dropzone:hover, .tool-upload-zone:hover, .tupz:hover {
  background: var(--teal-bg2) !important;
}

/* Slot buttons */
.pb-slot-btn, .slot-ubtn {
  border-color: var(--or) !important;
  background: var(--teal-bg) !important;
  color: var(--or2) !important;
}

/* ── 12. SLIDERS ───────────────────────────────────────────── */
input[type=range] { accent-color: var(--or) !important; }
input[type=color] { border-color: var(--bo) !important; }

/* ── 13. EDITOR LEFT PANEL ─────────────────────────────────── */
.ep-frame-item.active {
  border-color: var(--or) !important;
  box-shadow: 0 0 0 3px rgba(40,158,142,.20) !important;
}
.ep-frame-item:hover { border-color: var(--or) !important; }

/* Sidebar title */
.ep-right-head { border-bottom-color: var(--teal-bg2) !important; }
.ep-right-head span { color: var(--or2) !important; }
.sb-title, .sidebar-title { color: var(--or2) !important; }
.ep-hint, .hint {
  border-left-color: var(--or) !important;
  background: var(--teal-bg) !important;
}

/* ── 14. PAGINATION ────────────────────────────────────────── */
.page-btn:hover, .page-btn.active {
  border-color: var(--or) !important;
  background: var(--or) !important;
  color: #fff !important;
}

/* ── 15. NOTIFICATIONS ─────────────────────────────────────── */
.notif-badge { background: #E74C3C !important; } /* giữ đỏ để dễ thấy */
.notif-item.unread { background: var(--teal-bg) !important; }
.notif-item.unread:hover { background: var(--teal-bg2) !important; }
.notif-dot { background: var(--or) !important; }
.notif-mark-all { color: var(--or2) !important; }

/* ── 16. PROFILE PAGE ──────────────────────────────────────── */
.profile-header {
  background: linear-gradient(135deg, var(--teal-bg), var(--teal-bg2)) !important;
}
.profile-avatar { background: var(--grad-primary) !important; }
.pstat-num { color: var(--or2) !important; }
.avatar-change-btn { background: var(--or) !important; }

/* ── 17. DASHBOARD ─────────────────────────────────────────── */
.dash-header {
  background: linear-gradient(135deg, var(--teal-bg), var(--teal-bg2)) !important;
}
.stat-card { border-left-color: var(--or) !important; }
.stat-num  { color: var(--or2) !important; }

/* ── 18. ADMIN PANEL ───────────────────────────────────────── */
.admin-sb { background: #0F4D4D !important; } /* teal rất đậm */
.admin-sb-logo { color: #36B793 !important; border-bottom-color: rgba(54,183,147,.15) !important; }
.admin-sb-section { color: rgba(54,183,147,.45) !important; }
.admin-sb-item { color: rgba(200,238,231,.7) !important; }
.admin-sb-item:hover {
  background: rgba(54,183,147,.12) !important;
  color: #C8EEE7 !important;
}
.admin-sb-item.active {
  background: rgba(54,183,147,.2) !important;
  color: #36B793 !important;
  border-left-color: #36B793 !important;
}
.admin-sb-sep { background: rgba(54,183,147,.12) !important; }

/* Admin bottom nav */
.admin-bottom-nav { background: #0F4D4D !important; }
.admin-bottom-nav-item { color: rgba(200,238,231,.6) !important; }
.admin-bottom-nav-item.active { color: #36B793 !important; }
.admin-bottom-nav-item.active::before { background: #36B793 !important; }
.admin-bottom-nav-item:hover { color: #C8EEE7 !important; }

/* Admin stats */
.stat-card.green  { border-left-color: #36B793 !important; }
.stat-card.blue   { border-left-color: #238483 !important; }
.stat-card.purple { border-left-color: #289E8E !important; }
.stat-card.amber  { border-left-color: #1A8E7A !important; }

.stat-card.green  .stat-num { color: #1A8070 !important; }
.stat-card.blue   .stat-num { color: #1A6B6B !important; }
.stat-card.purple .stat-num { color: #238483 !important; }
.stat-card.amber  .stat-num { color: #1A8E7A !important; }

/* Admin topbar */
.admin-topbar { border-bottom-color: var(--teal-bg2) !important; }

/* Admin table hover */
.admin-table tr:hover td { background: var(--teal-bg) !important; }

/* Filter row focus */
.filter-row input:focus, .filter-row select:focus {
  border-color: var(--or) !important;
}

/* Frame type badge */
.ftype.sel { border-color: var(--or) !important; background: var(--teal-bg) !important; }

/* Pending badge */
.admin-sb-badge { background: #E74C3C !important; }

/* ── 19. TRENDING / SAMPLE CARDS ───────────────────────────── */
/* Trending cards – đổi màu gradient sang teal */
.tcard:hover { box-shadow: 0 8px 32px rgba(40,158,142,.20) !important; }
.scard:hover { border-color: var(--or) !important; }

/* ── 20. AUTH PAGES ────────────────────────────────────────── */
body.auth-page,
body:has(.auth-card) {
  background: linear-gradient(135deg, var(--teal-bg) 0%, #C8EAE5 100%) !important;
}

.auth-logo a { color: var(--or2) !important; }
.auth-footer a { color: var(--or) !important; }

/* ── 21. SETTINGS PAGE ─────────────────────────────────────── */
.settings-card h3 { border-bottom-color: var(--teal-bg2) !important; }

/* ── 22. LINKS ─────────────────────────────────────────────── */
a { color: var(--or2); }
a:hover { color: var(--or); }
.ft-example, .fti-ex { color: var(--or) !important; }

/* ── 23. SPINNER ───────────────────────────────────────────── */
.spinner { border-top-color: var(--or) !important; }

/* ── 24. TOAST ─────────────────────────────────────────────── */
.toast.success { background: #36B793 !important; }
.toast.info    { background: var(--or2) !important; }
.toast.error   { background: #E74C3C !important; }

/* ── 25. FRAME PICKER SHEET (mobile) ───────────────────────── */
.mobile-frame-picker-btn {
  background: var(--grad-primary) !important;
  box-shadow: 0 4px 16px rgba(40,158,142,.40) !important;
}
.fps-close:hover { color: var(--or) !important; }
.fps-search input:focus { border-color: var(--or) !important; }

/* ── 26. CATEGORIES ────────────────────────────────────────── */
.cat-item input:focus { border-color: var(--or) !important; }
.sug-chip:hover { border-color: var(--or) !important; color: var(--or) !important; }

/* ── 27. ANALYTICS ─────────────────────────────────────────── */
.conv-box { background: linear-gradient(135deg, var(--teal-bg), var(--teal-bg2)) !important; }
.conv-rate { color: var(--or2) !important; }
.range-btn.active, .range-btn:hover { background: var(--or) !important; border-color: var(--or) !important; }

/* ── 28. CHART.JS COLORS (global default) ───────────────────── */
/* Chart.js dùng màu qua JS – không override ở đây, 
   thay trong admin.js bằng màu teal */

/* ── 29. SECTION BACKGROUNDS ───────────────────────────────── */
.sec-alt { background: var(--teal-bg) !important; }
.samples { background: #fff !important; }

/* ── 30. FOOTER – CONNECT VIETNAM ──────────────────────────── */
.footer {
  background: #0A3D3D !important; /* teal rất đậm – gần đen */
  color: #9FD9CF !important;
}
.footer-logo { color: #36B793 !important; }
.footer p, .foot p { color: #9FD9CF !important; }
.footer-links a, .flinks a { color: #7ACFC2 !important; }
.footer-links a:hover, .flinks a:hover { color: #36B793 !important; }

/* Copyright line */
.footer-copyright {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(54,183,147,.15);
  font-size: .78rem;
  color: #6ABBB4;
  text-align: center;
  line-height: 1.6;
}
.footer-copyright a {
  color: #36B793;
  text-decoration: none;
  font-weight: 600;
}
.footer-copyright a:hover { text-decoration: underline; }

/* ── 31. NAV LOGO – hiện logo ảnh thay text ────────────────── */
.site-logo-img {
  height: 32px;
  width: auto;
  object-fit: contain;
  vertical-align: middle;
}
/* Ẩn text logo khi có ảnh */
.nav-logo:has(.site-logo-img) .site-logo-text { display: none; }
.nav-logo:has(.site-logo-img) .logo-icon      { display: none; }

/* ── 32. INPUT CHECKBOX / RADIO ────────────────────────────── */
input[type=checkbox],
input[type=radio] {
  accent-color: var(--or);
}

/* ── 33. SCROLLBAR (webkit) ────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #B8DED8; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--or); }