/* ==========================================================
   Trang chi tiết sản phẩm – phần mô tả, cùng hoạt chất,
   sản phẩm liên quan, đã xem. Dược Giá Sỉ 2026.
   Chữ vừa phải, giảm đậm, đồng bộ Navy / Xanh Y Tế.
   ========================================================== */
.product-detail-bottom { display: flex; gap: 20px; align-items: flex-start; margin-top: 20px; }
.product-detail-bottom .left-col { flex: 1 1 auto; width: auto !important; min-width: 0; }
.product-detail-bottom .right-col { flex: 0 0 300px; width: 300px !important; }
.product-detail-bottom.pd-no-side .right-col { display: none; }

/* ---------- Khối "Thông tin sản phẩm" ---------- */
.product-detail-bottom .content-detail-tab {
    background: #fff; border: 1px solid var(--brand-line, #DCE6F0); border-radius: 12px; padding: 20px 24px 16px; box-shadow: none;
}
.spct-title.pd-title {
    display: flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 0 0 14px;
    font-size: 18px !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0;
    color: var(--brand-navy, #0B2D6E) !important; border-bottom: 1px solid var(--brand-line, #DCE6F0);
}
.spct-title.pd-title i { font-size: 16px; color: var(--brand-blue, #1C88D0); }

.product-desc { gap: 24px; align-items: flex-start; }

/* Mục lục */
.product-desc div.mucluc { width: 240px !important; flex: 0 0 240px; }
.mucluc-detail { background: #F7FAFD; border: 1px solid var(--brand-line, #DCE6F0); border-radius: 10px; padding: 14px 12px; }
.mucluc-detail .pd-toc-label {
    display: flex; align-items: center; gap: 8px; margin: 0 0 8px 4px;
    font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #5B6B80;
}
.mucluc-detail .pd-toc-label i { color: var(--brand-blue, #1C88D0); font-size: 11px; }
div.mucluc-detail ul { margin: 0; padding: 0; border-left: 2px solid var(--brand-line, #DCE6F0); }
div.mucluc-detail ul li a {
    display: block !important; padding: 7px 10px 7px 12px !important; margin-left: -2px;
    background: transparent !important; border: 0 !important; border-left: 2px solid transparent !important; border-radius: 0 !important;
    font-size: 13.5px !important; font-weight: 400 !important; line-height: 1.45; color: #3B4A5E !important;
}
div.mucluc-detail ul li a:hover { color: var(--brand-blue, #1C88D0) !important; background: transparent !important; }
div.mucluc-detail ul li a.active {
    color: var(--brand-navy, #0B2D6E) !important; font-weight: 600 !important; border-left-color: var(--brand-blue, #1C88D0) !important; background: #EAF3FB !important;
}

/* Nội dung mô tả */
.product-desc #productDetailDesc { flex: 1; min-width: 0; width: auto !important; padding: 0 !important; }
.product-desc .card-body { font-size: 15px; line-height: 1.75; color: #2A3646; font-weight: 400; }
.product-desc .card-body h1, .product-desc .card-body h2, .product-desc .card-body h3, .product-desc .card-body h4 {
    color: var(--brand-navy, #0B2D6E) !important; font-weight: 600 !important; line-height: 1.4; margin: 20px 0 10px;
}
.product-desc .card-body h1 { font-size: 20px !important; }
.product-desc .card-body h2 { font-size: 18px !important; }
.product-desc .card-body h3 { font-size: 16px !important; }
.product-desc .card-body h4 { font-size: 15px !important; }
.product-desc .card-body > :first-child { margin-top: 0; }
.product-desc .card-body p { margin: 0 0 10px; }
.product-desc .card-body ul, .product-desc .card-body ol { padding-left: 20px; margin: 0 0 12px; }
.product-desc .card-body li { margin-bottom: 4px; }
.product-desc .card-body li::marker { color: var(--brand-blue, #1C88D0); }
.product-desc .card-body strong, .product-desc .card-body b { font-weight: 600; color: #1D2A3A; }
.product-desc .card-body img { height: auto; border-radius: 8px; }
.product-desc .card-body table { width: 100%; border-collapse: collapse; margin: 0 0 14px; font-size: 14px; }
div#productDetailDesc table, div#productDetailDesc th, div#productDetailDesc td { border: 1px solid var(--brand-line, #DCE6F0) !important; }
div#productDetailDesc td, div#productDetailDesc th { padding: 8px 12px; }
div#productDetailDesc td p { line-height: 1.5 !important; padding-left: 0 !important; margin: 0; }
div#productDetailDesc tr:nth-child(2n + 1) { background: #F7FAFD !important; }

/* Nút Xem thêm / Ẩn bớt */
.bg-op { padding-top: 6px; }
.bg-op a.product-desc-toggle {
    display: inline-flex !important; align-items: center; gap: 8px; height: 38px; padding: 0 18px !important;
    border-radius: 8px !important; border: 1px solid var(--brand-line, #DCE6F0) !important; background: #fff !important;
    color: var(--brand-navy, #0B2D6E) !important; font-size: 13.5px !important; font-weight: 500 !important; box-shadow: none !important;
}
.bg-op a.product-desc-toggle:hover { border-color: var(--brand-blue, #1C88D0) !important; color: var(--brand-blue, #1C88D0) !important; background: #F2F7FC !important; }
.bg-op a.product-desc-toggle i { font-size: 11px; }

/* ---------- Cột phải: Cùng hoạt chất / Tin liên quan ---------- */
.product-detail-bottom .news-sidebar-block {
    background: #fff; border: 1px solid var(--brand-line, #DCE6F0); border-radius: 12px; padding: 16px; margin-bottom: 16px; box-shadow: none;
}
.product-detail-bottom .title-sidebar {
    display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 0 0 12px; border-bottom: 1px solid var(--brand-line, #DCE6F0);
    font-size: 15px !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0; color: var(--brand-navy, #0B2D6E) !important;
}
.product-detail-bottom .title-sidebar i { color: var(--brand-blue, #1C88D0); font-size: 13px; }
.pd-side .list-products { display: flex; flex-direction: column; gap: 10px; }
.pd-side .list-products .item-product { max-width: none; }

/* ---------- Sản phẩm liên quan / đã xem ---------- */
.pd-block { margin: 28px 0 0; }
.pd-block__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.pd-block__title {
    position: relative; margin: 0; padding-left: 14px; font-size: 18px !important; font-weight: 600 !important; line-height: 1.3;
    color: var(--brand-navy, #0B2D6E) !important; text-transform: none;
}
.pd-block__title::before { content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 4px; border-radius: 2px; background: var(--brand-blue, #1C88D0); }
.pd-clear {
    display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 8px;
    border: 1px solid var(--brand-line, #DCE6F0); background: #fff; color: #5B6B80 !important; font-size: 13px; font-weight: 500; text-decoration: none;
    transition: color .15s, border-color .15s, background .15s;
}
.pd-clear:hover { color: #D62828 !important; border-color: #F3C4C4; background: #FFF5F5; }
.pd-clear i { font-size: 12px; }
.pd-viewed:not(:has(.item-product)) { display: none; }
.pd-block .load_buy_quick_view:not(.slick-initialized) { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.pd-block .related-products-slide { margin-bottom: 0; }

@media (max-width: 1023px) {
    .product-detail-bottom { flex-direction: column; }
    .product-detail-bottom .right-col { flex-basis: auto; width: 100% !important; }
    .pd-block .load_buy_quick_view:not(.slick-initialized) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .product-detail-bottom .content-detail-tab { padding: 16px 14px 12px; border-radius: 10px; }
    .spct-title.pd-title { font-size: 16px !important; margin-bottom: 14px; padding-bottom: 10px; }
    .product-desc { flex-direction: column; gap: 14px; }
    .product-desc div.mucluc { width: 100% !important; flex-basis: auto; }
    .product-desc .card-body { font-size: 14.5px; }
    .product-desc .card-body h2 { font-size: 16.5px !important; }
    .product-desc .card-body h3 { font-size: 15px !important; }
    .pd-block__title { font-size: 16px !important; }
    .pd-block .load_buy_quick_view:not(.slick-initialized) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}
.item-product--viewed .pv-contact { font-size: 13.5px; color: var(--brand-blue, #1C88D0); font-weight: 600; }
.pd-block .item-product { height: 100%; }

/* ---------- Hộp "Lưu ý" ---------- */
.product-notice.luuy.pd-notice {
    display: flex !important; align-items: flex-start; gap: 12px; margin-top: 16px; padding: 12px 14px !important;
    background: #FFF8E6 !important; border: 1px solid #F5DFA6 !important; border-left: 4px solid #E0A100 !important; border-radius: 8px !important;
    color: #5C4A1A !important; box-shadow: none !important; font-size: 13.5px; line-height: 1.55; font-weight: 400;
}
.pd-notice__icon { color: #D99A00; font-size: 16px; margin-top: 2px; flex: 0 0 auto; }
.pd-notice__body { display: flex; flex-direction: column; gap: 2px; }
.pd-notice__body strong { font-weight: 600; color: #4A3A10; font-size: 13.5px; }
.pd-notice__body span { color: #6B5A2A !important; }

/* Liên quan: dưới 6 sản phẩm thì không chạy slider -> dùng lưới */
.pd-block .related-products-slide:not(.slick-initialized) { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.pd-block .related-products-slide:not(.slick-initialized) > .item-product,
.pd-block .load_buy_quick_view:not(.slick-initialized) > .item-product { max-width: none !important; margin: 0 !important; }
@media (max-width: 1023px) { .pd-block .related-products-slide:not(.slick-initialized) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .pd-block .related-products-slide:not(.slick-initialized) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }

/* Mục lục: JS gán width = .width() khi cuộn; với border-box mỗi lần cuộn sẽ hụt padding -> co dần.
   Dùng content-box để .width() khớp đúng kích thước đặt lại. */
div.mucluc-detail { box-sizing: content-box !important; }
.product-desc div.mucluc { position: relative; align-self: stretch; }
/* 240px nội dung + padding 24 + viền 2 = 266px */
.product-desc div.mucluc { flex: 0 0 266px !important; width: 266px !important; }
div.mucluc-detail { width: 240px; }
.product-desc div.mucluc-detail ul { max-height: calc(100vh - 220px); overflow-y: auto; }
@media (max-width: 767px) { .product-desc div.mucluc { flex-basis: auto !important; width: 100% !important; } div.mucluc-detail { width: auto; } }

/* ---------- Cột phải không được rơi xuống dưới ---------- */
.product-detail-bottom { flex-wrap: nowrap !important; justify-content: flex-start !important; }
.product-detail-bottom .left-col { flex: 1 1 0 !important; min-width: 0 !important; }
.product-detail-bottom .right-col { flex: 0 0 300px !important; max-width: 300px; }

/* ---------- Cùng hoạt chất: danh sách dọc dạng thẻ ngang gọn ---------- */
.pd-same-list { display: flex; flex-direction: column; gap: 10px; max-height: 620px; overflow-y: auto; padding-right: 2px; }
.pd-same-list .item-product {
    display: grid !important; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: center;
    width: 100% !important; max-width: none !important; margin: 0 !important; padding: 8px !important;
    border: 1px solid var(--brand-line, #DCE6F0) !important; border-radius: 10px !important; box-shadow: none !important; transform: none !important;
}
.pd-same-list .item-product:hover { border-color: var(--brand-blue, #1C88D0) !important; background: #F7FAFD; }
.pd-same-list .item-product .img-product {
    width: 64px !important; height: 64px !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important;
    border-radius: 8px; overflow: hidden; background: #fff; display: flex !important; align-items: center; justify-content: center;
}
.pd-same-list .item-product .img-product img { width: 100% !important; height: 100% !important; object-fit: contain; padding: 2px !important; }
.pd-same-list .item-product .desc-product { position: relative; padding: 0 36px 0 0 !important; min-width: 0; }
.pd-same-list .item-product .product-name {
    font-size: 13px !important; font-weight: 400 !important; line-height: 1.4 !important; min-height: 0 !important; margin: 0 0 4px !important;
    display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pd-same-list .item-product .min-price { font-size: 14px !important; font-weight: 600 !important; margin: 0 !important; }
.pd-same-list .item-product .action { position: absolute !important; right: 0; top: 50%; transform: translateY(-50%); margin: 0 !important; }
.pd-same-list .item-product .action a { position: static !important; width: 30px !important; height: 30px !important; border-radius: 8px !important; }
.pd-same-list .item-product .action a img { width: 15px !important; height: 15px !important; }

@media (max-width: 1023px) {
    .product-detail-bottom { flex-direction: column; flex-wrap: wrap !important; }
    .product-detail-bottom .left-col { flex: 1 1 auto !important; width: 100% !important; }
    .product-detail-bottom .right-col { flex-basis: auto !important; max-width: none; width: 100% !important; }
    .pd-same-list { max-height: none; }
}
.pd-same-list .item-product { height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; flex: 0 0 auto !important; }
.pd-same-list .item-product .desc-product { height: auto !important; min-height: 0 !important; }
.pd-same-list .item-product .min-price { display: block !important; color: #D62828 !important; }