/* Trang san pham -- bo cuc 2026 (pc/view_2026.twig, bat theo slug qua PRODUCT_LAYOUT_2026).
   Chuan: UI kit v2.auto365.vn/ui-kit (newsroom/foundation/tokens.css) -- vien 1px, bo 12,
   KHONG do bong, KHONG nen to mau. Gia tri du phong viet trong var() vi file token chi nap
   khi trang co khoi newsroom. Moi rule mo dau bang .pd26 / .pd26-* de khong cham trang cu.

   view_2026.twig dung class pd26-* rieng cho khoi mua (gia, nut, trang thai) -- KHONG dung
   .btn / .card / .box-price cua Bootstrap + product-detail-v2.css, nen file nay khong phai
   de rule cu bang !important. !important con lai DUY NHAT o khoi "San pham da xem": markup do
   viewed_products.js sinh (dung chung trang cu) mang tien ich Bootstrap .p-3/.mb-3/.rounded-3
   von la !important -- ghi ly do tai cho.

   Nhip khoang cach -- MOT thang, lay tu token:
     --pd26-gap    16px  giua cac khoi lon cua trang
     --pd26-pad    20px  dem trong moi khung
     --pd26-inner  12px  giua cac phan trong mot khung
     --pd26-tight   8px  giua cac muc nho (chip, nut, dong meta) */

/* Khai cho ca cac khoi nam NGOAI .pd26 (Sp cung loai, Da xem, thanh day) -- truoc day chung
   khong ke thua duoc bien nen phai viet thang so. */
