/* Form tính giá tem nhãn decal. Màu bám biến của Flatsome, có giá trị dự phòng.
 * Thuộc tính hình học của ô nhập/nút/chữ mang !important: theme (Flatsome + CSS tuỳ biến
 * của site) nạp sau và đè padding, viết hoa chữ… Đo ở lentrang1.com 13/10/2026. */
.tnd-tg {
    --tnd-chinh: var(--fs-color-primary, #0d6cbe);
    --tnd-nhan: var(--fs-color-secondary, #f9a020);
    --tnd-chu: #1e293b;
    --tnd-chu-phu: #55606e;
    --tnd-vien: #d3d9e0;
    --tnd-nen-o: #fafbfc;
    container-type: inline-size;
    margin: 1.25em 0;
    color: var(--tnd-chu);
    font-size: 15px;
    line-height: 1.45;
}
.tnd-tg *, .tnd-tg *::before, .tnd-tg *::after { box-sizing: border-box; }
.tnd-tg [hidden] { display: none !important; }

/* Điện thoại: form → báo giá → bảng giá (đúng thứ tự trong HTML).
 * Màn rộng: bảng giá theo số lượng bên TRÁI, form + báo giá bên PHẢI (theo mẫu khách). */
.tnd-tg__luoi { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.tnd-tg__cot-phai, .tnd-tg__cot-trai { display: grid; gap: 16px; min-width: 0; }
@container (min-width: 760px) {
    .tnd-tg__luoi { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
    .tnd-tg__cot-trai { grid-column: 1; grid-row: 1; }
    .tnd-tg__cot-phai { grid-column: 2; grid-row: 1; }
}
@container (max-width: 759px) {
    .tnd-tg__cho { display: none !important; }
}

.tnd-tg__the {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
    box-shadow: 0 4px 16px rgba(16, 24, 40, .05); overflow: hidden; margin: 0;
}
.tnd-tg .tnd-tg__dau {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 16px; border-bottom: 2px solid var(--tnd-chinh);
    font-size: 16px !important; font-weight: 700 !important; line-height: 1.3 !important;
    text-transform: uppercase !important; letter-spacing: .02em !important; color: var(--tnd-chinh);
}
.tnd-tg__than { padding: 16px; }

.tnd-tg__nhom { margin: 0 0 14px; padding: 0; border: 0; min-width: 0; }
.tnd-tg legend.tnd-tg__nhan { width: auto; border: 0 !important; float: none; }
.tnd-tg .tnd-tg__nhan {
    display: block; margin: 0 0 7px; padding: 0;
    font-size: 14px !important; font-weight: 600 !important; color: #334155;
    text-transform: none !important; letter-spacing: 0 !important; line-height: 1.3 !important;
}

/* Chọn hình dáng */
.tnd-tg__hinh-ds { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.tnd-tg .tnd-tg__hinh {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
    margin: 0 !important; padding: 10px 2px 8px !important; min-height: 64px;
    border: 1px solid var(--tnd-vien); border-radius: 8px; background: #fff;
    font-size: 12.5px !important; font-weight: 500 !important; color: var(--tnd-chu-phu);
    text-transform: none !important; letter-spacing: 0 !important; line-height: 1.2 !important;
    text-align: center; cursor: pointer; transition: border-color .15s, background .15s;
}
.tnd-tg__hinh input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.tnd-tg__hinh:hover { border-color: var(--tnd-chinh); }
.tnd-tg__hinh.is-chon { border-color: var(--tnd-chinh); background: color-mix(in srgb, var(--tnd-chinh) 7%, #fff); color: var(--tnd-chinh); }
.tnd-tg__hinh:has(input:focus-visible) { outline: 2px solid var(--tnd-chinh); outline-offset: 2px; }
.tnd-tg__hinh-ve { display: block; width: 22px; height: 22px; background: #cbd5e1; flex: 0 0 auto; }
.tnd-tg__hinh.is-chon .tnd-tg__hinh-ve { background: var(--tnd-chinh); }
.tnd-tg__hinh-ve--circle { border-radius: 50%; }
.tnd-tg__hinh-ve--square { border-radius: 3px; }
.tnd-tg__hinh-ve--rectangle { width: 30px; height: 20px; border-radius: 3px; margin-top: 1px; }
.tnd-tg__hinh-ve--ellipse { width: 30px; height: 20px; border-radius: 50%; margin-top: 1px; }
.tnd-tg__hinh-ve--custom { clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%); }

/* Ô nhập */
.tnd-tg__hang-doi { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tnd-tg__hang-doi:has(.tnd-tg__o--dai[hidden]) { grid-template-columns: 1fr; }
.tnd-tg__o { position: relative; margin: 0; }
.tnd-tg .tnd-tg__o input,
.tnd-tg .tnd-tg__o select {
    display: block !important; width: 100% !important; height: 46px !important; margin: 0 !important;
    padding: 0 44px 0 12px !important;
    border: 1px solid var(--tnd-vien) !important; border-radius: 8px !important;
    background-color: var(--tnd-nen-o) !important; color: var(--tnd-chu) !important;
    font-size: 15px !important; line-height: 1.2 !important; box-shadow: none !important;
    text-transform: none !important; letter-spacing: 0 !important;
    -moz-appearance: textfield;
}
.tnd-tg .tnd-tg__o select {
    -webkit-appearance: none !important; appearance: none !important; cursor: pointer;
    padding-right: 38px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355606e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important; background-position: right 12px center !important; background-size: 16px 16px !important;
}
.tnd-tg .tnd-tg__o input::-webkit-outer-spin-button,
.tnd-tg .tnd-tg__o input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tnd-tg .tnd-tg__o input::placeholder { color: #7a828c; opacity: 1; }
.tnd-tg .tnd-tg__o input:focus,
.tnd-tg .tnd-tg__o select:focus {
    outline: none !important; border-color: var(--tnd-chinh) !important; background-color: #fff !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tnd-chinh) 16%, transparent) !important;
}
.tnd-tg__don-vi {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    font-size: 13px; color: var(--tnd-chu-phu); pointer-events: none;
}
.tnd-tg__an {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Hai ô chọn */
.tnd-tg__hai-chon { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 4px 0 16px; }
.tnd-tg .tnd-tg__chon {
    display: flex !important; align-items: center; gap: 8px; margin: 0 !important; min-height: 44px;
    font-size: 15px !important; font-weight: 500 !important; color: #334155;
    text-transform: none !important; letter-spacing: 0 !important; cursor: pointer; user-select: none;
}
.tnd-tg .tnd-tg__chon input {
    width: 18px !important; height: 18px !important; margin: 0 !important; flex: 0 0 auto;
    accent-color: var(--tnd-chinh); cursor: pointer;
}
.tnd-tg__chon.is-tat { opacity: .45; cursor: not-allowed; }

/* Thông báo lỗi */
.tnd-tg__loi {
    margin: 0 0 14px; padding: 12px 14px; border-radius: 8px;
    background: #fdf1f1; border: 1px solid #f3c7c7; color: #8a1414; font-size: 14px;
}
.tnd-tg__loi-chu { margin: 0; }
.tnd-tg .tnd-tg__goi {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 8px 16px;
    border: 1px solid #e5a3a3; border-radius: 8px; background: #fff; color: #8a1414;
    font-weight: 600; text-decoration: none;
}

/* Nút */
.tnd-tg .tnd-tg__nut {
    display: inline-flex !important; align-items: center; justify-content: center; gap: 8px;
    width: 100%; min-height: 48px; margin: 0 !important; padding: 0 18px !important;
    border: 1px solid transparent !important; border-radius: 8px !important;
    font-size: 15px !important; font-weight: 700 !important; line-height: 1.2 !important;
    text-transform: none !important; letter-spacing: 0 !important; cursor: pointer;
    transition: filter .15s, opacity .15s, background .15s;
}
.tnd-tg .tnd-tg__nut:hover { filter: brightness(1.08); }
.tnd-tg .tnd-tg__nut--tinh, .tnd-tg .tnd-tg__dat { background: var(--tnd-chinh) !important; color: #fff !important; }
.tnd-tg .tnd-tg__nut--vien { background: #fff !important; color: var(--tnd-chinh) !important; border-color: var(--tnd-chinh) !important; }
.tnd-tg .tnd-tg__nut--vien:hover { background: color-mix(in srgb, var(--tnd-chinh) 6%, #fff) !important; filter: none; }
.tnd-tg .tnd-tg__nut:disabled { opacity: .45; cursor: not-allowed; filter: none; }

/* Mã QR thanh toán */
.tnd-tg__qr { margin-top: 16px; padding-top: 16px; border-top: 1px dashed #d3d9e0; text-align: center; }
.tnd-tg__qr-tieu-de { margin: 0 0 8px; font-weight: 600; color: var(--tnd-chu); }
.tnd-tg__qr-tieu-de strong { color: var(--tnd-chinh); }
.tnd-tg .tnd-tg__qr-anh {
    display: block; width: 100%; max-width: 250px; height: auto; aspect-ratio: 27 / 32;
    margin: 0 auto 10px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff;
    transition: opacity .2s;
}
.tnd-tg__qr-anh.is-tai { opacity: .35; }
.tnd-tg__qr-tt { display: grid; gap: 2px; text-align: left; font-size: 14px; }
.tnd-tg__qr-tt > div { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 5px 0; border-bottom: 1px solid #f1f4f7; }
.tnd-tg__qr-tt span { color: var(--tnd-chu-phu); }
.tnd-tg__qr-tt b { display: inline-flex; align-items: center; gap: 6px; text-align: right; color: var(--tnd-chu); word-break: break-all; }
.tnd-tg__qr-tt b span { color: var(--tnd-chu); }
.tnd-tg .tnd-tg__chep {
    display: inline-flex !important; align-items: center; justify-content: center;
    width: 36px; height: 36px; min-height: 0; margin: 0 !important; padding: 0 !important;
    border: 1px solid var(--tnd-vien) !important; border-radius: 6px !important;
    background: #fff !important; color: var(--tnd-chinh) !important; cursor: pointer; flex: 0 0 auto;
}
.tnd-tg .tnd-tg__chep .tnd-tg__icon { width: 15px; height: 15px; }
.tnd-tg .tnd-tg__chep.is-xong { background: var(--tnd-chinh) !important; color: #fff !important; }

/* Khung chờ khi chưa đủ thông số */
.tnd-tg__cho {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    min-height: 180px; padding: 24px; text-align: center; color: var(--tnd-chu-phu);
    background: #f8fafc; border-style: dashed; box-shadow: none;
}
.tnd-tg__cho .tnd-tg__icon { width: 34px; height: 34px; color: #94a3b8; }
.tnd-tg__cho p { margin: 0; max-width: 300px; }

/* Kết quả */
.tnd-tg__tom-tat { margin: 0 0 12px; color: #475569; line-height: 1.55; }
.tnd-tg__tom-tat b { color: var(--tnd-chu); }
.tnd-tg__dong {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    padding: 11px 0; border-top: 1px solid #edf0f3;
}
.tnd-tg__dong--don-gia { font-weight: 700; color: var(--tnd-chinh); }
.tnd-tg__dong--don-gia span { color: var(--tnd-chu-phu); }
.tnd-tg__dong--tong { font-weight: 700; font-size: 16px; }
.tnd-tg__dong--tong strong { font-size: 24px; line-height: 1.2; color: var(--tnd-chu); }
.tnd-tg__so-to { margin: 2px 0 14px; font-size: 13px; color: var(--tnd-chu-phu); }
.tnd-tg .tnd-tg__dat { min-height: 52px; font-size: 16px !important; text-transform: uppercase !important; letter-spacing: .02em !important; }
.tnd-tg__nut-phu { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; margin-top: 10px; }
.tnd-tg .tnd-tg__nut--nhat {
    min-height: 44px; padding: 0 8px !important; font-size: 13px !important; font-weight: 600 !important;
    background: #eef1f4 !important; color: #334155 !important; border-color: #e2e6ea !important;
}
.tnd-tg .tnd-tg__nut--nhat:hover { background: #e3e8ed !important; filter: none; }
.tnd-tg .tnd-tg__nut--nhat .tnd-tg__icon { width: 15px; height: 15px; }
.tnd-tg__ghi-chu { display: flex; gap: 6px; align-items: flex-start; margin: 12px 0 0; font-size: 13px; color: var(--tnd-chu-phu); }
.tnd-tg__ghi-chu .tnd-tg__icon, .tnd-tg__goi-y-ghi .tnd-tg__icon { width: 15px; height: 15px; margin-top: 2px; color: var(--tnd-chinh); }

/* Bảng giá theo số lượng */
.tnd-tg__goi-y-ghi { display: flex; gap: 6px; align-items: flex-start; margin: 0; padding: 10px 16px; font-size: 13px; font-style: italic; color: var(--tnd-chu-phu); }
.tnd-tg .tnd-tg__bang td.tnd-tg__tien { font-weight: 700; color: var(--tnd-chinh); }
.tnd-tg .tnd-tg__bang td.tnd-tg__cot-nut { width: 1%; padding-top: 5px !important; padding-bottom: 5px !important; }
.tnd-tg .tnd-tg__dat-dong {
    display: inline-flex !important; align-items: center; gap: 5px; min-height: 38px; margin: 0 !important; padding: 0 12px !important;
    border: 0 !important; border-radius: 6px !important; background: var(--tnd-chinh) !important; color: #fff !important;
    font-size: 13px !important; font-weight: 700 !important; line-height: 1 !important; text-transform: none !important;
    letter-spacing: 0 !important; white-space: nowrap; cursor: pointer;
}
.tnd-tg .tnd-tg__dat-dong:hover { filter: brightness(1.08); }
.tnd-tg .tnd-tg__dat-dong .tnd-tg__icon { width: 15px; height: 15px; }
.tnd-tg .tnd-tg__bang tbody tr:hover td { background: #f5f7fa; }
@container (max-width: 420px) {
    .tnd-tg .tnd-tg__bang { font-size: 13px; }
    .tnd-tg .tnd-tg__bang th, .tnd-tg .tnd-tg__bang td { padding-left: 6px !important; padding-right: 6px !important; }
    .tnd-tg .tnd-tg__bang th:first-child, .tnd-tg .tnd-tg__bang td:first-child { padding-left: 12px !important; }
    .tnd-tg .tnd-tg__bang th:last-child, .tnd-tg .tnd-tg__bang td:last-child { padding-right: 10px !important; }
    .tnd-tg .tnd-tg__dat-dong { padding: 0 10px !important; }
    .tnd-tg .tnd-tg__dat-dong .tnd-tg__icon { display: none; }
}

.tnd-tg__bang-cuon { overflow-x: auto; }
.tnd-tg .tnd-tg__bang { width: 100%; margin: 0 !important; border-collapse: collapse; font-size: 14px; }
.tnd-tg .tnd-tg__bang th, .tnd-tg .tnd-tg__bang td {
    padding: 9px 16px !important; border: 0 !important; border-bottom: 1px solid #edf0f3 !important;
    text-align: right; text-transform: none !important; letter-spacing: 0 !important; white-space: nowrap;
}
.tnd-tg .tnd-tg__bang th:first-child, .tnd-tg .tnd-tg__bang td:first-child { text-align: left; }
.tnd-tg .tnd-tg__bang th { font-size: 13px !important; font-weight: 600 !important; color: var(--tnd-chu-phu); background: #f8fafc; }
.tnd-tg .tnd-tg__bang tr.tnd-tg__dong-chon td { background: color-mix(in srgb, var(--tnd-chinh) 7%, #fff); font-weight: 700; color: var(--tnd-chinh); }

.tnd-tg__icon { flex: 0 0 auto; }

@container (max-width: 280px) {
    .tnd-tg__hinh-ds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Hộp đặt hàng (site không có WooCommerce) */
html.tnd-tg-khoa-cuon { overflow: hidden; }
.tnd-tg__hop {
    width: min(860px, calc(100vw - 24px)); max-width: none; max-height: min(92vh, 760px); margin: auto; padding: 0;
    border: 0; border-radius: 10px; background: #fff; color: var(--tnd-chu); box-shadow: 0 20px 60px rgba(15, 23, 42, .3);
    overflow: hidden;
}
.tnd-tg__hop::backdrop { background: rgba(15, 23, 42, .55); }
.tnd-tg__hop-form { display: flex; flex-direction: column; max-height: min(92vh, 760px); margin: 0; }
.tnd-tg__hop-dau { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 2px solid var(--tnd-chinh); }
.tnd-tg .tnd-tg__hop-tieu-de { display: flex; align-items: center; gap: 8px; font-size: 17px !important; font-weight: 700 !important; color: var(--tnd-chinh); text-transform: none !important; }
.tnd-tg .tnd-tg__hop-dong {
    display: inline-flex !important; align-items: center; justify-content: center; width: 40px; height: 40px; min-height: 0;
    margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 8px !important;
    background: #f1f4f7 !important; color: var(--tnd-chu) !important; font-size: 24px !important; line-height: 1 !important; cursor: pointer;
}
.tnd-tg__hop-than { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); padding: 18px; overflow-y: auto; overflow-x: hidden; }
@media (min-width: 720px) { .tnd-tg__hop-than { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } }
.tnd-tg__hop-don { padding: 14px; border-radius: 8px; background: #f8fafc; align-self: start; }
.tnd-tg .tnd-tg__hop-nhan { margin: 0 0 10px; font-size: 13px !important; font-weight: 700 !important; color: var(--tnd-chu-phu); text-transform: uppercase !important; letter-spacing: .04em !important; }
.tnd-tg__hop-o { display: grid; gap: 10px; align-content: start; }
.tnd-tg__o--icon .tnd-tg__icon { position: absolute; left: 12px; top: 23px; transform: translateY(-50%); color: var(--tnd-chinh); pointer-events: none; }
.tnd-tg .tnd-tg__o--icon input { padding-left: 40px !important; padding-right: 12px !important; }
.tnd-tg .tnd-tg__o--ghi-chu textarea {
    display: block !important; width: 100% !important; min-height: 84px; margin: 0 !important; padding: 12px 12px 12px 40px !important;
    border: 1px solid var(--tnd-vien) !important; border-radius: 8px !important; background: var(--tnd-nen-o) !important;
    color: var(--tnd-chu) !important; font-size: 15px !important; line-height: 1.4 !important; resize: vertical; box-shadow: none !important;
}
.tnd-tg .tnd-tg__o--ghi-chu textarea:focus { outline: none !important; border-color: var(--tnd-chinh) !important; background: #fff !important; }
.tnd-tg .tnd-tg__hop-gui { background: var(--tnd-chinh) !important; color: #fff !important; min-height: 50px; }
.tnd-tg__hop-xong { padding: 36px 24px; text-align: center; }
.tnd-tg__hop-xong .tnd-tg__icon { width: 54px; height: 54px; color: #16a34a; }
.tnd-tg__hop-xong-tieu-de { margin: 10px 0 6px; font-size: 19px; font-weight: 700; }
.tnd-tg__hop-xong p { margin: 0 0 16px; color: var(--tnd-chu-phu); }
.tnd-tg__hop-xong .tnd-tg__nut { width: auto; min-width: 160px; }