/* Trình xem giao diện – trang sản phẩm (template-parts/product-preview.php).
   Nạp riêng với version = filemtime (style.css của child dùng ?ver=11.0 cố định nên trình duyệt giữ bản cũ). */

/* Tab Mô tả giới hạn 820px cho dễ đọc chữ; riêng trình xem thoát ra rộng hết container */
.gdgt-viewer {
    width: min(1180px, calc(100vw - 30px));
    margin: 0 0 48px 50%;
    transform: translateX(-50%);
    --gdgt-ink: #0c2545;
    --gdgt-line: #e2e8f0;
    --gdgt-accent: #1e63ff;
    scroll-margin-top: 90px;
}
.gdgt-viewer-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    margin-bottom: 14px;
}
.gdgt-viewer-title {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: var(--gdgt-ink) !important;
    margin: 0 !important;
}

/* Nút chọn thiết bị */
.gdgt-viewer-devices {
    display: inline-flex;
    padding: 4px;
    border-radius: 999px;
    background: #eef2f7;
}
.gdgt-dev {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    min-height: 0;
    padding: 8px 16px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #475569;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: 0;
}
.gdgt-dev svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.gdgt-dev.is-active { background: #fff; color: var(--gdgt-ink); box-shadow: 0 1px 4px rgba(12, 37, 69, .15); }

/* Tab các trang */
.gdgt-viewer-pages {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.gdgt-viewer-pages::-webkit-scrollbar { display: none; }
.gdgt-page {
    flex: 0 0 auto;
    margin: 0;
    min-height: 0;
    padding: 9px 18px;
    border: 1px solid var(--gdgt-line);
    border-radius: 999px;
    background: #fff;
    color: #334155;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
}
.gdgt-page:hover { border-color: var(--gdgt-ink); }
.gdgt-page.is-active { background: var(--gdgt-ink); border-color: var(--gdgt-ink); color: #fff; }

/* Khung trình duyệt (máy tính) */
.gdgt-browser {
    border: 1px solid var(--gdgt-line);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 18px 50px rgba(12, 37, 69, .10);
}
.gdgt-browser[hidden], .gdgt-phone[hidden], .gdgt-expand[hidden] { display: none !important; }
.gdgt-browser-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    background: #f1f5f9;
    border-bottom: 1px solid var(--gdgt-line);
}
.gdgt-dots { display: inline-flex; gap: 6px; }
.gdgt-dots i { width: 11px; height: 11px; border-radius: 50%; background: #cbd5e1; }
.gdgt-dots i:nth-child(1) { background: #f87171; }
.gdgt-dots i:nth-child(2) { background: #fbbf24; }
.gdgt-dots i:nth-child(3) { background: #34d399; }
.gdgt-url {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    padding: 5px 12px;
    border-radius: 8px;
    background: #fff;
    color: #64748b;
    font-size: 13px;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.gdgt-url-path { color: var(--gdgt-ink); }
.gdgt-open { flex: 0 0 auto; font-size: 14px; font-weight: 700; color: var(--gdgt-accent); }
.gdgt-browser-view { position: relative; overflow: hidden; }
.gdgt-browser-view img { display: block; width: 100%; height: auto; margin: 0; }
.gdgt-browser-view.is-collapsed { max-height: 900px; }
.gdgt-browser-view.is-collapsed::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 180px;
    background: linear-gradient(rgba(255, 255, 255, 0), #fff 85%);
    pointer-events: none;
}
.gdgt-expand {
    display: block;
    width: 100%;
    margin: 0;
    min-height: 0;
    padding: 14px;
    border: 0;
    border-top: 1px solid var(--gdgt-line);
    background: #fff;
    color: var(--gdgt-ink);
    font-size: 16px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
}
.gdgt-expand:hover { background: #f8fafc; }
.gdgt-expand[aria-expanded="false"] .gdgt-less,
.gdgt-expand[aria-expanded="true"] .gdgt-more { display: none; }
.gdgt-browser-view:not(.is-collapsed) + .gdgt-expand { position: sticky; bottom: 0; }

/* Khung điện thoại */
.gdgt-phone { text-align: center; padding: 8px 0 4px; }
.gdgt-phone-screen {
    width: 390px;
    max-width: 100%;
    height: min(780px, 80vh);
    margin: 0 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 12px solid #0f172a;
    border-radius: 44px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(12, 37, 69, .22);
    scrollbar-width: none;
}
.gdgt-phone-screen::-webkit-scrollbar { display: none; }
.gdgt-phone-screen img { display: block; width: 100%; height: auto; margin: 0; }
.gdgt-phone-hint { margin: 12px 0 0; font-size: 14px; color: #64748b; }

@media (max-width: 849px) {
    .gdgt-viewer-title { font-size: 22px !important; }
    .gdgt-browser-view.is-collapsed { max-height: 560px; }
    .gdgt-open { display: none; }
    .gdgt-phone-screen { width: 320px; border-width: 10px; border-radius: 36px; height: 70vh; }
}

/* ============================================================
   Khung ảnh chính: 1 ảnh toàn trang cuộn trong khung (template-parts/product-hero.php)
   ============================================================ */
/* Có CSS nào đó đặt overflow:hidden cho html/body -> body thành khung cuộn riêng, cột dính
   (sticky) của Flatsome không bám được. `clip` vẫn chặn tràn ngang nhưng không tạo khung cuộn. */
html, body.single-product { overflow-x: clip !important; overflow-y: visible !important; }
/* chừa chỗ cho header dính (~70px) */
.product-gallery .is-sticky-column { top: 90px !important; }
.gdgt-hero-frame {
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 18px 50px rgba(12, 37, 69, .10);
}
.gdgt-hero-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 12px;
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
}
.gdgt-hero-bar i { width: 10px; height: 10px; border-radius: 50%; background: #f87171; }
.gdgt-hero-bar i:nth-child(2) { background: #fbbf24; }
.gdgt-hero-bar i:nth-child(3) { background: #34d399; }
.gdgt-hero-bar span { margin-left: 8px; font-size: 12px; color: #64748b; }
.gdgt-hero-scroll {
    position: relative;
    height: min(640px, 72vh);
    overflow: hidden;
    cursor: ns-resize;
}
.gdgt-hero-scroll img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    transform: translateY(0);
    transition: transform 1s ease-out;
    will-change: transform;
}
.gdgt-hero-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 16px;
    margin-top: 10px;
    font-size: 14px;
}
.gdgt-hero-hint { color: #64748b; }
.gdgt-hint-touch { display: none; }
.gdgt-hero-more { font-weight: 700; color: #1e63ff; }

/* Thiết bị cảm ứng: không có hover -> cuộn tay trong khung */
@media (hover: none) {
    .gdgt-hero-scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; cursor: auto; }
    .gdgt-hero-scroll img { transform: none !important; transition: none; }
    .gdgt-hint-hover { display: none; }
    .gdgt-hint-touch { display: inline; }
}
@media (max-width: 849px) {
    .gdgt-hero-scroll { height: 62vh; }
}