/* =========================================================================
 * Indangnguyen — Hộp chính sách [idn_policybox]
 * Sao theo giao diện FPTShop: viền trên, 2 cột, link "Tìm hiểu thêm",
 * cỡ chữ/icon khác nhau mobile/PC, divider + thanh xám 8px (chỉ mobile).
 * Bảng màu/biến tham chiếu từ Tailwind của FPT.
 * ====================================================================== */
.idn-pbox {
    --idn-pbox-gray: #e5e7eb;       /* neutral-gray-2 */
    --idn-pbox-text: #141414;       /* black-opacity-100 */
    --idn-pbox-link: #2a6ee5;       /* blue-blue-7 (hyperlink) */
    display: grid;
    border-top: 1px solid var(--idn-pbox-gray);
}

/* ----- Hàng đầu: tiêu đề + "Tìm hiểu thêm" ----- */
.idn-pbox__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 12px 16px;             /* py-3 px-4 */
}
.idn-pbox__title {
    color: var(--idn-pbox-text);
    font-size: 14px;               /* b2-semibold */
    line-height: 20px;
    font-weight: 600;
}
.idn-pbox__more {
    cursor: pointer;
    color: var(--idn-pbox-link);
    font-size: 12px;               /* f1-regular */
    line-height: 18px;
    font-weight: 400;
    white-space: nowrap;
    transition: opacity .2s;
}
.idn-pbox__more:hover { opacity: .8; color: var(--idn-pbox-link); }

/* ----- Lưới 2 cột ----- */
.idn-pbox__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;                      /* gap-2 */
    padding: 12px 16px;            /* py-3 (+ căn lề ngang theo head trên mobile) */
}
.idn-pbox__item {
    display: flex;
    align-items: center;
    column-gap: 12px;              /* mb:gap-x-3 (mobile) */
    color: var(--idn-pbox-text);
    text-decoration: none;
}
.idn-pbox__head {
    text-transform: uppercase;
    color: #000;
    font-weight: bold !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 12px 16px;
}
.idn-pbox__item--link { transition: opacity .2s; }
.idn-pbox__item--link:hover { opacity: .85; }
.idn-pbox__icon {
    flex: 0 0 auto;
    width: 20px;                   /* size-5 */
    height: 20px;
    object-fit: contain;
    display: block;
}
.idn-pbox__text {
    color: var(--idn-pbox-text);
    font-size: 18px;               /* f1-regular */
    line-height: 18px;
    font-weight: 400;
}

/* Thanh xám dày + divider dưới tiêu đề: chỉ hiện trên mobile */
.idn-pbox__mbbar { display: none; }

@media (max-width: 768px) {
    .idn-pbox__head { border-bottom: 1px solid var(--idn-pbox-gray); }
    .idn-pbox__mbbar {
        display: block;
        height: 0;
        border-top: 8px solid var(--idn-pbox-gray);   /* border-t-8 */
    }
}

/* ----- PC (>=769px) ----- */
@media (min-width: 769px) {
    .idn-pbox__head {
        padding-left: 0;           /* pc:px-0 */
        padding-right: 0;
    }
    .idn-pbox__title {
        font-size: 16px;           /* pc:b1-semibold */
        line-height: 24px;
    }
    .idn-pbox__more {
        font-size: 14px;           /* pc:b2-medium */
        line-height: 20px;
        font-weight: 500;
    }
    .idn-pbox__grid {
        gap: 12px;                 /* pc:gap-3 */
        padding-left: 0;           /* pc:px-0 */
        padding-right: 0;
        padding-bottom: 16px;      /* pc:pb-4 */
    }
    .idn-pbox__item { column-gap: 8px; }   /* gap-x-2 (base trên PC) */
    .idn-pbox__icon {
        width: 24px;               /* pc:size-6 */
        height: 24px;
    }
    .idn-pbox__text {
        font-size: 15px;           /* pc:b2-regular */
        line-height: 20px;
    }
}