/* =============================================================================
 * victech-ui.css — sửa SEO/giao diện (P7)
 *
 * File VIẾT TAY, KHÔNG build từ SCSS.
 * Lý do: app.css được build từ resources/assets/v1/css/app.scss hồi 2017 bằng
 * laravel-mix, mà laravel-mix đã không còn trong package.json — build lại được
 * nữa. Sửa thẳng app.css thì không ai tái tạo được thay đổi đó. Tách file riêng
 * để mọi chỉnh sửa về sau đều nhìn thấy rõ và revert được.
 *
 * Nạp SAU app.css nên không cần !important, trừ chỗ phải thắng style nội tuyến.
 * Xem .ai_docs/02-seo/audit.md và plan.md.
 * ========================================================================== */


/* -----------------------------------------------------------------------------
 * 1. Mô tả sản phẩm — ép ghi đè style dán từ Word            (audit.md · G2)
 *
 * 98,5% sản phẩm có font-size nội tuyến, 97,3% có rác Word (MsoNormal, mso-*).
 * Nội dung render ra Times New Roman 18.67px/12px/11px lẫn với Helvetica 12px
 * của site. Style nội tuyến luôn thắng độ ưu tiên nên BẮT BUỘC dùng !important.
 *
 * Chỉ ép 3 thuộc tính về chữ. KHÔNG đụng color/background/text-align để người
 * biên tập vẫn tô màu hay canh giữa được khi cần.
 * -------------------------------------------------------------------------- */
.mo-ta-san-pham,
.mo-ta-san-pham * {
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
}

/* Riêng khối mô tả dùng cỡ chữ dễ đọc, không đổi body toàn site. */
.mo-ta-san-pham {
    font-size: 15px;
    line-height: 1.7;
}

/* Giữ lại phân cấp cho chữ in đậm và tiêu đề do người biên tập đánh dấu. */
.mo-ta-san-pham b,
.mo-ta-san-pham strong {
    font-weight: 700;
}

.mo-ta-san-pham h1,
.mo-ta-san-pham h2,
.mo-ta-san-pham h3 {
    font-size: 18px !important;
    font-weight: 700;
    margin: 18px 0 10px;
}

/* Ảnh chèn trong mô tả hay có width cứng từ Word -> tràn trên mobile. */
.mo-ta-san-pham img {
    max-width: 100%;
    height: auto;
}

.mo-ta-san-pham table {
    max-width: 100%;
    display: block;
    overflow-x: auto;
}


/* -----------------------------------------------------------------------------
 * 2. Vùng bấm                                                (audit.md · G3)
 *
 * Số đo trước khi sửa:
 *   link "Sản phẩm tương tự"  318 × 13 px
 *   chấm chỉ mục carousel      12 × 12 px
 *   nút giá                   128 × 34 px
 * WCAG 2.2 tối thiểu 24×24. Phóng bằng padding/min-height, KHÔNG đổi font-size
 * gốc của site (xem plan.md mục 5 — đổi body 12px→16px làm giãn cả site).
 * -------------------------------------------------------------------------- */

/* Danh sách "Sản phẩm tương tự": biến link thành cả dòng bấm được. */
.product_detail .list-unstyled > li > a {
    display: block;
    padding: 9px 4px;
    min-height: 24px;
    font-size: 14px;
    line-height: 1.5;
}

.product_detail .list-unstyled > li > a:hover,
.product_detail .list-unstyled > li > a:focus {
    background-color: #f5f5f5;
    text-decoration: none;
}

/* Chấm chỉ mục carousel: giữ chấm nhỏ nhưng nới vùng bấm ra 24×24.
 *
 * Bootstrap đặt box-sizing: border-box toàn cục, nên 24px đã bao gồm padding.
 * Dùng padding 7px + background-clip: content-box => vùng bấm 24×24 nhưng chấm
 * nhìn thấy chỉ 10×10, đúng bằng kích thước cũ.
 * KHÔNG thêm border ở đây: 24 − padding(14) − border(12) sẽ ra chấm 0px, vô hình. */
.carousel-indicators li,
.carousel-indicators .active {
    width: 24px;
    height: 24px;
    margin: 0 1px;
    padding: 7px;
    border: 0;
    background-clip: content-box;
    border-radius: 50%;
    text-indent: -999px;
}

.carousel-indicators li {
    background-color: rgba(255, 255, 255, .5);
}

.carousel-indicators .active {
    background-color: #fff;
}

/* Nút giá / nút hành động: đạt chiều cao bấm thoải mái. */
.product_detail .btn,
.btn-danger {
    min-height: 44px;
    padding: 11px 18px;
    font-size: 15px;
}

/* Mũi tên carousel: vùng bấm vốn đã rộng, chỉ làm icon rõ hơn. */
.carousel-control .glyphicon,
.carousel-control .fa {
    font-size: 28px;
}


/* -----------------------------------------------------------------------------
 * 3. Chữ dễ đọc ở vùng nội dung                              (audit.md · G1)
 *
 * body vẫn giữ 12px — đó là gốc của cả thang kích thước hiện tại, đổi là giãn
 * toàn site (plan.md mục 5). Chỉ nâng riêng những chỗ người dùng thực sự ĐỌC.
 * -------------------------------------------------------------------------- */
.product_detail dl.dl-horizontal dt,
.product_detail dl.dl-horizontal dd {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 6px;
}

.a_item .caption a {
    font-size: 13px;
    line-height: 1.5;
}

.breadcrumb {
    font-size: 13px;
}