/* Thanh dieu huong section (tab bar) tren trang chi tiet san pham
   (layout_product.php) — style hoc theo .ivd-commit-bar (header-redesign.css:
   nen trang, vien tren/duoi #ececec, layout ngang max-width:1280px), nhung
   day la 1 component MOI hoan toan (khong dung/doi .ivd-commit-bar).

   Sticky: dung dung 1 co che voi .blogpost-toc-sticky (css/toc.css) — bam
   theo CSS var --ivd-header-h (header-sticky.js cap nhat lien tuc moi lan
   scroll, vi .ivd-header tu thu gon chieu cao khi scroll qua .is-scrolled),
   KHONG dung gia tri top co dinh de tranh ho khoang trong/de len header
   giong loi da gap voi TOC truoc day.

   Chi hien thi KHI DA SCROLL: an mac dinh, hien ra dung luc .ivd-header
   nhan class .is-scrolled (js/header-sticky.js, nguong 10px) — JS
   (product-section-nav.js) dung MutationObserver theo doi class cua
   .ivd-header roi gan/bo CUNG class .is-scrolled nay len chinh no, khong
   viet lai nguong scroll rieng (tai dung dung 1 nguon "da scroll chua"
   voi header, tranh 2 nguong lech nhau). */
.pd-section-nav {
    display: none;
    position: sticky;
    top: var(--ivd-header-h, 60px);
    z-index: 60;
    background: #fff;
    border-top: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
}
.pd-section-nav.is-scrolled {
    display: block;
    /* .ivd-header.is-scrolled tren trang San pham da bo shadow nay (xem
       body.pd-page trong css/header-redesign.css) — chuyen ve day, ngay
       duoi header, de van co lop phan cach do bong voi noi dung ben duoi. */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Hang ngang, khong xuong dong (flex-wrap:nowrap + white-space:nowrap tren
   tung tab), cho phep cuon ngang khi tong chieu rong tab > man hinh — dung
   lai dung ky thuat an scrollbar + mask-image fade cua .pf-filters
   (css/portfolio-showcase.css), CHI ap dung fade o mep PHAI (JS cap nhat
   dong theo trang thai cuon, xem js/product-section-nav.js). */
.pd-section-nav__inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 85%, transparent 100%);
    mask-image: linear-gradient(to right, #000 0%, #000 85%, transparent 100%);
}
.pd-section-nav__inner::-webkit-scrollbar { display: none; }

.pd-section-nav__tab {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 12px 18px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #4a4f63;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color .15s ease, border-color .15s ease;
}
.pd-section-nav__tab:hover { color: #1250dc; }
.pd-section-nav__tab.is-active { color: #1250dc; border-bottom-color: #1250dc; }

@media (max-width: 480px) {
    .pd-section-nav__tab { padding: 12px 14px; font-size: 0.8125rem; }
}

/* scroll-margin-top cho moi section dich cua tab — de trinh duyet TU TINH
   diem dung khi scrollIntoView()/nhay anchor #, khong can JS tu tinh truoc
   1 gia tri pixel co dinh (gia tri tinh truoc se "cu" neu layout phia tren
   thay doi — vd luoi anh/video AJAX tai xong lam trang cao them — GIUA luc
   bam va luc cuon xong, gay cuon lem/thieu). --pd-nav-h do JS
   (product-section-nav.js) cap nhat = chieu cao THAT cua thanh tab. */
#pd-sec-images,
#pd-sec-video,
#pd-sec-designs,
#news_detail,
#pd-sec-rating,
#pd-sec-faq {
    scroll-margin-top: calc(var(--ivd-header-h, 60px) + var(--pd-nav-h, 0px) + 8px);
}