/* assets/css/demo.css — Style cho trang xem demo (includes/demo.php).
   Tách ra từ inline <style> để trình duyệt cache riêng, và để sửa CSS
   không cần đụng vào file PHP. Phần @font-face (cần biến APP_BASE_PATH)
   vẫn nằm inline trong includes/demo.php, không tách sang đây. */

  * { box-sizing: border-box; }
  html, body {
    margin: 0; padding: 0; height: 100%;
    background: #0b0c10; /* fallback nếu JS chưa kịp gắn data-theme (hiếm) */
    font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    overflow: hidden;
  }
  html[data-theme="light"], html[data-theme="light"] body { background: #ffffff; }
  html[data-theme="dark"],  html[data-theme="dark"]  body { background: #0b0c10; }

  .frame-wrap {
    position: fixed; inset: 0;
  }
  iframe {
    width: 100%; height: 100%;
    border: none;
    display: block;
    background: transparent;
  }

  /* ============ MÀN CHE CHỐNG CHỚP MÀU KHI ĐANG TẢI DEMO ============ *
   * Màu ban đầu của màn che lấy THEO ĐÚNG theme (sáng/tối) mà người xem *
   * đang chọn trên trang chủ giaodien.ngocphumedia.com — vì đó là màu   *
   * họ vừa nhìn thấy trước khi bấm vào xem demo, nên khớp thì sẽ không  *
   * thấy chớp gì cả (trắng→trắng hoặc tối→tối). Nếu bản demo cụ thể có  *
   * nền khác màu theme đó, JS bên dưới sẽ dò đúng màu thật rồi đồng bộ  *
   * lại rất nhanh — vẫn chỉ 1 lần chớp duy nhất, không chớp lặp lại.    *
   * Khi trang đã có nội dung, màn che tự "hé" ra bằng hiệu ứng mờ dần,  *
   * giống hiệu ứng chuyển trang, thay vì giữ loading lâu.               */
  .demo-loader {
    position: fixed; inset: 0;
    z-index: 2000;
    background: #0b0c10;
    transition: opacity .6s ease, visibility .6s ease;
    will-change: opacity;
  }
  html[data-theme="light"] .demo-loader { background: #ffffff; }
  .demo-loader.hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .frame-wrap iframe {
    opacity: 0;
    transition: opacity .5s cubic-bezier(.4,0,.2,1);
  }
  .frame-wrap iframe.ready {
    opacity: 1;
  }

  /* ============ THANH LIQUID GLASS (kiểu Apple) ============ */
  .glass-dock {
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%) translateY(90px);
    z-index: 999;

    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px;
    max-width: calc(100vw - 24px);
    overflow-x: auto;

    background: rgba(22, 24, 30, 0.55);
    -webkit-backdrop-filter: blur(26px) saturate(180%);
    backdrop-filter: blur(26px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.45),
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      inset 0 -1px 0 rgba(0, 0, 0, 0.15);

    opacity: 0;
    animation: dockRise .6s cubic-bezier(.2,.8,.2,1) .35s forwards;
  }
  @keyframes dockRise {
    to { transform: translateX(-50%) translateY(0); opacity: 1; }
  }

  .dock-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 74px;
    flex-shrink: 0;
    padding: 6px 6px 5px;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    cursor: pointer;
    background: transparent;
    border: none;
    font-family: inherit;
    z-index: 1;
    transition: color .2s ease, transform .15s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .dock-item:hover { color: rgba(255,255,255,0.95); }
  .dock-item:active { transform: scale(0.94); }
  .dock-item.active { color: #fff; }
  .dock-item svg {
    width: 19px; height: 19px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
    transition: transform .25s cubic-bezier(.3,1.5,.5,1);
  }
  .dock-item.active svg { transform: translateY(-1px) scale(1.08); }
  .dock-item span {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.2px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    white-space: nowrap;
  }

  /* Vạch chia nhẹ + nút "Mua ngay" — gắn ngay trong thanh dock (không nổi
     riêng lẻ đè lên đầu trang) để không lẫn với header/nút riêng của từng
     mẫu demo (vd "Giữ chỗ ngay"), vẫn luôn thấy được vì dock cố định đáy. */
  .dock-divider {
    width: 1px; align-self: stretch; margin: 8px 2px;
    background: rgba(255,255,255,0.16); flex-shrink: 0;
  }
  /* Đăng ký kiểu dữ liệu cho biến góc xoay, để trình duyệt biết nội suy
     mượt (từ 0deg -> 360deg) thay vì nhảy khựng giữa 2 khung hình. Nếu
     trình duyệt/app nào không hỗ trợ dòng @property này thì chỉ đơn giản
     là viền đứng yên (không xoay) — không vỡ giao diện, an toàn tuyệt đối. */
  @property --dockBuyAngle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
  }
  .dock-buy {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; flex-shrink: 0; padding: 6px 12px 5px;
    border: 1.5px solid transparent;
    border-radius: 999px; text-decoration: none; font-family: inherit;
    white-space: nowrap; color: #fff;
    /* Nền thật (gradient cam-đỏ) tô phần BÊN TRONG viền (padding-box),
       còn viền (border-box) tô bằng conic-gradient trắng chạy vòng — ghép
       nền 2 lớp kiểu này KHÔNG cần mask, tương thích rất rộng, không lo
       trình duyệt/app hiểu sai như cách làm trước. */
    background:
      linear-gradient(135deg, #e35b6a, #e2895f) padding-box,
      conic-gradient(from var(--dockBuyAngle),
        rgba(255,255,255,0.12) 0deg,
        rgba(255,255,255,0.95) 95deg,
        rgba(255,255,255,0.12) 190deg,
        rgba(255,255,255,0.55) 285deg,
        rgba(255,255,255,0.12) 360deg) border-box;
    box-shadow: 0 3px 10px rgba(227,91,106,0.5);
    transition: transform .15s ease, box-shadow .15s ease;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    outline: none;
    animation: dockBuyBorderSpin 3.6s linear infinite;
  }
  @keyframes dockBuyBorderSpin { to { --dockBuyAngle: 360deg; } }
  /* Tốc độ xoay khi hover giờ do JS điều khiển mượt (xem script bên dưới,
     đoạn "Vòng lặp xoay viền nút Mua ngay"), ở đây chỉ còn hiệu ứng bóng đổ. */
  .dock-buy:hover { box-shadow: 0 5px 14px rgba(227,91,106,0.6); }
  .dock-buy:focus-visible { box-shadow: 0 0 0 3px rgba(227,91,106,0.45), 0 3px 10px rgba(227,91,106,0.5); }
  .dock-buy:active { transform: scale(0.94); }

  .dock-buy svg {
    width: 19px; height: 19px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
  }
  .dock-buy-icon-wrap { position: relative; display: inline-flex; }
  .dock-buy .dock-buy-plus {
    position: absolute; top: -4px; right: -6px;
    font-size: 12px; font-weight: 900; line-height: 1; text-align: center;
    letter-spacing: normal; color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  }
  .dock-buy span {
    font-size: 10px; font-weight: 700; letter-spacing: 0.2px; white-space: nowrap;
  }

  /* Viên "kính" trượt theo mục đang chọn, thay vì đổi nền tức thời */
  .dock-pill {
    position: absolute;
    top: 3px; bottom: 3px; left: 4px;
    width: 74px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
    transition: transform .35s cubic-bezier(.2,.9,.2,1);
    pointer-events: none;
  }

  /* Badge thương hiệu — đặt dọc theo cạnh trái, không che nội dung web */
  .dock-brand {
    position: fixed;
    left: 14px;
    top: 50%;
    transform: translateY(-50%) translateX(-40px);
    z-index: 999;
    writing-mode: vertical-rl;
    padding: 16px 8px;
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,0.92);
    letter-spacing: .6px;
    background: rgba(22, 24, 30, 0.5);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 999px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    opacity: 0;
    animation: brandSlide .6s cubic-bezier(.2,.8,.2,1) .5s forwards;
  }
  @keyframes brandSlide {
    to { transform: translateY(-50%) translateX(0); opacity: 1; }
  }

  /* ============ BẢNG CHỌN MẪU GIAO DIỆN (bottom sheet) ============ */
  .tpl-sheet-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    opacity: 0; pointer-events: none;
    transition: opacity .25s ease;
    z-index: 1000;
  }
  .tpl-sheet-backdrop.show { opacity: 1; pointer-events: auto; }

  .tpl-sheet {
    position: fixed;
    left: 50%; bottom: 0;
    transform: translateX(-50%) translateY(100%);
    width: min(480px, 100%);
    max-height: 68vh;
    background: rgba(22, 24, 30, 0.94);
    -webkit-backdrop-filter: blur(26px) saturate(180%);
    backdrop-filter: blur(26px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.14);
    border-bottom: none;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -14px 44px rgba(0,0,0,0.5);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    transition: transform .32s cubic-bezier(.2,.9,.2,1);
  }
  .tpl-sheet.show { transform: translateX(-50%) translateY(0); }
  .tpl-sheet-handle {
    width: 36px; height: 4px;
    background: rgba(255,255,255,0.25);
    border-radius: 999px;
    margin: 10px auto 2px;
  }
  .tpl-sheet-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 18px 12px;
    color: #fff; font-size: 14.5px; font-weight: 700;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  .tpl-sheet-close {
    background: none; border: none;
    color: rgba(255,255,255,0.7);
    font-size: 24px; line-height: 1;
    cursor: pointer; padding: 2px 6px;
  }
  .tpl-sheet-close:hover { color: #fff; }
  .tpl-sheet-list {
    overflow-y: auto;
    padding: 12px 14px 22px;
    display: flex; flex-direction: column; gap: 8px;
  }
  .tpl-card {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: #fff;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s ease, transform .15s ease;
  }
  .tpl-card:hover { background: rgba(255,255,255,0.12); }
  .tpl-card:active { transform: scale(0.98); }
  .tpl-card.active { border-color: rgba(255,92,108,0.6); background: rgba(255,92,108,0.12); }
  .tpl-card-info { display: flex; flex-direction: row; align-items: baseline; gap: 8px; min-width: 0; flex-wrap: wrap; }
  .tpl-card-name { font-size: 13.5px; font-weight: 600; }
  .tpl-card-price { font-size: 12px; font-weight: 700; color: #ff5c6c; white-space: nowrap; }
  .tpl-card-price-free { font-weight: 500; color: rgba(255,255,255,0.5); font-style: italic; }
  .tpl-card-cta { font-size: 11.5px; color: rgba(255,255,255,0.55); white-space: nowrap; flex-shrink: 0; }

  /* ============ FORM ĐẶT MUA NGAY TẠI TRANG DEMO (bottom sheet) ============ */
  .order-sheet { max-height: 85vh; }
  .order-sheet-body { padding: 14px 18px 22px; overflow-y: auto; }
  .order-summary-card {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; margin-bottom: 16px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(227,91,106,0.16), rgba(226,137,95,0.1));
    border: 1px solid rgba(255,255,255,0.12);
  }
  .order-summary-thumb {
    flex-shrink: 0; width: 38px; height: 38px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #e35b6a, #e2895f);
    box-shadow: 0 3px 8px rgba(227,91,106,0.4);
  }
  .order-summary-thumb svg { width: 18px; height: 18px; }
  .order-summary-info { flex: 1; min-width: 0; }
  .order-summary-label {
    font-size: 10.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
    color: rgba(255,255,255,0.5); margin-bottom: 2px;
  }
  .order-summary-name {
    font-size: 14px; font-weight: 700; color: #fff;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .order-summary-price {
    flex-shrink: 0; font-size: 15.5px; font-weight: 800; white-space: nowrap;
    background: linear-gradient(135deg, #ffb199, #ff8a9a);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .order-form-row { margin-bottom: 13px; }
  .order-form-row label {
    display: block; font-size: 12.5px; font-weight: 600;
    color: rgba(255,255,255,0.6); margin-bottom: 5px;
  }
  .order-form-row input, .order-form-row textarea {
    width: 100%; padding: 10px 12px; box-sizing: border-box;
    border-radius: 10px; border: 1px solid rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.06); color: #fff;
    font-family: inherit; font-size: 14px; resize: vertical;
  }
  .order-form-row input::placeholder, .order-form-row textarea::placeholder { color: rgba(255,255,255,0.35); }
  .order-form-row input:focus, .order-form-row textarea:focus {
    outline: none; border-color: rgba(227,91,106,0.7);
  }
  .order-error {
    color: #ff8a8a; font-size: 12.5px; font-weight: 600; margin: -4px 0 12px;
  }
  .order-submit-btn {
    width: 100%; padding: 13px; border: none; border-radius: 999px;
    background: linear-gradient(135deg, #e35b6a, #e2895f); color: #fff;
    font-family: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer;
    transition: opacity .15s ease;
  }
  .order-submit-btn:disabled { opacity: .6; cursor: default; }
  .order-hint { font-size: 11.5px; color: rgba(255,255,255,0.45); margin: 10px 0 0; line-height: 1.5; }
  .order-success { text-align: center; padding-top: 20px; }
  .order-success-icon {
    width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 50%;
    background: rgba(46, 204, 113, 0.18); color: #2ecc71;
    display: flex; align-items: center; justify-content: center;
  }
  .order-success-icon svg { width: 26px; height: 26px; }
  .order-success-title { font-size: 16px; font-weight: 800; color: #fff; margin: 0 0 8px; }
  .order-success-desc { font-size: 13px; color: rgba(255,255,255,0.65); line-height: 1.6; margin: 0 0 18px; }

  @media (max-width: 480px) {
    .dock-item { width: 64px; padding: 5px 5px 4px; }
    .dock-item span { font-size: 9px; }
    .dock-pill { width: 64px; }
    .dock-brand { font-size: 9.5px; padding: 12px 6px; left: 8px; }
    .tpl-sheet { width: 100%; border-radius: 18px 18px 0 0; }
    /* Icon-only trên mobile để nhóm nút điều hướng + "Mua ngay" đủ chỗ
       trên 1 hàng, khỏi bị tràn/cắt chữ ở rìa màn hình. */
    .dock-buy { padding: 9px; }
    .dock-buy-label { display: none; }
    .dock-buy svg { width: 20px; height: 20px; }
  }