.pd26,
.pd26-related,
.pd26-extra,
.pd26-bar {
  --pd26-red: var(--nr-primary-btn, #e31b22);
  --pd26-red-dark: var(--nr-primary-dark, #c1141b);
  --pd26-ink: var(--nr-ink, #333333);
  --pd26-muted: var(--nr-ink-muted, #667085);
  --pd26-ok: #1f9d55;          /* tang 2: mau "Con hang", UI kit chua co token trang thai */
  --pd26-star: #f5a300;        /* tang 2: mau sao danh gia */
  --pd26-avatar: #1d3b8a;      /* tang 2: nen chu cai dai dien nguoi danh gia */
  --pd26-surface: var(--nr-surface, #fff);
  --pd26-danger-50: #fee4e2;   /* tang 2: nen hover nut xoa */
  --pd26-line: var(--nr-border, #e4e7ec);
  --pd26-line-strong: var(--nr-border-strong, #cbd5e1);
  --pd26-sunken: var(--nr-surface-sunken, #f8fafc);
  --pd26-radius: var(--nr-radius-lg, 12px);
  --pd26-radius-sm: var(--nr-radius-sm, 8px);
  --pd26-gap: var(--nr-space-4, 16px);
  --pd26-pad: var(--nr-space-5, 20px);
  --pd26-inner: var(--nr-space-3, 12px);
  --pd26-tight: var(--nr-space-2, 8px);
  --pd26-btn-h: 44px;
  --pd26-sticky-top: 110px;
}

/* Dich cua chip / thanh muc: dung ngay duoi header + thanh muc dinh (~64px) */
.pd26 #pd26-mua,
.pd26 #pd26-mo-ta,
.pd26 #pd26-thong-so,
.pd26 #vehicle-cases,
.pd26 #comment-review-section { scroll-margin-top: calc(var(--pd26-sticky-top) + 64px); }

/* Moi khoi lon cach nhau dung --pd26-gap, khong khoi nao tu dat le rieng */
.pd26 .wrapper-product > * { margin-top: 0; margin-bottom: var(--pd26-gap); }

/* Khung chung: vien 1px, bo 12, nen trang */
.pd26 .pd26-gal,
.pd26 .pd26-tabs,
.pd26 .pd26-desc,
.pd26 .pd26-spec,
.pd26 .pd26-sbuy,
.pd26 .pd26-rv,
.pd26-related {
  background: var(--pd26-surface);
  border: 1px solid var(--pd26-line);
  border-radius: var(--pd26-radius);
}

/* ===== dau trang -- luoi 3 o =====
   Desktop: anh trai; phai = head + buy NOI LIEN thanh mot khung (head bo goc tren, buy goc duoi).
   Mobile (<=900): head (ten + gia) -> anh -> khung mua. */
.pd26 .pd26-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "gal head" "gal buy";
  grid-template-rows: auto 1fr;
  column-gap: var(--pd26-gap);
  align-items: stretch;
}
.pd26 .pd26-head {
  grid-area: head;
  padding: var(--pd26-pad) var(--pd26-pad) var(--pd26-inner);
  background: var(--pd26-surface);
  border: 1px solid var(--pd26-line);
  border-bottom: 0;
  border-radius: var(--pd26-radius) var(--pd26-radius) 0 0;
}
.pd26 .pd26-gal { grid-area: gal; padding: var(--pd26-inner); } /* stretch (mac dinh luoi): khung anh cao bang cot mua, 2 mep duoi thang hang */
.pd26 .pd26-buy { grid-area: buy; display: flex; }
.pd26 .pd26-buy-in {
  flex: 1;
  padding: var(--pd26-inner) var(--pd26-pad) var(--pd26-pad);
  background: var(--pd26-surface);
  border: 1px solid var(--pd26-line);
  border-top: 0;
  border-radius: 0 0 var(--pd26-radius) var(--pd26-radius);
}

.pd26 .pd26-title { margin: 0 0 var(--pd26-tight); font-size: var(--nr-text-2xl, 24px); line-height: 1.25; font-weight: 700; color: var(--pd26-ink); }
.pd26 .pd26-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pd26-tight) var(--pd26-inner); font-size: var(--nr-text-sm, 14px); color: var(--pd26-muted); }
.pd26 .pd26-rating { color: var(--pd26-muted); text-decoration: none; }
.pd26 .pd26-stars { color: var(--pd26-star); letter-spacing: 2px; }
.pd26 .pd26-stars.is-empty { color: var(--pd26-line-strong); }
.pd26 .pd26-stock { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-weight: 600; color: var(--pd26-ok); }
.pd26 .pd26-stock svg { width: 16px; height: 16px; }
.pd26 .pd26-stock.pd26-stock--het { color: var(--pd26-red); }
.pd26 .pd26-stock.pd26-stock--off { color: var(--pd26-muted); }
.pd26 .pd26-mprice { display: none; margin: var(--pd26-tight) 0 0; font-size: var(--nr-text-2xl, 24px); font-weight: 700; color: var(--pd26-red); }
.pd26 .pd26-chips { display: flex; flex-wrap: wrap; gap: var(--pd26-tight); margin: var(--pd26-inner) 0 0; }
.pd26 .pd26-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  border: 1px solid var(--pd26-line); border-radius: 999px; background: var(--pd26-surface);
  color: var(--pd26-ink); font-size: 13px; text-decoration: none; white-space: nowrap;
}
.pd26 .pd26-chip:hover { border-color: var(--pd26-red); color: var(--pd26-red); }
.pd26 .pd26-chip svg { flex: none; width: 16px; height: 16px; }

/* anh 4:3 -- "anh ben trai hoi lon nen bi dai" (28/09) */
/* Anh san pham la anh VUONG, khung slide cua slider da la 1:1 (product-detail-v2) -> anh lap day khung.
   Ban 4:3 truoc day thu anh xuong 614x461 trong khung 614x614 -> dai xam tren/duoi/2 ben (29/09). */
.pd26 .pd26-gal .product-slider .slide-img { width: 100%; height: 100%; object-fit: contain; border-radius: var(--pd26-radius-sm); }
.pd26 .pd26-gal .thumbnail-list { padding: 2px; } /* vien 2px cua anh nho dang chon khong bi swiper (overflow:hidden) cat */

/* 4 o thong so chinh -- trong khung mua (tren gia) */
.pd26 .pd26-keys { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--pd26-tight); margin: 0 0 var(--pd26-inner); padding: 0 0 var(--pd26-inner); list-style: none; border-bottom: 1px solid var(--pd26-line); }
.pd26 .pd26-keys li { padding: 8px 6px; background: var(--pd26-sunken); border: 1px solid var(--pd26-line); border-radius: var(--pd26-radius-sm); text-align: center; }
.pd26 .pd26-keys b { display: block; font-size: 15px; line-height: 1.3; color: var(--pd26-ink); word-break: break-word; }
.pd26 .pd26-keys small { color: var(--pd26-muted); font-size: var(--nr-text-xs, 12px); }

/* gia */
.pd26 .pd26-gia-dong { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--pd26-tight); margin: 0; }
.pd26 .pd26-gia { font-size: 28px; font-weight: 700; line-height: 1.2; color: var(--pd26-red); }
.pd26 #priceOld { color: var(--pd26-muted); text-decoration: line-through; }
.pd26 .pd26-gia-note { margin: 4px 0 0; color: var(--pd26-muted); font-size: 13px; line-height: 1.45; }

/* 3 nut 1 hang: [Mua ngay] [Them vao gio] [So sanh -- o vuong icon] */
.pd26 .pd26-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) var(--pd26-btn-h);
  gap: var(--pd26-tight);
  margin-top: var(--pd26-inner);
}
.pd26 .pd26-btn.pd26-btn--wide { grid-column: 1 / -2; }
.pd26 .pd26-het { grid-column: 1 / -2; margin: 0; align-self: center; color: var(--pd26-muted); font-size: var(--nr-text-sm, 14px); }
.pd26 .pv-picker { margin-top: var(--pd26-inner); }
.pd26 .pd26-price .nr-lead { margin: var(--pd26-inner) 0 0; }

