/**
 * Khối trong bài roundup, HNL Deals.
 * Chỉ token :root của theme cha (rule H2), không style inline (rule H1).
 */

/* ==========================================================================
   Disclosure và disclaimer
   ========================================================================== */

.hnl-disclosure,
.hnl-disclaimer {
    margin: var(--space-5) 0;
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-md);
    font-size: .875rem;
    line-height: 1.55;
}

.hnl-disclosure {
    border-left: 3px solid var(--color-primary);
    background: var(--color-primary-light);
    color: var(--color-text-secondary);
}

.hnl-disclaimer {
    border-left: 3px solid var(--color-warning);
    background: var(--color-warning-light);
    color: var(--color-text);
}

.hnl-disclosure p:last-child,
.hnl-disclaimer p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   Bảng điểm HNL Score
   ========================================================================== */

.hnl-score {
    margin: var(--space-6) 0;
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-alt);
}

.hnl-score__heading {
    margin: 0 0 var(--space-4);
    color: var(--color-primary);
    font-size: 1.125rem;
    font-weight: var(--font-bold);
}

.hnl-score__table {
    margin: 0;
}

.hnl-score__table table {
    font-size: .875rem;
}

.hnl-score__table th,
.hnl-score__table td {
    padding: var(--space-2) var(--space-3);
}

/* Cột trọng số và điểm căn phải cho dễ so */
.hnl-score__table td:nth-child(2),
.hnl-score__table td:nth-child(3),
.hnl-score__table th:nth-child(2),
.hnl-score__table th:nth-child(3) {
    text-align: right;
    white-space: nowrap;
}

.hnl-score__table figcaption {
    margin-top: var(--space-2);
    color: var(--color-text-muted);
    font-size: .8125rem;
}

/* ==========================================================================
   Nhãn "Best for" và khối pros / cons
   ========================================================================== */

.hnl-pick-label {
    display: inline-block;
    margin: 0 0 var(--space-4);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: var(--color-surface);
    font-size: .8125rem;
    font-weight: var(--font-medium);
}

.hnl-proscons {
    margin: var(--space-5) 0;
    padding: var(--space-5);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
}

.hnl-proscons__title {
    margin: 0 0 var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--color-border-subtle);
    font-size: 1rem;
}

.hnl-proscons__title--pro {
    border-bottom-color: var(--color-success);
    color: var(--color-success);
}

.hnl-proscons__title--con {
    border-bottom-color: var(--color-error);
    color: var(--color-error);
}

.hnl-proscons ul {
    margin: 0;
    padding-left: var(--space-5);
}

.hnl-proscons li {
    margin-bottom: var(--space-2);
    font-size: .9375rem;
    line-height: 1.5;
}

/* ==========================================================================
   Khối "Skip it if"
   ========================================================================== */

.hnl-skip {
    margin: var(--space-4) 0 var(--space-8);
    padding: var(--space-4) var(--space-5);
    border-left: 3px solid var(--color-text-muted);
    border-radius: var(--radius-md);
    background: var(--color-surface-hover);
    font-size: .9375rem;
}

.hnl-skip p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   Ảnh sản phẩm trong roundup + hình minh hoạ tự vẽ
   ========================================================================== */

/* Ảnh sản phẩm: nền trắng của Ovonic hoà vào nền trang nên phải có viền */
.hnl-pick-img {
    margin: 0 0 var(--space-5);
}

.hnl-pick-img img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 460px;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    background: #fff;
}

/* Hình minh hoạ (biểu đồ) vẽ ở 820px, không phóng to quá kích thước gốc */
.hnl-figure {
    margin: var(--space-6) 0;
}

.hnl-figure img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 820px;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: #fff;
}

.hnl-figure figcaption {
    margin-top: var(--space-2);
    color: var(--color-text-muted);
    font-size: .875rem;
    line-height: 1.5;
}

/* ==========================================================================
   Mobile, kiểm ở 1080 / 760 / 480 (rule H4)
   ========================================================================== */

@media (max-width: 760px) {
    .hnl-proscons {
        padding: var(--space-4);
    }

    .hnl-pick-img img {
        max-width: 100%;
    }

    /* Gutenberg đã xếp columns thành hàng dọc ở đây, chỉ cần giãn khoảng cách */
    .hnl-proscons .wp-block-column + .wp-block-column {
        margin-top: var(--space-5);
    }
}

