/* =========================================================
 * TNC – Tải File Thu Thập Liên Hệ — FRONTEND
 * ======================================================= */
.tfx-hop {
    max-width: 620px;
    margin: 15px 0;
    padding: 15px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;
}
.tfx-hop * { box-sizing: border-box; }

.tfx-dau {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 12px;
    margin-bottom: 10px;
}
.tfx-dau .tfx-ten { margin-bottom: 0; }
/* Hàng dưới: trái icon — phải mô tả + ô nhập + nút */
.tfx-than {
    display: flex;
    align-items: center;
    gap: 15px;
}
.tfx-cot-icon { flex: 0 0 auto; }
.tfx-cot-nhap { flex: 1; min-width: 0; }
.tfx-hop .tfx-icon {
    display: block;
    width: 88px;
    height: 88px;
    margin: 0;
    border-radius: 16px;
    object-fit: cover;
    box-shadow: 0 1px 4px rgba(15, 23, 42, .15);
}
.tfx-cot-nhap .tfx-thong-bao:empty { display: none; }
.tfx-gia {
    white-space: nowrap;
}
.tfx-gia-ban {
    font-size: 18px;
    font-weight: 700;
    color: #dc2626;
}
.tfx-gia-goc {
    margin-right: 6px;
    font-size: 14px;
    color: #94a3b8;
}
.tfx-ten {
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
}
.tfx-mo-ta {
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 1.5;
    color: #475569;
}
/* Khung tải: dung lượng (nhãn) + dòng thông tin có icon màu */
.tfx-ten .tfx-ten__dung-luong {
    display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
    background: #eef2ff; color: #4338ca; font-size: 12px; font-weight: 600; vertical-align: 2px; white-space: nowrap;
}
.tfx-ten .tfx-ten__dong-phu { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 6px; font-size: 13px; font-weight: 400; }
.tfx-ten .tfx-tin { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.tfx-ten .tfx-tin svg { width: 15px; height: 15px; flex: none; }
.tfx-ten .tfx-tin b { font-weight: 700; color: #1e293b; }
.tfx-ten .tfx-tin__nhan { color: #94a3b8; }
.tfx-ten .tfx-tin--lich svg { color: #0ea5e9; }
.tfx-ten .tfx-tin--tai svg { color: #16a34a; }
.tfx-ten .tfx-tin--tai b { color: #15803d; }
.tfx-ten .tfx-tin--sao svg { color: #f59e0b; }
.tfx-ten .tfx-tin--sao b { color: #b45309; }
.tfx-dung-luong {
    font-size: 13px;
    font-weight: 400;
    color: #64748b;
}

.tfx-hang {
    display: flex;
    gap: 8px;
}

.tfx-hop .tfx-o-nhap {
    flex: 1;
    min-width: 0;
    height: 42px;
    margin: 0;
    padding: 5px 13px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #fff;
    font-size: 15px;
    box-shadow: none;
    transition: border-color .2s, box-shadow .2s;
}
.tfx-hop .tfx-o-nhap:focus {
    border-color: #2271b1;
    outline: none;
    box-shadow: 0 0 0 2px rgba(34, 113, 177, .15);
}
.tfx-hop .tfx-o-nhap.tfx-dung { border-color: #16a34a; }
.tfx-hop .tfx-o-nhap.tfx-sai  { border-color: #dc2626; }

.tfx-hop .tfx-nut {
    flex: 0 0 auto;
    height: 42px;
    min-height: 0;
    margin: 0;
    padding: 5px 18px;
    border: 0;
    border-radius: 6px;
    background: #2271b1;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
    cursor: pointer;
    transition: opacity .2s, background .2s;
}
.tfx-hop .tfx-nut:hover:not(:disabled) { background: #135e96; }
.tfx-hop .tfx-nut:disabled {
    opacity: .4;
    cursor: not-allowed;
}
.tfx-hop .tfx-nut.tfx-dang-tai { opacity: .7; cursor: wait; }
.tfx-hop .tfx-nut-xem {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    height: 42px;
    margin: 0;
    padding: 0 16px;
    border: 1px solid #2271b1;
    border-radius: 6px;
    background: #fff;
    color: #2271b1;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none !important;
    box-sizing: border-box;
    transition: background .2s, color .2s;
}
.tfx-hop .tfx-nut-xem:hover { background: #2271b1; color: #fff; }

.tfx-thong-bao {
    min-height: 1em;
    margin-top: 8px;
    font-size: 13px;
}
.tfx-thong-bao.tfx-loi { color: #dc2626; }
.tfx-thong-bao.tfx-ok  { color: #16a34a; }
.tfx-thong-bao a { text-decoration: underline; }

@media (max-width: 480px) {
    .tfx-than { align-items: flex-start; gap: 12px; }
    .tfx-hop .tfx-icon { width: 64px; height: 64px; border-radius: 12px; }
    .tfx-hang { flex-direction: column; }
    .tfx-hop .tfx-nut, .tfx-hop .tfx-nut-xem { width: 100%; }
}

/* =========================================================
 * POPUP THANH TOÁN
 * ======================================================= */
html.tfx-khoa-cuon { overflow: hidden; }

.tfx-popup {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}
.tfx-popup * { box-sizing: border-box; }
.tfx-popup-nen {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .6);
}
.tfx-popup-hop {
    position: relative;
    width: 100%;
    max-width: 640px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 20px;
    border-radius: 10px;
    background: #fff;
    color: #1e293b;
    font-size: 14px;
    line-height: 1.5;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
}
.tfx-popup-dong {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #64748b;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}
.tfx-popup-dong:hover { background: #f1f5f9; color: #1e293b; }
.tfx-popup-tieu-de {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 36px 15px 0;
    font-size: 18px;
    font-weight: 700;
}
.tfx-popup-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    object-fit: cover;
}
.tfx-popup-than {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}
.tfx-qr {
    flex: 0 0 auto;
    text-align: center;
}
.tfx-qr img {
    display: block;
    width: 240px;
    max-width: 100%;
    height: auto;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}
.tfx-qr-ghi-chu {
    margin-top: 6px;
    font-size: 12px;
    color: #64748b;
}
.tfx-tt { flex: 1; min-width: 0; }
.tfx-tt-hang {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px dashed #e2e8f0;
}
.tfx-tt-nhan { color: #64748b; white-space: nowrap; }
.tfx-tt-gia-tri {
    display: flex;
    align-items: center;
    gap: 6px;
    text-align: right;
    overflow-wrap: anywhere;
}
.tfx-tt-hang--noi-bat strong { color: #dc2626; font-size: 16px; }
.tfx-popup .tfx-chep {
    flex: 0 0 auto;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 2px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    background: #f8fafc;
    color: #334155;
    font-size: 12px;
    line-height: 1.5;
    text-transform: none;
    cursor: pointer;
}
.tfx-popup .tfx-chep:hover { background: #e2e8f0; }

.tfx-popup-trang-thai {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 15px;
    padding: 10px;
    border-radius: 6px;
    background: #fffbeb;
    color: #92400e;
    font-weight: 600;
}
.tfx-popup-trang-thai.tfx-loi { background: #fef2f2; color: #dc2626; }
.tfx-xoay {
    width: 16px;
    height: 16px;
    border: 2px solid #fcd34d;
    border-top-color: #92400e;
    border-radius: 50%;
    animation: tfx-xoay .8s linear infinite;
}
@keyframes tfx-xoay { to { transform: rotate(360deg); } }
/* Đếm ngược + nút Tôi đã thanh toán */
.tfx-da-tt {
    margin-top: 10px;
    text-align: center;
}
.tfx-dem-nguoc {
    font-size: 13px;
    color: #64748b;
}
.tfx-dem-nguoc strong { color: #1e293b; }
.tfx-dem-nguoc.tfx-loi { margin-bottom: 6px; color: #dc2626; }
.tfx-popup .tfx-nut-da-tt {
    display: inline-block;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 10px 24px;
    border: 0;
    border-radius: 6px;
    background: #16a34a;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    text-transform: none;
    cursor: pointer;
    animation: tfx-hien .3s ease;
}
.tfx-popup .tfx-nut-da-tt:hover { background: #15803d; }
.tfx-popup .tfx-nut-da-tt:disabled { opacity: .6; cursor: wait; }
@keyframes tfx-hien { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Gửi ảnh biên lai */
.tfx-bien-lai {
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px dashed #cbd5e1;
    border-radius: 6px;
    background: #f8fafc;
    font-size: 13px;
}
.tfx-bien-lai-nhan {
    display: block;
    margin: 0;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
}
.tfx-bien-lai-phu { font-weight: 400; color: #64748b; }
.tfx-bien-lai-nhan input[type="file"] {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 13px;
    font-weight: 400;
}
.tfx-bien-lai-tt:empty { display: none; }
.tfx-bien-lai-tt {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    color: #64748b;
}
.tfx-bien-lai-tt img {
    width: 44px;
    height: 44px;
    border-radius: 4px;
    object-fit: cover;
    border: 1px solid #e2e8f0;
}
.tfx-bien-lai-tt.tfx-ok  { color: #16a34a; }
.tfx-bien-lai-tt.tfx-loi { color: #dc2626; }

.tfx-popup-ghi-chu {
    margin-top: 10px;
    font-size: 13px;
    color: #64748b;
    text-align: center;
}

.tfx-thanh-cong {
    width: 100%;
    padding: 10px 0;
    text-align: center;
}
.tfx-thanh-cong-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 10px;
    border-radius: 50%;
    background: #16a34a;
    color: #fff;
    font-size: 34px;
    line-height: 60px;
}
.tfx-thanh-cong-tieu-de {
    margin-bottom: 6px;
    font-size: 20px;
    font-weight: 700;
    color: #16a34a;
}
.tfx-popup a.tfx-nut--lon {
    display: inline-block;
    margin-top: 6px;
    padding: 12px 28px;
    border-radius: 6px;
    background: #2271b1;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
}
.tfx-popup a.tfx-nut--lon:hover { background: #135e96; color: #fff; }

@media (max-width: 560px) {
    .tfx-popup-than { flex-direction: column; align-items: stretch; }
    .tfx-qr img { width: 220px; margin: 0 auto; }
}

/* =========================================================
 * TRANG SẢN PHẨM (bên dưới khung tải)
 * ======================================================= */
.tfx-sp {
    margin: 20px 0;
    color: #334155;
    font-size: 15px;
    line-height: 1.6;
}
.tfx-sp * { box-sizing: border-box; }
.tfx-sp-khoi {
    margin: 0 0 16px;
    padding: 18px 20px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
}
.tfx-sp .tfx-sp-tieu-de,
.tfx-lien-quan .tfx-sp-tieu-de {
    margin: 0 0 14px;
    padding: 9px 16px;
    border: 0;
    border-radius: 8px;
    /* Nền chuyển màu — đổi màu ở Cài đặt → Trang sản phẩm → Màu tiêu đề mục */
    background: linear-gradient(90deg, var(--tfx-td-dau, #2271b1) 0%, var(--tfx-td-cuoi, #60a5fa) 100%);
    box-shadow: 0 2px 8px -3px var(--tfx-td-dau, #2271b1);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--tfx-td-chu, #fff);
}
.tfx-sp .tfx-sp-tieu-de .tfx-dg-dem { color: inherit; opacity: .8; }
.tfx-admin .tfx-mau-td { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; }
.tfx-admin .tfx-mau-td label { display: inline-flex; align-items: center; gap: 8px; }
.tfx-admin .tfx-mau-td .wp-picker-container { display: inline-block; }
.tfx-admin .tfx-xem-mau-td { max-width: 520px; margin: 12px 0 6px; padding: 9px 16px; border-radius: 8px; font-size: 16px; font-weight: 700; }
.tfx-sp .tfx-sp-tieu-de--sau { margin-top: 22px; }
.tfx-lien-quan .tfx-sp-tieu-de { margin-bottom: 14px; }

/* --- Ảnh chụp màn hình: 4 ảnh / hàng, kéo ngang --- */
.tfx-anh-khung { position: relative; }
.tfx-anh-hang {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding-bottom: 6px;
    cursor: grab;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
    outline: none;
}
.tfx-anh-hang::-webkit-scrollbar { height: 6px; }
.tfx-anh-hang::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
.tfx-anh-hang.tfx-dang-keo { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
.tfx-anh-hang.tfx-dang-keo .tfx-anh { pointer-events: none; }
.tfx-anh {
    flex: 0 0 calc((100% - 36px) / 4);
    scroll-snap-align: start;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f1f5f9;
}
.tfx-anh img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
    transition: transform .25s ease;
    -webkit-user-drag: none;
}
.tfx-anh:hover img { transform: scale(1.04); }
.tfx-anh:focus-visible { outline: 2px solid #2271b1; outline-offset: 2px; }
.tfx-anh-cuon {
    position: absolute;
    top: calc(50% - 3px);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0 0 3px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 2px 8px rgba(15, 23, 42, .25);
    color: #1e293b;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    transform: translateY(-50%);
    transition: opacity .2s;
}
.tfx-anh-cuon:hover { background: #fff; color: #2271b1; }
.tfx-anh-cuon--lui { left: -10px; }
.tfx-anh-cuon--toi { right: -10px; }
.tfx-anh-cuon[hidden] { display: none; }

/* --- 2 khung: trái thông số + chức năng, phải mô tả --- */
.tfx-sp-luoi {
    display: grid;
    grid-template-columns: minmax(0, 1fr); /* thông số 1 hàng, mô tả 1 hàng */
    gap: 16px;
    align-items: start;
    margin-bottom: 16px;
}
.tfx-sp-luoi--mot { grid-template-columns: minmax(0, 1fr); }
.tfx-sp-luoi .tfx-sp-khoi { margin: 0; height: 100%; }
.tfx-sp .tfx-thong-so {
    width: 100%;
    margin: 0;
    border: 0;
    border-collapse: collapse;
    font-size: 14px;
}
.tfx-sp .tfx-thong-so th,
.tfx-sp .tfx-thong-so td {
    padding: 8px 10px;
    border: 0;
    border-bottom: 1px solid #f1f5f9;
    text-align: left;
    vertical-align: top;
    background: none;
}
.tfx-sp .tfx-thong-so tr:nth-child(odd) th,
.tfx-sp .tfx-thong-so tr:nth-child(odd) td { background: #f8fafc; }
.tfx-sp .tfx-thong-so th { width: 30%; min-width: 120px; font-weight: 600; color: #475569; }
.tfx-sp .tfx-thong-so td { color: #1e293b; word-break: break-word; }
.tfx-sp .tfx-chuc-nang {
    margin: 0;
    padding: 0;
    list-style: none;
}
.tfx-sp .tfx-chuc-nang li {
    position: relative;
    margin: 0 0 6px;
    padding-left: 26px;
}
.tfx-sp .tfx-chuc-nang li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #dcfce7;
    color: #16a34a;
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}
.tfx-chi-tiet > :first-child { margin-top: 0; }
.tfx-chi-tiet > :last-child { margin-bottom: 0; }
.tfx-chi-tiet img { max-width: 100%; height: auto; border-radius: 6px; }
.tfx-chi-tiet iframe { max-width: 100%; }

/* --- Thông tin cập nhật --- */
.tfx-ver {
    margin: 0 0 8px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
}
.tfx-ver:last-child { margin-bottom: 0; }
.tfx-ver summary {
    position: relative;
    padding: 10px 36px 10px 14px;
    font-weight: 600;
    color: #1e293b;
    cursor: pointer;
    list-style: none;
}
.tfx-ver summary::-webkit-details-marker { display: none; }
.tfx-ver summary::after {
    content: '';
    position: absolute;
    right: 16px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 2px solid #64748b;
    border-bottom: 2px solid #64748b;
    transform: translateY(-70%) rotate(45deg);
    transition: transform .2s;
}
.tfx-ver[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.tfx-ver[open] summary { border-bottom: 1px solid #f1f5f9; }
.tfx-ver summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.tfx-ver-ngay { color: #64748b; font-size: 13px; font-weight: 400; }
.tfx-ver-moi {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 10px;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 600;
    vertical-align: middle;
}
.tfx-ver ul { margin: 0; padding: 10px 14px 12px 34px; }
.tfx-ver li { margin: 0 0 4px; }

/* --- Slide xem ảnh --- */
.tfx-lb {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, .92);
    opacity: 0;
    transition: opacity .2s;
    touch-action: pan-y;
}
.tfx-lb.tfx-mo { opacity: 1; }
.tfx-lb-anh {
    display: block;
    max-width: calc(100vw - 140px);
    max-height: calc(100vh - 110px);
    margin: 0;
    border-radius: 6px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}
.tfx-lb button {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    line-height: 1;
    cursor: pointer;
    transition: background .2s;
}
.tfx-lb button:hover { background: rgba(255, 255, 255, .25); }
.tfx-lb-dong { top: 16px; right: 16px; width: 42px; height: 42px; font-size: 26px; }
.tfx-lb-lui, .tfx-lb-toi { top: 50%; width: 50px; height: 50px; padding-bottom: 4px; font-size: 36px; transform: translateY(-50%); }
.tfx-lb-lui { left: 16px; }
.tfx-lb-toi { right: 16px; }
.tfx-lb-dem {
    position: absolute;
    bottom: 18px;
    left: 50%;
    padding: 4px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 13px;
    transform: translateX(-50%);
}
.tfx-lb--mot .tfx-lb-lui, .tfx-lb--mot .tfx-lb-toi, .tfx-lb--mot .tfx-lb-dem { display: none; }
html.tfx-khoa-cuon, html.tfx-khoa-cuon body { overflow: hidden; }

@media (max-width: 900px) {
    .tfx-anh { flex-basis: calc((100% - 24px) / 2.6); }
}
@media (max-width: 768px) {
    .tfx-sp-luoi { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
    .tfx-sp-khoi { padding: 14px; }
    .tfx-anh { flex-basis: 72%; }
    .tfx-anh-cuon { display: none; }
    .tfx-lb-anh { max-width: 100vw; max-height: calc(100vh - 120px); border-radius: 0; }
    .tfx-lb-lui, .tfx-lb-toi { top: auto; bottom: 10px; width: 44px; height: 44px; transform: none; }
}

/* =========================================================
 * TRANG RIÊNG CỦA PHẦN MỀM (giống trang sản phẩm WooCommerce)
 * ======================================================= */
/* Ẩn tiêu đề / ngày đăng / điều hướng bài mặc định của theme — trang tự có tiêu đề */
.tfx-trang-rieng .entry-title,
.tfx-trang-rieng .page-title,
.tfx-trang-rieng .wp-block-post-title,
.tfx-trang-rieng .entry-meta,
.tfx-trang-rieng .post-meta,
.tfx-trang-rieng .wp-block-post-date,
.tfx-trang-rieng .wp-block-post-author,
.tfx-trang-rieng .wp-block-post-author-name,
.tfx-trang-rieng .wp-block-post-terms,
.tfx-trang-rieng .wp-block-post-navigation-link,
.tfx-trang-rieng .post-navigation,
.tfx-trang-rieng .navigation.post-navigation,
.tfx-trang-rieng .entry-footer { display: none !important; }
.tfx-trang-rieng .page-header-excerpt,
.tfx-trang-rieng .page-title-inner .entry-meta,
.tfx-trang-rieng .wp-block-post-featured-image,
.tfx-trang-rieng .post-thumbnail,
.tfx-trang-rieng .entry-image { display: none !important; }

.tfx-trang-sp {
    width: 100%;
    max-width: 1250px;
    margin: 0 auto 30px;
    color: #334155;
}
.tfx-trang-sp * { box-sizing: border-box; }
.tfx-duong-dan {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 0 16px;
    font-size: 14px;
    color: #64748b;
}
.tfx-duong-dan a { color: #64748b; text-decoration: none; }
.tfx-duong-dan a:hover { color: #2271b1; text-decoration: underline; }
.tfx-duong-dan-hien { color: #1e293b; }

/* Khối đầu: trái ảnh — phải thông tin + mua/tải */
.tfx-hop.tfx-hop--trang {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 32px;
    max-width: none;
    margin: 0 0 20px;
    padding: 24px;
    border-radius: 12px;
}
.tfx-tr-anh {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    border-radius: 10px;
    background: radial-gradient(circle at 30% 20%, #eff6ff 0%, #e0e7ff 45%, #f1f5f9 100%);
}
.tfx-hop--trang .tfx-tr-anh .tfx-icon {
    width: 160px;
    height: 160px;
    border-radius: 34px;
    box-shadow: 0 18px 40px rgba(30, 64, 175, .25);
}
.tfx-tr-chu {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 160px;
    border-radius: 34px;
    background: #2271b1;
    color: #fff;
    font-size: 72px;
    font-weight: 700;
    box-shadow: 0 18px 40px rgba(30, 64, 175, .25);
}
.tfx-tr-giam {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 4px 10px;
    border-radius: 20px;
    background: #dc2626;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}
.tfx-tr-thong-tin { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.tfx-hop--trang .tfx-tr-ten {
    margin: 0 0 10px;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.25;
    color: #0f172a;
}
.tfx-tr-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    margin: 0 0 14px;
    font-size: 14px;
    color: #64748b;
}
.tfx-tr-meta > span:not(.tfx-tr-nhan) + span:not(.tfx-tr-nhan)::before,
.tfx-tr-nhan + span::before { content: none; }
.tfx-tr-meta strong { color: #1e293b; }
/* Dòng 2: phiên bản · dung lượng · cập nhật — nhỏ, nhạt, ngăn bằng dấu chấm giữa */
.tfx-tr-meta + .tfx-tr-meta--phu { margin-top: -8px; }
.tfx-tr-meta--phu { gap: 4px 0; font-size: 13px; color: #94a3b8; }
.tfx-tr-meta--phu strong { color: #475569; font-weight: 600; }
.tfx-tr-meta.tfx-tr-meta--phu > span:not(.tfx-tr-nhan) + span:not(.tfx-tr-nhan)::before { content: "·"; margin: 0 8px; color: #cbd5e1; }
.tfx-tr-nhan {
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}
.tfx-tr-nhan--thu     { background: #dcfce7; color: #166534; }
.tfx-tr-nhan--tra_phi { background: #fef3c7; color: #92400e; }
.tfx-hop--trang .tfx-gia { margin: 0 0 14px; }
.tfx-hop--trang .tfx-gia-ban { font-size: 30px; }
.tfx-hop--trang .tfx-gia-goc { margin: 0 0 0 10px; font-size: 18px; }
.tfx-hop--trang .tfx-mo-ta { margin-bottom: 16px; font-size: 15px; }
.tfx-hop--trang .tfx-hang { max-width: 520px; }
.tfx-hop--trang .tfx-o-nhap { height: 48px; font-size: 15px; }
.tfx-hop--trang .tfx-nut { height: 48px; padding: 0 26px; font-size: 16px; }
.tfx-hop--trang .tfx-thong-bao { max-width: 520px; }
.tfx-tr-cam-ket {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    color: #64748b;
}
.tfx-tr-cam-ket li { margin: 0; }
.tfx-tr-cam-ket li::before { content: '✓ '; color: #16a34a; font-weight: 700; }
.tfx-trang-sp .tfx-sp { margin-top: 0; }

/* Lưới thẻ phần mềm: "Phần mềm khác" + trang danh sách */
.tfx-lien-quan { margin-top: 10px; }
.tfx-luoi-sp {
    display: grid;
    grid-template-columns: repeat(var(--tfx-cot, 4), minmax(0, 1fr));
    gap: 16px;
}
.tfx-luoi-sp--cua-hang { margin: 10px 0 30px; }
.tfx-the-sp {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    color: inherit;
    text-decoration: none !important;
    transition: box-shadow .2s, transform .2s;
}
.tfx-the-sp:hover { box-shadow: 0 10px 25px rgba(15, 23, 42, .1); transform: translateY(-2px); }
.tfx-the-bia {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    background: #f1f5f9;
}
.tfx-the-bia > img:first-child:not(.tfx-the-icon) { display: block; width: 100%; height: 100%; margin: 0; object-fit: cover; }
.tfx-the-bia--trong { background: radial-gradient(circle at 30% 20%, #eff6ff 0%, #e0e7ff 50%, #f1f5f9 100%); }
.tfx-the-icon {
    position: absolute;
    left: 12px;
    bottom: -22px;
    width: 56px;
    height: 56px;
    margin: 0;
    border: 3px solid #fff;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .18);
    object-fit: cover;
}
.tfx-the-chu {
    position: absolute;
    left: 50%;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 18px;
    background: #2271b1;
    color: #fff;
    font-size: 34px;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(30, 64, 175, .25);
    transform: translate(-50%, -50%);
}
.tfx-the-bia--trong .tfx-the-icon { left: 50%; bottom: 50%; width: 72px; height: 72px; transform: translate(-50%, 50%); }
.tfx-the-than { display: flex; flex: 1; flex-direction: column; padding: 30px 14px 14px; }
.tfx-the-bia--trong + .tfx-the-than { padding-top: 14px; }
.tfx-the-ten { margin: 0 0 4px; font-size: 16px; font-weight: 700; line-height: 1.35; color: #0f172a; }
.tfx-the-mo-ta { flex: 1; margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: #64748b; }
.tfx-the-chan { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tfx-the-gia strong { color: #dc2626; font-size: 16px; }
.tfx-the-gia .tfx-the-mien-phi { color: #16a34a; }
.tfx-the-gia del { margin-left: 6px; color: #94a3b8; font-size: 13px; }
.tfx-the-xem { color: #2271b1; font-size: 13px; font-weight: 600; white-space: nowrap; }
.tfx-the-luot { display: block; margin: -4px 0 10px; font-size: 12px; color: #64748b; }
.tfx-tr-luot strong { color: #16a34a; }

/* Admin — khối Lượt tải trong Cài đặt */
.tfx-luot-nhanh { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 12px; }
.tfx-luot-nhanh .button-link.tfx-xoa { color: #b32d2e; margin-left: 6px; }
.tfx-bang-luot { max-width: 820px; }
.tfx-bang-luot .tfx-so-cot { text-align: right; white-space: nowrap; width: 150px; }
.tfx-bang-luot .tfx-o-ao { width: 110px; text-align: right; }
.tfx-wrapper--scroll-x { overflow-x: auto; }

@media (max-width: 900px) {
    .tfx-luoi-sp { grid-template-columns: repeat(min(var(--tfx-cot, 4), 2), minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    .tfx-hop.tfx-hop--trang { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 16px; }
    .tfx-tr-anh { min-height: 190px; }
    .tfx-hop--trang .tfx-tr-anh .tfx-icon, .tfx-tr-chu { width: 112px; height: 112px; border-radius: 26px; font-size: 52px; }
    .tfx-hop--trang .tfx-tr-ten { font-size: 24px; }
    .tfx-hop--trang .tfx-gia-ban { font-size: 26px; }
}
@media (max-width: 480px) {
    .tfx-luoi-sp { grid-template-columns: minmax(0, 1fr); }
    .tfx-hop--trang .tfx-hang { flex-direction: column; }
}

/* =========================================================
 * MENU MỤC LỤC (trang phần mềm)
 * Mặc định: thanh ngang bám trên cùng.
 * JS thêm .tfx-ml-doc khi khoảng trống bên trái khung nội dung đủ chỗ → menu dọc nổi ngoài khung.
 * ======================================================= */
.tfx-bo-cuc-chinh { min-width: 0; }
.tfx-muc-luc {
    position: sticky;
    top: var(--tfx-dinh, 0px);
    z-index: 20;
    display: none;               /* hiện khi JS đã dựng xong danh sách */
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    padding: 8px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .08);
    transition: top .2s;
}
.tfx-ml-san .tfx-muc-luc { display: flex; }
.tfx-ml-dau { display: none; }
.tfx-ml-dau img { flex: 0 0 auto; width: 40px; height: 40px; margin: 0; border-radius: 10px; object-fit: cover; }
.tfx-ml-dau span { display: flex; flex-direction: column; min-width: 0; }
.tfx-ml-dau strong { overflow: hidden; color: #0f172a; font-size: 14px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tfx-ml-dau em { color: #dc2626; font-size: 14px; font-style: normal; font-weight: 700; }
.tfx-ml-ds {
    display: flex;
    flex: 1;
    flex-direction: row;
    gap: 4px;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}
.tfx-ml-ds::-webkit-scrollbar { display: none; }
.tfx-ml-ds a {
    position: relative;
    display: block;
    flex: 0 0 auto;
    padding: 7px 12px;
    border-radius: 20px;
    color: #475569;
    font-size: 13px;
    line-height: 1.35;
    white-space: nowrap;
    text-decoration: none !important;
    transition: background .15s, color .15s;
}
.tfx-ml-ds a:hover { background: #f1f5f9; color: #0f172a; }
.tfx-ml-ds a.tfx-dang-xem { background: #eff6ff; color: #1d4ed8; font-weight: 600; }
.tfx-ml-tai {
    flex: 0 0 auto;
    width: auto;
    height: 34px;
    margin: 0;
    padding: 0 14px;
    border: 0;
    border-radius: 8px;
    background: #2271b1;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
}
.tfx-ml-tai:hover { background: #135e96; }
.tfx-khong-muc-luc .tfx-muc-luc { display: none !important; }

/* --- Menu dọc nổi bên ngoài khung nội dung (khoảng trống bên trái màn hình) ---
 * JS đặt left / top / width; khung nội dung sản phẩm giữ nguyên độ rộng. */
.tfx-ml-doc .tfx-muc-luc {
    position: fixed;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: calc(100vh - var(--tfx-dinh, 0px) - 48px);
    margin: 0;
    padding: 14px;
    border-radius: 12px;
    box-shadow: 0 6px 24px rgba(15, 23, 42, .08);
    transition: none;
}
.tfx-ml-doc .tfx-ml-dau {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    padding: 0 0 12px;
    border-bottom: 1px solid #f1f5f9;
}
.tfx-ml-doc .tfx-ml-ds { flex: 0 1 auto; flex-direction: column; gap: 2px; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; }
.tfx-ml-doc .tfx-ml-ds a { padding: 8px 10px 8px 14px; border-radius: 6px; font-size: 14px; white-space: normal; }
.tfx-ml-doc .tfx-ml-ds a::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 9px;
    bottom: 9px;
    width: 3px;
    border-radius: 2px;
    background: transparent;
    transition: background .15s;
}
.tfx-ml-doc .tfx-ml-ds a.tfx-dang-xem::before { background: #2271b1; }
.tfx-ml-doc .tfx-ml-tai { width: 100%; height: 42px; margin: 12px 0 0; font-size: 15px; }

/* =========================================================
 * ADMIN
 * ======================================================= */
.tfx-admin .tfx-phien-ban {
    font-size: 12px;
    font-weight: 400;
    color: #64748b;
}
.tfx-admin .tfx-the {
    max-width: 900px;
    margin: 15px 0;
    padding: 5px 20px 10px;
    border: 1px solid #c3c4c7;
    background: #fff;
}
.tfx-admin .tfx-bang { max-width: 100%; }
/* Màn hình rộng hơn 1250px: bảng + thanh tiêu đề danh sách chiếm 90% */
@media (min-width: 1251px) { .tfx-admin .tfx-bang { max-width: 90%; } }
.tfx-admin .tfx-bang td { vertical-align: middle; }
.tfx-admin tr.tfx-moi td { background: #f0f9ff; }
.tfx-admin code.tfx-sc {
    display: inline-block;
    margin-right: 6px;
    padding: 3px 8px;
    background: #f0f6fc;
    border: 1px solid #c5d9ed;
    border-radius: 3px;
}
.tfx-admin .tfx-xoa { color: #b32d2e; }
.tfx-admin .tfx-the--sua { border-left: 4px solid #2271b1; }
.tfx-admin .tfx-the--sua .submit .button { margin-right: 6px; }
.tfx-admin .tfx-mo-ta-rieng { margin: 3px 0; color: #50575e; font-size: 12px; }
.tfx-admin .tfx-thao-tac { white-space: normal; min-width: 120px; }
.tfx-admin .tfx-cot-gia { white-space: nowrap; }
.tfx-admin .tfx-nhan {
    display: inline-block;
    margin-right: 4px;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    vertical-align: 1px;
}
.tfx-admin .tfx-icon-ds {
    float: left;
    width: 40px;
    height: 40px;
    margin: 0 10px 4px 0;
    border-radius: 8px;
    object-fit: cover;
}
.tfx-admin .tfx-chon-icon { display: flex; align-items: center; gap: 10px; }
.tfx-admin .tfx-icon-xem {
    width: 64px;
    height: 64px;
    border: 1px solid #dcdcde;
    border-radius: 10px;
    object-fit: cover;
}
.tfx-admin .tfx-icon-xoa { color: #b32d2e; }
.tfx-admin .tfx-nhan--thu     { background: #dcfce7; color: #166534; }
.tfx-admin .tfx-nhan--tra_phi { background: #fef3c7; color: #92400e; }
.tfx-admin .tfx-dem {
    display: inline-block;
    min-width: 18px;
    margin-left: 4px;
    padding: 0 5px;
    border-radius: 9px;
    background: #d63638;
    color: #fff;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
}
.tfx-admin .tfx-tt {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
}
.tfx-admin .tfx-tt--cho   { background: #fef3c7; color: #92400e; }
.tfx-admin .tfx-tt--da_tt { background: #dcfce7; color: #166534; }
.tfx-admin .tfx-tt--huy   { background: #f1f5f9; color: #64748b; }
.tfx-admin tr.tfx-don--cho td { background: #fffbeb; }
.tfx-admin tr.tfx-don--bao td { background: #fef3c7; }
.tfx-admin .tfx-bao-ck { color: #b45309; font-weight: 600; }
.tfx-admin .tfx-bien-lai-link { font-size: 12px; }
.tfx-admin .tfx-thao-tac .button { margin: 2px 4px 2px 0; }
.tfx-admin .tfx-do { color: #d63638; }
.tfx-admin .tfx-cai-dat-qr { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.tfx-admin .tfx-cai-dat-qr .form-table { flex: 1; min-width: 320px; }
.tfx-admin .tfx-qr-xem-truoc { padding-top: 15px; text-align: center; }
.tfx-admin .tfx-qr-xem-truoc img { display: block; border: 1px solid #dcdcde; border-radius: 6px; }
.tfx-admin code.tfx-sc { word-break: break-all; }
.tfx-admin .tfx-cot-gia strong { color: #dc2626; }
.tfx-admin .tfx-cot-gia del,
.tfx-admin .tfx-mo { color: #8c8f94; }

.tfx-admin .tfx-shortcode-item { margin: 10px 0 15px; }
.tfx-admin .tfx-shortcode-mo-ta { margin-bottom: 6px; font-weight: 600; }
.tfx-admin .tfx-shortcode-row { display: flex; align-items: center; gap: 6px; }
.tfx-admin .tfx-shortcode-vidu { margin-top: 6px; color: #50575e; }
.tfx-admin .tfx-tham-so { margin-left: 18px; list-style: disc; }

.tfx-admin .tfx-loc { margin: 15px 0; }
.tfx-admin .tfx-loc form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* Trang sản phẩm — form admin */
.tfx-admin .tfx-hang-tach th { padding: 20px 0 0; }
.tfx-admin .tfx-hang-tach h3 { margin: 0; padding-top: 14px; border-top: 1px solid #dcdcde; font-size: 15px; }
.tfx-admin .tfx-hang-tach h3 .tfx-mo { font-weight: 400; font-size: 13px; }
.tfx-admin .tfx-anh-ds { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.tfx-admin .tfx-anh-ds:empty { display: none; }
.tfx-admin .tfx-anh-ds li { position: relative; width: 96px; height: 96px; margin: 0; border: 1px solid #dcdcde; border-radius: 6px; overflow: hidden; background: #f6f7f7; cursor: move; }
.tfx-admin .tfx-anh-ds li img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tfx-admin .tfx-anh-ds li.ui-sortable-placeholder { visibility: visible !important; border: 2px dashed #2271b1; background: #f0f6fc; }
.tfx-admin .tfx-anh-bo { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: rgba(0,0,0,.65); color: #fff; font-size: 15px; line-height: 20px; cursor: pointer; }
.tfx-admin .tfx-anh-bo:hover { background: #d63638; }
.tfx-admin .tfx-the .wp-editor-wrap { max-width: 900px; }

/* Thông tin cập nhật — form admin */
.tfx-admin .tfx-ver-moi-hop { max-width: 760px; padding: 12px 14px; border: 1px solid #c3c4c7; border-left: 4px solid #2271b1; border-radius: 4px; background: #f6f7f7; }
.tfx-admin .tfx-ver-dong { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 8px; }
.tfx-admin .tfx-ver-moi-hop textarea { background: #fff; }
.tfx-admin .tfx-ver-moi-hop .description { margin-bottom: 0; }
.tfx-admin .tfx-ver-ds { max-width: 760px; margin-top: 16px; }
.tfx-admin .tfx-ver-muc { margin: 0 0 10px; padding: 10px 12px; border: 1px solid #dcdcde; border-radius: 4px; background: #fff; }
.tfx-admin .tfx-ver-dau { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 6px; }
.tfx-admin .tfx-ver-dau > span:first-child { font-weight: 600; margin-right: -8px; }
.tfx-admin .tfx-ver-so-o { width: 110px; font-weight: 600; }
.tfx-admin .tfx-ver-xoa { margin-left: auto !important; color: #b32d2e; text-decoration: none; }
.tfx-admin .tfx-ver-hoan-tac { margin-left: auto !important; text-decoration: none; }
.tfx-admin .tfx-ver-xoa[hidden], .tfx-admin .tfx-ver-hoan-tac[hidden] { display: none; }
.tfx-admin .tfx-ver-muc--xoa { opacity: .55; background: #fcf0f1; border-color: #f0b8bd; }
.tfx-admin .tfx-ver-muc--xoa .tfx-ver-so-o, .tfx-admin .tfx-ver-muc--xoa textarea { text-decoration: line-through; }

/* Thông báo nổi sau khi lưu */
.tfx-toast { position: fixed; right: 24px; bottom: 24px; z-index: 100000; max-width: 420px; padding: 12px 18px; border-radius: 6px; background: #1d2327; color: #fff; font-size: 14px; box-shadow: 0 6px 20px rgba(0,0,0,.25); opacity: 0; transform: translateY(10px); transition: opacity .25s, transform .25s; pointer-events: none; }
.tfx-toast--hien { opacity: 1; transform: none; }
.tfx-toast--ok { border-left: 4px solid #00a32a; }
.tfx-toast--loi { border-left: 4px solid #d63638; }

/* Thông số full hàng: chức năng chia 2 cột trên màn rộng */
@media (min-width: 769px) {
    .tfx-sp .tfx-chuc-nang { columns: 2; column-gap: 32px; }
    .tfx-sp .tfx-chuc-nang li { break-inside: avoid; }
}

.tfx-admin .tfx-loi-file { margin: 6px 0 0; padding: 8px 10px; border-left: 4px solid #d63638; background: #fcf0f1; color: #8a2424; font-weight: 600; max-width: 700px; }
.tfx-admin .tfx-loi-file[hidden] { display: none; }

/* =========================================================
 * ĐÁNH GIÁ SAO + HỎI ĐÁP (danh-gia.php)
 * ======================================================= */
.tfx-dg-vung, .tfx-dg-modal { --tfx-dg-vang: #f5a623; --tfx-dg-vang-dam: #d4881a; --tfx-dg-xanh: #2271b1; --tfx-dg-vien: #e2e8f0; --tfx-dg-mo: #64748b; }
.tfx-dg-vung[hidden], .tfx-dg-vung [hidden], .tfx-dg-modal[hidden], .tfx-dg-modal [hidden] { display: none !important; }
.tfx-sp-tieu-de .tfx-dg-dem { font-weight: 400; font-size: 14px; color: #64748b; }

/* Dải 5 sao tô theo tỉ lệ */
.tfx-dg-sao { position: relative; display: inline-block; font-size: 14px; line-height: 1; letter-spacing: 1px; color: #dde3ea; white-space: nowrap; vertical-align: middle; }
.tfx-dg-sao::before { content: "★★★★★"; }
.tfx-dg-sao::after { content: "★★★★★"; position: absolute; left: 0; top: 0; width: var(--tfx-dg-pt, 0%); overflow: hidden; color: #f5a623; }
.tfx-dg-sao--lon { font-size: 20px; }
.tfx-tr-sao { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; }
.tfx-tr-sao:hover { text-decoration: underline; }
.tfx-the-sao { color: #d4881a; font-weight: 700; }

/* Lưới 3 ô thống kê */
.tfx-dg-luoi { display: grid; grid-template-columns: 170px minmax(0, 1fr) 190px; border: 1px solid var(--tfx-dg-vien); border-radius: 8px; overflow: hidden; margin: 0 0 16px; }
.tfx-dg-o { padding: 16px 18px; }
.tfx-dg-o + .tfx-dg-o { border-left: 1px solid var(--tfx-dg-vien); }
.tfx-dg-o--tb { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; background: linear-gradient(160deg, #fffdf7, #fff6e3); }
.tfx-dg-tb-so { font-size: 40px; font-weight: 800; line-height: 1; color: var(--tfx-dg-vang-dam); }
.tfx-dg-tb-so small { font-size: 15px; font-weight: 600; color: var(--tfx-dg-mo); }
.tfx-dg-tb-chu { font-size: 13px; color: var(--tfx-dg-mo); }
.tfx-dg-o--thanh { display: flex; flex-direction: column; justify-content: center; gap: 5px; }
.tfx-dg-hang-sao { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0; padding: 2px 6px; border: 0; border-radius: 6px; background: none; font: inherit; font-size: 13px; color: #334155; text-align: left; cursor: pointer; text-transform: none; letter-spacing: 0; min-height: 0; line-height: 1.5; box-shadow: none; }
.tfx-dg-hang-sao:hover:not(:disabled), .tfx-dg-hang-sao.tfx-dg-dang-chon { background: #fff6e3; }
.tfx-dg-hang-sao:disabled { cursor: default; opacity: .75; }
.tfx-dg-hs-nhan { flex: 0 0 34px; font-weight: 700; white-space: nowrap; }
.tfx-dg-hs-ray { flex: 1; height: 8px; border-radius: 20px; background: #edf0f4; overflow: hidden; }
.tfx-dg-hs-tien { display: block; height: 100%; border-radius: 20px; background: linear-gradient(90deg, var(--tfx-dg-vang), var(--tfx-dg-vang-dam)); }
.tfx-dg-hs-dem { flex: 0 0 34px; text-align: right; color: var(--tfx-dg-mo); }
.tfx-dg-o--nut { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; }
.tfx-dg-o--nut p { margin: 0; font-size: 13px; color: var(--tfx-dg-mo); line-height: 1.45; }
.tfx-dg-mo-form { margin: 0; padding: 10px 18px; border: 2px solid var(--tfx-dg-xanh); border-radius: 8px; background: #fff; color: var(--tfx-dg-xanh); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; text-transform: none; letter-spacing: 0; line-height: 1.3; min-height: 0; transition: background .15s, color .15s; }
.tfx-dg-mo-form:hover { background: var(--tfx-dg-xanh); color: #fff; }

.tfx-dg-dang-loc { margin: 0 0 12px; font-size: 13px; color: var(--tfx-dg-mo); }
.tfx-dg-bo-loc { margin: 0; padding: 0; border: 0; background: none; color: var(--tfx-dg-xanh); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; min-height: 0; text-transform: none; letter-spacing: 0; }

/* Danh sách đánh giá / hỏi đáp */
.tfx-dg-ds, .tfx-dg-con { list-style: none; margin: 0; padding: 0; }
.tfx-dg-ds > .tfx-dg-muc { padding: 14px 0; border-top: 1px solid #eef1f5; }
.tfx-dg-ds > .tfx-dg-muc:first-child { border-top: 0; padding-top: 4px; }
.tfx-dg-muc { list-style: none; margin: 0; }
.tfx-dg-muc.tfx-dg-an, .tfx-dg-muc.tfx-dg-loc-an { display: none; }
.tfx-dg-hop { display: flex; gap: 12px; align-items: flex-start; }
.tfx-dg-avatar { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--tfx-dg-vang), var(--tfx-dg-vang-dam)); color: #fff; font-size: 13px; font-weight: 800; }
.tfx-dg-muc--admin > .tfx-dg-hop .tfx-dg-avatar { background: var(--tfx-dg-xanh); font-size: 16px; }
.tfx-dg-than { flex: 1; min-width: 0; }
.tfx-dg-dau { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 4px; }
.tfx-dg-ten { font-size: 14px; color: #1e293b; }
.tfx-dg-nhan { padding: 1px 7px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.tfx-dg-nhan--admin { background: #e8f1fb; color: var(--tfx-dg-xanh); }
.tfx-dg-nhan--anh { background: #e8f1fb; color: #1a73e8; }
.tfx-dg-nhan--chi { background: #fce4ec; color: #d81b60; }
.tfx-dg-ngay { font-size: 12px; color: #94a3b8; }
.tfx-dg-noi-dung { font-size: 14px; line-height: 1.6; color: #475569; overflow-wrap: anywhere; }
.tfx-dg-chan { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.tfx-dg-thich, .tfx-hd-tra-loi { margin: 0; padding: 2px 10px; border: 1px solid var(--tfx-dg-vien); border-radius: 20px; background: #fff; color: var(--tfx-dg-mo); font: inherit; font-size: 12px; line-height: 1.6; cursor: pointer; text-transform: none; letter-spacing: 0; min-height: 0; box-shadow: none; transition: all .15s; }
.tfx-dg-thich:hover, .tfx-dg-thich.tfx-dg-da-thich { border-color: var(--tfx-dg-vang); background: #fff8ec; color: var(--tfx-dg-vang-dam); }
.tfx-dg-thich.tfx-dg-da-thich { font-weight: 700; }
.tfx-hd-tra-loi { border-color: transparent; color: var(--tfx-dg-xanh); font-weight: 600; }
.tfx-hd-tra-loi:hover { text-decoration: underline; }
.tfx-dg-con { margin: 10px 0 0 50px; display: flex; flex-direction: column; gap: 10px; }
.tfx-dg-muc--con > .tfx-dg-hop { padding: 10px 12px; border-radius: 8px; background: #f8fafc; }
.tfx-dg-muc--con.tfx-dg-muc--admin > .tfx-dg-hop { background: #f0f6fc; border-left: 3px solid var(--tfx-dg-xanh); }
.tfx-dg-muc--con .tfx-dg-avatar { flex-basis: 30px; width: 30px; height: 30px; font-size: 11px; }
.tfx-dg-trong { margin: 6px 0 0; padding: 22px; border: 2px dashed var(--tfx-dg-vien); border-radius: 8px; text-align: center; color: var(--tfx-dg-mo); font-size: 14px; }
.tfx-dg-xem-them { display: block; margin: 12px auto 0; padding: 8px 22px; border: 1px solid var(--tfx-dg-vien); border-radius: 20px; background: #fff; color: #334155; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-transform: none; letter-spacing: 0; min-height: 0; }
.tfx-dg-xem-them:hover { border-color: var(--tfx-dg-xanh); color: var(--tfx-dg-xanh); }

/* Form gửi (popup đánh giá + hỏi đáp + trả lời) */
.tfx-dg-form { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.tfx-dg-form textarea, .tfx-dg-form input[type=text], .tfx-hd-tim { width: 100%; max-width: 100%; margin: 0; padding: 9px 12px; border: 1.5px solid var(--tfx-dg-vien); border-radius: 8px; background: #fff; font: inherit; font-size: 14px; color: #1e293b; box-shadow: none; box-sizing: border-box; height: auto; }
.tfx-dg-form textarea { min-height: 84px; resize: vertical; }
.tfx-dg-form textarea:focus, .tfx-dg-form input[type=text]:focus, .tfx-hd-tim:focus { border-color: var(--tfx-dg-vang); outline: none; box-shadow: 0 0 0 3px rgba(245, 166, 35, .15); }
.tfx-dg-form .tfx-dg-sai { border-color: #dc2626 !important; }
.tfx-dg-hang-o { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tfx-dg-hang-o input[type=text] { flex: 1 1 180px; width: auto; }
.tfx-dg-bay { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0; }
.tfx-dg-hang-gui { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.tfx-dg-gui { margin: 0; padding: 9px 24px; border: 0; border-radius: 8px; background: var(--tfx-dg-vang); color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; text-transform: none; letter-spacing: 0; line-height: 1.4; min-height: 0; transition: background .15s; }
.tfx-dg-gui:hover { background: var(--tfx-dg-vang-dam); }
.tfx-dg-gui:disabled { opacity: .6; cursor: wait; }
.tfx-dg-bao { font-size: 13px; }
.tfx-dg-bao.tfx-dg-ok { color: #16a34a; }
.tfx-dg-bao.tfx-dg-loi { color: #dc2626; }
.tfx-hd-xung-ho { display: inline-flex; gap: 12px; font-size: 14px; }
.tfx-hd-xung-ho label { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-weight: 400; cursor: pointer; }
.tfx-hd-xung-ho input { margin: 0; }
.tfx-hd-form { padding: 14px 16px; border: 1px solid var(--tfx-dg-vien); border-radius: 8px; background: #f8fafc; margin-bottom: 14px; }
.tfx-hd-tim { max-width: 320px; margin: 0 0 6px; border-radius: 20px; }
.tfx-hd-form-tl { margin: 10px 0 0 50px; padding: 12px 14px; }
.tfx-hd-tra-loi-cho { font-size: 13px; color: var(--tfx-dg-mo); }
.tfx-hd-huy { margin: 0; padding: 0; border: 0; background: none; color: var(--tfx-dg-mo); font: inherit; font-size: 13px; cursor: pointer; text-decoration: underline; min-height: 0; text-transform: none; letter-spacing: 0; }

/* Chọn sao (5 → 1, đảo chiều để hover tô các sao bên trái) */
.tfx-dg-chon-sao { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 2px; }
.tfx-dg-chon-sao input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.tfx-dg-chon-sao label { margin: 0; padding: 0 2px; font-size: 32px; line-height: 1; color: #dde3ea; cursor: pointer; transition: color .12s, transform .12s; }
.tfx-dg-chon-sao input:checked ~ label,
.tfx-dg-chon-sao label:hover,
.tfx-dg-chon-sao label:hover ~ label { color: var(--tfx-dg-vang); }
.tfx-dg-chon-sao label:hover { transform: scale(1.15); }
.tfx-dg-chon-sao input:focus-visible + label { outline: 2px solid var(--tfx-dg-xanh); outline-offset: 2px; border-radius: 4px; }
.tfx-dg-chu-sao { order: -1; margin-left: 10px; font-size: 13px; font-weight: 600; color: var(--tfx-dg-vang-dam); }
.tfx-dg-chon-sao.tfx-dg-sai label { color: #fca5a5; }

/* Popup */
.tfx-dg-modal { position: fixed; inset: 0; z-index: 999999; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(15, 23, 42, .55); }
.tfx-dg-modal-hop { position: relative; width: 100%; max-width: 560px; max-height: calc(100vh - 32px); overflow-y: auto; padding: 26px 28px; border-radius: 12px; background: #fff; box-shadow: 0 24px 60px rgba(0, 0, 0, .25); animation: tfxDgVao .2s ease; box-sizing: border-box; }
@keyframes tfxDgVao { from { opacity: 0; transform: translateY(-12px) scale(.98); } to { opacity: 1; transform: none; } }
.tfx-dg-modal-tieu-de { margin: 0 30px 14px 0; padding-left: 10px; border-left: 3px solid var(--tfx-dg-vang); font-size: 17px; font-weight: 700; line-height: 1.35; color: #1e293b; }
.tfx-dg-dong { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; margin: 0; padding: 0; border: 0; border-radius: 6px; background: none; color: #94a3b8; font-size: 18px; line-height: 32px; cursor: pointer; min-height: 0; }
.tfx-dg-dong:hover { background: #f1f5f9; color: #334155; }
body.tfx-dg-khoa { overflow: hidden; }

@media (max-width: 768px) {
    .tfx-dg-luoi { grid-template-columns: minmax(0, 1fr); }
    .tfx-dg-o + .tfx-dg-o { border-left: 0; border-top: 1px solid var(--tfx-dg-vien); }
    .tfx-dg-o--tb { flex-direction: row; flex-wrap: wrap; gap: 6px 12px; }
    .tfx-dg-o--nut { flex-direction: row; justify-content: space-between; text-align: left; }
    .tfx-dg-con, .tfx-hd-form-tl { margin-left: 24px; }
    .tfx-dg-modal-hop { padding: 22px 18px; }
}
@media (max-width: 480px) {
    .tfx-dg-o--nut { flex-direction: column; text-align: center; }
    .tfx-dg-con, .tfx-hd-form-tl { margin-left: 0; }
}

/* Admin — tab Đánh giá */
.tfx-dg-cai-dat > summary { cursor: pointer; list-style: none; }
.tfx-dg-cai-dat > summary::-webkit-details-marker { display: none; }
.tfx-dg-cai-dat > summary h2 { display: inline-block; margin: 0; }
.tfx-dg-cai-dat > summary::after { content: " ▾"; color: #64748b; }
.tfx-dg-cai-dat[open] > summary { margin-bottom: 8px; }
.tfx-dg-tt { float: none; margin: 8px 0; }
.tfx-bang-dg .check-column { width: 28px; }
.tfx-bang-dg .tfx-dg-cot-nd { max-width: 520px; }
.tfx-bang-dg .tfx-dg-nd { margin: 6px 0 4px; white-space: normal; overflow-wrap: anywhere; }
.tfx-bang-dg .tfx-dg-cha { margin-top: 6px; padding: 4px 8px; border-left: 3px solid #dcdcde; background: #f6f7f7; font-size: 12px; color: #50575e; }
.tfx-bang-dg .tfx-dg-cho { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 3px; background: #fcf0d6; color: #8a5a00; font-size: 11px; font-weight: 600; }
.tfx-bang-dg tr.tfx-dg-tt--cho { box-shadow: inset 3px 0 0 #dba617; }
.tfx-bang-dg .tfx-dg-o-tl { margin-top: 8px; }
.tfx-bang-dg .tfx-dg-o-tl .button { margin-top: 6px; }
.tfx-bang-dg .tfx-dg-sao { margin-left: 4px; }

/* Hộp tab: Thông số kỹ thuật | Đánh giá | Hỏi đáp */
.tfx-tab-hop { scroll-margin-top: calc(var(--tfx-dinh, 0px) + 72px); }
.tfx-tab-o { scroll-margin-top: calc(var(--tfx-dinh, 0px) + 120px); }
.tfx-tab-o[hidden] { display: none !important; }
.tfx-tab-hang { display: flex; gap: 4px; margin: -4px 0 16px; border-bottom: 1px solid #e2e8f0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.tfx-tab-hang::-webkit-scrollbar { display: none; }
.tfx-sp .tfx-tab-nut { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; margin: 0 0 -1px; padding: 10px 16px; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: none; box-shadow: none; color: #64748b; font: inherit; font-size: 15px; font-weight: 600; line-height: 1.3; text-transform: none; letter-spacing: 0; min-height: 0; white-space: nowrap; cursor: pointer; transition: color .15s, border-color .15s; }
.tfx-sp .tfx-tab-nut:hover { color: #1e293b; background: none; }
.tfx-sp .tfx-tab-nut[aria-selected="true"] { color: #2271b1; border-bottom-color: #2271b1; }
.tfx-sp .tfx-tab-nut:focus-visible { outline: 2px solid #2271b1; outline-offset: -2px; border-radius: 6px 6px 0 0; }
.tfx-tab-so { min-width: 20px; padding: 0 6px; border-radius: 10px; background: #f1f5f9; color: #64748b; font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; }
.tfx-tab-nut[aria-selected="true"] .tfx-tab-so { background: #e8f1fb; color: #2271b1; }
.tfx-tab-o > .tfx-dg, .tfx-tab-o > .tfx-hd { margin: 0; }
@media (max-width: 560px) {
    .tfx-sp .tfx-tab-nut { padding: 10px 12px; font-size: 14px; }
}

/* Admin — tab Xuất / Nhập JSON */
.tfx-xn-xem { border-left: 4px solid #2271b1; }
.tfx-xn-nhan { display: inline-block; padding: 2px 8px; border-radius: 3px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.tfx-xn-nhan--moi { background: #e7f6ec; color: #116329; }
.tfx-xn-nhan--sua { background: #e8f1fb; color: #135e96; }
.tfx-xn-nhan--giu { background: #f0f0f1; color: #646970; }
.tfx-xn-nhan--loi { background: #fcf0f1; color: #b32d2e; }
tr.tfx-xn-giu td { color: #8c8f94; }
.tfx-xn-cb { color: #8a5a00; }
.tfx-xn-nut { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.tfx-xn-nut form { margin: 0; }
.tfx-xn-chon summary { cursor: pointer; color: #2271b1; margin: 6px 0; }
.tfx-xn-ds { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 16px; max-height: 280px; overflow-y: auto; margin: 8px 0 10px; padding: 8px 10px; border: 1px solid #dcdcde; background: #fff; }
.tfx-xn-tat-ca { display: inline-block; margin-top: 4px; }
.tfx-xn-nhap textarea { font-size: 12px; }
.tfx-xn-media-ghi { color: #135e96; }
#tfx-xn-ap-dung { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.tfx-xn-tai-media { display: block; padding: 8px 10px; background: #f0f6fc; border: 1px solid #c5d9ed; border-radius: 4px; }
.tfx-xn-tien-do { width: 100%; max-width: 520px; }
.tfx-xn-tien-do__nen { background: #eee; border-radius: 4px; height: 14px; overflow: hidden; }
.tfx-xn-tien-do__thanh { background: #2271b1; height: 100%; width: 0; transition: width .2s; }
.tfx-xn-tien-do__chu { font-size: 12px; color: #50575e; margin-top: 4px; word-break: break-all; }

/* Ô video đầu hàng "Ảnh chụp màn hình" — bấm để phóng to và phát */
.tfx-anh--video { position: relative; background: #0f172a; cursor: pointer; }
.tfx-anh--video img, .tfx-anh--video .tfx-anh-video-bia { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.tfx-anh-phat { position: absolute; left: 50%; top: 50%; width: 58px; height: 40px; margin: -20px 0 0 -29px; border-radius: 11px; background: rgba(220, 38, 38, .92); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); transition: transform .15s, background .15s; }
.tfx-anh-phat::after { content: ""; position: absolute; left: 23px; top: 11px; border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent #fff; }
.tfx-anh--video:hover .tfx-anh-phat { transform: scale(1.1); background: #dc2626; }
.tfx-anh-video-ten { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 10px 7px; background: linear-gradient(to top, rgba(0, 0, 0, .75), transparent); color: #fff; font-size: 12px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tfx-lb-video { width: min(calc(100vw - 140px), calc((100vh - 110px) * 16 / 9)); aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #000; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }
.tfx-lb-video[hidden], .tfx-lb-anh[hidden] { display: none !important; }
.tfx-lb-video iframe, .tfx-lb-video video { display: block; width: 100%; height: 100%; border: 0; background: #000; }
@media (max-width: 768px) {
    .tfx-lb-video { width: calc(100vw - 24px); }
}

/* Admin — nút Lưu cố định góc phải dưới */
.tfx-luu-noi.button { position: fixed; right: 24px; bottom: 24px; z-index: 9990; display: inline-flex; align-items: center; gap: 6px; height: auto; min-height: 0; padding: 10px 20px; border-radius: 999px; font-size: 14px; font-weight: 600; line-height: 1.4; box-shadow: 0 8px 24px rgba(34, 113, 177, .45); }
.tfx-luu-noi.button[hidden] { display: none; }
.tfx-luu-noi .dashicons { width: 18px; height: 18px; font-size: 18px; line-height: 18px; }
.tfx-luu-noi.tfx-dang-luu { opacity: .7; cursor: progress; }
.tfx-luu-noi.tfx-dang-luu .dashicons { animation: tfxXoay 1s linear infinite; }
@keyframes tfxXoay { to { transform: rotate(360deg); } }
@media (max-width: 782px) { .tfx-luu-noi.button { right: 14px; bottom: 14px; padding: 10px 16px; } }

/* =========================================================
 * ADMIN — FORM THÊM / SỬA PHẦN MỀM (bố cục 2 cột)
 * ======================================================= */
.tfx-admin { --bm-xanh: #2271b1; --bm-xanh-nhat: #f0f6fc; --bm-vien: #dcdcde; --bm-chu: #1d2327; --bm-mo: #646970; }
.tfx-admin .tfx-bm-ve { margin: 14px 0 6px; }
.tfx-admin .tfx-bm-ve a { text-decoration: none; font-weight: 600; }
.tfx-admin .tfx-bm-hop { max-width: 1320px; margin: 0 0 30px; }
.tfx-admin .tfx-bm-hop.tfx-the--sua { border-left: 0; }

/* Thanh đầu form */
.tfx-admin .tfx-bm-dau { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin: 0 0 12px; padding: 16px 20px; border: 1px solid var(--bm-vien); border-radius: 12px; background: linear-gradient(120deg, #fff 55%, #f0f6fc 100%); }
.tfx-admin .tfx-bm-dau-trai { display: flex; align-items: center; gap: 14px; min-width: 0; }
.tfx-admin .tfx-bm-dau-icon { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; border: 1px solid var(--bm-vien); }
.tfx-admin .tfx-bm-dau h2 { margin: 0 0 4px; padding: 0; font-size: 21px; line-height: 1.3; }
.tfx-admin .tfx-bm-dau p { margin: 0; color: var(--bm-mo); }
.tfx-admin .tfx-bm-dau-nut { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Thanh mục lục form */
.tfx-admin .tfx-bm-muc { position: sticky; top: 32px; z-index: 50; display: flex; gap: 6px; margin: 0 0 14px; padding: 8px; overflow-x: auto; border: 1px solid var(--bm-vien); border-radius: 12px; background: rgba(255, 255, 255, .96); backdrop-filter: blur(6px); scrollbar-width: none; }
.tfx-admin .tfx-bm-muc::-webkit-scrollbar { display: none; }
.tfx-admin .tfx-bm-muc a { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 6px 12px; border-radius: 999px; color: var(--bm-chu); font-weight: 500; text-decoration: none; white-space: nowrap; }
.tfx-admin .tfx-bm-muc a span { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: #f0f0f1; color: var(--bm-mo); font-size: 11px; font-weight: 700; }
.tfx-admin .tfx-bm-muc a:hover, .tfx-admin .tfx-bm-muc a.tfx-dang-xem { background: var(--bm-xanh-nhat); color: var(--bm-xanh); }
.tfx-admin .tfx-bm-muc a.tfx-dang-xem span { background: var(--bm-xanh); color: #fff; }
@media (max-width: 782px) { .tfx-admin .tfx-bm-muc { top: 46px; } }

/* Lưới 2 cột */
.tfx-admin .tfx-bm-luoi { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; align-items: start; }
.tfx-admin .tfx-bm-ben { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 16px; max-height: calc(100vh - 110px); overflow-y: auto; padding-bottom: 70px; scrollbar-width: thin; }
.tfx-admin .tfx-bm-chinh { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (max-width: 1100px) {
    .tfx-admin .tfx-bm-luoi { grid-template-columns: minmax(0, 1fr); }
    .tfx-admin .tfx-bm-ben { position: static; max-height: none; overflow: visible; padding-bottom: 0; order: -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}

/* Thẻ khối */
.tfx-admin .tfx-bm-the { scroll-margin-top: 100px; margin: 0; padding: 18px 20px 20px; border: 1px solid var(--bm-vien); border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .03); }
.tfx-admin .tfx-bm-tieu-de { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; padding: 0; font-size: 16px; line-height: 1.3; }
.tfx-admin .tfx-bm-tieu-de small { font-size: 12px; font-weight: 400; color: var(--bm-mo); }
.tfx-admin .tfx-bm-so { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 26px; height: 26px; border-radius: 8px; background: linear-gradient(135deg, var(--tfx-td-dau, #2271b1), var(--tfx-td-cuoi, #60a5fa)); color: #fff; font-size: 13px; font-weight: 700; }
.tfx-admin .tfx-bm-tieu-de--nho { margin-bottom: 12px; font-size: 14px; text-transform: none; }

/* Ô nhập */
.tfx-admin .tfx-bm-o { margin: 0 0 16px; }
.tfx-admin .tfx-bm-o:last-child { margin-bottom: 0; }
.tfx-admin .tfx-bm-o > label, .tfx-admin .tfx-bm-nhan-nho { display: block; margin: 0 0 6px; font-weight: 600; color: var(--bm-chu); }
.tfx-admin .tfx-bm-o > label em { font-style: normal; font-weight: 400; color: var(--bm-mo); }
.tfx-admin .tfx-bm input[type=text], .tfx-admin .tfx-bm input[type=url], .tfx-admin .tfx-bm input[type=number], .tfx-admin .tfx-bm textarea { width: 100%; max-width: 100%; padding: 7px 11px; border: 1px solid #c3c4c7; border-radius: 8px; box-shadow: none; }
.tfx-admin .tfx-bm input:focus, .tfx-admin .tfx-bm textarea:focus { border-color: var(--bm-xanh); box-shadow: 0 0 0 2px rgba(34, 113, 177, .18); outline: none; }
.tfx-admin .tfx-bm textarea { line-height: 1.55; }
.tfx-admin .tfx-bm .tfx-bm-ten { padding: 10px 14px; font-size: 18px; font-weight: 600; }
.tfx-admin .tfx-bm-hang { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tfx-admin .tfx-bm-goi-y { margin: 6px 0 0; color: var(--bm-mo); font-size: 12.5px; line-height: 1.5; }
.tfx-admin .tfx-bm-bat-buoc { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 9px; background: #fcf0f1; color: #b32d2e; font-size: 11px; font-weight: 600; line-height: 18px; vertical-align: 1px; }
.tfx-admin .tfx-bm-2cot { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tfx-admin .tfx-bm-2cot .tfx-bm-o { margin: 0; }
@media (max-width: 782px) { .tfx-admin .tfx-bm-2cot { grid-template-columns: 1fr; } }

/* File cài: chọn nguồn + ô kéo thả */
.tfx-admin .tfx-bm-file-hien { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; background: #f6f7f7; }
.tfx-admin .tfx-bm-file-hien > div { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.tfx-admin .tfx-bm-file-bieu { font-size: 24px; }
.tfx-admin .tfx-bm-the-nho { padding: 1px 8px; border-radius: 9px; background: #dcfce7; color: #166534; font-size: 11px; font-weight: 600; white-space: nowrap; }
.tfx-admin .tfx-bm-nguon { display: inline-flex; margin: 0 0 12px; padding: 3px; border-radius: 10px; background: #f0f0f1; }
.tfx-admin .tfx-bm-nguon label { position: relative; padding: 6px 14px; border-radius: 8px; font-weight: 500; cursor: pointer; }
.tfx-admin .tfx-bm-nguon input { position: absolute; opacity: 0; pointer-events: none; }
.tfx-admin .tfx-bm-nguon label:has(input:checked) { background: #fff; color: var(--bm-xanh); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.tfx-admin .tfx-bm-nguon label:has(input:focus-visible) { outline: 2px solid var(--bm-xanh); }
.tfx-admin .tfx-bm-nguon-o[hidden] { display: none; }
.tfx-admin .tfx-bm-tha { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 140px; padding: 20px; border: 2px dashed #c3c4c7; border-radius: 12px; background: #fafafa; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.tfx-admin .tfx-bm-tha:hover, .tfx-admin .tfx-bm-tha.tfx-dang-tha { border-color: var(--bm-xanh); background: var(--bm-xanh-nhat); }
.tfx-admin .tfx-bm-tha.tfx-co-file { border-style: solid; border-color: #00a32a; background: #f0fdf4; }
.tfx-admin .tfx-bm-tha input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.tfx-admin .tfx-bm-tha-bieu { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--bm-xanh); font-size: 22px; box-shadow: 0 2px 6px rgba(0, 0, 0, .08); }
.tfx-admin .tfx-bm-tha-chu { font-size: 14px; }
.tfx-admin .tfx-bm-tha-chu strong { color: var(--bm-xanh); }
.tfx-admin .tfx-bm-tha-phu { color: var(--bm-mo); font-size: 12px; }
.tfx-admin .tfx-bm-tha-ten { margin-top: 6px; padding: 4px 12px; border-radius: 8px; background: #fff; color: #166534; font-weight: 600; }
.tfx-admin .tfx-bm-tha .tfx-loi-file { position: relative; z-index: 1; margin-top: 8px; text-align: left; }

/* Video & ảnh */
.tfx-admin .tfx-bm .tfx-video-them { margin: 8px 8px 0 0; }
.tfx-admin .tfx-bm .tfx-bo-anh { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.tfx-admin .tfx-bm .tfx-anh-ds { margin: 0; padding: 0; list-style: none; gap: 10px; }
.tfx-admin .tfx-bm .tfx-anh-ds:empty { display: none; }
.tfx-admin .tfx-bm .tfx-anh-ds li { width: 116px; height: 80px; border-radius: 8px; }
.tfx-admin .tfx-bm-them-anh { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 116px; height: 80px; padding: 0; border: 2px dashed #c3c4c7; border-radius: 8px; background: #fafafa; color: var(--bm-mo); font-size: 12px; cursor: pointer; }
.tfx-admin .tfx-bm-them-anh span { font-size: 22px; line-height: 1; }
.tfx-admin .tfx-bm-them-anh:hover { border-color: var(--bm-xanh); color: var(--bm-xanh); background: var(--bm-xanh-nhat); }

/* Mô tả + Cập nhật */
.tfx-admin .tfx-bm .wp-editor-wrap { max-width: none; }
.tfx-admin .tfx-bm .tfx-ver-moi-hop { max-width: none; border: 0; border-left: 4px solid var(--bm-xanh); border-radius: 10px; background: var(--bm-xanh-nhat); }
.tfx-admin .tfx-bm .tfx-ver-ds { max-width: none; margin-top: 14px; }
.tfx-admin .tfx-bm .tfx-ver-ds > summary { cursor: pointer; margin-bottom: 10px; }
.tfx-admin .tfx-bm .tfx-ver-muc { border-radius: 10px; }
.tfx-admin .tfx-bm .tfx-ver-so-o { width: 110px; }

/* Cột phải: loại & giá */
.tfx-admin .tfx-bm-loai { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 14px; }
.tfx-admin .tfx-bm-loai-the { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 12px; border: 2px solid var(--bm-vien); border-radius: 10px; cursor: pointer; transition: border-color .15s, background .15s; }
.tfx-admin .tfx-bm-loai-the input { position: absolute; opacity: 0; pointer-events: none; }
.tfx-admin .tfx-bm-loai-the small { color: var(--bm-mo); font-size: 11.5px; line-height: 1.35; }
.tfx-admin .tfx-bm-loai-bieu { font-size: 20px; }
.tfx-admin .tfx-bm-loai-the:hover { border-color: #8c8f94; }
.tfx-admin .tfx-bm-loai-the:has(input:checked) { border-color: var(--bm-xanh); background: var(--bm-xanh-nhat); }
.tfx-admin .tfx-bm-loai-the:has(input:checked)::after { content: "✓"; position: absolute; top: 6px; right: 8px; width: 18px; height: 18px; border-radius: 50%; background: var(--bm-xanh); color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
.tfx-admin .tfx-bm-loai-the:has(input:focus-visible) { outline: 2px solid var(--bm-xanh); outline-offset: 2px; }
.tfx-admin .tfx-bm-gia { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tfx-admin .tfx-bm-gia .tfx-bm-o { margin: 0; }
.tfx-admin .tfx-bm-tien { position: relative; }
.tfx-admin .tfx-bm-tien input[type=text] { padding-right: 26px; }
.tfx-admin .tfx-bm-tien span { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--bm-mo); }
.tfx-admin .tfx-bm-gia-xem { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; padding: 8px 12px; border-radius: 8px; background: #f6f7f7; }
.tfx-admin .tfx-bm-gia-xem[hidden] { display: none; }
.tfx-admin .tfx-bm-gia-xem strong { color: #dc2626; font-size: 18px; }
.tfx-admin .tfx-bm-gia-xem del { color: var(--bm-mo); }
.tfx-admin .tfx-bm-gia-xem span { margin-left: auto; padding: 0 7px; border-radius: 9px; background: #dc2626; color: #fff; font-size: 12px; font-weight: 700; line-height: 20px; }

/* Cột phải: icon */
.tfx-admin .tfx-bm-icon { display: flex; align-items: center; gap: 14px; }
.tfx-admin .tfx-bm-icon-o { position: relative; flex: 0 0 88px; width: 88px; height: 88px; padding: 0; overflow: hidden; border: 2px dashed #c3c4c7; border-radius: 18px; background: #fafafa; cursor: pointer; }
.tfx-admin .tfx-bm-icon-o:hover { border-color: var(--bm-xanh); background: var(--bm-xanh-nhat); }
.tfx-admin .tfx-bm-icon-o .tfx-icon-xem { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; object-fit: cover; background: #fff; }
.tfx-admin .tfx-bm-icon-trong { display: flex; flex-direction: column; align-items: center; color: var(--bm-mo); font-size: 24px; line-height: 1.1; }
.tfx-admin .tfx-bm-icon-trong small { font-size: 11px; }
.tfx-admin .tfx-bm-icon .tfx-bm-goi-y { margin: 0 0 4px; }

/* Cột phải: đường dẫn, lượt tải */
.tfx-admin .tfx-bm-slug { display: flex; align-items: stretch; border: 1px solid #c3c4c7; border-radius: 8px; overflow: hidden; }
.tfx-admin .tfx-bm-slug span { display: flex; align-items: center; padding: 0 8px; background: #f6f7f7; color: var(--bm-mo); font-size: 12px; white-space: nowrap; border-right: 1px solid #c3c4c7; }
.tfx-admin .tfx-bm .tfx-bm-slug input { border: 0; border-radius: 0; min-width: 0; }
.tfx-admin .tfx-bm-luot { display: flex; align-items: flex-end; gap: 8px; }
.tfx-admin .tfx-bm-luot > div { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tfx-admin .tfx-bm-luot small { color: var(--bm-mo); font-size: 11px; }
.tfx-admin .tfx-bm-luot strong { font-size: 17px; line-height: 34px; }
.tfx-admin .tfx-bm-luot > span { padding-bottom: 8px; color: var(--bm-mo); font-weight: 700; }
.tfx-admin .tfx-bm-luot #tfx_luot_tong { color: #00a32a; }
.tfx-admin .tfx-bm code.tfx-sc { margin: 0; word-break: break-all; }

/* Danh sách phần mềm */
.tfx-admin .tfx-ds-dau { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; max-width: 100%; margin: 18px 0 12px; }
.tfx-admin .tfx-ds-dau h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 2px; font-size: 20px; }
.tfx-admin .tfx-ds-dau p { margin: 0; }
.tfx-admin .tfx-ds-dem { padding: 0 9px; border-radius: 10px; background: #f0f0f1; color: var(--bm-mo); font-size: 13px; line-height: 22px; }
.tfx-admin .tfx-ds-dau-nut { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.tfx-admin .tfx-ds-tim { min-width: 240px; padding: 6px 12px; border-radius: 8px; }
.tfx-admin .button.tfx-ds-them { border-radius: 10px; }
.tfx-admin .tfx-ds-ten { text-decoration: none; color: var(--bm-chu); }
.tfx-admin .tfx-ds-ten:hover { color: var(--bm-xanh); }
.tfx-admin .tfx-bang tr[hidden] { display: none; }
@media (min-width: 1251px) { .tfx-admin .tfx-ds-dau { max-width: 90%; } }   /* thẳng hàng với bảng danh sách */
.tfx-admin .tfx-bang .tfx-cot-ngay, .tfx-admin .tfx-bang .tfx-cot-xem { white-space: nowrap; }
.tfx-admin .tfx-bang-sp td:first-child { min-width: 180px; }
.tfx-admin .tfx-bang-sp code.tfx-sc { white-space: nowrap; word-break: normal; }
.tfx-admin .tfx-bang-sp td:nth-child(3) { word-break: break-all; min-width: 90px; }
.tfx-admin .tfx-bang-sp td:nth-child(4) { white-space: nowrap; }

/* Admin — tab Xuất / Nhập: chia nhóm Sản phẩm / Đánh giá */
.tfx-admin .tfx-xn-nhay { margin: 14px 0 0; }
.tfx-admin .tfx-xn-nhom { display: flex; align-items: center; gap: 8px; max-width: 900px; margin: 22px 0 4px; padding: 10px 16px; border-radius: 10px; background: linear-gradient(90deg, var(--tfx-td-dau, #2271b1), var(--tfx-td-cuoi, #60a5fa)); color: var(--tfx-td-chu, #fff); font-size: 17px; scroll-margin-top: 50px; }
.tfx-admin .tfx-xn-loc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.tfx-admin .tfx-xn-cuon { overflow-x: auto; }
.tfx-admin .tfx-xn-xem .tfx-dg-sao { white-space: nowrap; }

/* Đánh giá chép từ Facebook / Zalo… — nhãn nguồn + link bài gốc */
.tfx-dg-nguon { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px 1px 2px; border-radius: 10px; background: #f1f5f9; color: #475569; font-size: 11px; font-weight: 600; line-height: 18px; white-space: nowrap; }
.tfx-dg-nguon i { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; background: #64748b; color: #fff; font-size: 9px; font-style: normal; font-weight: 800; }
.tfx-dg-nguon--facebook { background: #e7f0ff; color: #1b4fbf; }
.tfx-dg-nguon--facebook i { background: #1877f2; }
.tfx-dg-nguon--zalo { background: #e6f4ff; color: #0058b0; }
.tfx-dg-nguon--zalo i { background: #0068ff; }
.tfx-dg-nguon--google i { background: #ea4335; }
.tfx-dg-link-goc { display: inline-block; margin-top: 4px; color: #64748b; font-size: 12px; text-decoration: none; }
.tfx-dg-link-goc:hover { color: #2271b1; text-decoration: underline; }
.tfx-admin .tfx-dg-them-tay { border-left: 4px solid #1877f2; }
.tfx-admin .tfx-dg-them-tay > summary { cursor: pointer; list-style: none; }
.tfx-admin .tfx-dg-them-tay > summary::-webkit-details-marker { display: none; }
.tfx-admin .tfx-dg-them-tay > summary h2 { display: inline-block; margin: 0; }
.tfx-admin .tfx-dg-them-tay > summary::after { content: " ▾"; color: #64748b; }
.tfx-admin .tfx-dg-tay-luoi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; margin: 12px 0 4px; }
.tfx-admin .tfx-dg-tay-luoi label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; }
.tfx-admin .tfx-dg-tay-luoi label em { font-weight: 400; font-style: normal; color: #8c8f94; }
.tfx-admin .tfx-dg-tay-luoi input, .tfx-admin .tfx-dg-tay-luoi select, .tfx-admin .tfx-dg-tay-luoi textarea { width: 100%; max-width: none; font-weight: 400; }
.tfx-admin .tfx-dg-tay-rong { grid-column: 1 / -1; }
@media (max-width: 960px) { .tfx-admin .tfx-dg-tay-luoi { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .tfx-admin .tfx-dg-tay-luoi { grid-template-columns: 1fr; } }
.tfx-dg-sdt { margin-left: -2px; color: #94a3b8; font-size: 12px; font-weight: 500; letter-spacing: .3px; white-space: nowrap; }

/* Tab "Hướng dẫn cài đặt" */
.tfx-huong-dan ol { margin: 0 0 1em; padding-left: 1.5em; }
.tfx-huong-dan ol > li { margin: 0 0 .6em; padding-left: .25em; line-height: 1.6; }
.tfx-huong-dan ol > li::marker { color: #2271b1; font-weight: 700; }
.tfx-huong-dan img { display: block; margin: 8px 0; border: 1px solid #e2e8f0; }