/* ===== nut (dung chung trong trang) ===== */
.pd26-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 0; min-height: var(--pd26-btn-h, 44px); padding: 0 14px;
  border: 1px solid var(--pd26-line-strong); border-radius: var(--pd26-radius-sm, 8px); background: var(--pd26-surface);
  color: var(--pd26-ink); font: inherit; font-size: 15px; font-weight: 600; line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.pd26-btn:hover { border-color: var(--pd26-red); color: var(--pd26-red); }
.pd26-btn.pd26-btn--primary { border-color: var(--pd26-red); background: var(--pd26-red); color: var(--nr-text-invert, #fff); }
.pd26-btn.pd26-btn--primary:hover { border-color: var(--pd26-red-dark); background: var(--pd26-red-dark); color: var(--nr-text-invert, #fff); }
.pd26-btn.pd26-btn--icon { grid-column: -2 / -1; padding: 0; color: var(--pd26-muted); }
.pd26-btn svg { flex: none; width: 18px; height: 18px; }

/* ===== thanh muc dinh ===== */
.pd26 .pd26-tabs { position: sticky; top: var(--pd26-sticky-top); z-index: 20; background: var(--nr-surface, #fff); } /* nen DAC: ban trong suot de chu than bai xuyen qua (review 29/09) */
.pd26 .pd26-tabs-in { display: flex; align-items: center; gap: 4px; padding: 0 var(--pd26-tight); overflow-x: auto; scrollbar-width: none; }
.pd26 .pd26-tabs a { display: inline-flex; align-items: center; gap: 6px; padding: 13px 12px; color: var(--pd26-muted); font-size: var(--nr-text-sm, 14px); font-weight: 600; white-space: nowrap; text-decoration: none; border-bottom: 2px solid transparent; }
.pd26 .pd26-tabs a:hover { color: var(--pd26-red); border-bottom-color: var(--pd26-red); }
.pd26 .pd26-tabs a svg { flex: none; width: 16px; height: 16px; }
.pd26 .pd26-tabs-mini { margin-left: auto; padding-right: var(--pd26-tight); color: var(--pd26-muted); font-size: var(--nr-text-sm, 14px); white-space: nowrap; }
.pd26 .pd26-tabs-mini b { color: var(--pd26-red); }

/* ===== than 2 cot (kieu 1) ===== */
.pd26 .pd26-body { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--pd26-gap); align-items: start; }
.pd26 .pd26-main > * + * { margin-top: var(--pd26-gap); }
.pd26 .pd26-desc { padding: var(--pd26-pad); overflow-x: clip; } /* anh CKEditor trong span inline-block khong co <picture> (staging thieu webp) giu 800px -> keo ngang ca trang */
/* Muc luc (blog/parts/_toc.twig): hop xam nhat vien 1px nhu trang bai. .TabsOfContents mang style
   cu cua product-detail-v2.css (vien trai do, chu do 12px in hoa) -- ha ve trong khung nay.
   !important CHI o tieu de: product-detail-v2.css dat mau/co/dam bang !important va class
   .text-uppercase cua Bootstrap cung la !important. */
.pd26 .nr-toc-panel { margin: 0 0 var(--pd26-inner); padding: var(--pd26-inner) var(--pd26-pad); background: var(--pd26-sunken); border: 1px solid var(--pd26-line); border-radius: var(--pd26-radius); }
.pd26 .nr-toc-panel .TabsOfContents { margin: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.product-page.pd-v2.pd26 .nr-toc-panel .tabscontent { color: var(--pd26-ink) !important; font-size: var(--nr-text-base, 16px) !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: 0; }
.pd26 .nr-toc-panel .toc-toggle-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--pd26-line-strong); border-radius: var(--pd26-radius-sm); background: var(--pd26-surface); color: var(--pd26-muted); }
.pd26 .nr-toc-panel .toc-toggle-btn:hover { border-color: var(--pd26-red); color: var(--pd26-red); }
.pd26 .nr-toc-panel .toc-toggle-icon svg { width: 18px; height: 18px; }
.pd26 .nr-toc-panel .toc-list { margin: var(--pd26-tight) 0 0; padding-left: 20px; }
.pd26 .nr-toc-panel .toc-list a { color: var(--pd26-ink); text-decoration: none; }
.pd26 .nr-toc-panel .toc-list a:hover { color: var(--pd26-red); }
.pd26 .pd26-toc-cap1 .toc-list ol { display: none; } /* landing: chi muc H2 */
.pd26 .pd26-toc-cap1 .toc-list { columns: 2; column-gap: var(--nr-space-8, 32px); } /* ~15 muc -> 2 cot cho gon */

.pd26 .pd26-h2 { margin: 0 0 var(--pd26-inner); font-size: var(--nr-text-xl, 20px); font-weight: 700; color: var(--pd26-ink); }
.pd26 .pd26-side { position: sticky; top: calc(var(--pd26-sticky-top) + 64px); display: flex; flex-direction: column; gap: var(--pd26-inner); }
.pd26 .pd26-spec { padding: var(--pd26-pad); }
.pd26 .pd26-spec .table { margin: 0; font-size: var(--nr-text-sm, 14px); }
.pd26 .pd26-spec td { padding: 9px 0; border-bottom: 1px solid var(--pd26-line); vertical-align: top; }
.pd26 .pd26-spec td:first-child { width: 46%; padding-right: 10px; color: var(--pd26-muted); }
.pd26 .pd26-spec td:last-child { font-weight: 500; }
/* Khoi GAP (landing -- thong so): <details> goc, dau la tieu de + mui ten xoay khi mo */
.pd26 .pd26-gap > .pd26-gap-dau { display: flex; align-items: center; justify-content: space-between; gap: var(--pd26-inner); list-style: none; cursor: pointer; }
.pd26 .pd26-gap > .pd26-gap-dau::-webkit-details-marker { display: none; }
.pd26 .pd26-gap > .pd26-gap-dau .pd26-h2 { margin: 0; }
.pd26 .pd26-gap > .pd26-gap-dau small { color: var(--pd26-muted); font-size: var(--nr-text-sm, 14px); font-weight: 500; }
.pd26 .pd26-gap-nut { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--pd26-line-strong); border-radius: var(--pd26-radius-sm); color: var(--pd26-muted); transition: transform .2s; }
.pd26 .pd26-gap-nut svg { width: 18px; height: 18px; }
.pd26 .pd26-gap[open] .pd26-gap-nut { transform: rotate(90deg); }
.pd26 .pd26-gap[open] > .pd26-gap-dau { margin-bottom: var(--pd26-inner); }
/* bang 2 cot (desktop): 16 dong thanh 8 hang, khong keo dai trang */
.pd26 .pd26-spec-2cot tbody { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--nr-space-8, 32px); }
.pd26 .pd26-spec-2cot tr { display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); }
.pd26 .pd26-spec-2cot td:first-child { width: auto; } /* o luoi da chia 46% -- width 46% cua bang thuong lam gach chan cot ten ngan lai */
.pd26 .pd26-sbuy { display: flex; align-items: center; gap: 12px; padding: var(--pd26-inner); font-size: var(--nr-text-sm, 14px); }
.pd26 .pd26-sbuy > div { flex: 1; min-width: 0; }
.pd26 .pd26-sbuy b { display: block; color: var(--pd26-red); }

/* ===== kieu 2: landing hien nguyen, khong boc khung ===== */
.pd26 .pd26-landing { margin-bottom: var(--pd26-gap); }

/* Xe thuc te + chi nhanh: khoi newsroom co khung 1296 rieng -> trong trang san pham an theo mep trang */
.pd26 .wrapper-product > .nr-ssr-slot > .nr-container { margin-inline: 0; max-width: none; }

/* ===== danh gia kieu CellphoneS ===== */
.pd26 .pd26-rv { padding: var(--pd26-pad); }
.pd26 .pd26-rv-sum {
  display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--pd26-gap); align-items: center;
  padding: var(--pd26-pad); background: var(--pd26-sunken); border: 1px solid var(--pd26-line); border-radius: var(--pd26-radius);
}
.pd26 .pd26-rv-score { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.pd26 .pd26-rv-score > b { font-size: 44px; line-height: 1; color: var(--pd26-ink); }
.pd26 .pd26-rv-score > b small { font-size: 22px; color: var(--pd26-muted); }
.pd26 .pd26-rv-score .pd26-stars { font-size: var(--nr-text-xl, 20px); letter-spacing: 3px; }
.pd26 .pd26-rv-count { margin-bottom: var(--pd26-tight); color: var(--pd26-muted); }
.pd26 .pd26-rv-bars div { display: grid; grid-template-columns: 36px minmax(0, 1fr) 90px; gap: 10px; align-items: center; margin: 6px 0; font-size: 13px; }
.pd26 .pd26-rv-bars i { height: 8px; overflow: hidden; background: var(--pd26-line); border-radius: 999px; }
.pd26 .pd26-rv-bars em { display: block; height: 100%; background: var(--pd26-red); }
.pd26 .pd26-rv-bars small { color: var(--pd26-muted); }
.pd26 .pd26-rv-list { margin-top: var(--pd26-tight); }
.pd26 .pd26-rv-it { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: var(--pd26-inner) 0; border-bottom: 1px solid var(--pd26-line); }
.pd26 .pd26-rv-it:last-child { border-bottom: 0; }
.pd26 .pd26-av { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--pd26-avatar); color: var(--nr-text-invert, #fff); font-weight: 700; }
.pd26 .pd26-rv-name { color: var(--pd26-ink); }
.pd26 .pd26-rv-line { font-size: var(--nr-text-sm, 14px); }
.pd26 .pd26-rv-line strong { margin-left: 6px; color: var(--pd26-ink); font-weight: 500; }
.pd26 .pd26-rv-it p { margin: 6px 0; }
.pd26 .pd26-rv-img { display: flex; flex-wrap: wrap; gap: var(--pd26-tight); margin: var(--pd26-tight) 0; }
.pd26 .pd26-rv-img img { width: 88px; height: 88px; object-fit: cover; border-radius: var(--pd26-radius-sm); cursor: pointer; }
.pd26 .pd26-rv-reply { margin: var(--pd26-tight) 0; padding: 10px 12px; background: var(--pd26-sunken); border-left: 3px solid var(--pd26-red); border-radius: var(--pd26-radius-sm); font-size: var(--nr-text-sm, 14px); }
.pd26 .pd26-rv-reply p { margin: 4px 0 0; }
.pd26 .pd26-rv-time { color: var(--pd26-muted); font-size: 13px; }

/* ===== San pham cung loai: nr-rail (nut truoc/sau) + the rieng ===== */
.pd26-related { margin: 0 0 16px; padding: 20px; }
.pd26-related .pd26-h2 { margin: 0 0 16px; font-size: var(--nr-text-xl, 20px); font-weight: 700; color: var(--pd26-ink); }
.pd26-related .nr-rail > .nr-cards.pd26-rel-list {
  display: grid; grid-template-columns: none; grid-template-rows: none;
  grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * 16px) / 5); gap: 16px;
  margin: 0; padding: 0; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.pd26-rel-it { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px; border: 1px solid var(--pd26-line); border-radius: var(--pd26-radius); background: var(--pd26-surface); scroll-snap-align: start; }
.pd26-rel-it:hover { border-color: var(--pd26-line-strong); }
.pd26-rel-anh { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--pd26-sunken); border-radius: var(--pd26-radius-sm); }
.pd26-rel-anh img { width: 100%; height: 100%; object-fit: contain; }
.pd26-rel-ten { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; color: var(--pd26-ink); font-size: var(--nr-text-sm, 14px); font-weight: 600; line-height: 1.3; text-decoration: none; }
.pd26-rel-ten:hover { color: var(--pd26-red); }
.pd26-rel-sao { color: var(--pd26-muted); font-size: 13px; }
.pd26-rel-gia { margin-top: auto; color: var(--pd26-red); font-size: var(--nr-text-base, 16px); }
.pd26-rel-xem { display: inline-flex; align-items: center; gap: 4px; color: var(--pd26-muted); font-size: 13px; text-decoration: none; }
.pd26-rel-xem:hover { color: var(--pd26-red); }
.pd26-rel-xem svg { width: 14px; height: 14px; }