@media (max-width: 480px) {
    .hnl-score {
        padding: var(--space-4) var(--space-3);
    }

    /* Bảng điểm không được đẩy trang trôi ngang */
    .hnl-score__table,
    .hnl-score__table table {
        display: block;
        overflow-x: auto;
        max-width: 100%;
    }

    .hnl-score__table th,
    .hnl-score__table td {
        padding: var(--space-2);
    }

    .hnl-disclosure,
    .hnl-disclaimer,
    .hnl-skip {
        padding: var(--space-3) var(--space-4);
    }
}

/* ==========================================================================
   Sua loi giao dien danh sach san pham, 04/09/2026
   Nut Amazon va tieu de bi cat tren dien thoai <= 412px.
   Nguyen nhan: o luoi cua .acms-list__row--main mac dinh min-width:auto nen
   khong co lai duoc duoi min-content cua nut co white-space:nowrap.
   Chi ghi de tu child theme, khong sua file trong plugin (rule I1).
   ========================================================================== */

@media (max-width: 600px) {
    /* Cho o luoi va cac hop long nhau co lai theo be ngang man hinh */
    .acms-list__row--main {
        grid-template-columns: minmax(0, 1fr);
    }

    .acms-list__row--main > *,
    .acms-list__info,
    .acms-list__meta,
    .acms-list__price-action,
    .acms-list__action {
        min-width: 0;
    }

    /* Nhan nut duoc phep xuong dong thay vi tran ra ngoai roi bi cat */
    .acms-list__action .acms-btn,
    .acms-btn--amazon {
        min-width: 0;
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

/* Man hep hon thi ha co chu de nhan nut gon trong mot hoac hai dong */
@media (max-width: 400px) {
    .acms-list__action .acms-btn,
    .acms-btn--amazon {
        font-size: var(--acms-text-base);
        padding: var(--acms-space-3);
    }
}

/* ==========================================================================
   Vung cham va tuong phan
   ========================================================================== */

/* Nut "About HNL Score" cu 16x16, duoi nguong 24px cua Google.
   Giu icon nguyen co, mo rong vung cham bang lop phu khong anh huong bo cuc. */
.acms-list__score-info {
    position: relative;
    width: 24px;
    height: 24px;
}

.acms-list__score-info::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    transform: translate(-50%, -50%);
}

/* Tuong phan duoi 4.5:1. .footer__copyright da chuyen sang style.css vi no
   nam o moi trang, khong rieng bai don. */
.toc-expandable__number,
.toc-bubble__number {
    color: var(--color-text-secondary);
}

/* Giao dien toi: --color-primary doi thanh xanh sang #14b8a6, chu trang dat len
   chi con khoang 2.4:1. Doi sang chu mau nen toi cho du tuong phan. */
[data-theme="dark"] .toc-expandable__link:hover .toc-expandable__number,
[data-theme="dark"] .toc-expandable__link.is-active .toc-expandable__number,
[data-theme="dark"] .toc-bubble__link:hover .toc-bubble__number,
[data-theme="dark"] .toc-bubble__link.is-active .toc-bubble__number {
    color: var(--color-bg);
}

.comment-list__empty-text {
    color: var(--color-text-secondary);
}

/* ---------- Bang so sanh nhanh ---------- */
/* File nay chi nap tren is_singular(), dung cho bang nam trong bai viet. */

.hnl-ss {
    margin: 2.5rem 0;
}

.hnl-ss__tieu-de {
    margin-bottom: 0.75rem;
}

/* Bang rong hon man hinh thi cuon trong khung nay, than trang khong cuon ngang. */
.hnl-ss__cuon {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 8px);
}

.hnl-ss__cuon:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.hnl-ss__bang {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    white-space: nowrap;
}

