/* ============================================================
   property-detail-v2.css
   Trang chi tiết bất động sản — nhadat888.vn
   Tách từ property-detail-v2.php (registerCss inline)
   NOTE: .pd-hero::before background-image được inject động qua PHP
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@300;400;500;600;700;800&display=swap');

*, *::before, *::after {
  /* removed aggressive font-family here to fix icons */
}
body, html,
h1, h2, h3, h4, h5, h6,
p, li, ul, ol,
input, textarea, select, label,
table, th, td, caption,
blockquote, pre, code,
nav, header, footer, section, article, aside {
  font-family: 'Mulish', Arial, sans-serif !important;
}
a:not([class*="fa"]):not([class*="icon"]),
div:not([class*="fa"]):not([class*="icon"]),
span:not([class*="fa"]):not([class*="icon"]),
button:not([class*="fa"]):not([class*="icon"]) {
  font-family: 'Mulish', Arial, sans-serif !important;
}

:root {
    --brand: #00b45c;
    --brand-dark: #087a3f;
    --brand-soft: #e8f8ef;
    --brand-glow: rgba(0,180,92,.22);
    --gold: #f5b731;
    --ink: #0f1923;
    --ink-2: #1e2a35;
    --muted: #64748b;
    --muted-2: #94a3b8;
    --line: #e5eaf0;
    --paper: #ffffff;
    --surface: #f7f9fc;
    --navy: #101827;
    --red: #ef4444;
    --shadow-xs: 0 1px 4px rgba(15,23,42,.07);
    --shadow-sm: 0 4px 14px rgba(15,23,42,.08);
    --shadow-md: 0 12px 36px rgba(15,23,42,.10);
    --shadow-lg: 0 24px 64px rgba(15,23,42,.13);
    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 24px;
    --ease: cubic-bezier(.22,.68,0,1.1);
}
body {
    font-family: 'Mulish', Arial, sans-serif;
    color: var(--ink);
    background: var(--surface);
    overflow-x: hidden;
}
html,
body,
body.notransition {
    height: auto !important;
    min-height: 100% !important;
    overflow-y: auto !important;
    overscroll-behavior-y: auto;
    touch-action: pan-y;
}
body a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { border: 0; background: none; cursor: pointer; }
.v2-container { width: min(1440px, calc(100% - 48px)); margin-inline: auto; }
.v2-container--wide { width: min(1540px, calc(100% - 32px)); }
.v2-topbar {
    position: sticky;
    top: 0;
    z-index: 200;
    background: rgba(255,255,255,.93);
    border-bottom: 1px solid rgba(229,234,240,.8);
    box-shadow: 0 2px 20px rgba(15,23,42,.06);
    backdrop-filter: blur(20px) saturate(1.4);
}
.v2-topbar__inner { min-height: 68px; display: flex; align-items: center; gap: 10px; }
.v2-brand { display: inline-flex; align-items: center; gap: 10px; font-size: clamp(22px,1.65vw,28px); font-weight: 900; letter-spacing: 0; flex: 0 0 auto; }
.v2-brand__mark { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; color: #fff; background: linear-gradient(145deg,#13d87f,#00a856); box-shadow: 0 12px 32px rgba(0,180,92,.28); }
.v2-brand__accent { color: var(--brand); }
.v2-nav { flex: 1 1 auto; display: flex; justify-content: center; gap: 2px; }
.v2-nav__link { min-height: 38px; display: inline-flex; align-items: center; gap: 7px; padding: 0 11px; border-radius: 999px; color: #1a4d2e; font-size: 13px; font-weight: 800; white-space: nowrap; transition: background .16s, color .16s, transform .18s var(--ease); }
.v2-nav__link i { color: var(--brand); font-size: 15px; }
.v2-nav__link:hover, .v2-nav__link--active { background: var(--brand-soft); color: var(--brand-dark); }
.v2-actions { display: flex; align-items: center; gap: 8px; }
.v2-icon-btn { width: 40px; height: 40px; display: grid; place-items: center; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; color: var(--muted); position: relative; }
.v2-icon-btn__dot { position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; border-radius: 999px; background: var(--red); }
.v2-post { min-height: 40px; display: inline-flex; align-items: center; gap: 7px; padding: 0 18px; border-radius: 999px; color: #fff; background: var(--ink-2); font-size: 13px; font-weight: 900; box-shadow: 0 8px 24px rgba(15,23,42,.18); }
.v2-user { min-height: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 3px 14px 3px 5px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; font-size: 13px; font-weight: 800; }
.v2-user__avatar { width: 31px; height: 31px; border-radius: 999px; border: 2.5px solid var(--brand); object-fit: cover; }
.v2-user__chev { color: var(--muted); font-size: 11px; }
.v2-user-wrap { position: relative; }
.v2-user { cursor: pointer; }
.v2-user[aria-expanded="true"] { border-color: rgba(0,180,92,.35); background: var(--brand-soft); box-shadow: 0 12px 30px rgba(0,180,92,.12); }
.v2-user[aria-expanded="true"] .v2-user__chev { transform: rotate(180deg); }
.v2-user-menu { position: absolute; top: calc(100% + 12px); right: 0; width: min(320px, calc(100vw - 32px)); display: none; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 22px 56px rgba(15,23,42,.16); z-index: 260; }
.v2-user-wrap.is-open .v2-user-menu { display: block; }
.v2-user-menu__head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: #fbfdff; border-bottom: 1px solid var(--line); }
.v2-user-menu__avatar { width: 52px; height: 52px; border-radius: 999px; border: 3px solid var(--brand); object-fit: cover; box-shadow: 0 12px 28px rgba(0,180,92,.16); }
.v2-user-menu__name { color: var(--ink); font-size: 17px; font-weight: 900; line-height: 1.15; }
.v2-user-menu__badge { display: inline-flex; align-items: center; margin-top: 6px; min-height: 24px; padding: 0 10px; border-radius: 999px; color: #fff; background: var(--brand); font-size: 11px; font-weight: 900; }
.v2-user-menu__list { margin: 0; padding: 10px 0; list-style: none; }
.v2-user-menu__list form { margin: 0; }
.v2-user-menu__list a, .v2-user-menu__logout { width: 100%; min-height: 48px; display: flex; align-items: center; gap: 12px; padding: 0 18px; color: #344054; background: #fff; font-size: 15px; font-weight: 850; text-align: left; }
.v2-user-menu__list a:hover, .v2-user-menu__logout:hover { background: #f7fbf9; color: var(--brand-dark); }
.v2-user-menu__icon { width: 26px; height: 26px; display: grid; place-items: center; flex: 0 0 auto; border: 2px solid #344054; border-radius: 999px; color: #344054; font-size: 12px; }
.v2-user-menu__divider { height: 1px; margin: 8px 0; background: var(--line); }
.v2-user-menu__logout { color: var(--red); }
.v2-user-menu__logout .v2-user-menu__icon { border: 0; color: var(--red); font-size: 17px; }
.v2-ticker { position: relative; z-index: 190; height: 36px; overflow: hidden; background: var(--navy); display: flex; align-items: center; }
.v2-ticker__live { flex-shrink: 0; height: 100%; display: flex; align-items: center; gap: 7px; padding: 0 18px; color: #fff; background: var(--red); font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.v2-ticker__dot { width: 7px; height: 7px; border-radius: 999px; background: #fff; animation: v2Pulse 1.4s ease-in-out infinite; }
@keyframes v2Pulse { 50% { opacity: .45; transform: scale(.72); } }
.v2-ticker__scroll { flex: 1; overflow: hidden; }
.v2-ticker__track { display: flex; white-space: nowrap; animation: v2Ticker 36s linear infinite; }
@keyframes v2Ticker { to { transform: translateX(-50%); } }
.v2-ticker__item { display: inline-flex; align-items: center; gap: 8px; padding-right: 34px; color: rgba(255,255,255,.72); font-size: 12px; font-weight: 750; }
.v2-ticker__item::before { content: "·"; color: var(--brand); font-size: 20px; }
.v2-ticker__item b { color: #fff; font-weight: 900; }
.v2-ticker__item em { color: var(--brand); font-style: normal; font-weight: 900; }
.v2-ticker__close { width: 36px; height: 36px; color: rgba(255,255,255,.45); }

/* ----------------------------------------------------------
   Hero — .pd-hero::before background-image được inject động
   qua $this->registerCss() trong PHP (chứa URL ảnh chính)
   ---------------------------------------------------------- */
.pd-hero { position: relative; padding: 26px 0 34px; overflow: hidden; background: #fff; }
.pd-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; }
.pd-hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 28px; align-items: end; }
.pd-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; color: var(--muted); font-size: 13px; font-weight: 800; }
.pd-breadcrumb i { color: var(--brand); }
.pd-badge-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.pd-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.92); border: 1px solid rgba(0,180,92,.18); color: var(--brand-dark); box-shadow: var(--shadow-xs); font-size: 12px; font-weight: 900; }
.pd-badge--dark { color: #fff; background: var(--navy); border-color: var(--navy); }
.pd-title { max-width: 920px; margin: 0; color: var(--ink); font-size: clamp(24px,2.8vw,36px); font-weight: 900; line-height: 1.3; letter-spacing: 0; }
.pd-address { display: flex; gap: 9px; align-items: flex-start; max-width: 840px; margin-top: 14px; color: #334155; font-size: 15px; font-weight: 700; line-height: 1.55; }
.pd-address i { margin-top: 3px; color: var(--brand); }
.pd-hero-card { padding: 22px; border: 1px solid rgba(0,180,92,.18); border-radius: var(--radius-lg); background: rgba(255,255,255,.94); box-shadow: var(--shadow-lg); }
.pd-price-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 2px; }
.pd-price-code { color: var(--muted); font-size: 16.5px; font-weight: 800; position: relative; top: -2px; }
.pd-price { color: var(--brand); font-size: 34px; font-weight: 900; letter-spacing: 0; line-height: 1; }
.pd-live { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 9px 13px; border-radius: 999px; background: var(--brand-soft); color: var(--ink); font-size: 12.5px; font-weight: 850; }
.pd-live__dot { width: 8px; height: 8px; border-radius: 999px; background: var(--red); box-shadow: 0 0 0 4px rgba(239,68,68,.16); }
.pd-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.pd-btn { min-height: 46px; display: inline-flex; justify-content: center; align-items: center; gap: 8px; padding: 0 16px; border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-size: 13.5px; font-weight: 900; border: 1.5px solid var(--line); }
.pd-btn--primary { color: #fff; background: linear-gradient(135deg,#13d87f,#00a856); border-color: transparent; box-shadow: 0 18px 48px rgba(0,180,92,.22); }
.pd-btn--dark { color: #fff; background: var(--navy); border-color: var(--navy); }
.v2-trust-bar { padding: 20px 0; background: var(--navy); }
.v2-trust-bar__inner { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; }
.v2-trust-item { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.78); font-size: 13px; font-weight: 700; }
.v2-trust-item i, .v2-trust-item strong { color: #fff; }
.pd-main { padding: 32px 0 64px; }
.pd-layout { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 24px; align-items: start; }
.pd-panel { border: 1.5px solid var(--line); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-sm); overflow: hidden; }
.pd-gallery { display: grid; grid-template-columns: 1.45fr 1fr; gap: 8px; padding: 8px; }
.pd-gallery__main, .pd-gallery__thumb { position: relative; display: block; overflow: hidden; border-radius: 18px; background: var(--surface); cursor: zoom-in; }
.pd-gallery__main { min-height: 430px; }
.pd-gallery__thumb { min-height: 211px; }
.pd-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .38s ease; }
.pd-gallery a:hover img { transform: scale(1.04); }
.pd-gallery__stack { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pd-gallery__thumb--wide { grid-column: span 2; }
.pd-count { position: absolute; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: 999px; color: #fff; background: rgba(15,23,42,.72); backdrop-filter: blur(10px); font-size: 12px; font-weight: 900; }
.pd-lightbox { position: fixed; inset: 0; z-index: 1000; display: none; background: rgba(5,10,18,.94); color: #fff; }
.pd-lightbox--open { display: grid; grid-template-rows: auto 1fr auto; }
.pd-lightbox__top { min-height: 64px; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 22px; background: rgba(5,10,18,.72); border-bottom: 1px solid rgba(255,255,255,.08); }
.pd-lightbox__title { min-width: 0; font-size: 14px; font-weight: 850; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-lightbox__count { color: rgba(255,255,255,.62); font-size: 13px; font-weight: 800; }
.pd-lightbox__close, .pd-lightbox__nav { display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); transition: background .16s, transform .18s var(--ease); }
.pd-lightbox__back { display: none; align-items: center; gap: 7px; min-height: 40px; padding: 0 13px; color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; font-size: 13px; font-weight: 900; white-space: nowrap; }
.pd-lightbox__close { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 999px; font-size: 22px; }
.pd-lightbox__close:hover, .pd-lightbox__nav:hover, .pd-lightbox__back:hover { background: rgba(255,255,255,.22); transform: translateY(-1px); }
.pd-lightbox__stage { position: relative; min-height: 0; display: grid; place-items: center; padding: 22px 82px; }
.pd-lightbox__image { max-width: 100%; max-height: calc(100vh - 190px); object-fit: contain; border-radius: 12px; box-shadow: 0 30px 80px rgba(0,0,0,.45); transform-origin: center center; transition: transform .18s ease, opacity .2s ease; }
.pd-lightbox__stage--slide-left .pd-lightbox__image { animation: pdLightboxSlideLeft .24s ease both; }
.pd-lightbox__stage--slide-right .pd-lightbox__image { animation: pdLightboxSlideRight .24s ease both; }
@keyframes pdLightboxSlideLeft { 0% { opacity: .45; transform: translateX(22px) scale(.985); } 100% { opacity: 1; transform: translateX(0) scale(1); } }
@keyframes pdLightboxSlideRight { 0% { opacity: .45; transform: translateX(-22px) scale(.985); } 100% { opacity: 1; transform: translateX(0) scale(1); } }
.pd-lightbox__nav { position: absolute; top: 50%; width: 54px; height: 54px; transform: translateY(-50%); border-radius: 999px; font-size: 22px; }
.pd-lightbox__nav:hover { transform: translateY(-50%) scale(1.04); }
.pd-lightbox__nav--prev { left: 22px; }
.pd-lightbox__nav--next { right: 22px; }
.pd-lightbox__floating-count { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); display: none; align-items: center; justify-content: center; min-width: 58px; height: 30px; padding: 0 12px; color: #fff; background: rgba(5,10,18,.68); border: 1px solid rgba(255,255,255,.2); border-radius: 999px; backdrop-filter: blur(10px); font-size: 12px; font-weight: 900; }
.pd-lightbox__thumbs { display: flex; gap: 10px; overflow-x: auto; padding: 14px 22px 18px; background: rgba(5,10,18,.72); border-top: 1px solid rgba(255,255,255,.08); scrollbar-width: thin; }
.pd-lightbox__thumb { flex: 0 0 auto; width: 88px; height: 64px; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: 10px; background: rgba(255,255,255,.08); opacity: .68; }
.pd-lightbox__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-lightbox__thumb--active { border-color: var(--brand); opacity: 1; }
.pd-content { padding: 26px; }
.pd-section + .pd-section { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--line); }
.pd-section__head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.pd-section__title { margin: 0; color: var(--ink); font-size: 24px; font-weight: 900; letter-spacing: 0; }
.pd-section__hint { color: var(--muted); font-size: 13px; font-weight: 800; }
.pd-specs { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.pd-spec { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 6px 10px; align-content: center; align-items: center; min-height: 74px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.pd-spec i { width: 34px; height: 34px; display: grid; place-items: center; color: var(--brand); background: var(--brand-soft); border-radius: 11px; font-size: 15px; }
.pd-spec strong { display: block; color: var(--ink); font-size: 18px; font-weight: 900; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-spec span { grid-column: 1 / -1; display: block; color: var(--muted); font-size: 11px; font-weight: 800; line-height: 1.15; white-space: nowrap; overflow: visible; }
.pd-description { color: #263445; font-size: 15.5px; font-weight: 500; line-height: 1.78; }
.pd-description img, .pd-description iframe { max-width: 100%; }
.pd-meta { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px 18px; }
.pd-meta__item { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid #eef2f6; color: var(--ink); font-size: 14px; font-weight: 800; }
.pd-meta__item span { color: var(--muted); font-weight: 750; }
.pd-video { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: var(--radius-md); background: #0d1725; }
.pd-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pd-map { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.pd-map__canvas { width: 100%; height: 420px; display: block; background: #dbeafe; }
.pd-map__foot { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; padding: 14px 16px; color: var(--muted); font-size: 13px; font-weight: 800; }
.pd-nearby { border-top: 1px solid var(--line); background: #fff; }
.pd-nearby__intro { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px 0; color: var(--brand-dark); font-size: 13px; font-weight: 750; line-height: 1.5; }
.pd-nearby__intro img { width: 24px; height: 24px; flex: 0 0 auto; }
.pd-radius { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; padding: 14px 16px; margin: 0; list-style: none; border-bottom: 1px solid var(--line); }
.pd-radius li { margin: 0; }
.pd-radius input { position: absolute; opacity: 0; pointer-events: none; }
.pd-radius label { min-height: 38px; display: grid; place-items: center; border: 1.5px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 13px; font-weight: 900; cursor: pointer; transition: background .16s, border-color .16s, color .16s; }
.pd-radius input:checked + label { color: #fff; background: var(--brand); border-color: var(--brand); }
.pd-amenities { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 16px 16px; margin: 0; list-style: none; }
.pd-amenities li { display: none; }
.pd-amenities li input { position: absolute; opacity: 0; pointer-events: none; }
.pd-amenities li label { position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 12.5px; font-weight: 800; cursor: pointer; transition: background .16s, border-color .16s, color .16s; }
.pd-amenities li label::before { content: "\f00c"; width: 18px; height: 18px; display: grid; place-items: center; color: #fff; background: var(--brand); border-radius: 6px; font-family: FontAwesome; font-size: 10px; line-height: 1; }
.pd-amenities li input:not(:checked) + label { color: var(--muted); background: #fff; }
.pd-amenities li input:not(:checked) + label::before { content: ""; background: #fff; border: 1.5px solid var(--line); }
.pd-side { position: sticky; top: 92px; display: grid; gap: 16px; }
.pd-contact { padding: 20px; }
.pd-contact__label { color: var(--muted); font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.pd-contact__person { display: flex; gap: 12px; align-items: center; margin-top: 14px; }
.pd-avatar { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 18px; color: #fff; background: linear-gradient(145deg,#13d87f,#00a856); font-size: 22px; font-weight: 900; }
.pd-contact__name { color: var(--ink); font-size: 17px; font-weight: 900; }
.pd-contact__role { margin-top: 3px; color: var(--muted); font-size: 13px; font-weight: 750; }
.pd-contact__actions { display: grid; gap: 10px; margin-top: 18px; }
.pd-phone { min-height: 52px; display: flex; justify-content: center; align-items: center; gap: 9px; border-radius: var(--radius-sm); color: #fff; background: var(--red); font-size: 16px; font-weight: 900; }
.pd-zalo { min-height: 48px; display: flex; justify-content: center; align-items: center; gap: 9px; border-radius: var(--radius-sm); color: #fff; background: #1479ff; font-size: 14px; font-weight: 900; }
.pd-note { margin-top: 14px; padding: 13px; border-radius: var(--radius-sm); background: var(--brand-soft); color: var(--brand-dark); font-size: 13px; font-weight: 750; line-height: 1.5; }
.pd-mini-list { padding: 18px; }
.pd-mini-list__title { margin-bottom: 12px; font-size: 16px; font-weight: 900; }
.pd-mini { display: grid; grid-template-columns: 86px minmax(0,1fr); gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.pd-mini:first-of-type { border-top: 0; padding-top: 0; }
.pd-mini img { width: 86px; height: 70px; object-fit: cover; border-radius: 12px; }
.pd-mini strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--ink); font-size: 12.5px; font-weight: 850; line-height: 1.35; }
.pd-mini span { display: block; margin-top: 5px; color: var(--brand); font-size: 12px; font-weight: 900; }
.pd-related { margin-top: 34px; }
.pd-related__head { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 18px; }
.pd-related__title { margin: 0; font-size: 30px; font-weight: 900; letter-spacing: 0; }
.pd-related__title span { color: var(--brand); }
.pd-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.pd-card { overflow: hidden; border: 1.5px solid var(--line); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-sm); transition: transform .22s var(--ease), box-shadow .22s, border-color .22s; }
.pd-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(0,180,92,.22); }
.pd-card__media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface); }
.pd-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .38s ease; }
.pd-card:hover .pd-card__media img { transform: scale(1.05); }
.pd-card__badge { position: absolute; top: 12px; left: 12px; padding: 5px 10px; border-radius: 999px; color: #fff; background: var(--brand); font-size: 11px; font-weight: 900; }
.pd-card__body { padding: 14px; }
.pd-card__price { color: var(--brand); font-size: 18px; font-weight: 900; }
.pd-card__title { min-height: 39px; margin: 7px 0 9px; font-size: 13.5px; font-weight: 850; line-height: 1.42; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pd-card__meta { display: flex; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 750; }
.pd-empty { padding: 56px 20px; text-align: center; background: #fff; border: 1.5px solid var(--line); border-radius: 24px; color: var(--muted); font-weight: 750; }
.v2-app-section { padding: 54px 0; background: linear-gradient(180deg,var(--surface),#fff); }
.v2-app-banner { overflow: hidden; padding: 52px 56px; color: #fff; background: radial-gradient(circle at 78% 18%, rgba(255,255,255,.18), transparent 22%), radial-gradient(circle at 12% 82%, rgba(0,60,40,.4), transparent 36%), linear-gradient(135deg,#00352e,#00b45c); border: 1px solid rgba(255,255,255,.22); border-radius: 28px; box-shadow: var(--shadow-lg); }
.v2-app-banner__grid { display: grid; grid-template-columns: 1fr auto auto; gap: 40px; align-items: center; }
.v2-app-banner small { display: block; margin-bottom: 10px; color: rgba(255,255,255,.65); font-size: 12px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.v2-app-banner h2 { color: #fff; font-size: clamp(26px,2.8vw,40px); font-weight: 900; line-height: 1.05; letter-spacing: -.055em; }
.v2-app-banner p { max-width: 520px; margin-top: 14px; color: rgba(255,255,255,.72); font-size: 15px; font-weight: 600; line-height: 1.6; }
.v2-app-stores { display: flex; flex-direction: row; gap: 10px; flex-wrap: nowrap; }
.v2-store-btn { display: flex; flex-direction: row; align-items: center; gap: 10px; padding: 10px 16px; color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); border-radius: var(--radius-md); transition: background .18s, transform .18s var(--ease); white-space: nowrap; }
.v2-store-btn:hover { background: rgba(255,255,255,.2); transform: translateY(-2px); }
.v2-store-btn i { font-size: 22px; flex-shrink: 0; }
.v2-store-btn span { display: block; color: rgba(255,255,255,.65); font-size: 11px; font-weight: 700; }
.v2-store-btn strong { display: block; margin-top: 1px; font-size: 15px; font-weight: 900; }
.v2-phone-mock { position: relative; width: 106px; height: 192px; padding: 14px 10px; background: #0c1826; border: 5px solid rgba(255,255,255,.28); border-radius: 26px; box-shadow: 0 30px 60px rgba(0,0,0,.28); }
.v2-phone-mock::before { content: ""; position: absolute; top: 8px; left: 50%; width: 32px; height: 4px; transform: translateX(-50%); background: rgba(255,255,255,.18); border-radius: 999px; }
.v2-phone-mock__screen { width: 100%; height: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 8px; overflow: hidden; background: linear-gradient(145deg,#0e2218,#1a4432); border-radius: 14px; }
.v2-phone-mock__tile { background: rgba(255,255,255,.12); border-radius: 8px; }
.v2-phone-mock__tile--tall { grid-column: span 2; height: 36px; }
.v2-footer { background: #060d18; color: rgba(255,255,255,.58); font-size: 13.5px; font-weight: 600; }
.v2-footer__top { padding: 52px 0 40px; display: grid; grid-template-columns: 1.6fr repeat(3,1fr); gap: 40px; }
.v2-footer__brand-mark { width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: 14px; color: #fff; background: linear-gradient(145deg,#13d87f,#00a856); border-radius: 15px; box-shadow: 0 12px 32px rgba(0,180,92,.28); font-size: 19px; font-weight: 900; }
.v2-footer__brand-name { margin-bottom: 10px; color: #fff; font-size: 22px; font-weight: 900; letter-spacing: 0; }
.v2-footer__brand-name span { color: var(--brand); }
.v2-footer__desc { max-width: 280px; line-height: 1.7; }
.v2-footer__hotline { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 9px 14px; color: #fff; background: rgba(0,180,92,.14); border: 1px solid rgba(0,180,92,.24); border-radius: 999px; font-size: 13px; font-weight: 800; }
.v2-footer__hotline i { color: var(--brand); }
.v2-footer__col-title { margin-bottom: 16px; color: rgba(255,255,255,.9); font-size: 13px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.v2-footer__links { display: flex; flex-direction: column; gap: 9px; }
.v2-footer__links a { display: inline-flex; align-items: center; gap: 6px; transition: color .16s, padding-left .16s; }
.v2-footer__links a:hover { color: rgba(255,255,255,.9); padding-left: 4px; }
.v2-social-links { display: flex; gap: 8px; margin-top: 18px; }
.v2-social-link { width: 36px; height: 36px; display: grid; place-items: center; color: rgba(255,255,255,.6); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 10px; font-size: 15px; transition: background .16s, color .16s, transform .16s var(--ease); }
.v2-social-link:hover { color: #fff; background: var(--brand); transform: translateY(-2px); }
.v2-footer__bottom { padding: 20px 0; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; border-top: 1px solid rgba(255,255,255,.07); }
.v2-footer__legal { display: flex; flex-wrap: wrap; gap: 20px; }
.v2-footer__legal a:hover { color: rgba(255,255,255,.9); }
.v2-footer__copy { font-weight: 700; }
.v2-scroll-top { position: fixed; right: 28px; bottom: 28px; z-index: 151; width: 46px; height: 46px; display: grid; place-items: center; color: #fff; background: var(--brand); border-radius: var(--radius-sm); box-shadow: 0 18px 38px rgba(0,180,92,.35); opacity: 0; pointer-events: none; transform: translateY(16px); transition: opacity .22s, transform .22s var(--ease); }
.v2-scroll-top--visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.v2-scroll-top:hover { background: var(--brand-dark); }

/* ----------------------------------------------------------
   Responsive
   ---------------------------------------------------------- */
@media (max-width: 1200px) {
    .v2-nav__link:nth-child(n+4) { display: none; }
    .pd-hero__inner, .pd-layout { grid-template-columns: 1fr; }
    .pd-side { position: static; grid-template-columns: 1fr 1fr; }
    .pd-grid { grid-template-columns: repeat(3,1fr); }
    .v2-app-banner__grid { grid-template-columns: 1fr; gap: 24px; }
    .v2-footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
    .v2-container { width: min(100% - 28px, 720px); }
    .v2-topbar__inner { min-height: 62px; }
    .v2-nav { display: none; }
    .v2-post, .v2-user span:not(.v2-user__name), .v2-user__chev, .v2-icon-btn { display: none; }
    .v2-user-menu { right: -8px; width: min(300px, calc(100vw - 24px)); border-radius: 18px; }
    .v2-brand { font-size: 22px; }
    .v2-ticker { height: 34px; }
    .pd-hero { padding: 22px 0 26px; }
    .pd-title { font-size: 24px; line-height: 1.35; }
    .pd-hero-card { padding: 18px; }
    .pd-price { font-size: 30px; }
    .pd-actions { grid-template-columns: 1fr; }
    .pd-main { padding: 20px 0 44px; }
    .pd-gallery { grid-template-columns: 1fr; }
    .pd-gallery__main { min-height: 0; aspect-ratio: 16 / 10; }
    .pd-gallery__thumb { min-height: 0; aspect-ratio: 4 / 3; }
    .pd-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .pd-gallery__stack { grid-template-columns: 1fr 1fr; }
    /* Fix: lightbox không rộng hơn viewport */
    .pd-lightbox { overflow: hidden; max-width: 100vw; }
    /* Fix: top bar — close button không bị đẩy ra ngoài màn hình */
    .pd-lightbox__top { width: 100%; max-width: 100%; box-sizing: border-box; overflow: hidden; padding: 10px 12px; gap: 10px; }
    .pd-lightbox__top > div { flex: 1 1 0; min-width: 0; overflow: hidden; }
    .pd-lightbox__title { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
    .pd-lightbox__back { display: inline-flex; flex: 0 0 auto; }
    .pd-lightbox__close { flex: 0 0 auto; flex-shrink: 0; width: 40px; height: 40px; min-width: 40px; border-radius: 999px; font-size: 20px; position: relative; z-index: 10; }
    /* Fix: stage — ảnh portrait không bị kéo rộng */
    .pd-lightbox__stage { width: 100%; box-sizing: border-box; overflow: hidden; padding: 12px 12px 72px; display: grid; place-items: center; }
    .pd-lightbox__image { width: auto !important; max-width: 100% !important; max-height: calc(100vh - 180px) !important; object-fit: contain; border-radius: 8px; display: block; margin: 0 auto; -webkit-transform: translateZ(0); transform: translateZ(0); }
    /* Nav */
    .pd-lightbox__nav { width: 44px !important; height: 44px !important; font-size: 18px; z-index: 12; color: #fff; background: #f79009; border-color: rgba(255,255,255,.55); box-shadow: 0 10px 28px rgba(247,144,9,.42); }
    .pd-lightbox__nav--prev { left: 12px; }
    .pd-lightbox__nav--next { right: 12px; }
    .pd-lightbox__floating-count { display: inline-flex; bottom: 82px; }
    /* Thumbnail bar */
    .pd-lightbox__thumbs { display: flex !important; padding: 8px 12px 10px; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; box-sizing: border-box; width: 100%; }
    .pd-lightbox__thumbs::-webkit-scrollbar { display: none; }
    .pd-lightbox__thumb { flex: 0 0 auto; width: 56px; height: 42px; border-radius: 7px; }
    .pd-map__canvas { height: 320px; }
    .pd-radius { grid-template-columns: repeat(2,1fr); }
    .pd-content { padding: 18px; }
    .pd-specs, .pd-meta { grid-template-columns: 1fr 1fr; }
    .pd-spec { min-height: 74px; padding: 9px 10px; }
    .pd-spec strong { font-size: 16px; }
    .pd-side { grid-template-columns: 1fr; }
    .pd-grid { grid-template-columns: 1fr; }
    .pd-related__head { align-items: start; flex-direction: column; }
    .v2-trust-bar__inner { justify-content: flex-start; gap: 12px 18px; }
    .v2-app-section { padding: 34px 0; }
    .v2-app-banner { padding: 28px 24px; border-radius: 22px; }
    .v2-footer__top { grid-template-columns: 1fr; }
    .v2-scroll-top { right: 18px; bottom: 20px; }
}

/* ----------------------------------------------------------
   Mobile nhỏ ≤ 480px (iPhone SE, Android compact)
   ---------------------------------------------------------- */
@media (max-width: 480px) {
    .pd-gallery__main { aspect-ratio: 16 / 9; min-height: 0; }
    .pd-gallery__thumb { aspect-ratio: 16 / 9; min-height: 0; }
    .pd-lightbox__image { max-height: calc(100vh - 160px) !important; }
    .pd-lightbox__thumb { width: 48px; height: 36px; }
}

/* ----------------------------------------------------------
   Safe area — iPhone notch / Dynamic Island
   ---------------------------------------------------------- */
@supports (padding: env(safe-area-inset-bottom)) {
    @media (max-width: 760px) {
        .pd-lightbox__top {
            padding-top: calc(10px + env(safe-area-inset-top));
        }
        .pd-lightbox__thumbs {
            padding-bottom: calc(10px + env(safe-area-inset-bottom));
        }
        .pd-lightbox__stage {
            padding-bottom: calc(72px + env(safe-area-inset-bottom));
        }
    }
}

/* ----------------------------------------------------------
   Loading shimmer — placeholder khi ảnh đang tải
   ---------------------------------------------------------- */
.pd-gallery__main,
.pd-gallery__thumb {
    background-color: #f0f4f8;
    background-image: linear-gradient(
        90deg,
        #f0f4f8 25%,
        #e8eef4 37%,
        #f0f4f8 63%
    );
    background-size: 400% 100%;
    animation: gallery-shimmer 1.4s ease infinite;
}
@keyframes gallery-shimmer {
    0%   { background-position: 100% 50%; }
    100% { background-position:   0% 50%; }
}
.pd-gallery__main.img-loaded,
.pd-gallery__thumb.img-loaded {
    animation: none;
    background-image: none;
    background-color: transparent;
}

/* ===== REGION: EXCHANGE RATE CONVERTER ===== */
.pd-converter {
    padding: 12px 14px;
}
.pd-converter__title {
    margin-bottom: 12px;
    color: var(--ink);
    font-size: 15px;
    font-weight: 900;
    display: flex;
    align-items: center;
    gap: 8px;
}
.pd-converter__title i {
    color: var(--brand);
}
.pd-converter__desc {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.5;
    margin-bottom: 8px;
}
.pd-converter__note {
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    background: #fff8eb;
    border: 1px solid #ffe8cc;
    color: #b25e00;
    font-size: 11px;
    font-weight: 750;
    line-height: 1.4;
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
    gap: 5px;
}
.pd-converter__note i {
    font-size: 12px;
    margin-top: 1px;
    color: #f59e0b;
}
.pd-converter__input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    overflow: hidden;
    margin-bottom: 12px;
    transition: border-color .16s, box-shadow .16s;
}
.pd-converter__input-wrap:focus-within {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-glow);
    background: #fff;
}
.pd-converter__input {
    width: 100%;
    min-height: 38px;
    padding: 0 10px;
    border: 0;
    background: transparent;
    color: var(--ink);
    font-size: 15px;
    font-weight: 800;
    outline: none;
}
.pd-converter__unit-select {
    padding: 0 10px;
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 800;
    border: 0;
    border-left: 1px solid var(--line);
    background: rgba(15,23,42,.03);
    min-height: 38px;
    display: flex;
    align-items: center;
    outline: none;
    cursor: pointer;
    border-radius: 0;
    appearance: none;
    -webkit-appearance: none;
    text-align: center;
}
.pd-converter__unit-select:hover {
    background: rgba(15,23,42,.06);
    color: var(--ink);
}
.pd-converter__rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pd-converter__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--surface);
    border: 1.5px solid transparent;
    transition: background .16s, border-color .16s, transform .16s var(--ease);
    gap: 8px;
}
.pd-converter__row:hover {
    background: var(--brand-soft);
    border-color: rgba(0,180,92,.18);
    transform: translateX(2px);
}
.pd-converter__currency {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}
.pd-converter__badge {
    width: 34px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 5px;
    font-size: 9.5px;
    font-weight: 900;
    color: #fff;
    letter-spacing: .02em;
    user-select: none;
    flex-shrink: 0;
}
.pd-converter__badge--gold { background: linear-gradient(135deg,#f5b731,#f39c12); }
.pd-converter__badge--usd  { background: linear-gradient(135deg,#2ecc71,#27ae60); }
.pd-converter__badge--eur  { background: linear-gradient(135deg,#3498db,#2980b9); }
.pd-converter__badge--aud  { background: linear-gradient(135deg,#e67e22,#d35400); }
.pd-converter__badge--gbp  { background: linear-gradient(135deg,#9b59b6,#8e44ad); }
.pd-converter__badge--cad  { background: linear-gradient(135deg,#e74c3c,#c0392b); }
.pd-converter__badge--jpy  { background: linear-gradient(135deg,#1abc9c,#16a085); }
.pd-converter__badge--chf  { background: linear-gradient(135deg,#34495e,#2c3e50); }
.pd-converter__badge--cny  { background: linear-gradient(135deg,#d35400,#c0392b); }
.pd-converter__name {
    color: var(--ink);
    font-size: 12.5px;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pd-converter__rate-info {
    color: var(--muted);
    font-size: 10.5px;
    font-weight: 700;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pd-converter__value {
    text-align: right;
    flex-shrink: 0;
}
.pd-converter__result {
    color: var(--brand-dark);
    font-size: 13.5px;
    font-weight: 900;
    white-space: nowrap;
}
.pd-converter__more-btn {
    width: 100%;
    min-height: 34px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    border: 1.5px solid var(--line);
    margin-top: 10px;
    transition: background .16s, color .16s;
}
.pd-converter__more-btn:hover {
    background: var(--surface);
    color: var(--ink);
}
.pd-converter__extra-rows {
    display: none;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--line);
}
.pd-converter__extra-rows.is-open {
    display: flex;
}