/* ===== San pham da xem -- markup do viewed_products.js sinh (dung chung trang cu).
   !important trong khoi nay: ha tien ich Bootstrap .p-3/.mb-3/.rounded-3/.h5/.align-items-center
   ma JS gan cung vao markup -- tien ich Bootstrap ban than la !important, khong co cach khac
   ngoai sua JS dung chung (ngoai pham vi). ===== */
.pd26-extra .viewed-products-section { margin: 0 0 16px !important; padding: 20px !important; background: var(--pd26-surface); border: 1px solid var(--pd26-line); border-radius: var(--pd26-radius) !important; }
.pd26-extra .viewed-products-section > div:first-child { align-items: center !important; margin-bottom: 16px !important; }
.pd26-extra .viewed-products-section h3 { margin: 0 !important; font-family: inherit; font-size: var(--nr-text-xl, 20px) !important; font-weight: 700; line-height: 1.3; color: var(--pd26-ink); }
.pd26-extra .viewed-products-section h3 i { display: none; }
.pd26-extra .viewed-products-section .btn-outline-danger { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; border-color: var(--pd26-line-strong); border-radius: var(--pd26-radius-sm); background: var(--pd26-surface); color: var(--pd26-muted); font-size: 13px; }
.pd26-extra .viewed-products-section .btn-outline-danger:hover { border-color: var(--pd26-red); background: var(--pd26-surface); color: var(--pd26-red); }
.pd26-extra .swiper { padding: 2px; }
.pd26-extra .swiper-slide { height: auto; }
.pd26-extra .viewed-product-card { position: relative; height: 100%; padding: 10px 12px; border: 1px solid var(--pd26-line); border-radius: var(--pd26-radius); background: var(--pd26-surface); }
.pd26-extra .viewed-product-layout { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; }
.pd26-extra .viewed-product-image { width: 64px; height: 64px; overflow: hidden; background: var(--pd26-sunken); border-radius: var(--pd26-radius-sm); }
.pd26-extra .viewed-product-image img { width: 100%; height: 100%; object-fit: contain; }
.pd26-extra .viewed-product-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-right: 20px; }
.pd26-extra .viewed-product-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; font-size: var(--nr-text-sm, 14px); font-weight: 600; line-height: 1.35; }
.pd26-extra .viewed-product-name a { color: var(--pd26-ink); font-size: inherit; text-decoration: none; }
.pd26-extra .viewed-product-price { color: var(--pd26-red); font-size: var(--nr-text-sm, 14px); font-weight: 700; }
.pd26-extra .btn-remove-viewed { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: var(--pd26-sunken); color: var(--pd26-muted); font-size: var(--nr-text-sm, 14px); }
.pd26-extra .btn-remove-viewed:hover { background: var(--pd26-danger-50); color: var(--pd26-red); }