.hnl-ss__bang th,
.hnl-ss__bang td {
    padding: 0.6rem 0.8rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

.hnl-ss__bang thead th {
    background: var(--color-bg-alt, var(--color-bg));
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

/* Khong ghim thead: header cua site cung sticky nen hai cai de len nhau va
   che mat dong dau tien. Bang chi 10 dong, khong can ghim. */

.hnl-ss__bang tbody tr:last-child th,
.hnl-ss__bang tbody tr:last-child td {
    border-bottom: 0;
}

/* Cot ten ghim trai de doc gia biet dang xem dong nao khi cuon ngang. */
.hnl-ss__ten {
    position: sticky;
    left: 0;
    background: var(--color-bg);
    font-weight: 600;
    white-space: normal;
    min-width: 15rem;
    max-width: 20rem;
}

.hnl-ss__bang thead .hnl-ss__ten {
    background: var(--color-bg-alt, var(--color-bg));
}

.hnl-ss__stt {
    display: inline-block;
    min-width: 1.4rem;
    color: var(--color-text-subtle);
    font-variant-numeric: tabular-nums;
}


.hnl-ss__sao,
.hnl-ss__dg {
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
}

.hnl-ss__dg {
    display: block;
}

/* Cung mau voi nut "Check today's price on Amazon" cua plugin. Hai nut cung
   mot hanh dong ma khac mau thi mat di tin hieu thi giac nguoi doc da hoc. */
.hnl-ss__nut {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-sm, 6px);
    background: var(--acms-amazon-orange, #ff9900);
    color: #1a1a1a;
    font-weight: 600;
    font-size: 0.8125rem;
    text-decoration: none;
    white-space: nowrap;
}

.hnl-ss__nut:hover,
.hnl-ss__nut:focus-visible {
    background: var(--acms-amazon-orange-hover, #e88a00);
    color: #1a1a1a;
}

.hnl-ss__ghi-chu {
    margin-top: 0.6rem;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

@media (max-width: 640px) {
    .hnl-ss__bang {
        font-size: 0.8125rem;
    }

    .hnl-ss__ten {
        min-width: 11rem;
        max-width: 13rem;
    }

    .hnl-ss__bang th,
    .hnl-ss__bang td {
        padding: 0.5rem 0.6rem;
    }
}

/* Khoi rieng mot dong de nhan luon roi xuong duoi ten, khong dinh vao duoi
   chu khi ten ngan va treo lo lung khi ten dai. */
.hnl-ss__ten-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.hnl-ss__ten-link:hover,
.hnl-ss__ten-link:focus-visible {
    color: var(--color-primary);
    text-decoration: underline;
}


/* Nhan rut tu so lieu that, khong phai phan xet chu quan. */
.hnl-ss__nhan {
    display: inline-block;
    margin-top: 0.3rem;
    padding: 0.1rem 0.45rem;
    border: 1px solid var(--color-primary);
    border-radius: 999px;
    color: var(--color-primary);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Nhan tren the san pham, dung mot kieu voi nhan trong bang so sanh. */
.hnl-the-nhan {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: var(--color-primary);
    color: var(--color-bg);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}

.acms-list__badges:not(:empty) {
    margin-bottom: 0.4rem;
}

/* Mot san pham co the giu ca hai nhan, can khoang cach giua chung. */
.hnl-the-nhan + .hnl-the-nhan,
.hnl-ss__nhan + .hnl-ss__nhan {
    margin-left: 0.3rem;
}

/* San pham tam het hang tren Amazon: bi day xuong cuoi danh sach boi
   hnl_day_het_hang(). Nhan trung tinh, khong dung mau nhan thanh tich.
   Hai lop de thang .post-content span neu co. */
.acms-list__badges .hnl-the-nhan--het,
.hnl-ss__bang .hnl-ss__nhan--het {
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
}

/* ---------- Khoi "Complete the build" ---------- */
/* Noi mot mon linh kien sang cac mon khac trong cung dan may. Khac khoi
   Related guides o cho no di THEO CHIEU NGANG cua dan may chu khong theo
   chieu doc cua chu de. */

.hnl-chuoi-build {
    margin: 2rem 0 0;
    padding: 1rem 1.25rem 1.25rem;
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-md, 12px);
}

/* Hai lop: .post-content h2 cua theme co do uu tien 0-1-1, de bep mot lop don.
   Da dinh bay nay ba lan trong du an, xem ghi chu o khoi Popular this week. */
.hnl-chuoi-build .hnl-chuoi-build__td,
.hnl-chuoi-build h2 {
    margin: 0 0 0.6rem;
    font-size: 1.15rem;
}

.hnl-chuoi-build ul {
    margin: 0;
    padding-left: 1.15rem;
}

.hnl-chuoi-build li {
    margin: 0 0 0.35rem;
    font-size: 0.9375rem;
    line-height: 1.4;
}

.hnl-chuoi-build a {
    color: var(--color-primary);
    text-decoration: none;
}

.hnl-chuoi-build a:hover,
.hnl-chuoi-build a:focus-visible {
    text-decoration: underline;
}