/* ===== Gio hang / thanh toan / trang cam on — giao dien Tabcom =====
   KHAC cac trang Tabcom khac: trang nay KHONG go CSS/JS cua WooCommerce, FunnelKit,
   Edumall (form thanh toan can JS de chay). Moi rule deu bat dau bang
   body.tabcom-checkout (hoac class tc-ck-) de khong lan sang trang khac.
   Nap sau CSS cua theme/plugin (functions.php, uu tien 100). */

body.tabcom-checkout{background:#f5f8ff!important}
body.tabcom-checkout,
body.tabcom-checkout input,body.tabcom-checkout select,body.tabcom-checkout textarea,body.tabcom-checkout button,
body.tabcom-checkout h1,body.tabcom-checkout h2,body.tabcom-checkout h3,body.tabcom-checkout h4,
body.tabcom-checkout th,body.tabcom-checkout td,body.tabcom-checkout label,body.tabcom-checkout p{
  font-family:'Be Vietnam Pro',system-ui,-apple-system,sans-serif!important}

/* An header TCG (Elementor #36 kem thanh chu chay), thanh tieu de, footer Edumall */
body.tabcom-checkout .elementor-location-header,
body.tabcom-checkout .page-title-bar,
body.tabcom-checkout #page-footer-wrapper{display:none!important}

/* ---------- Header gon ---------- */
.tc-ck-head{background:#fff;box-shadow:0 2px 16px rgba(6,12,61,.07);position:sticky;top:0;z-index:999}
body.admin-bar .tc-ck-head{top:32px}
.tc-ck-wrap{max-width:1180px;margin:0 auto;padding:0 20px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.tc-ck-head .tc-ck-wrap{height:72px}
.tc-ck-logo img{height:40px;width:auto;display:block}
.tc-ck-steps{display:flex;align-items:center;gap:10px;list-style:none;margin:0;padding:0}
.tc-ck-steps li{display:flex;align-items:center;gap:8px;font-size:.86rem;font-weight:600;color:#8a93ad;white-space:nowrap;margin:0}
.tc-ck-steps li+li::before{content:"";width:34px;height:2px;background:#dfe6f5;margin-right:6px}
.tc-ck-steps span{width:26px;height:26px;border-radius:50%;background:#e8f0ff;color:#8a93ad;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:.8rem}
.tc-ck-steps li.active{color:#060C3D}
.tc-ck-steps li.active span{background:#0F2EDE;color:#fff;box-shadow:0 4px 12px rgba(15,46,222,.35)}
.tc-ck-steps li.done{color:#0a8f82}
.tc-ck-steps li.done span{background:#0FDEC9;color:#060C3D;font-size:0}
.tc-ck-steps li.done span::after{content:"✓";font-size:.8rem}
.tc-ck-help{display:flex;flex-direction:column;align-items:flex-end;font-size:.78rem;color:#5a6480;line-height:1.35}
.tc-ck-help b{color:#060C3D;font-size:.85rem}
.tc-ck-help a{color:#0F2EDE;font-weight:800}

/* ---------- Footer gon ---------- */
.tc-ck-foot{border-top:1px solid #e3eaf7;background:#fff;margin-top:40px}
.tc-ck-foot .tc-ck-wrap{padding:22px 20px;font-size:.82rem;color:#5a6480;flex-wrap:wrap}
.tc-ck-foot a{color:#0F2EDE;font-weight:700}

/* ---------- Vung noi dung ---------- */
body.tabcom-checkout #page-main-content{padding-top:34px}
body.tabcom-checkout .content-wrapper{background:transparent!important}

/* Thong bao "... da duoc them vao gio hang" */
body.tabcom-checkout .woocommerce-message,
body.tabcom-checkout .woocommerce-info{background:#eefcf8!important;border:1px solid #bdeee4!important;color:#0a6b61!important;border-radius:14px!important;box-shadow:none!important;padding:14px 18px!important;font-weight:600}
body.tabcom-checkout .woocommerce-message a,
body.tabcom-checkout .woocommerce-message .button{color:#0F2EDE!important;background:none!important;border:none!important;box-shadow:none!important;font-weight:700!important;letter-spacing:0!important;text-transform:none!important}
body.tabcom-checkout .woocommerce-error{border-radius:14px!important}

/* Ma uu dai */
body.tabcom-checkout .woocommerce-form-coupon-toggle{font-size:.9rem;color:#5a6480;margin-bottom:14px}
body.tabcom-checkout .woocommerce-form-coupon-toggle a{color:#0F2EDE!important;font-weight:700;border-color:#0F2EDE!important}

/* ---------- 3 the: thong tin, thanh toan, tom tat ---------- */
body.tabcom-checkout .woocommerce-billing-fields,
body.tabcom-checkout #order_review,
body.tabcom-checkout .woocommerce-order-details{background:#fff!important;border:1px solid #e3eaf7!important;border-radius:18px!important;box-shadow:0 10px 36px rgba(15,46,222,.07)!important;padding:28px 30px!important;margin-bottom:22px!important}
body.tabcom-checkout form.checkout{counter-reset:tcstep}
body.tabcom-checkout .woocommerce-billing-fields h3,
body.tabcom-checkout .checkout-payment-info-heading,
body.tabcom-checkout #order_review_heading{font-size:1.2rem!important;font-weight:800!important;color:#060C3D!important;margin:0 0 20px!important;padding:0!important;border:none!important;display:flex!important;align-items:center;gap:12px;text-transform:none!important;letter-spacing:0!important}
body.tabcom-checkout .woocommerce-billing-fields h3::before,
body.tabcom-checkout .checkout-payment-info-heading::before{counter-increment:tcstep;content:counter(tcstep);flex:0 0 30px;width:30px;height:30px;border-radius:50%;background:#0F2EDE;color:#fff;font-size:.85rem;font-weight:800;display:inline-flex;align-items:center;justify-content:center}

/* O nhap */
body.tabcom-checkout .woocommerce-billing-fields .form-row{margin-bottom:16px!important}
body.tabcom-checkout .woocommerce-billing-fields label{font-size:.85rem!important;font-weight:700!important;color:#060C3D!important;text-transform:none!important;letter-spacing:0!important;margin-bottom:7px!important}
body.tabcom-checkout .woocommerce-billing-fields label .required{color:#FF8A00!important;text-decoration:none!important}
body.tabcom-checkout form.checkout input.input-text,
body.tabcom-checkout form.checkout select,
body.tabcom-checkout form.checkout textarea{background:#fff!important;border:1.5px solid #dfe6f5!important;border-radius:12px!important;padding:13px 16px!important;height:auto!important;font-size:.95rem!important;color:#1a1a2e!important;box-shadow:none!important;transition:border-color .2s,box-shadow .2s}
body.tabcom-checkout form.checkout input.input-text:focus,
body.tabcom-checkout form.checkout select:focus,
body.tabcom-checkout form.checkout textarea:focus{border-color:#0F2EDE!important;box-shadow:0 0 0 4px rgba(15,46,222,.1)!important;outline:none!important}
body.tabcom-checkout form.checkout .woocommerce-invalid input.input-text{border-color:#e5484d!important}

/* Cong thanh toan (SePay) */
body.tabcom-checkout #payment{background:transparent!important;border:none!important;padding:0!important;border-radius:0!important}
body.tabcom-checkout #payment ul.payment_methods{padding:0!important;border:none!important;margin:0 0 18px!important}
body.tabcom-checkout #payment li.wc_payment_method{background:#f5f8ff!important;border:1.5px solid #dfe6f5!important;border-radius:14px!important;padding:16px 18px!important;list-style:none!important;margin:0 0 10px!important}
body.tabcom-checkout #payment li.wc_payment_method.payment-selected,
body.tabcom-checkout #payment li.wc_payment_method:has(input:checked){border-color:#0F2EDE!important;background:#fff!important;box-shadow:0 6px 20px rgba(15,46,222,.1)!important}
body.tabcom-checkout #payment .payment_title,
body.tabcom-checkout #payment li.wc_payment_method>label{color:#060C3D!important;font-weight:800!important;font-size:1rem!important}
body.tabcom-checkout #payment div.payment_box{background:transparent!important;color:#5a6480!important;padding:10px 0 0!important;margin:0!important;font-size:.88rem!important;border:none!important}
body.tabcom-checkout #payment div.payment_box::before{display:none!important}
body.tabcom-checkout .woocommerce-privacy-policy-text,
body.tabcom-checkout .woocommerce-privacy-policy-text p{font-size:.8rem!important;color:#5a6480!important}

/* Nut dat hang: nam trong form, rong het the. Ghi de CSS cu cua TCG
   (position:fixed goc duoi phai + nhap nhay) phong khi co ai them lai. */
body.tabcom-checkout #place_order{position:static!important;right:auto!important;bottom:auto!important;width:100%!important;float:none!important;animation:none!important;transform:none!important;display:flex!important;align-items:center;justify-content:center;gap:10px;margin:8px 0 0!important;padding:17px 24px!important;border:none!important;border-radius:999px!important;background:linear-gradient(135deg,#FF8A00,#ffb340)!important;color:#fff!important;font-size:1.05rem!important;font-weight:800!important;letter-spacing:0!important;text-transform:none!important;line-height:1.3!important;height:auto!important;box-shadow:0 10px 26px rgba(255,138,0,.35)!important;transition:transform .2s,box-shadow .2s}
body.tabcom-checkout #place_order:hover{transform:translateY(-2px)!important;box-shadow:0 14px 30px rgba(255,138,0,.45)!important}
body.tabcom-checkout #place_order::before{content:"🔒"}

/* Tom tat don hang */
@media(min-width:992px){
  body.tabcom-checkout .checkout-content-wrap .col-lg-5 .woocommerce-order-details{position:sticky;top:110px}
}
body.tabcom-checkout .woocommerce-checkout-review-order-table{border:none!important;margin:0!important;background:transparent!important}
body.tabcom-checkout .woocommerce-checkout-review-order-table td,
body.tabcom-checkout .woocommerce-checkout-review-order-table th{border-color:#eef2fb!important;padding:14px 0!important;background:transparent!important}
body.tabcom-checkout .woocommerce-checkout-review-order-table .product-info img{border-radius:10px}
body.tabcom-checkout .woocommerce-checkout-review-order-table .cart-subtotal .amount{color:#060C3D!important;font-weight:700!important}
body.tabcom-checkout .woocommerce-checkout-review-order-table .order-total th{font-size:1.05rem!important;color:#060C3D!important;font-weight:800!important}
body.tabcom-checkout .woocommerce-checkout-review-order-table .order-total .amount{color:#0F2EDE!important;font-size:1.6rem!important;font-weight:900!important}
body.tabcom-checkout:not(.woocommerce-order-received) .checkout-content-wrap .col-lg-5 .woocommerce-order-details::after{
  content:"✓  Nhận mã QR ngay sau khi bấm hoàn tất\A✓  Quét bằng app ngân hàng bất kỳ (VietQR / Napas 247)\A✓  Hỗ trợ: 0868 687 773 (8:00 – 17:30)";
  white-space:pre-line;display:block;margin-top:18px;padding:16px 18px;background:#f5f8ff;border-radius:14px;font-size:.84rem;color:#5a6480;line-height:1.9}

/* ---------- Dien thoai / may tinh bang ---------- */
@media(max-width:991px){
  .tc-ck-steps{display:none}
  .tc-ck-head .tc-ck-wrap{height:62px}
  .tc-ck-logo img{height:34px}
  /* Dua tom tat don (tong tien) len truoc form */
  body.tabcom-checkout .checkout-content-wrap{display:flex;flex-wrap:wrap}
  body.tabcom-checkout .checkout-content-wrap>.col-lg-5{order:-1}
}
@media(max-width:560px){
  body.tabcom-checkout .woocommerce-billing-fields,
  body.tabcom-checkout #order_review,
  body.tabcom-checkout .woocommerce-order-details{padding:22px 18px!important;border-radius:16px!important}
  .tc-ck-help span{display:none}
  body.tabcom-checkout #page-main-content{padding-top:20px}
}

/* Thong bao: Edumall dat icon Font Awesome absolute left:1.2em va chua padding-left 4em
   -> rule phia tren (padding 18px) lam icon de len chu. Chua lai cho cho icon. */
body.tabcom-checkout .woocommerce-message,
body.tabcom-checkout .woocommerce-info{padding-left:50px!important}
body.tabcom-checkout .woocommerce-message::before,
body.tabcom-checkout .woocommerce-info::before{color:#0a8f82!important;left:18px!important;font-size:18px!important}
/* WooCommerce tu focus vao thanh thong bao sau khi them vao gio (de trinh doc man hinh
   doc duoc) -> trinh duyet ve khung focus den day. Day la khoi khong bam duoc
   (tabindex=-1) nen bo khung focus khong anh huong dieu huong ban phim. */
body.tabcom-checkout .woocommerce-notices-wrapper:focus,
body.tabcom-checkout .woocommerce-message:focus,
body.tabcom-checkout .woocommerce-NoticeGroup:focus,
body.tabcom-checkout [role="alert"]:focus{outline:none!important;box-shadow:none!important}


/* An header mac dinh cua Edumall (top bar +88..., logo thu 2) tren trang thanh toan / cam on - da co header Tabcom o tren */
body.tabcom-checkout header#page-header.page-header { display: none !important; }

/* Goi y tai khoan tu tao (tabcom/checkout-account.php, 22/09/2026) */
.tabcom-checkout .tabcom-acc-note{background:#F3F6FF;border:1px solid #DCE4FF;border-radius:12px;padding:12px 16px;margin:0 0 18px;font-size:.9rem;line-height:1.55;color:#33406b}
.tabcom-checkout .tabcom-acc-note a{color:#0F2EDE;font-weight:700;text-decoration:underline}
.tabcom-checkout .woocommerce-error a{color:#0F2EDE;text-decoration:underline}