/*
Theme Name: Sino Order
Theme URI: https://sinoorder.com
Author: Sino Order
Description: Theme cho website gioi thieu he thong order Trung Quoc Sino Order.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
Text Domain: sinoorder
*/

  :root{
    --bg:#FFF9F6;
    --surface:#FFFFFF;
    --primary:#DC2626;
    --primary-dark:#991B1B;
    --secondary:#D97706;
    --text-main:#1C1917;
    --text-muted:#78716C;
    --success:#059669;
    --border:#F0E2D8;
    --shadow-card: 0 4px 20px -2px rgba(220,38,38,0.10);
    --shadow-card-hover: 0 14px 30px -8px rgba(220,38,38,0.18), 0 8px 12px -6px rgba(217,119,6,0.12);
    --shadow-btn: 0 4px 16px 0 rgba(220,38,38,0.35);
    --shadow-glow: 0 0 24px rgba(220,38,38,0.45);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    font-family:'Plus Jakarta Sans', sans-serif;
    background:var(--bg);
    color:var(--text-main);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4{font-weight:800; letter-spacing:-0.02em; line-height:1.1; margin:0;}
  h3{font-weight:700;}
  p{margin:0;}
  a{text-decoration:none; color:inherit;}
  .container{max-width:1280px; margin:0 auto; padding:0 24px;}
  .grad-text{
    background:linear-gradient(90deg, var(--primary), var(--secondary));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .grad-bg{background:linear-gradient(135deg, var(--primary), var(--secondary));}
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-size:13px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
    color:var(--primary);
    background:#FEF1EE; border:1px solid #FBDCD4;
    padding:6px 14px; border-radius:999px;
  }
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    font-weight:700; font-size:15px;
    padding:13px 26px; border-radius:12px;
    transition:transform 0.2s ease-out, box-shadow 0.2s ease-out, background 0.2s ease-out;
    cursor:pointer; border:none; white-space:nowrap;
  }
  .btn-primary{ background:linear-gradient(135deg, var(--primary), var(--secondary)); color:#fff; box-shadow:var(--shadow-btn); }
  .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 8px 22px 0 rgba(220,38,38,0.4); }
  .btn-secondary{ background:#fff; color:var(--text-main); border:1px solid var(--border); }
  .btn-secondary:hover{ background:#FFFBF8; border-color:#E7C9BA; transform:translateY(-2px); }
  .btn-dark{ background:#fff; color:var(--primary-dark); }
  .btn-dark:hover{ transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,0,0,0.2); }

  .card{
    background:var(--surface);
    border:1px solid #FBEEE7;
    border-radius:20px;
    box-shadow:var(--shadow-card);
    transition:transform 0.25s ease-out, box-shadow 0.25s ease-out;
  }
  .card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-card-hover); }

  .blob{ position:absolute; border-radius:999px; filter:blur(80px); pointer-events:none; }

  section{ padding:64px 0; }
  @media(min-width:640px){ section{ padding:80px 0; } }
  @media(min-width:1024px){ section{ padding:104px 0; } }

  nav{
    position:sticky; top:0; z-index:50;
    background:rgba(255,249,246,0.85);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--border);
    transition:background .3s ease, backdrop-filter .3s ease, border-color .3s ease;
  }
  .nav-inner{
    display:flex; align-items:center; justify-content:space-between; height:76px;
    transition:background .3s ease, box-shadow .3s ease, border-radius .3s ease, height .3s ease, margin .3s ease, padding .3s ease, max-width .3s ease;
  }
  nav.nav-floating{ background:transparent; backdrop-filter:none; border-bottom-color:transparent; }
  nav.nav-floating .nav-inner{
    background:rgba(255,255,255,0.92);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border:1px solid var(--border);
    border-radius:999px;
    box-shadow:var(--shadow-card-hover);
    margin:12px auto;
    height:60px;
    padding:0 26px;
    max-width:1120px;
  }
  .nav-link{ color:var(--text-muted); font-weight:500; font-size:15px; transition:color 0.15s; }
  .nav-link:hover{ color:var(--primary); }

  .nav-toggle{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
    width:40px; height:40px; background:transparent; border:1px solid var(--border);
    border-radius:10px; cursor:pointer; flex-shrink:0;
  }
  .nav-toggle span{ display:block; width:18px; height:2px; background:var(--text-main); border-radius:2px; transition:transform .25s ease, opacity .25s ease; }
  .nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2){ opacity:0; }
  .nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  .nav-mobile{
    display:none; flex-direction:column;
    background:var(--bg); border-bottom:1px solid var(--border);
    padding:8px 24px 18px;
  }
  .nav-mobile.open{ display:flex; }
  .nav-mobile a{
    padding:13px 0; font-weight:600; font-size:15px; color:var(--text-main);
    border-bottom:1px solid var(--border);
  }
  .nav-mobile a:last-child{ border-bottom:none; }

  @media(min-width:1024px){
    .nav-toggle{ display:none; }
    .nav-mobile{ display:none !important; }
  }

  .isometric{
    perspective:2000px;
  }
  .isometric-inner{
    transform:rotateX(6deg) rotateY(-10deg);
    transition:transform 0.4s ease-out;
  }
  .isometric:hover .isometric-inner{
    transform:rotateX(2deg) rotateY(-4deg);
  }

  .feature-visual{
    transform:rotateY(6deg);
    transition:transform 0.35s ease-out;
  }
  .feature-visual.flip{ transform:rotateY(-6deg); }
  .feature-row:hover .feature-visual{ transform:rotateY(0deg); }

  .pulse-soft{ animation:pulseSoft 4s ease-in-out infinite; }
  @keyframes pulseSoft{ 0%,100%{opacity:1; transform:translateY(0);} 50%{opacity:0.85; transform:translateY(-6px);} }

  .stat-num{ font-size:40px; font-weight:800; letter-spacing:-0.02em; }
  @media(min-width:768px){ .stat-num{ font-size:48px; } }

  details summary{ cursor:pointer; list-style:none; }
  details summary::-webkit-details-marker{ display:none; }
  details[open] .chev{ transform:rotate(180deg); }
  .chev{ transition:transform 0.25s ease-out; }

  input, select{
    width:100%;
    background:#fff;
    border:1px solid var(--border);
    border-radius:10px;
    padding:11px 14px;
    font-family:inherit;
    font-size:15px;
    color:var(--text-main);
  }
  input:focus, select:focus{
    outline:none;
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(220,38,38,0.15);
  }
  label{ font-size:13px; font-weight:600; color:#44403C; display:block; margin-bottom:6px; }

  @media (prefers-reduced-motion: reduce){
    *{ animation:none !important; transition:none !important; }
  }

  /* ---- logo marquee ---- */
  .marquee-wrap{
    overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
    mask-image:linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  }
  .marquee-track{
    display:flex;
    align-items:center;
    gap:56px;
    width:max-content;
    animation:marqueeScroll 28s linear infinite;
  }
  .marquee-wrap:hover .marquee-track{ animation-play-state:paused; }
  @keyframes marqueeScroll{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
  }
  .logo-badge{
    display:flex; align-items:center; gap:10px;
    padding:10px 18px;
    border-radius:12px;
    border:1px solid var(--border);
    background:#fff;
    white-space:nowrap;
    filter:grayscale(100%);
    opacity:0.65;
    transition:opacity 0.2s, filter 0.2s, transform 0.2s;
  }
  .logo-badge:hover{ filter:grayscale(0%); opacity:1; transform:translateY(-2px); }
  .logo-badge .logo-icon{
    width:26px; height:26px; border-radius:7px;
    background:linear-gradient(135deg, var(--primary), var(--secondary));
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .logo-badge .logo-icon i{ width:14px; height:14px; color:#fff; }
  .logo-badge span{ font-weight:700; font-size:14.5px; color:var(--text-main); }

  /* ---- responsive grids (no build step, plain CSS) ---- */
  .hero-grid{ display:grid; grid-template-columns:1fr; gap:56px; align-items:center; }
  .grid-2{ display:grid; grid-template-columns:1fr; gap:20px; }
  .grid-3{ display:grid; grid-template-columns:1fr; gap:24px; }
  .grid-4{ display:grid; grid-template-columns:1fr 1fr; gap:32px; text-align:center; }
  .grid-4-footer{ display:grid; grid-template-columns:1fr; gap:36px; }
  .grid-2-cta{ display:grid; grid-template-columns:1fr; gap:40px; align-items:center; }
  .feature-row{ display:grid; grid-template-columns:1fr; gap:40px; align-items:center; margin-bottom:72px; }
  @media(min-width:640px){
    .grid-3{ grid-template-columns:1fr 1fr; }
    .grid-4-footer{ grid-template-columns:1fr 1fr; }
  }
  @media(min-width:768px){
    .grid-2{ grid-template-columns:1fr 1fr; }
  }
  @media(min-width:1024px){
    .hero-grid{ grid-template-columns:1fr 1fr; }
    .grid-3{ grid-template-columns:1fr 1fr 1fr; }
    .grid-4{ grid-template-columns:1fr 1fr 1fr 1fr; }
    .grid-4-footer{ grid-template-columns:1.4fr 1fr 1fr 1fr; }
    .grid-2-cta{ grid-template-columns:1fr 1fr; }
    .feature-row{ grid-template-columns:1fr 1fr; }
    nav .nav-links{ display:flex !important; }
    nav #loginLink{ display:inline-block !important; }
    h1{ font-size:52px !important; }
    h1.hero-title{ font-size:42px !important; }
  }

  /* ---- shared components for subpages ---- */
  .chip{ display:inline-flex; align-items:center; padding:8px 16px; border-radius:999px; border:1px solid var(--border); background:#fff; font-size:13px; font-weight:600; color:var(--text-muted); cursor:pointer; transition:all .2s; }
  .chip.active, .chip:hover{ background:linear-gradient(135deg,var(--primary),var(--secondary)); color:#fff; border-color:transparent; }
  .avatar-circle{ width:56px; height:56px; border-radius:999px; background:linear-gradient(135deg,var(--primary),var(--secondary)); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:18px; flex-shrink:0; }
  .compare-table{ width:100%; border-collapse:collapse; font-size:14px; }
  .compare-table th, .compare-table td{ padding:14px 16px; text-align:center; border-bottom:1px solid var(--border); }
  .compare-table th:first-child, .compare-table td:first-child{ text-align:left; }
  .compare-table thead th{ font-weight:800; font-size:15px; }
  .breadcrumb{ font-size:13px; color:var(--text-muted); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .breadcrumb a{ color:var(--text-muted); }
  .breadcrumb a:hover{ color:var(--primary); }
  .blog-cover{ border-radius:16px; aspect-ratio:16/9; height:auto; width:100%; background:linear-gradient(135deg, var(--primary), var(--secondary)); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
  .prose p{ margin-bottom:16px; font-size:15.5px; line-height:1.8; color:#44403C; }
  .prose h2{ font-size:22px; margin-top:32px; margin-bottom:12px; }
  .prose h3{ font-size:18px; margin-top:24px; margin-bottom:10px; }
  .prose ul{ margin:0 0 16px; padding-left:20px; }
  .prose li{ margin-bottom:8px; font-size:15.5px; color:#44403C; line-height:1.7; }
  .prose blockquote{ border-left:4px solid var(--primary); padding:14px 20px; margin:24px 0; background:#FFF7F5; border-radius:0 12px 12px 0; font-style:italic; color:#44403C; }
  .page-hero{ padding:56px 0 8px; }

  /* ---- tawk.to-style homepage additions ---- */
  .rotate-word{ background:linear-gradient(90deg,var(--primary),var(--secondary)); -webkit-background-clip:text; background-clip:text; color:transparent; display:inline-block; vertical-align:top; white-space:nowrap; text-align:center; will-change:opacity, transform; }
  .pill-strip{ display:flex; flex-wrap:wrap; gap:8px; }
  .pill-tag{ display:inline-flex; align-items:center; padding:6px 13px; border-radius:8px; background:#F5F1EC; border:1px solid var(--border); font-size:12px; font-weight:700; color:var(--text-muted); }
  .pill-tag.active{ background:#1C1917; color:#fff; border-color:#1C1917; }
  .float-card{ position:absolute; background:#fff; border:1px solid var(--border); border-radius:12px; padding:9px 13px; box-shadow:var(--shadow-card); font-size:11.5px; font-weight:600; display:flex; align-items:center; gap:8px; animation:floatY 5s ease-in-out infinite; white-space:nowrap; }
  @keyframes floatY{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);} }
  .section-label{ font-size:12.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--primary); }
  .showcase-row{ display:grid; grid-template-columns:1fr; gap:36px; align-items:center; padding:44px 0; border-bottom:1px solid var(--border); }
  .showcase-row:last-child{ border-bottom:none; }
  @media(min-width:1024px){
    .showcase-row{ grid-template-columns:1fr 1fr; gap:64px; }
    .showcase-row.flip .showcase-visual{ order:2; }
  }
  .quote-mark{ font-size:56px; line-height:1; color:var(--primary); opacity:.3; font-family:Georgia,serif; }
  .counter{ font-size:38px; font-weight:800; }
  @media(min-width:768px){ .counter{ font-size:50px; } }
  .faq-cat{ display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:999px; border:1px solid var(--border); background:#fff; font-size:13px; font-weight:600; color:var(--text-muted); cursor:pointer; }
  .faq-cat.active{ background:linear-gradient(135deg,var(--primary),var(--secondary)); color:#fff; border-color:transparent; }
  .code-box{ background:#1C1917; border-radius:14px; padding:18px 20px; font-family:'SFMono-Regular',Consolas,monospace; font-size:12.5px; color:#D6D3D1; overflow-x:auto; }
  .code-box .tag{ color:#F87171; } .code-box .attr{ color:#FBBF24; } .code-box .str{ color:#86EFAC; }

  /* ---- dashboard mockup ---- */
  .dash-icon-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
  @media(min-width:520px){ .dash-icon-grid{ grid-template-columns:repeat(4, 1fr); } }
  @media(min-width:768px){ .dash-icon-grid{ grid-template-columns:repeat(5, 1fr); } }
  .dash-icon-item{ display:flex; flex-direction:column; align-items:center; gap:8px; border:1px solid var(--border); border-radius:12px; padding:14px 6px; background:#fff; text-align:center; }
  .dash-icon-circle{ width:38px; height:38px; border-radius:999px; background:#FEF1EE; display:flex; align-items:center; justify-content:center; }
  .dash-icon-circle i{ width:18px; height:18px; color:var(--primary); }
  .dash-icon-item span{ font-size:9.5px; font-weight:700; color:var(--text-main); line-height:1.3; letter-spacing:.01em; }
  @media(max-width:639px){ .dash-sidebar{ display:none; } }

  /* ---- messy spreadsheet mockup ---- */
  .xls-card{ background:#fff; border-radius:14px; overflow:hidden; box-shadow:var(--shadow-glow); border:1px solid var(--border); }
  .xls-header{ background:#1D6F42; color:#fff; padding:8px 14px; display:flex; align-items:center; gap:8px; font-size:11.5px; font-weight:700; }
  .xls-toolbar{ background:#F3F1EC; border-bottom:1px solid var(--border); padding:6px 10px; display:flex; gap:6px; }
  .xls-toolbar span{ width:22px; height:20px; border-radius:4px; background:#fff; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:var(--text-muted); }
  .xls-formula-bar{ display:flex; align-items:center; gap:8px; padding:6px 10px; border-bottom:1px solid var(--border); font-size:10.5px; color:var(--text-muted); background:#fff; }
  .xls-formula-bar .ref{ border:1px solid var(--border); border-radius:4px; padding:2px 8px; font-weight:700; color:var(--text-main); background:#FAF7F4; flex-shrink:0; }
  .xls-formula-bar .fx{ font-style:italic; font-weight:700; color:#1D6F42; flex-shrink:0; }
  .xls-formula-bar .formula{ flex:1; font-family:'SFMono-Regular',Consolas,monospace; color:var(--text-main); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .xls-table{ border-collapse:collapse; width:100%; font-size:10.5px; table-layout:fixed; }
  .xls-table th, .xls-table td{ border:1px solid #E2DACF; padding:5px 7px; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .xls-table thead th{ background:#F3F1EC; color:var(--text-muted); font-weight:700; text-align:center; }
  .xls-table .rownum{ background:#F3F1EC; color:var(--text-muted); font-weight:700; text-align:center; }
  .xls-flag{ position:relative; }
  .xls-flag::after{ content:''; position:absolute; top:0; right:0; border-width:0 7px 7px 0; border-style:solid; border-color:transparent var(--primary) transparent transparent; }
  .xls-circle{ display:inline-block; border:2px solid var(--primary); border-radius:50% / 60%; padding:0 7px; transform:rotate(-5deg); }
  .xls-tabs{ display:flex; align-items:center; gap:2px; background:#F3F1EC; border-top:1px solid var(--border); padding:5px 8px; font-size:9.5px; overflow-x:auto; }
  .xls-tabs span{ padding:4px 10px; border-radius:4px 4px 0 0; color:var(--text-muted); flex-shrink:0; }
  .xls-tabs span.active{ background:#fff; color:var(--text-main); font-weight:700; border:1px solid var(--border); border-bottom:none; }

  /* ---- clickable hero tabs / panels ---- */
  #heroTabs .pill-tag{ cursor:pointer; user-select:none; }
  .tab-panel{ display:none; }
  .tab-panel.active{ display:block; animation:fadeIn .25s ease; }
  @keyframes fadeIn{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:translateY(0); } }
  .sidebar-item{ transition:background .2s; }
  .sidebar-item.active{ background:linear-gradient(135deg,var(--primary),var(--secondary)); }
  .sidebar-item.active i{ color:#fff !important; }
  .sidebar-item.active span{ color:#fff !important; }
  .dash-table-wrap{ overflow-x:auto; }
  .dash-table{ width:100%; border-collapse:collapse; font-size:10.5px; min-width:480px; }
  .dash-table th{ text-align:left; font-weight:700; color:var(--text-muted); padding:8px 12px; border-bottom:1px solid var(--border); background:#FAF7F4; white-space:nowrap; }
  .dash-table td{ padding:9px 12px; border-bottom:1px solid var(--border); vertical-align:top; }
  .dash-table tr:last-child td{ border-bottom:none; }

  /* ---- AI chat animation (homepage) ---- */
  .sino-ai-card{ min-height:282px; }
  .sino-chat{ display:flex; flex-direction:column; justify-content:flex-end; min-height:210px; }
  .sino-chat-log{ display:flex; flex-direction:column; gap:10px; }
  .sino-chat-msg{ display:flex; gap:10px; }
  .sino-chat-msg.user{ flex-direction:row-reverse; }
  .sino-chat-msg .bubble{
    max-width:280px; border-radius:10px; padding:8px 12px; font-size:12.5px; line-height:1.5;
    animation:chatIn .35s ease-out both;
  }
  .sino-chat-msg.user .bubble{ background:#F5F1EC; color:var(--text-main); }
  .sino-chat-msg.ai .bubble{ background:linear-gradient(135deg,var(--primary),var(--secondary)); color:#fff; }
  .sino-chat-msg .avatar{
    width:26px; height:26px; border-radius:999px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    font-size:11px; font-weight:800; color:#fff; margin-top:auto;
  }
  .sino-chat-msg.user .avatar{ background:#1C1917; }
  .sino-chat-msg.ai .avatar{ background:linear-gradient(135deg,var(--primary),var(--secondary)); }
  @keyframes chatIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }

  .sino-chat-typing{ display:inline-flex; align-items:center; gap:4px; padding:9px 12px; background:#F5F1EC; border-radius:10px; width:fit-content; }
  .sino-chat-typing span{ width:6px; height:6px; border-radius:999px; background:var(--text-muted); animation:typingDot 1.2s ease-in-out infinite; }
  .sino-chat-typing span:nth-child(2){ animation-delay:.15s; }
  .sino-chat-typing span:nth-child(3){ animation-delay:.3s; }
  @keyframes typingDot{ 0%,60%,100%{ transform:translateY(0); opacity:.4; } 30%{ transform:translateY(-4px); opacity:1; } }

  .sino-chat-msg .typed-cursor{ color:#fff; font-weight:400; opacity:1; animation:chatCursor .8s steps(1) infinite; }
  .sino-chat-msg.user .typed-cursor{ color:var(--text-muted); }
  @keyframes chatCursor{ 0%,100%{ opacity:1; } 50%{ opacity:0; } }
  .sino-ai-online{ animation:pulseSoft 2s ease-in-out infinite; }

  /* ---- marketplace platform logos (decorative) ---- */
  .platform-strip{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
  .platform-chip{
    display:inline-flex; align-items:center; gap:7px;
    background:#fff; border:1px solid var(--border); border-radius:999px;
    padding:5px 12px;
    box-shadow:var(--shadow-card);
    transition:transform .2s ease-out, box-shadow .2s ease-out;
  }
  .platform-chip:hover{ transform:translateY(-2px); box-shadow:var(--shadow-card-hover); }
  .platform-chip img{ height:18px; width:auto; display:block; }
  .platform-chip span{ font-size:12px; font-weight:700; color:var(--text-main); }
  .platform-logo{ display:inline-flex; align-items:center; flex-shrink:0; }
  .platform-logo img{ display:block; height:100%; width:auto; }
  .platform-badge{
    display:inline-flex; align-items:center; justify-content:center;
    background:#fff; border-radius:6px; box-shadow:0 1px 4px rgba(0,0,0,0.15);
  }
  .platform-badge img{ display:block; }

  /* ================= MOBILE OPTIMIZATION ================= */
  @media (max-width: 767px) {
    /* Flatten 3D mockups so dashboards display cleanly on small screens. */
    .isometric{ perspective:none !important; }
    .isometric-inner{ transform:none !important; }
    .feature-visual, .feature-visual.flip{ transform:none !important; }

    /* Hide decorative floating cards that overflow on mobile. */
    .float-card{ display:none !important; }

    /* Excel mockup: flow naturally instead of absolute-centered in fixed height. */
    .excel-stage{ height:auto !important; margin-top:28px !important; }
    .excel-stage .xls-card{ position:relative !important; top:auto !important; left:auto !important; transform:none !important; max-width:100% !important; }

    /* Dashboard top bar: wrap instead of overflowing. */
    .dash-topbar{ flex-wrap:wrap !important; row-gap:6px !important; padding:8px 12px !important; }
    .dash-topbar > div{ flex-wrap:wrap !important; gap:8px !important; }

    /* Tighter dashboard content padding. */
    .dash-content{ padding:14px 12px 18px !important; }

    /* Tables: allow less horizontal scroll. */
    .dash-table{ min-width:400px !important; }

    /* 3-column grids collapse to a single column. */
    .status-cols, .revenue-cols{ grid-template-columns:1fr !important; }
  }

  /* ---- who it's for: image cards ---- */
  .who-grid{ gap:20px; }
  .who-card img{ display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; }

  /* ---- image search (Tính năng) ---- */
  .img-drop{
    flex:1; min-width:0; display:flex; align-items:center; justify-content:center;
    border:1.5px dashed var(--border); border-radius:9px; padding:10px 12px;
    font-size:12.5px; color:var(--text-muted); background:#fff; cursor:pointer;
    transition:border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
  }
  .img-drop:hover{ border-color:var(--primary); background:#FEF1EE; }
  .img-drop.dragover{ border-color:var(--primary); background:#FEF1EE; box-shadow:0 0 0 3px rgba(220,38,38,0.15); transform:scale(1.01); }
  .img-drop-inner{ display:flex; align-items:center; gap:8px; min-width:0; }
  .img-drop-text{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600; }
  .img-drop-preview{ display:flex; align-items:center; gap:8px; min-width:0; }
  .img-drop-preview img{ width:26px; height:26px; border-radius:6px; object-fit:cover; flex-shrink:0; }
  .img-drop-preview span{ font-size:12px; font-weight:600; color:var(--primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  .img-search-btn{ display:inline-flex; align-items:center; gap:8px; }
  .img-search-spinner{ display:none; width:14px; height:14px; border:2px solid rgba(255,255,255,0.45); border-top-color:#fff; border-radius:50%; animation:imgSpin .6s linear infinite; }
  .img-search-btn.loading .img-search-spinner{ display:inline-block; }
  .img-search-btn.loading .img-search-label{ display:none; }
  @keyframes imgSpin{ to{ transform:rotate(360deg); } }

  .demo-prod-img{ opacity:0; transform:translateY(8px) scale(.98); transition:opacity .45s ease, transform .45s ease; }
  .demo-prod-img.loaded{ opacity:1; transform:none; }

  /* ---- auto drag ghost (image search demo) ---- */
  .drag-ghost{
    position:absolute; left:0; top:0; z-index:6; pointer-events:none;
    display:flex; align-items:center; gap:8px;
    background:#fff; border:1px solid var(--border); border-radius:10px;
    padding:6px 10px 6px 6px; box-shadow:var(--shadow-card-hover);
    font-size:11.5px; font-weight:600; color:var(--text-main);
  }
  .drag-ghost img{ width:30px; height:30px; border-radius:6px; object-fit:cover; flex-shrink:0; }
  .drag-ghost span{ white-space:nowrap; }

  /* ---- platform select dropdown (image search demo) ---- */
  .platform-select{ position:relative; flex-shrink:0; }
  .platform-select-btn{
    display:inline-flex; align-items:center; gap:6px; height:100%;
    border:1px solid var(--border); border-radius:9px; padding:0 10px;
    font-size:12.5px; font-weight:700; color:var(--text-muted); background:#fff; cursor:pointer;
    transition:border-color .2s, color .2s;
  }
  .platform-select-btn:hover{ border-color:var(--primary); color:var(--primary); }
  .platform-select-menu{
    position:absolute; top:calc(100% + 6px); left:0; z-index:30; min-width:120px;
    background:#fff; border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow-card-hover);
    padding:6px; display:flex; flex-direction:column; gap:2px;
    animation:selectIn .18s ease;
  }
  @keyframes selectIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:translateY(0); } }
  .platform-select-option{
    padding:7px 10px; border-radius:7px; font-size:12.5px; font-weight:600; color:var(--text-main); cursor:pointer;
    transition:background .15s, color .15s;
  }
  .platform-select-option:hover{ background:#FEF1EE; color:var(--primary); }
  .platform-select-option.active{ background:linear-gradient(135deg,var(--primary),var(--secondary)); color:#fff; }

  /* ---- who it's for: center-focus carousel ---- */
  .who-viewport{ position:relative; overflow:hidden; }
  .who-carousel{
    display:flex; gap:20px; will-change:transform;
    transition:transform .55s cubic-bezier(.4,0,.2,1);
    cursor:grab; user-select:none; -webkit-user-select:none;
    touch-action:pan-y;
  }
  .who-carousel.dragging{ cursor:grabbing; transition:none; }
  .who-slide{ flex:0 0 82%; text-align:left; transform:scale(.85); opacity:.5; transition:transform .55s ease, opacity .55s ease; }
  @media(min-width:640px){ .who-slide{ flex:0 0 55%; } }
  .who-slide.active{ transform:scale(1); opacity:1; }

  .who-slide-media{ position:relative; border-radius:16px; overflow:hidden; background:#F5F1EC; aspect-ratio:16/10; }
  .who-slide-media img{ width:100%; height:100%; object-fit:cover; display:block; }
  .who-slide-tag{
    position:absolute; left:12px; bottom:12px;
    background:rgba(0,0,0,0.55); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
    color:#fff; padding:6px 13px; border-radius:999px; font-size:12.5px; font-weight:700;
  }
  .who-slide-desc{ margin-top:10px; font-size:13px; color:var(--text-muted); }

  .who-nav{
    position:absolute; top:42%; transform:translateY(-50%); z-index:5;
    width:40px; height:40px; border-radius:999px; border:1px solid var(--border);
    background:rgba(255,255,255,0.92); box-shadow:var(--shadow-card); cursor:pointer;
    display:flex; align-items:center; justify-content:center; color:var(--text-muted);
    transition:color .2s, box-shadow .2s;
  }
  .who-nav:hover{ color:var(--primary); box-shadow:var(--shadow-card-hover); }
  .who-nav svg{ width:16px; height:16px; }
  .who-prev{ left:8px; }
  .who-next{ right:8px; }

  .who-dots{ display:flex; justify-content:center; gap:8px; margin-top:22px; }
  .who-dot{
    height:6px; border-radius:999px; border:none; background:var(--border); cursor:pointer;
    width:6px; padding:0; transition:width .3s ease, background .3s ease;
  }
  .who-dot.active{ width:20px; background:linear-gradient(90deg,var(--primary),var(--secondary)); }

  /* ---- team portrait cards (Giới thiệu) ---- */
  .team-card img{ display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; }

  /* ---- animated chart (Tính năng / Quản trị & báo cáo) ---- */
  .chart-line, .chart-baseline{ stroke-dasharray:1; stroke-dashoffset:1; }
  .chart-line{ animation:chartDraw 4.2s ease-in-out infinite; }
  .chart-baseline{ animation:chartDraw 4.2s ease-in-out infinite; }
  .chart-fill{ animation:chartFillFade 4.2s ease-in-out infinite; }
  .chart-dot{ transform-box:fill-box; transform-origin:center; }
  .chart-ping{ transform-box:fill-box; transform-origin:center; animation:chartPing 2.1s ease-out infinite; }
  @keyframes chartDraw{ 0%{ stroke-dashoffset:1; } 55%{ stroke-dashoffset:0; } 100%{ stroke-dashoffset:0; } }
  @keyframes chartFillFade{ 0%{ opacity:0; } 45%{ opacity:0; } 70%{ opacity:1; } 90%{ opacity:1; } 100%{ opacity:0; } }
  @keyframes chartPing{ 0%{ transform:scale(1); opacity:.7; } 100%{ transform:scale(3.2); opacity:0; } }