/* ===== thanh mua dinh day -- chi desktop ===== */
.pd26-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; background: var(--pd26-surface); border-top: 1px solid var(--pd26-line); transition: transform .2s; }
/* chi hien khi khoi mua da ra khoi man hinh (JS dat data-state) -- tranh 2 nut Mua cung luc */
.pd26-bar[data-state="an"] { transform: translateY(100%); }
.pd26-bar-in { display: flex; align-items: center; gap: 12px; max-width: 1296px; height: 64px; margin: 0 auto; padding: 0 20px; }
.pd26-bar-t { flex: 1; min-width: 0; overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.pd26-bar-t b { margin-left: 8px; color: var(--pd26-red); }
body:has(.pd26-bar) { padding-bottom: 64px; }

/* ===== responsive ===== */
@media (min-width: 901px) {
  body:has(.pd26-bar) .admin-edit-btn-fixed { bottom: 84px; } /* nut Chinh sua cua admin khong de len thanh day */
}
@media (max-width: 1100px) {
  .pd26 .pd26-body { grid-template-columns: minmax(0, 1fr); }
  .pd26 .pd26-side { position: static; }
  .pd26 .pd26-sbuy { display: none; }
  .pd26-related .nr-rail > .nr-cards.pd26-rel-list { grid-auto-columns: calc((100% - 2 * 16px) / 3); }
}
@media (max-width: 900px) {
  /* head (ten + gia) -> anh -> khung mua; ba o tach rieng, moi o mot khung */
  .pd26 .pd26-hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "gal" "buy"; grid-template-rows: none; row-gap: var(--pd26-inner); }
  .pd26 .pd26-head { padding: 0; background: none; border: 0; border-radius: 0; }
  .pd26 .pd26-buy-in { padding: var(--pd26-pad); border-top: 1px solid var(--pd26-line); border-radius: var(--pd26-radius); }
  .pd26 .pd26-mprice { display: block; }
  /* 1 cot: anh day het be ngang se cao ~1000px, day nut mua xuong 1,5 man (review 29/09) */
  .pd26 .pd26-gal .product-slider-wrapper { max-width: 56vh; margin-inline: auto; } /* khung vuong: gioi han BE RONG thi chieu cao theo -- anh khong bi mep xam */
  .pd26 .pd26-tabs-mini { display: none; }
  .pd26-bar { display: none; }
  body:has(.pd26-bar) { padding-bottom: 0; }
}
@media (max-width: 600px) {
  .pd26 { --pd26-gap: var(--nr-space-3, 12px); --pd26-pad: var(--nr-space-4, 16px); }
  .pd26 .pd26-title { font-size: var(--nr-text-xl, 20px); }
  .pd26 .pd26-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .pd26 .pd26-keys { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd26 .pd26-rv-sum { grid-template-columns: minmax(0, 1fr); }
  .pd26 .pd26-spec-2cot tbody { grid-template-columns: minmax(0, 1fr); }
  .pd26 .pd26-toc-cap1 .toc-list { columns: 1; }
  .pd26 { --pd26-sticky-top: 100px; } /* header mobile thap hon */
  .pd26 .pd26-an-hep { display: none; } /* "Them vao gio" -> "Them gio": chu khong sat mep nut */
  .pd26-btn { padding: 0 10px; font-size: var(--nr-text-sm, 14px); }
  .pd26-related { padding: 16px; }
  .pd26-related .nr-rail > .nr-cards.pd26-rel-list { grid-auto-columns: 46%; gap: 12px; }
  .pd26-extra .viewed-products-section { padding: 16px !important; } /* ha .p-3 cua Bootstrap -- xem ghi chu khoi Da xem */
}