/* ==========================================================
   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 340px !important; max-width: 340px; }

/* ---------- Cùng hoạt chất: danh sách thẻ ngang ---------- */
.pd-side { padding: 16px !important; border: 1px solid var(--brand-line, #DCE6F0) !important; border-radius: 14px !important; background: #fff; }
.pd-side .pd-side-title {
    display: flex !important; align-items: center; gap: 10px; margin: 0 0 14px !important; padding: 0 0 12px !important;
    border-bottom: 1px solid #EEF2F7 !important; font-size: 17px !important; font-weight: 700 !important; color: var(--brand-navy, #0B2D6E) !important;
    text-transform: none !important; background: none !important;
}
.pd-side .pd-side-title i {
    width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; font-size: 14px;
    background: var(--brand-mist, #EAF3FB); color: var(--brand-blue, #1C88D0);
}
.pd-side .pd-side-count {
    margin-left: auto; min-width: 26px; height: 24px; padding: 0 8px; border-radius: 999px; display: inline-grid; place-items: center;
    background: #F2F6FB; color: var(--brand-steel, #5B6B80); font-size: 12.5px; font-weight: 600;
}
.pd-same-list {
    display: flex; flex-direction: column; gap: 10px; max-height: 720px; overflow-y: auto; padding: 0 4px 0 0 !important;
    scrollbar-width: thin; scrollbar-color: #C9D5E3 transparent;
}
.pd-same-list::-webkit-scrollbar { width: 6px; }
.pd-same-list::-webkit-scrollbar-thumb { background: #C9D5E3; border-radius: 3px; }
.pd-same-list::-webkit-scrollbar-track { background: transparent; }
.pd-same-list .item-product {
    display: grid !important; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; align-items: center;
    width: 100% !important; max-width: none !important; margin: 0 !important; padding: 10px !important;
    height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; flex: 0 0 auto !important;
    background: #fff !important; border: 1px solid var(--brand-line, #DCE6F0) !important; border-radius: 12px !important;
    box-shadow: none !important; transform: none !important; transition: border-color .15s, box-shadow .15s;
}
.pd-same-list .item-product:hover { border-color: #A9CBEA !important; box-shadow: 0 8px 20px -14px rgba(11, 45, 110, .45) !important; }
.pd-same-list .item-product .img-product {
    width: 84px !important; height: 84px !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important;
    border-radius: 10px; overflow: hidden; background: #F7FAFD; border: 1px solid #EEF2F7;
    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: 6px !important; mix-blend-mode: multiply; }
.pd-same-list .item-product .desc-product {
    position: relative; display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center; align-content: center;
    column-gap: 8px; row-gap: 8px; padding: 0 !important; min-width: 0; height: auto !important; min-height: 0 !important;
}
.pd-same-list .item-product .product-name {
    grid-column: 1 / -1; font-size: 14.5px !important; font-weight: 500 !important; line-height: 1.4 !important; min-height: 0 !important; margin: 0 !important;
    color: var(--brand-ink, #0E1A2B) !important; text-decoration: none !important;
    display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal !important;
}
.pd-same-list .item-product:hover .product-name { color: var(--brand-blue, #1C88D0) !important; }
/* Đã đăng nhập: giá bên trái, nút giỏ bên phải cùng hàng */
.pd-same-list .item-product .min-price {
    grid-column: 1; display: block !important; margin: 0 !important; padding: 0 !important; font-size: 16px !important; font-weight: 700 !important;
    color: #D62828 !important; line-height: 34px !important; height: auto !important;
}
.pd-same-list .item-product .action { grid-column: 2; position: static !important; transform: none !important; margin: 0 !important; width: auto !important; }
.pd-same-list .item-product .action a {
    position: static !important; width: 34px !important; height: 34px !important; border-radius: 9px !important;
    display: grid !important; place-items: center; background: var(--brand-blue, #1C88D0) !important;
}
.pd-same-list .item-product .action a:hover { background: var(--brand-navy, #0B2D6E) !important; }
.pd-same-list .item-product .action a img { width: 17px !important; height: 17px !important; filter: brightness(0) invert(1); }
/* Khách: nút khoá giá gọn, không tràn */
.pd-same-list .item-product .pc-login-price {
    grid-column: 1 / -1; justify-self: start; display: inline-flex; width: auto; max-width: 100%; margin: 0; padding: 6px 12px;
    font-size: 13px; border-radius: 999px; border-style: solid; border-color: #CFE0F2;
}
.pd-same-list .item-product .pc-login-price__long { display: inline; }
.pd-same-list .item-product .pc-login-price__short { display: none; }

@media (max-width: 1199px) {
    .product-detail-bottom .right-col { flex-basis: 300px !important; max-width: 300px; }
    .pd-same-list .item-product { grid-template-columns: 72px minmax(0, 1fr); }
    .pd-same-list .item-product .img-product { width: 72px !important; height: 72px !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; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}

/* ===== Khách chưa đăng nhập: khối giá sỉ khoá ===== */
.pd-login-gate {
    margin: 4px 0 6px; padding: 16px 18px; border: 1px solid var(--brand-line, #DCE6F0); border-radius: 12px;
    background: linear-gradient(135deg, #F4F9FE 0%, #EAF3FB 100%);
}
.pd-login-gate__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pd-login-gate__ico {
    flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
    background: var(--brand-navy, #0B2D6E); color: #fff; font-size: 16px; box-shadow: 0 6px 14px -6px rgba(11, 45, 110, .55);
}
.pd-login-gate__price { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pd-login-gate__label { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-steel, #5B6B80); }
.pd-login-gate__mask { font-size: 24px; font-weight: 700; color: #D62828; filter: blur(6px); user-select: none; line-height: 1.15; }
.pd-login-gate__badge {
    margin-left: auto; padding: 4px 10px; border-radius: 999px; background: #fff; border: 1px solid #CFE0F2;
    font-size: 12px; font-weight: 600; color: var(--brand-blue, #1C88D0); white-space: nowrap;
}
.pd-login-gate__text { margin: 12px 0 14px; font-size: 14px; line-height: 1.55; color: var(--brand-ink, #0E1A2B); }
.pd-login-gate__text b { color: var(--brand-navy, #0B2D6E); }
.pd-login-gate__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.pd-login-gate__btn {
    flex: 1 1 200px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 46px; padding: 10px 16px; border-radius: 10px; font-size: 15px; font-weight: 600;
    text-decoration: none !important; transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.pd-login-gate__btn.is-primary { background: var(--brand-blue, #1C88D0); color: #fff !important; box-shadow: 0 8px 18px -10px rgba(28, 136, 208, .9); }
.pd-login-gate__btn.is-primary:hover { background: var(--brand-navy, #0B2D6E); transform: translateY(-1px); }
.pd-login-gate__btn.is-ghost { background: #fff; color: var(--brand-navy, #0B2D6E) !important; border: 1px solid #BCD3EA; }
.pd-login-gate__btn.is-ghost:hover { border-color: var(--brand-blue, #1C88D0); color: var(--brand-blue, #1C88D0) !important; }
.pd-login-gate__zalo { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 13.5px; font-weight: 600; color: var(--brand-blue, #1C88D0) !important; text-decoration: none !important; }
.pd-login-gate__zalo:hover { color: var(--brand-navy, #0B2D6E) !important; }
.pd-login-gate__zalo i { font-size: 11px; transition: transform .15s; }
.pd-login-gate__zalo:hover i { transform: translateX(3px); }
@media (max-width: 576px) {
    .pd-login-gate { padding: 14px; }
    .pd-login-gate__badge { margin-left: 0; }
    .pd-login-gate__mask { font-size: 21px; }
    .pd-login-gate__btn { flex-basis: 100%; }
}