/*
 * Keyshu page-specific styles.
 * Add CSS for individual page layouts here.
 */
/* =========================================================
   KEYSHU - MENU DROPDOWN TÀI KHOẢN HEADER
   Bản nhỏ gọn - Không dùng arrow phía trên
   Dùng cho Flatsome + WooCommerce
   Icon: Font Awesome 7 Free
========================================================= */

:root {
  --keyshu-primary: #03B0B1;
  --keyshu-text: #34424d;
  --keyshu-border: #e4e8eb;
  --keyshu-danger: #ff1f1f;
  --keyshu-white: #ffffff;
}

/* =========================================================
   1. KHUNG MENU DROPDOWN
========================================================= */

.nav-dropdown.nav-dropdown-default:has(.woocommerce-MyAccount-navigation-link--dashboard) {
  width: 285px !important;
  min-width: 285px !important;
  max-width: 285px !important;

  padding: 0 !important;
  margin-top: 8px !important;

  background: rgba(255, 255, 255, 0.98) !important;
  border: 1px solid rgba(210, 218, 224, 0.95) !important;
  border-radius: 9px !important;

  box-shadow:
    0 12px 26px rgba(34, 55, 70, 0.13),
    0 3px 8px rgba(34, 55, 70, 0.06) !important;

  overflow: hidden !important;
  list-style: none !important;

  display: flex !important;
  flex-direction: column !important;

  font-family: "SVN-Gilroy", sans-serif !important;
}

/* XÓA ARROW PHÍA TRÊN */
.nav-dropdown.nav-dropdown-default:has(.woocommerce-MyAccount-navigation-link--dashboard)::before,
.nav-dropdown.nav-dropdown-default:has(.woocommerce-MyAccount-navigation-link--dashboard)::after {
  display: none !important;
  content: none !important;
}

/* Reset item */
.nav-dropdown.nav-dropdown-default:has(.woocommerce-MyAccount-navigation-link--dashboard) li {
  position: relative !important;
  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  list-style: none !important;
  background: transparent !important;
}

/* =========================================================
   2. SẮP XẾP THỨ TỰ MENU
========================================================= */

.nav-dropdown.nav-dropdown-default:has(.woocommerce-MyAccount-navigation-link--dashboard)
.woocommerce-MyAccount-navigation-link--orders {
  order: 1;
}

.nav-dropdown.nav-dropdown-default:has(.woocommerce-MyAccount-navigation-link--dashboard)
.woocommerce-MyAccount-navigation-link--downloads {
  order: 2;
}

.nav-dropdown.nav-dropdown-default:has(.woocommerce-MyAccount-navigation-link--dashboard)
.woocommerce-MyAccount-navigation-link--dashboard {
  order: 3;
}

.nav-dropdown.nav-dropdown-default:has(.woocommerce-MyAccount-navigation-link--dashboard)
.woocommerce-MyAccount-navigation-link--edit-address {
  order: 4;
}

.nav-dropdown.nav-dropdown-default:has(.woocommerce-MyAccount-navigation-link--dashboard)
.woocommerce-MyAccount-navigation-link--edit-account {
  order: 5;
}

.nav-dropdown.nav-dropdown-default:has(.woocommerce-MyAccount-navigation-link--dashboard)
.wishlist-account-element {
  order: 6;
}

.nav-dropdown.nav-dropdown-default:has(.woocommerce-MyAccount-navigation-link--dashboard)
.woocommerce-MyAccount-navigation-link--customer-logout {
  order: 7;
}

/* =========================================================
   3. TIÊU ĐỀ NHÓM
========================================================= */

/* QUẢN LÝ ĐƠN HÀNG */
.nav-dropdown.nav-dropdown-default:has(.woocommerce-MyAccount-navigation-link--dashboard)
.woocommerce-MyAccount-navigation-link--orders::before {
  content: "QUẢN LÝ ĐƠN HÀNG";
  display: block;

  padding: 20px 22px 10px;

  color: var(--keyshu-primary);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

/* TÀI KHOẢN CỦA TÔI */
.nav-dropdown.nav-dropdown-default:has(.woocommerce-MyAccount-navigation-link--dashboard)
.woocommerce-MyAccount-navigation-link--dashboard::before {
  content: "TÀI KHOẢN CỦA TÔI";
  display: block;

  margin-top: 10px;
  padding: 18px 22px 10px;

  border-top: 1px solid var(--keyshu-border);

  color: var(--keyshu-primary);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

/* =========================================================
   4. LINK MENU
========================================================= */

.nav-dropdown.nav-dropdown-default:has(.woocommerce-MyAccount-navigation-link--dashboard) li a {
  position: relative !important;

  min-height: 42px !important;
  padding: 0 22px 0 62px !important;

  display: flex !important;
  align-items: center !important;

  color: var(--keyshu-text) !important;
  background: transparent !important;

  font-size: 14px !important;
  line-height: 1.3 !important;
  font-weight: 500 !important;
  text-transform: none !important;
  text-decoration: none !important;
  letter-spacing: 0 !important;

  transition:
    color 0.22s ease,
    background-color 0.22s ease,
    padding-left 0.22s ease !important;
}

/* Đường kẻ dưới item */
.nav-dropdown.nav-dropdown-default:has(.woocommerce-MyAccount-navigation-link--dashboard) li:not(.woocommerce-MyAccount-navigation-link--customer-logout) a::after {
  content: "";
  position: absolute;
  left: 62px;
  right: 22px;
  bottom: 0;

  height: 1px;
  background: var(--keyshu-border);
}

/* Bỏ line ở item cuối mỗi nhóm */
.nav-dropdown.nav-dropdown-default:has(.woocommerce-MyAccount-navigation-link--dashboard)
.woocommerce-MyAccount-navigation-link--downloads a::after,
.nav-dropdown.nav-dropdown-default:has(.woocommerce-MyAccount-navigation-link--dashboard)
.wishlist-account-element a::after {
  display: none !important;
}

/* Hover */
.nav-dropdown.nav-dropdown-default:has(.woocommerce-MyAccount-navigation-link--dashboard) li:not(.woocommerce-MyAccount-navigation-link--customer-logout) a:hover {
  color: var(--keyshu-primary) !important;
  background: rgba(3, 176, 177, 0.07) !important;
  padding-left: 66px !important;
  font-weight: 700 !important;
  border-radius: 8px;
}

/* =========================================================
   5. ICON FONT AWESOME
========================================================= */

.nav-dropdown.nav-dropdown-default:has(.woocommerce-MyAccount-navigation-link--dashboard) li a::before {
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);

  width: 20px;
  height: 20px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: var(--keyshu-primary);

  font-family: "Font Awesome 7 Free", "Font Awesome 6 Free" !important;
  font-size: 17px;
  font-weight: 900;
  line-height: 1;

  transition:
    color 0.22s ease,
    transform 0.22s ease;
}

/* Đơn hàng */
.nav-dropdown.nav-dropdown-default:has(.woocommerce-MyAccount-navigation-link--dashboard)
.woocommerce-MyAccount-navigation-link--orders a::before {
  content: "\f187";
}

/* Tệp tải xuống */
.nav-dropdown.nav-dropdown-default:has(.woocommerce-MyAccount-navigation-link--dashboard)
.woocommerce-MyAccount-navigation-link--downloads a::before {
  content: "\f019";
}

/* Trang tài khoản */
.nav-dropdown.nav-dropdown-default:has(.woocommerce-MyAccount-navigation-link--dashboard)
.woocommerce-MyAccount-navigation-link--dashboard a::before {
  content: "\f007";
  font-weight: 400;
}

/* Địa chỉ */
.nav-dropdown.nav-dropdown-default:has(.woocommerce-MyAccount-navigation-link--dashboard)
.woocommerce-MyAccount-navigation-link--edit-address a::before {
  content: "\f3c5";
}

/* Tài khoản */
.nav-dropdown.nav-dropdown-default:has(.woocommerce-MyAccount-navigation-link--dashboard)
.woocommerce-MyAccount-navigation-link--edit-account a::before {
  content: "\f013";
}

/* Wishlist */
.nav-dropdown.nav-dropdown-default:has(.woocommerce-MyAccount-navigation-link--dashboard)
.wishlist-account-element a::before {
  content: "\f004";
  font-weight: 400;
}

/* Hover icon */
.nav-dropdown.nav-dropdown-default:has(.woocommerce-MyAccount-navigation-link--dashboard) li:not(.woocommerce-MyAccount-navigation-link--customer-logout) a:hover::before {
  transform: translateY(-50%) scale(1.04);
}

/* =========================================================
   6. NÚT THOÁT
========================================================= */

.nav-dropdown.nav-dropdown-default:has(.woocommerce-MyAccount-navigation-link--dashboard)
.woocommerce-MyAccount-navigation-link--customer-logout {
  margin-top: 10px !important;
  border-top: 1px solid var(--keyshu-border) !important;
}

.nav-dropdown.nav-dropdown-default:has(.woocommerce-MyAccount-navigation-link--dashboard)
.woocommerce-MyAccount-navigation-link--customer-logout a {
  min-height: 50px !important;
  color: var(--keyshu-danger) !important;
  font-weight: 600 !important;
}

.nav-dropdown.nav-dropdown-default:has(.woocommerce-MyAccount-navigation-link--dashboard)
.woocommerce-MyAccount-navigation-link--customer-logout a::before {
  content: "\f2f5";
  color: var(--keyshu-danger);
  font-weight: 900;
}

.nav-dropdown.nav-dropdown-default:has(.woocommerce-MyAccount-navigation-link--dashboard)
.woocommerce-MyAccount-navigation-link--customer-logout a::after {
  display: none !important;
}

.nav-dropdown.nav-dropdown-default:has(.woocommerce-MyAccount-navigation-link--dashboard)
.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
  color: var(--keyshu-danger) !important;
  background: rgba(255, 31, 31, 0.055) !important;
  padding-left: 66px !important;
  font-weight: 700 !important;
  border-radius: 8px;
}

/* =========================================================
   7. FIX GHI ĐÈ STYLE MẶC ĐỊNH FLATSOME
========================================================= */

.nav-dropdown.nav-dropdown-default:has(.woocommerce-MyAccount-navigation-link--dashboard) li:hover,
.nav-dropdown.nav-dropdown-default:has(.woocommerce-MyAccount-navigation-link--dashboard) li.current-dropdown {
  background: transparent !important;
}

.nav-dropdown.nav-dropdown-default:has(.woocommerce-MyAccount-navigation-link--dashboard) a:hover {
  text-decoration: none !important;
}

/* =========================================================
   8. MOBILE / TABLET
========================================================= */

@media (max-width: 768px) {
  .nav-dropdown.nav-dropdown-default:has(.woocommerce-MyAccount-navigation-link--dashboard) {
    width: 285px !important;
    min-width: 285px !important;
    max-width: 285px !important;
    border-radius: 9px !important;
  }

  .nav-dropdown.nav-dropdown-default:has(.woocommerce-MyAccount-navigation-link--dashboard)
  .woocommerce-MyAccount-navigation-link--orders::before,
  .nav-dropdown.nav-dropdown-default:has(.woocommerce-MyAccount-navigation-link--dashboard)
  .woocommerce-MyAccount-navigation-link--dashboard::before {
    padding-left: 18px;
    padding-right: 18px;
    font-size: 11px;
  }

  .nav-dropdown.nav-dropdown-default:has(.woocommerce-MyAccount-navigation-link--dashboard) li a {
    min-height: 40px !important;
    padding-left: 56px !important;
    padding-right: 18px !important;
    font-size: 13px !important;
  }

  .nav-dropdown.nav-dropdown-default:has(.woocommerce-MyAccount-navigation-link--dashboard) li a::before {
    left: 20px;
    font-size: 16px;
  }

  .nav-dropdown.nav-dropdown-default:has(.woocommerce-MyAccount-navigation-link--dashboard) li:not(.woocommerce-MyAccount-navigation-link--customer-logout) a::after {
    left: 56px;
    right: 18px;
  }

  .nav-dropdown.nav-dropdown-default:has(.woocommerce-MyAccount-navigation-link--dashboard) li:not(.woocommerce-MyAccount-navigation-link--customer-logout) a:hover,
  .nav-dropdown.nav-dropdown-default:has(.woocommerce-MyAccount-navigation-link--dashboard)
  .woocommerce-MyAccount-navigation-link--customer-logout a:hover {
    padding-left: 60px !important;
  }
}

/* =========================================================
   KEYSHU - WISHLIST MY ACCOUNT PAGE
   Dùng cho: Flatsome + WooCommerce + YITH Wishlist

   Đã làm sạch:
   - Không ghi đè icon nhiều lần
   - Icon luôn hiển thị ở trạng thái thường
   - Hover KHÔNG đổi màu icon
   - Active mới đổi màu icon sang màu chính
   - Nút thêm giỏ hàng dùng màu đỏ Keyshu
   - Responsive desktop / tablet / mobile
========================================================= */

:root {
  --keyshu-primary: #03B0B1;
  --keyshu-primary-dark: #00989A;
  --keyshu-text: #23454c;
  --keyshu-text-soft: #5d6b75;
  --keyshu-border: #e8eef0;
  --keyshu-bg-soft: #f5fbfb;
  --keyshu-white: #ffffff;
  --keyshu-danger: #ff2d1b;

  /* Màu nút thêm giỏ hàng */
  --keyshu-cart-red: #f44336;
  --keyshu-cart-red-dark: #c62828;
  --keyshu-cart-red-hover: #b71c1c;
}

/* =========================================================
   1. NỀN TỔNG THỂ TRANG MY ACCOUNT
========================================================= */

body.woocommerce-account,
body.woocommerce-wishlist {
  background: #ffffff;
}

.page-wrapper.my-account {
  padding: 32px 0 56px;
  background: linear-gradient(180deg, #f7ffff 0%, #ffffff 42%, #f8fcfc 100%);
}

.page-wrapper.my-account .container {
  max-width: 1320px;
  width: 100%;
}

/* Layout 2 cột */
.page-wrapper.my-account .row.vertical-tabs {
  display: grid;
  grid-template-columns: 285px minmax(0, 1fr);
  gap: 28px;
  align-items: stretch;
  margin: 0;
}

.page-wrapper.my-account .row.vertical-tabs::before,
.page-wrapper.my-account .row.vertical-tabs::after {
  display: none !important;
}

.page-wrapper.my-account .row.vertical-tabs > .col {
  max-width: none !important;
  flex-basis: auto !important;
  padding: 0 !important;
}

/* =========================================================
   2. HEADER TIÊU ĐỀ TRANG
========================================================= */

.my-account-header.page-title {
  position: relative;
  overflow: hidden;
  padding: 26px 0;
  background:
    radial-gradient(circle at 86% 0%, rgba(3, 176, 177, 0.12) 0 120px, transparent 121px),
    linear-gradient(135deg, #f9ffff 0%, #ffffff 48%, #dff6f5 100%);
  border-bottom: 1px solid rgba(3, 176, 177, 0.12);
}

.my-account-header.page-title::after {
  content: "";
  position: absolute;
  top: 34px;
  right: 34px;
  width: 86px;
  height: 36px;
  opacity: 0.35;
  background-image: radial-gradient(circle, rgba(3, 176, 177, 0.75) 1.4px, transparent 1.5px);
  background-size: 12px 12px;
}

.my-account-header .page-title-inner {
  max-width: 1320px;
}

.my-account-header h1 {
  margin: 0 !important;
  color: var(--keyshu-text) !important;
  font-size: 30px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  letter-spacing: 0.4px;
}

/* =========================================================
   3. SIDEBAR TÀI KHOẢN
========================================================= */

.page-wrapper.my-account .large-3.col.col-border {
  padding: 0 !important;
  border: 1px solid rgba(225, 232, 235, 0.95) !important;
  border-radius: 14px;
  background: #ffffff;
  box-shadow:
    0 12px 30px rgba(32, 78, 86, 0.10),
    0 3px 10px rgba(32, 78, 86, 0.04);
  overflow: hidden;
}

.page-wrapper.my-account .large-3.col.col-border::before {
  display: none !important;
}

/* =========================================================
   4. THÔNG TIN USER TRÊN SIDEBAR
========================================================= */

.account-user.circle {
  padding: 28px 22px 22px !important;
  margin: 0 !important;
  text-align: center;
  border-bottom: 1px solid var(--keyshu-border);
}

.account-user.circle .image {
  display: block !important;
  width: 88px;
  height: 88px;
  margin: 0 auto 14px !important;
  padding: 5px;
  border-radius: 50%;
  border: 1.5px solid rgba(3, 176, 177, 0.75);
  background: #ffffff;
}

.account-user.circle .image img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  border-radius: 50%;
  object-fit: cover;
}

.account-user.circle .user-name {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--keyshu-text-soft);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.account-user.circle .user-id {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 26px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(3, 176, 177, 0.11);
  color: var(--keyshu-primary);
  font-size: 14px;
  font-style: normal;
  font-weight: 800;
  opacity: 1 !important;
}

/* =========================================================
   5. MENU TÀI KHOẢN SIDEBAR
========================================================= */

.woocommerce-MyAccount-navigation {
  padding: 18px 14px 28px;
}

.woocommerce-MyAccount-navigation ul.account-nav {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  list-style: none !important;
}

.woocommerce-MyAccount-navigation ul.account-nav li {
  position: relative;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  list-style: none !important;
}

.woocommerce-MyAccount-navigation ul.account-nav li a {
  position: relative !important;
  min-height: 50px;
  padding: 0 14px 0 54px !important;
  display: flex !important;
  align-items: center;
  border-radius: 10px;
  color: var(--keyshu-text-soft) !important;
  font-size: 16px !important;
  line-height: 1.3;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  transition:
    color 0.22s ease,
    background-color 0.22s ease,
    box-shadow 0.22s ease;
}

/* Line ngăn cách */
.woocommerce-MyAccount-navigation ul.account-nav li:not(:last-child) a::after {
  content: "";
  position: absolute;
  left: 54px;
  right: 14px;
  bottom: 0;
  height: 1px;
  background: var(--keyshu-border);
}

/* =========================================================
   6. ICON MENU SIDEBAR
   Quan trọng:
   - Icon thường: màu xám
   - Hover: icon vẫn màu xám, không đổi màu
   - Active: icon màu chính
========================================================= */

.woocommerce-MyAccount-navigation ul.account-nav li a::before {
  position: absolute !important;
  left: 18px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  width: 22px !important;
  height: 22px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  opacity: 1 !important;
  visibility: visible !important;

  color: var(--keyshu-text-soft) !important;
  background: transparent !important;

  font-family: "Font Awesome 7 Free", "Font Awesome 6 Free" !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  line-height: 1 !important;

  border: 0 !important;
  box-shadow: none !important;
  transition: none !important;
}

/* Gán icon từng menu */
.woocommerce-MyAccount-navigation-link--dashboard > a::before {
  content: "\f015" !important;
}

.woocommerce-MyAccount-navigation-link--orders > a::before {
  content: "\f187" !important;
}

.woocommerce-MyAccount-navigation-link--downloads > a::before {
  content: "\f0ed" !important;
}

.woocommerce-MyAccount-navigation-link--edit-address > a::before {
  content: "\f3c5" !important;
}

.woocommerce-MyAccount-navigation-link--edit-account > a::before {
  content: "\f007" !important;
}

.wishlist-account-element > a::before {
  content: "\f004" !important;
}

.woocommerce-MyAccount-navigation-link--customer-logout > a::before {
  content: "\f2f5" !important;
}

/* Hover menu: đổi chữ + nền + viền trái, icon KHÔNG đổi màu */
.woocommerce-MyAccount-navigation ul.account-nav li:not(.active):not(.is-active) > a:hover {
  color: var(--keyshu-primary) !important;
  background: rgba(3, 176, 177, 0.10) !important;
  font-weight: 800 !important;
  box-shadow: inset 3px 0 0 var(--keyshu-primary) !important;
}

/* Hover menu: icon chuyển màu xanh giống active */
.woocommerce-MyAccount-navigation ul.account-nav li:not(.active):not(.is-active) > a:hover::before {
  color: var(--keyshu-primary) !important;
}
/* Active menu: chữ + icon màu chính */
.woocommerce-MyAccount-navigation ul.account-nav li.active > a,
.woocommerce-MyAccount-navigation ul.account-nav li.is-active > a {
  color: var(--keyshu-primary) !important;
  background: rgba(3, 176, 177, 0.10) !important;
  font-weight: 800 !important;
  box-shadow: inset 3px 0 0 var(--keyshu-primary) !important;
}

.woocommerce-MyAccount-navigation ul.account-nav li.active > a::before,
.woocommerce-MyAccount-navigation ul.account-nav li.is-active > a::before {
  color: var(--keyshu-primary) !important;
}

/* Active khi hover: icon vẫn màu chính */
.woocommerce-MyAccount-navigation ul.account-nav li.active > a:hover::before,
.woocommerce-MyAccount-navigation ul.account-nav li.is-active > a:hover::before {
  color: var(--keyshu-primary) !important;
}

/* Nút thoát: hover chữ đỏ, icon vẫn không đổi màu */
.woocommerce-MyAccount-navigation-link--customer-logout > a {
  margin-top: 8px;
}

.woocommerce-MyAccount-navigation-link--customer-logout:not(.active):not(.is-active) > a:hover {
  color: var(--keyshu-danger) !important;
  background: rgba(255, 45, 27, 0.08) !important;
  box-shadow: inset 3px 0 0 var(--keyshu-danger) !important;
}

.woocommerce-MyAccount-navigation-link--customer-logout:not(.active):not(.is-active) > a:hover::before {
  color: var(--keyshu-text-soft) !important;
}

/* =========================================================
   7. KHUNG NỘI DUNG WISHLIST BÊN PHẢI
========================================================= */

.page-wrapper.my-account .large-9.col {
  min-width: 0;
}

#yith-wcwl-form {
  padding: 30px 28px 28px;
  background: #ffffff;
  border: 1px solid rgba(225, 232, 235, 0.95);
  border-radius: 14px;
  box-shadow:
    0 12px 30px rgba(32, 78, 86, 0.08),
    0 3px 10px rgba(32, 78, 86, 0.035);
}

.wishlist-title-container {
  margin: 0 0 20px !important;
}

.wishlist-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.wishlist-title h2 {
  margin: 0 !important;
  color: var(--keyshu-text) !important;
  font-size: 30px !important;
  line-height: 1.2;
  font-weight: 800 !important;
  text-transform: none;
}

.wishlist-title .show-title-form {
  display: none !important;
}

/* =========================================================
   8. BẢNG WISHLIST DESKTOP
========================================================= */

.wishlist_table {
  width: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 12px !important;
  background: transparent !important;
}

.wishlist_table thead th {
  padding: 0 14px 14px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--keyshu-border) !important;
  background: transparent !important;
  color: #4f5e68 !important;
  font-size: 13px !important;
  line-height: 1.2;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.wishlist_table thead th.product-remove,
.wishlist_table thead th.product-thumbnail {
  width: 64px;
}

.wishlist_table thead th.product-name {
  width: 34%;
}

.wishlist_table thead th.product-price {
  width: 22%;
}

.wishlist_table thead th.product-stock-status {
  width: 16%;
}

.wishlist_table thead th.product-add-to-cart {
  width: 170px;
}

.wishlist_table tbody tr {
  background: #ffffff !important;
  border-radius: 12px;
  box-shadow: none;
  outline: 1px solid var(--keyshu-border);
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    outline-color 0.22s ease;
}

.wishlist_table tbody tr:hover {
  transform: translateY(-2px);
  outline-color: rgba(3, 176, 177, 0.28);
  box-shadow: 0 10px 24px rgba(32, 78, 86, 0.08);
}

.wishlist_table tbody td {
  padding: 16px 14px !important;
  border: 0 !important;
  vertical-align: middle !important;
  background: transparent !important;
}

.wishlist_table tbody td:first-child {
  border-radius: 12px 0 0 12px;
}

.wishlist_table tbody td:last-child {
  border-radius: 0 12px 12px 0;
}

/* =========================================================
   9. NÚT XÓA SẢN PHẨM - ICON THÙNG RÁC FONT AWESOME F2ED
========================================================= */

/* Ô chứa nút xoá */
.wishlist_table .product-remove {
  text-align: center !important;
}

/* Nút xoá desktop + mobile */
.wishlist_table .product-remove a.remove,
.wishlist_table .product-remove a.remove_from_wishlist {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;

  margin: 0 auto !important;
  padding: 0 !important;

  border-radius: 50% !important;
  border: 1.5px solid #cbd5dc !important;
  background: #ffffff !important;
  color: #5d6b75 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-size: 0 !important;
  line-height: 1 !important;
  font-weight: 400 !important;

  text-decoration: none !important;
  box-shadow: 0 4px 10px rgba(32, 78, 86, 0.08) !important;

  transition:
    color 0.22s ease,
    border-color 0.22s ease,
    background-color 0.22s ease,
    transform 0.22s ease !important;
}

/* Đổi dấu X thành icon thùng rác Font Awesome */
.wishlist_table .product-remove a.remove::before,
.wishlist_table .product-remove a.remove_from_wishlist::before {
  content: "\f2ed" !important;

  font-family: "Font Awesome 7 Free", "Font Awesome 6 Free" !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1 !important;

  color: #5d6b75 !important;
}

/* Xoá pseudo thừa nếu theme/plugin có thêm */
.wishlist_table .product-remove a.remove::after,
.wishlist_table .product-remove a.remove_from_wishlist::after {
  display: none !important;
  content: none !important;
}

/* Hover */
.wishlist_table .product-remove a.remove:hover,
.wishlist_table .product-remove a.remove_from_wishlist:hover {
  border-color: var(--keyshu-danger) !important;
  background: rgba(255, 45, 27, 0.06) !important;
  color: var(--keyshu-danger) !important;
  transform: scale(1.04);
}

.wishlist_table .product-remove a.remove:hover::before,
.wishlist_table .product-remove a.remove_from_wishlist:hover::before {
  color: var(--keyshu-danger) !important;
}

/* =========================================================
   10. ẢNH SẢN PHẨM
========================================================= */

.wishlist_table .product-thumbnail {
  width: 92px;
}

.wishlist_table .product-thumbnail a {
  display: block;
  width: 82px;
  height: 82px;
  overflow: hidden;
  border-radius: 9px;
  background: #f8fafb;
  border: 1px solid var(--keyshu-border);
}

.wishlist_table .product-thumbnail img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 9px;
  transition: transform 0.25s ease;
}

.wishlist_table tbody tr:hover .product-thumbnail img {
  transform: scale(1.04);
}

/* =========================================================
   11. TÊN SẢN PHẨM
========================================================= */

.wishlist_table .product-name a {
  color: #163943 !important;
  font-size: 15.5px !important;
  line-height: 1.55;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: color 0.22s ease;
}

.wishlist_table .product-name a:hover {
  color: var(--keyshu-primary) !important;
}

/* =========================================================
   12. GIÁ SẢN PHẨM
========================================================= */

.wishlist_table .product-price {
  white-space: nowrap;
}

.wishlist_table .product-price del {
  color: #7d8992 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  opacity: 1 !important;
  margin-right: 10px;
}

.wishlist_table .product-price del .amount {
  color: #7d8992 !important;
}

.wishlist_table .product-price ins {
  text-decoration: none !important;
}

.wishlist_table .product-price ins .amount {
  color: #ff2d1b !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

/* =========================================================
   13. TRẠNG THÁI KHO
========================================================= */

.wishlist_table .product-stock-status {
  text-align: left;
}

.wishlist_table .wishlist-in-stock {
  min-width: 92px;
  height: 34px;
  padding: 0 14px;
  border-radius: 6px;
  background: rgba(3, 176, 177, 0.10);
  color: #007f83;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.wishlist_table .wishlist-in-stock::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--keyshu-primary);
}

/* =========================================================
   14. NÚT THÊM GIỎ HÀNG
========================================================= */

.wishlist_table .product-add-to-cart {
  text-align: right;
}

.wishlist_table .product-add-to-cart a.add_to_cart_button,
.wishlist_table .product-add-to-cart a.add_to_cart,
.wishlist_table .product-add-to-cart a.button {
  position: relative;
  min-width: 150px;
  height: 40px !important;
  padding: 0 18px 0 35px !important;
  border: none !important;
  border-radius: 7px !important;
  background: linear-gradient(135deg, var(--keyshu-cart-red) 0%, var(--keyshu-cart-red-dark) 100%) !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  box-shadow: 0 6px 15px rgba(198, 40, 40, 0.22);
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    background 0.22s ease;
}

.wishlist_table .product-add-to-cart a.add_to_cart_button::before,
.wishlist_table .product-add-to-cart a.add_to_cart::before,
.wishlist_table .product-add-to-cart a.button::before {
  content: "\f217";
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-family: "Font Awesome 7 Free", "Font Awesome 6 Free";
  font-size: 14px;
  font-weight: 900;
  color: #ffffff;
}

.wishlist_table .product-add-to-cart a.add_to_cart_button:hover,
.wishlist_table .product-add-to-cart a.add_to_cart:hover,
.wishlist_table .product-add-to-cart a.button:hover {
  background: linear-gradient(135deg, #d32f2f 0%, var(--keyshu-cart-red-hover) 100%) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(183, 28, 28, 0.30);
}

/* =========================================================
   15. SHARE SOCIAL
========================================================= */

.yith_wcwl_wishlist_footer {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--keyshu-border);
}

.yith-wcwl-share {
  display: flex !important;
  align-items: center;
  gap: 12px;
}

.yith-wcwl-share-title {
  margin: 0 10px 0 0 !important;
  color: var(--keyshu-text-soft);
  font-size: 15px;
  font-weight: 700;
}

.yith-wcwl-share a.button.circle {
  width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  border-radius: 50% !important;
  border: 1px solid var(--keyshu-border) !important;
  background: #ffffff !important;
  color: var(--keyshu-text-soft) !important;
  box-shadow: 0 6px 14px rgba(32, 78, 86, 0.08);
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  transition: all 0.22s ease;
}

.yith-wcwl-share a.button.circle:hover {
  transform: translateY(-2px);
  border-color: rgba(3, 176, 177, 0.35) !important;
  color: var(--keyshu-primary) !important;
}

/* =========================================================
   16. TABLET RESPONSIVE
========================================================= */

@media (max-width: 1024px) {
  .page-wrapper.my-account .row.vertical-tabs {
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 20px;
  }

  #yith-wcwl-form {
    padding: 24px 20px;
  }

  .wishlist-title h2 {
    font-size: 26px !important;
  }

  .wishlist_table thead th {
    font-size: 12px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .wishlist_table tbody td {
    padding: 14px 10px !important;
  }

  .wishlist_table .product-thumbnail a {
    width: 72px;
    height: 72px;
  }

  .wishlist_table .product-name a {
    font-size: 14px !important;
  }

  .wishlist_table .product-price del {
    display: block;
    margin-right: 0;
    margin-bottom: 4px;
  }

  .wishlist_table .product-price ins .amount {
    font-size: 16px !important;
  }

  .wishlist_table .product-add-to-cart a.add_to_cart_button,
  .wishlist_table .product-add-to-cart a.add_to_cart,
  .wishlist_table .product-add-to-cart a.button {
    min-width: 132px;
    height: 38px !important;
    padding-left: 38px !important;
    padding-right: 14px !important;
    font-size: 12px !important;
  }
}

/* =========================================================
   17. MOBILE RESPONSIVE
========================================================= */

@media (max-width: 768px) {
  .my-account-header.page-title {
    padding: 22px 0;
  }

  .my-account-header h1 {
    font-size: 24px !important;
  }

  .page-wrapper.my-account {
    padding: 22px 0 38px;
  }

  .page-wrapper.my-account .row.vertical-tabs {
    display: block;
  }

  .page-wrapper.my-account .large-3.col.col-border {
    margin-bottom: 20px;
  }

  .account-user.circle {
    padding: 22px 18px 18px !important;
  }

  .account-user.circle .image {
    width: 76px;
    height: 76px;
  }

  .woocommerce-MyAccount-navigation {
    padding: 14px 12px 18px;
  }

  .woocommerce-MyAccount-navigation ul.account-nav li a {
    min-height: 46px;
    font-size: 14px !important;
  }

  #yith-wcwl-form {
    padding: 22px 16px 20px;
    border-radius: 12px;
  }

  .wishlist-title h2 {
    font-size: 24px !important;
  }

  .wishlist_table thead {
    display: none !important;
  }

  .wishlist_table,
  .wishlist_table tbody,
  .wishlist_table tr,
  .wishlist_table td {
    display: block !important;
    width: 100% !important;
  }

  .wishlist_table {
    border-spacing: 0 !important;
  }

  .wishlist_table tbody tr {
    position: relative;
    margin-bottom: 14px;
    padding: 16px;
    display: grid !important;
    grid-template-columns: 74px 1fr;
    gap: 12px 14px;
    border-radius: 12px;
    outline: 1px solid var(--keyshu-border);
  }

  .wishlist_table tbody td {
    padding: 0 !important;
    border-radius: 0 !important;
  }

  /* Sửa vị trí nút xoá sản phẩm trên mobile */
body.woocommerce-account .wishlist_table tbody tr,
body.woocommerce-wishlist .wishlist_table tbody tr {
  position: relative !important;
}

body.woocommerce-account .wishlist_table .product-remove,
body.woocommerce-wishlist .wishlist_table .product-remove {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  left: auto !important;
  bottom: auto !important;

  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  margin: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  z-index: 20 !important;
  transform: none !important;
  background: transparent !important;
}

/* Chừa khoảng trống bên phải để tên sản phẩm không bị nút xoá đè */
body.woocommerce-account .wishlist_table .product-name,
body.woocommerce-wishlist .wishlist_table .product-name {
  padding-right: 46px !important;
}

/* Style lại nút xoá */
body.woocommerce-account .wishlist_table .product-remove a.remove,
body.woocommerce-account .wishlist_table .product-remove a.remove_from_wishlist,
body.woocommerce-wishlist .wishlist_table .product-remove a.remove,
body.woocommerce-wishlist .wishlist_table .product-remove a.remove_from_wishlist {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;

  margin: 0 !important;
  padding: 0 !important;

  border-radius: 50% !important;
  border: 1px solid #cbd5dc !important;
  background: #ffffff !important;
  color: #5d6b75 !important;

  font-size: 20px !important;
  line-height: 26px !important;
  font-weight: 400 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  box-shadow: 0 4px 10px rgba(32, 78, 86, 0.08) !important;
  text-decoration: none !important;
}

 .wishlist_table .product-remove a.remove,
.wishlist_table .product-remove a.remove_from_wishlist {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  font-size: 0 !important;
  line-height: 1 !important;
}

.wishlist_table .product-remove a.remove::before,
.wishlist_table .product-remove a.remove_from_wishlist::before {
  content: "\f2ed" !important;
  font-family: "Font Awesome 7 Free", "Font Awesome 6 Free" !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}
  .wishlist_table .product-thumbnail {
    grid-column: 1;
    grid-row: 1 / span 3;
  }

  .wishlist_table .product-thumbnail a {
    width: 74px;
    height: 74px;
  }

  .wishlist_table .product-name {
    grid-column: 2;
    padding-right: 36px !important;
  }

  .wishlist_table .product-name a {
    font-size: 14.5px !important;
    line-height: 1.45;
  }

  .wishlist_table .product-price {
    grid-column: 2;
    white-space: normal;
  }

  .wishlist_table .product-price del {
    display: inline-block;
    margin-right: 8px;
    margin-bottom: 0;
    font-size: 13px !important;
  }

  .wishlist_table .product-price ins .amount {
    font-size: 16px !important;
  }

  .wishlist_table .product-stock-status {
    grid-column: 2;
  }

  .wishlist_table .wishlist-in-stock {
    min-width: auto;
    height: 30px;
    padding: 0 11px;
    font-size: 12px;
  }

  .wishlist_table .product-add-to-cart {
    grid-column: 1 / -1;
    text-align: left;
    margin-top: 4px;
  }

  .wishlist_table .product-add-to-cart a.add_to_cart_button,
  .wishlist_table .product-add-to-cart a.add_to_cart,
  .wishlist_table .product-add-to-cart a.button {
    width: 100%;
    min-width: 100%;
    height: 42px !important;
    padding-left: 42px !important;
    justify-content: center;
  }

  .wishlist_table .product-add-to-cart a.add_to_cart_button::before,
  .wishlist_table .product-add-to-cart a.add_to_cart::before,
  .wishlist_table .product-add-to-cart a.button::before {
    left: calc(50% - 74px);
  }

  .yith-wcwl-share {
    flex-wrap: wrap;
    gap: 10px;
  }

  .yith-wcwl-share-title {
    width: 100%;
    margin-bottom: 4px !important;
  }
}

/* =========================================================
   18. MOBILE NHỎ
========================================================= */

@media (max-width: 480px) {
  .page-wrapper.my-account .container {
    padding-left: 14px;
    padding-right: 14px;
  }

  .my-account-header .page-title-inner {
    padding-left: 18px;
    padding-right: 18px;
  }

  #yith-wcwl-form {
    padding: 20px 14px;
  }

  .wishlist-title h2 {
    font-size: 22px !important;
  }

  .wishlist_table tbody tr {
    grid-template-columns: 66px 1fr;
    gap: 10px 12px;
    padding: 14px;
  }

  .wishlist_table .product-thumbnail a {
    width: 66px;
    height: 66px;
  }

  .wishlist_table .product-name a {
    font-size: 14px !important;
  }

  .wishlist_table .product-price del {
    display: block;
    margin-bottom: 4px;
  }

  .wishlist_table .product-add-to-cart a.add_to_cart_button::before,
  .wishlist_table .product-add-to-cart a.add_to_cart::before,
  .wishlist_table .product-add-to-cart a.button::before {
    left: calc(50% - 72px);
  }
}

/* =========================================================
   KEYSHU - MY ACCOUNT DASHBOARD (THEO ẢNH MẪU)
   - Viết cho HTML WooCommerce hiện tại
   - Mobile first
   - Sidebar giữ cùng ngôn ngữ thiết kế trang Wishlist
========================================================= */

body.woocommerce-account {
  --ka-bg: #f6f8fa;
  --ka-card: #ffffff;
  --ka-border: #dfe7eb;
  --ka-text: #2c3240;
  --ka-soft: #697484;
  --ka-primary: #03b0b1;
  --ka-primary-soft: #e7f9f9;
  --ka-danger: #ff4b4b;
  background: var(--ka-bg);
}

/* 1) Header account */
body.woocommerce-account .my-account-header.page-title {
  padding: 18px 0;
  background:
    radial-gradient(circle at 84% 15%, rgba(3, 176, 177, 0.14) 0 74px, transparent 75px),
    linear-gradient(130deg, #f7fcfd 0%, #eef7f8 58%, #e7f1f4 100%);
  border-bottom: 1px solid rgba(3, 176, 177, 0.14);
}

body.woocommerce-account .my-account-header .page-title-inner {
  padding-left: 14px;
  padding-right: 14px;
}

body.woocommerce-account .my-account-header h1 {
  font-size: 32px !important;
  color: #202532 !important;
  letter-spacing: 0.5px;
}

body.woocommerce-account .my-account-header small {
  display: block;
  margin-top: 6px;
  color: #6b7280;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.1px;
}

/* 2) Layout tổng thể (mobile first) */
body.woocommerce-account .page-wrapper.my-account {
  padding: 16px 0 30px;
  background: transparent;
}

body.woocommerce-account .page-wrapper.my-account .container {
  padding-left: 14px;
  padding-right: 14px;
}

body.woocommerce-account .page-wrapper.my-account .row.vertical-tabs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

body.woocommerce-account .page-wrapper.my-account .large-3.col.col-border,
body.woocommerce-account .page-wrapper.my-account .large-9.col {
  max-width: 100% !important;
  width: 100% !important;
  flex: 0 0 100% !important;
}

/* 3) Sidebar đồng bộ trang Wishlist */
body.woocommerce-account .page-wrapper.my-account .large-3.col.col-border {
  border-radius: 14px;
  border: 1px solid var(--ka-border) !important;
  background: var(--ka-card);
  box-shadow: 0 8px 20px rgba(32, 78, 86, 0.08);
}

body.woocommerce-account .account-user.circle {
  padding: 22px 16px 16px !important;
  border-bottom: 1px solid var(--ka-border);
}

body.woocommerce-account .account-user.circle .image {
  width: 84px;
  height: 84px;
  margin-bottom: 12px !important;
}

body.woocommerce-account .account-user.circle .user-name {
  color: var(--ka-text);
  font-size: 17px;
  font-weight: 700;
}

body.woocommerce-account .woocommerce-MyAccount-navigation {
  padding: 12px 10px 16px;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul.account-nav li a {
  min-height: 48px;
  font-size: 16px !important;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul.account-nav li.active > a,
body.woocommerce-account .woocommerce-MyAccount-navigation ul.account-nav li.is-active > a {
  background: var(--ka-primary-soft) !important;
}

/* 4) Khối content bên phải */
body.woocommerce-account .woocommerce,
body.woocommerce-account .woocommerce-MyAccount-content {
  min-width: 0;
}

body.woocommerce-account .woocommerce-MyAccount-content {
  display: grid;
  gap: 12px;
}

/* Card chào user */
body.woocommerce-account .woocommerce-MyAccount-content > p:first-of-type {
  position: relative;
  margin: 0;
  padding: 16px 14px 16px 48px;
  border-radius: 12px;
  border: 1px solid var(--ka-border);
  background: var(--ka-card);
  color: var(--ka-text);
  box-shadow: 0 6px 14px rgba(32, 78, 86, 0.05);
  font-size: 18px;
  line-height: 1.6;
}

body.woocommerce-account .woocommerce-MyAccount-content > p:first-of-type::before {
  content: "👋";
  position: absolute;
  left: 14px;
  top: 14px;
  font-size: 22px;
  line-height: 1;
}

body.woocommerce-account .woocommerce-MyAccount-content > p:first-of-type strong {
  color: #1f2634;
}

/* Card mô tả */
body.woocommerce-account .woocommerce-MyAccount-content > p:nth-of-type(2) {
  margin: 0;
  padding: 14px;
  border-radius: 12px;
  border: 1px dashed rgba(3, 176, 177, 0.34);
  background: #fcffff;
  color: var(--ka-soft);
  font-size: 16px;
  line-height: 1.7;
}

body.woocommerce-account .woocommerce-MyAccount-content a {
  color: var(--ka-primary);
  font-weight: 700;
}

/* 5) Quick links: chuyển dashboard links thành card như ảnh */
body.woocommerce-account .woocommerce-MyAccount-content .dashboard-links {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

/* Ẩn card "Trang tài khoản" ở khu quick links để tránh lặp sidebar */
body.woocommerce-account .woocommerce-MyAccount-content
.dashboard-links .woocommerce-MyAccount-navigation-link--dashboard {
  display: none;
}

body.woocommerce-account .woocommerce-MyAccount-content .dashboard-links li a {
  position: relative;
  min-height: 70px;
  display: flex;
  align-items: center;
  padding: 14px 44px 14px 64px;
  border: 1px solid var(--ka-border);
  border-radius: 12px;
  background: var(--ka-card);
  color: var(--ka-text);
  text-decoration: none;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  transition:
    border-color 0.22s ease,
    transform 0.22s ease,
    box-shadow 0.22s ease;
}

/* Icon tròn bên trái card */
body.woocommerce-account .woocommerce-MyAccount-content .dashboard-links li a::before {
  content: "\f111";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #e8f7f7;
  color: var(--ka-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Font Awesome 7 Free", "Font Awesome 6 Free";
  font-size: 15px;
  font-weight: 900;
}

/* Mũi tên bên phải card */
body.woocommerce-account .woocommerce-MyAccount-content .dashboard-links li a::after {
  content: "\f105";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-family: "Font Awesome 7 Free", "Font Awesome 6 Free";
  font-size: 14px;
  font-weight: 900;
  color: var(--ka-primary);
}

/* Icon theo endpoint */
body.woocommerce-account .dashboard-links .woocommerce-MyAccount-navigation-link--orders a::before {
  content: "\f07a";
}

body.woocommerce-account .dashboard-links .woocommerce-MyAccount-navigation-link--downloads a::before {
  content: "\f019";
}

body.woocommerce-account .dashboard-links .woocommerce-MyAccount-navigation-link--edit-address a::before {
  content: "\f3c5";
}

body.woocommerce-account .dashboard-links .woocommerce-MyAccount-navigation-link--edit-account a::before {
  content: "\f007";
}

body.woocommerce-account .dashboard-links .wishlist-account-element a::before {
  content: "\f004";
}

/* Hover card */
body.woocommerce-account .woocommerce-MyAccount-content .dashboard-links li a:hover {
  border-color: rgba(3, 176, 177, 0.35);
  box-shadow: 0 8px 18px rgba(3, 176, 177, 0.12);
  transform: translateY(-1px);
}

/* 6) Tablet */
@media (min-width: 768px) {
  body.woocommerce-account .page-wrapper.my-account {
    padding: 20px 0 38px;
  }

  body.woocommerce-account .page-wrapper.my-account .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  body.woocommerce-account .woocommerce-MyAccount-content .dashboard-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

/* 7) Desktop */
@media (min-width: 1100px) {
  body.woocommerce-account .my-account-header.page-title {
    padding: 28px 0 24px;
  }

  body.woocommerce-account .my-account-header .page-title-inner {
    padding-left: 24px;
    padding-right: 24px;
  }

  body.woocommerce-account .my-account-header h1 {
    font-size: 48px !important;
  }

  body.woocommerce-account .page-wrapper.my-account {
    padding: 18px 0 40px;
  }

  body.woocommerce-account .page-wrapper.my-account .container {
    max-width: 1320px;
    padding-left: 16px;
    padding-right: 16px;
  }

  body.woocommerce-account .page-wrapper.my-account .row.vertical-tabs {
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 16px;
  }

  /* Sticky sidebar giống dashboard mẫu */
  body.woocommerce-account .page-wrapper.my-account .large-3.col.col-border {
    position: sticky;
    top: 102px;
    align-self: start;
  }

  body.woocommerce-account .woocommerce-MyAccount-content > p:first-of-type {
    padding: 20px 18px 20px 56px;
    border-radius: 14px;
    font-size: 20px;
    line-height: 1.5;
  }

  body.woocommerce-account .woocommerce-MyAccount-content > p:first-of-type::before {
    left: 18px;
    top: 18px;
    font-size: 26px;
  }

  body.woocommerce-account .woocommerce-MyAccount-content > p:nth-of-type(2) {
    padding: 16px 18px;
    border-radius: 14px;
    font-size: 17px;
    line-height: 1.7;
  }

  body.woocommerce-account .woocommerce-MyAccount-content .dashboard-links {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  body.woocommerce-account .woocommerce-MyAccount-content .dashboard-links li a {
    min-height: 88px;
    font-size: 18px;
    border-radius: 14px;
    padding: 16px 50px 16px 82px;
  }

  body.woocommerce-account .woocommerce-MyAccount-content .dashboard-links li a::before {
    left: 18px;
    width: 46px;
    height: 46px;
    font-size: 19px;
  }

  body.woocommerce-account .woocommerce-MyAccount-content .dashboard-links li a::after {
    right: 18px;
    font-size: 16px;
  }
}

/* =========================================================
   KEYSHU - CUSTOM MY ACCOUNT DASHBOARD (PHP TEMPLATE)
   File template: woocommerce/myaccount/dashboard.php
   Mục tiêu: khớp layout ảnh mẫu, mobile first
========================================================= */

/* 1) Wrapper tổng template mới */
body.woocommerce-account .woocommerce-MyAccount-content {
  display: block;
}

body.woocommerce-account .keyshu-account-dashboard {
  color: #24323f;
}

body.woocommerce-account .keyshu-account-dashboard__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

body.woocommerce-account .keyshu-account-dashboard__main,
body.woocommerce-account .keyshu-account-dashboard__aside {
  display: grid;
  gap: 12px;
  min-width: 0;
}

/* 2) Card cơ bản */
body.woocommerce-account .keyshu-dashboard-card {
  border: 1px solid #dfe8ec;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 6px 16px rgba(34, 70, 82, 0.06);
}

body.woocommerce-account .keyshu-card-title h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: #24323f;
  font-size: 19px;
  line-height: 1.35;
  font-weight: 800;
}

body.woocommerce-account .keyshu-card-title h3 i {
  color: #03b0b1;
}

/* 3) Card xin chào */
body.woocommerce-account .keyshu-dashboard-card--welcome {
  padding: 16px 14px;
}

body.woocommerce-account .keyshu-dashboard-card--welcome h2 {
  margin: 0 0 8px;
  color: #24323f;
  font-size: 22px;
  line-height: 1.35;
  font-weight: 800;
}

body.woocommerce-account .keyshu-dashboard-card--welcome p {
  margin: 0;
  color: #5f6f7d;
  font-size: 15px;
  line-height: 1.7;
}

/* 4) Quick actions */
body.woocommerce-account .keyshu-dashboard-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

body.woocommerce-account .keyshu-action-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 76px;
  padding: 12px 40px 12px 12px;
  border: 1px solid #dfe8ec;
  border-radius: 12px;
  background: #ffffff;
  text-decoration: none;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

body.woocommerce-account .keyshu-action-card__icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  background: #e6f8f8;
  color: #03b0b1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

body.woocommerce-account .keyshu-action-card__content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

body.woocommerce-account .keyshu-action-card__content strong {
  color: #242f3d;
  font-size: 17px;
  line-height: 1.3;
  font-weight: 800;
}

body.woocommerce-account .keyshu-action-card__content small {
  color: #677586;
  font-size: 14px;
  line-height: 1.5;
}

body.woocommerce-account .keyshu-action-card__arrow {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #03b0b1;
  font-size: 14px;
}

body.woocommerce-account .keyshu-action-card:hover {
  transform: translateY(-2px);
  border-color: rgba(3, 176, 177, 0.35);
  box-shadow: 0 10px 20px rgba(3, 176, 177, 0.11);
}

/* 5) Activity card */
body.woocommerce-account .keyshu-dashboard-card--activity {
  overflow: hidden;
}

body.woocommerce-account .keyshu-dashboard-card--activity .keyshu-card-title {
  padding: 16px 14px 12px;
  border-bottom: 1px solid #e6edf1;
}

body.woocommerce-account .keyshu-activity-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

body.woocommerce-account .keyshu-activity-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid #eef3f6;
}

body.woocommerce-account .keyshu-activity-item:first-child {
  border-top: 0;
}

body.woocommerce-account .keyshu-activity-item__left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

body.woocommerce-account .keyshu-activity-thumb {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #dfe8ec;
  background: #f7fbfb;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.woocommerce-account .keyshu-activity-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.woocommerce-account .keyshu-activity-thumb--icon {
  color: #03b0b1;
  font-size: 18px;
}

body.woocommerce-account .keyshu-activity-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

body.woocommerce-account .keyshu-activity-meta strong {
  color: #253140;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 800;
}

body.woocommerce-account .keyshu-activity-meta small {
  color: #6b7787;
  font-size: 13px;
  line-height: 1.4;
}

body.woocommerce-account .keyshu-activity-status {
  width: fit-content;
  min-width: 90px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.woocommerce-account .keyshu-activity-item.is-delivered .keyshu-activity-status {
  background: #e8f8e8;
  color: #2b9053;
}

body.woocommerce-account .keyshu-activity-item.is-processing .keyshu-activity-status {
  background: #fff0df;
  color: #d87411;
}

body.woocommerce-account .keyshu-activity-item.is-downloaded .keyshu-activity-status {
  background: #e7f3ff;
  color: #1f6fb2;
}

body.woocommerce-account .keyshu-activity-item.is-failed .keyshu-activity-status,
body.woocommerce-account .keyshu-activity-item.is-default .keyshu-activity-status {
  background: #eef4f8;
  color: #5b6d7f;
}

body.woocommerce-account .keyshu-activity-total {
  color: #2f3d4c;
  font-size: 16px;
  font-weight: 700;
}

body.woocommerce-account .keyshu-activity-link {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #03b0b1;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
}

body.woocommerce-account .keyshu-empty-state {
  margin: 0;
  padding: 12px 14px 2px;
  color: #647486;
  font-size: 15px;
}

body.woocommerce-account .keyshu-view-all-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 14px 14px;
  color: #03b0b1;
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
}

/* 6) Card thông tin cá nhân */
body.woocommerce-account .keyshu-dashboard-card--info {
  padding: 16px 14px;
}

body.woocommerce-account .keyshu-profile-list {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

body.woocommerce-account .keyshu-profile-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #edf2f5;
}

body.woocommerce-account .keyshu-profile-list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

body.woocommerce-account .keyshu-profile-list .label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #617082;
  font-size: 14px;
}

body.woocommerce-account .keyshu-profile-list .label i {
  color: #8c99a9;
}

body.woocommerce-account .keyshu-profile-list .value {
  color: #2a3444;
  font-size: 14px;
  font-weight: 700;
  text-align: right;
}

body.woocommerce-account .keyshu-profile-list .value em {
  min-width: 42px;
  height: 26px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(3, 176, 177, 0.12);
  color: #03b0b1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
}

body.woocommerce-account .keyshu-outline-btn {
  width: 100%;
  min-height: 44px;
  margin-top: 14px;
  border: 1.5px solid rgba(3, 176, 177, 0.72);
  border-radius: 9px;
  color: #068f90;
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* 7) Card ưu đãi */
body.woocommerce-account .keyshu-dashboard-card--promo {
  position: relative;
  overflow: hidden;
  min-height: 240px;
  padding: 16px 14px;
  background: linear-gradient(150deg, #effbfb 0%, #e0f5f4 56%, #d7efef 100%);
}

body.woocommerce-account .keyshu-dashboard-card--promo h3 {
  margin: 0 0 8px;
  color: #06656e;
  font-size: 24px;
  line-height: 1.25;
  font-weight: 800;
}

body.woocommerce-account .keyshu-dashboard-card--promo p {
  max-width: 78%;
  margin: 0;
  color: #4d6275;
  font-size: 15px;
  line-height: 1.65;
}

body.woocommerce-account .keyshu-primary-btn {
  margin-top: 14px;
  min-height: 42px;
  padding: 0 22px;
  border-radius: 8px;
  color: #ffffff;
  background: linear-gradient(135deg, #04b2b3 0%, #028f90 100%);
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Túi shopping giả lập bằng CSS */
body.woocommerce-account .keyshu-promo-bag {
  position: absolute;
  right: 12px;
  bottom: 10px;
  width: 74px;
  height: 90px;
  border-radius: 6px;
  background: linear-gradient(160deg, #3dd3d0 0%, #15a7a7 42%, #098f93 100%);
  box-shadow: 0 12px 20px rgba(4, 126, 130, 0.28);
}

body.woocommerce-account .keyshu-promo-bag::before,
body.woocommerce-account .keyshu-promo-bag::after {
  content: "";
  position: absolute;
  top: -12px;
  width: 20px;
  height: 18px;
  border: 2px solid #87c9cc;
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
}

body.woocommerce-account .keyshu-promo-bag::before {
  left: 12px;
}

body.woocommerce-account .keyshu-promo-bag::after {
  right: 12px;
}

/* 8) Hook mở rộng thêm từ plugin */
body.woocommerce-account .keyshu-account-dashboard > *:not(.keyshu-account-dashboard__layout) {
  margin-top: 12px;
}

/* 9) Tablet */
@media (min-width: 768px) {
  body.woocommerce-account .keyshu-dashboard-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.woocommerce-account .keyshu-dashboard-card--promo {
    min-height: 260px;
  }

  body.woocommerce-account .keyshu-promo-bag {
    width: 86px;
    height: 106px;
  }
}

/* 10) Desktop */
@media (min-width: 1100px) {
  body.woocommerce-account .keyshu-account-dashboard__layout {
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 12px;
  }

  body.woocommerce-account .keyshu-dashboard-card {
    border-radius: 14px;
  }

  body.woocommerce-account .keyshu-dashboard-card--welcome {
    padding: 16px;
  }

  body.woocommerce-account .keyshu-dashboard-card--welcome h2 {
    font-size: 20px;
  }

  body.woocommerce-account .keyshu-dashboard-card--welcome p {
    font-size: 16px;
  }

  body.woocommerce-account .keyshu-dashboard-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  body.woocommerce-account .keyshu-action-card {
    min-height: 82px;
    gap: 12px;
    padding: 12px 38px 12px 12px;
    border-radius: 12px;
  }

  body.woocommerce-account .keyshu-action-card__icon {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    font-size: 18px;
  }

  body.woocommerce-account .keyshu-action-card__content strong {
    font-size: 17px;
    line-height: 1.3;
  }

  body.woocommerce-account .keyshu-action-card__content small {
    font-size: 14px;
    line-height: 1.45;
  }

  body.woocommerce-account .keyshu-action-card__arrow {
    right: 12px;
    font-size: 13px;
  }

  body.woocommerce-account .keyshu-dashboard-card--activity .keyshu-card-title {
    padding: 14px 16px 10px;
  }

  body.woocommerce-account .keyshu-card-title h3 {
    font-size: 19px;
  }

  body.woocommerce-account .keyshu-activity-item {
    grid-template-columns: minmax(0, 1.5fr) 136px 156px auto;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
  }

  body.woocommerce-account .keyshu-activity-thumb {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }

  body.woocommerce-account .keyshu-activity-meta strong {
    font-size: 16px;
  }

  body.woocommerce-account .keyshu-activity-meta small {
    font-size: 13px;
  }

  body.woocommerce-account .keyshu-activity-status {
    min-width: 96px;
    height: 28px;
    font-size: 12px;
  }

  body.woocommerce-account .keyshu-activity-total {
    font-size: 16px;
    white-space: nowrap;
  }

  body.woocommerce-account .keyshu-activity-link {
    justify-self: end;
    font-size: 14px;
    white-space: nowrap;
  }

  body.woocommerce-account .keyshu-view-all-link {
    margin-left: 16px;
    margin-right: 16px;
    font-size: 16px;
  }

  body.woocommerce-account .keyshu-dashboard-card--info {
    padding: 14px;
  }

  body.woocommerce-account .keyshu-profile-list {
    gap: 10px;
    margin-top: 12px;
  }

  body.woocommerce-account .keyshu-profile-list li {
    padding-bottom: 10px;
  }

  body.woocommerce-account .keyshu-profile-list .label {
    font-size: 14px;
    gap: 8px;
  }

  body.woocommerce-account .keyshu-profile-list .value {
    font-size: 14px;
  }

  body.woocommerce-account .keyshu-profile-list .value em {
    min-width: 42px;
    height: 26px;
    font-size: 14px;
  }

  body.woocommerce-account .keyshu-outline-btn {
    min-height: 44px;
    margin-top: 12px;
    border-radius: 9px;
    font-size: 16px;
  }

  body.woocommerce-account .keyshu-dashboard-card--promo {
    min-height: 222px;
    padding: 16px 14px;
  }

  body.woocommerce-account .keyshu-dashboard-card--promo h3 {
    font-size: 18px;
  }

  body.woocommerce-account .keyshu-dashboard-card--promo p {
    max-width: 70%;
    font-size: 14px;
  }

  body.woocommerce-account .keyshu-primary-btn {
    min-height: 40px;
    margin-top: 12px;
    padding: 0 16px;
    border-radius: 8px;
    font-size: 15px;
  }

  body.woocommerce-account .keyshu-promo-bag {
    width: 76px;
    height: 92px;
    right: 12px;
    bottom: 10px;
    border-radius: 6px;
  }

  body.woocommerce-account .keyshu-promo-bag::before,
  body.woocommerce-account .keyshu-promo-bag::after {
    top: -12px;
    width: 20px;
    height: 18px;
  }

  body.woocommerce-account .keyshu-promo-bag::before {
    left: 12px;
  }

  body.woocommerce-account .keyshu-promo-bag::after {
    right: 12px;
  }
}
/* =========================================================
   KEYSHU - MINI CART DROPDOWN HEADER
   Dùng cho Flatsome + WooCommerce
   Giao diện giống ảnh mẫu mini cart nhỏ gọn
========================================================= */

:root {
  --keyshu-primary: #03B0B1;
  --keyshu-primary-dark: #00898b;
  --keyshu-primary-soft: rgba(3, 176, 177, 0.09);

  --keyshu-text: #243842;
  --keyshu-text-soft: #6d7b84;
  --keyshu-border: #e4ebee;
  --keyshu-white: #ffffff;

  --keyshu-danger: #ff3b2f;
  --keyshu-danger-dark: #e22b20;
}

/* =========================================================
   1. KHUNG DROPDOWN MINI CART
========================================================= */

.header .cart-item.has-dropdown > .nav-dropdown.nav-dropdown-default {
  width: 360px !important;
  min-width: 360px !important;
  max-width: 360px !important;

  padding: 0 !important;
  margin-top: 14px !important;

  background: #ffffff !important;
  border: 1px solid rgba(220, 228, 232, 0.95) !important;
  border-radius: 9px !important;

  box-shadow:
    0 14px 34px rgba(36, 58, 70, 0.16),
    0 4px 10px rgba(36, 58, 70, 0.06) !important;

  overflow: visible !important;
  list-style: none !important;
}


/* Reset wrapper bên trong */
.header .cart-item.has-dropdown > .nav-dropdown.nav-dropdown-default > li {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  list-style: none !important;
  background: transparent !important;
}

/* =========================================================
   2. NỘI DUNG MINI CART
========================================================= */

.header .cart-item .widget_shopping_cart_content {
  position: relative;
  padding: 22px 20px 16px !important;
  border-radius: 9px;
  background: #ffffff;
  overflow: hidden;
}

/* Icon túi hàng đầu dropdown */
.header .cart-item .widget_shopping_cart_content::before {
  content: "\f290";
  position: absolute;
  top: 22px;
  left: 20px;

  width: 42px;
  height: 42px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;
  background: rgba(3, 176, 177, 0.09);
  color: var(--keyshu-primary);

  font-family: "Font Awesome 7 Free", "Font Awesome 6 Free";
  font-size: 18px;
  font-weight: 900;
}

/* =========================================================
   3. NÚT ĐÓNG GIẢ GÓC PHẢI
   Lưu ý: HTML hiện tại không có nút đóng thật.
   CSS tạo nút trang trí giống ảnh.
========================================================= */

.header .cart-item .widget_shopping_cart_content .woocommerce-mini-cart::before {
  content: "\f00d";
  position: absolute;
  top: 22px;
  right: 20px;

  width: 42px;
  height: 42px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 8px;
  background: rgba(3, 176, 177, 0.08);
  color: var(--keyshu-primary);

  font-family: "Font Awesome 7 Free", "Font Awesome 6 Free";
  font-size: 18px;
  font-weight: 900;

  pointer-events: none;
}

/* =========================================================
   4. DANH SÁCH SẢN PHẨM
========================================================= */

.header .cart-item ul.woocommerce-mini-cart.cart_list.product_list_widget {
  position: relative;
  max-height: 310px;
  margin: 0 !important;
  padding: 0 !important;
  overflow-y: auto;
  list-style: none !important;
}

/* Scrollbar gọn */
.header .cart-item ul.woocommerce-mini-cart.cart_list.product_list_widget::-webkit-scrollbar {
  width: 4px;
}

.header .cart-item ul.woocommerce-mini-cart.cart_list.product_list_widget::-webkit-scrollbar-thumb {
  background: rgba(3, 176, 177, 0.26);
  border-radius: 999px;
}

.header .cart-item ul.woocommerce-mini-cart.cart_list.product_list_widget::-webkit-scrollbar-track {
  background: transparent;
}

/* Item sản phẩm */
.header .cart-item .woocommerce-mini-cart-item.mini_cart_item {
  position: relative !important;

  min-height: 100px;
  margin: 0 !important;
  padding: 12px 44px 12px 92px !important;

  display: block !important;

  border: 0 !important;
  border-bottom: 1px solid var(--keyshu-border) !important;
  background: #ffffff !important;
}

/* Ẩn border ở item cuối trước footer */
.header .cart-item .woocommerce-mini-cart-item.mini_cart_item:last-child {
  border-bottom: 1px solid var(--keyshu-border) !important;
}

/* Link tên sản phẩm */
.header .cart-item .woocommerce-mini-cart-item.mini_cart_item > a:not(.remove) {
  display: block !important;

  margin: 0 0 6px !important;
  padding: 0 !important;

  color: var(--keyshu-text) !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  text-transform: none !important;
}

.header .cart-item .woocommerce-mini-cart-item.mini_cart_item > a:not(.remove):hover {
  color: var(--keyshu-primary) !important;
}

/* Ảnh sản phẩm */
.header .cart-item .woocommerce-mini-cart-item.mini_cart_item img {
  position: absolute;
  left: 0;
  top: 12px;

  width: 76px !important;
  height: 76px !important;

  margin: 0 !important;
  float: none !important;

  border-radius: 7px;
  border: 1px solid #edf2f4;
  background: #f8fafb;

  object-fit: cover;
}

/* Số lượng + giá */
.header .cart-item .ux-mini-cart-qty,
.header .cart-item .woocommerce-mini-cart-item .quantity {
  display: block !important;

  color: var(--keyshu-text-soft) !important;
  font-size: 13px !important;
  line-height: 1.3;
  font-weight: 500 !important;
}

.header .cart-item .woocommerce-mini-cart-item .quantity .amount,
.header .cart-item .woocommerce-mini-cart-item .quantity bdi {
  color: #ee4d2d !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

/* =========================================================
   5. NÚT XÓA SẢN PHẨM
========================================================= */

.header .cart-item .woocommerce-mini-cart-item a.remove,
.header .cart-item .woocommerce-mini-cart-item a.remove_from_cart_button {
  position: absolute !important;
  top: 34px !important;
  right: 0 !important;
  left: auto !important;

  width: 30px !important;
  height: 30px !important;

  margin: 0 !important;
  padding: 0 !important;

  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  border-radius: 50% !important;
  border: 0 !important;
  background: rgba(3, 176, 177, 0.08) !important;

  color: var(--keyshu-primary) !important;
  font-size: 0 !important;
  line-height: 1 !important;
  text-decoration: none !important;

  transition:
    background 0.22s ease,
    color 0.22s ease,
    transform 0.22s ease;
}

/* Đổi dấu x thành icon thùng rác */
.header .cart-item .woocommerce-mini-cart-item a.remove::before,
.header .cart-item .woocommerce-mini-cart-item a.remove_from_cart_button::before {
  content: "\f2ed";
  font-family: "Font Awesome 7 Free", "Font Awesome 6 Free";
  font-size: 14px;
  font-weight: 400;
  color: var(--keyshu-primary);
}

.header .cart-item .woocommerce-mini-cart-item a.remove:hover,
.header .cart-item .woocommerce-mini-cart-item a.remove_from_cart_button:hover {
  background: rgba(255, 59, 47, 0.10) !important;
  transform: scale(1.05);
}

.header .cart-item .woocommerce-mini-cart-item a.remove:hover::before,
.header .cart-item .woocommerce-mini-cart-item a.remove_from_cart_button:hover::before {
  color: var(--keyshu-danger);
}

/* =========================================================
   6. FOOTER MINI CART
========================================================= */

.header .cart-item .ux-mini-cart-footer {
  padding-top: 12px;
}

/* Tổng phụ */
.header .cart-item .woocommerce-mini-cart__total.total {
  position: relative;

  min-height: 52px;
  margin: 0 0 12px !important;
  padding: 0 14px 0 58px !important;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  border: 1px solid rgba(3, 176, 177, 0.12);
  border-radius: 9px;
  background: rgba(3, 176, 177, 0.08);

  color: var(--keyshu-text) !important;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 800;
}

/* Icon tổng phụ */
.header .cart-item .woocommerce-mini-cart__total.total::before {
  content: "\f543";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);

  width: 34px;
  height: 34px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;
  background: var(--keyshu-primary);
  color: #ffffff;

  font-family: "Font Awesome 7 Free", "Font Awesome 6 Free";
  font-size: 15px;
  font-weight: 900;
}

/* Vạch chia giữa label và giá */
.header .cart-item .woocommerce-mini-cart__total.total strong {
  position: relative;
  color: var(--keyshu-text) !important;
  font-size: 14px;
  font-weight: 800;
}

.header .cart-item .woocommerce-mini-cart__total.total strong::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -18px;
  transform: translateY(-50%);
  width: 1px;
  height: 22px;
  background: rgba(3, 176, 177, 0.16);
}

/* Giá tổng phụ */
.header .cart-item .woocommerce-mini-cart__total.total .amount,
.header .cart-item .woocommerce-mini-cart__total.total bdi {
  color: #ee4d2d !important;
  font-size: 18px;
  font-weight: 900;
  white-space: nowrap;
}

/* =========================================================
   7. NÚT XEM GIỎ HÀNG + THANH TOÁN
========================================================= */

.header .cart-item .woocommerce-mini-cart__buttons.buttons {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 9px;

  margin: 0 !important;
  padding: 0 !important;
}

/* Nút chung */
.header .cart-item .woocommerce-mini-cart__buttons.buttons a.button {
  position: relative;

  width: 100% !important;
  min-height: 42px !important;

  margin: 0 !important;
  padding: 0 44px !important;

  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  border-radius: 6px !important;

  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: 0.5px;
  text-transform: uppercase !important;
  text-decoration: none !important;

  box-shadow: none !important;

  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    background 0.22s ease;
}

/* Nút Xem giỏ hàng */
.header .cart-item .woocommerce-mini-cart__buttons.buttons a.wc-forward:not(.checkout) {
  border: 1.5px solid var(--keyshu-primary) !important;
  background: #ffffff !important;
  color: var(--keyshu-primary-dark) !important;
}

.header .cart-item .woocommerce-mini-cart__buttons.buttons a.wc-forward:not(.checkout)::after {
  content: "\f061";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);

  font-family: "Font Awesome 7 Free", "Font Awesome 6 Free";
  font-size: 13px;
  font-weight: 900;
  color: var(--keyshu-primary-dark);
}

.header .cart-item .woocommerce-mini-cart__buttons.buttons a.wc-forward:not(.checkout):hover {
  background: rgba(3, 176, 177, 0.06) !important;
  color: var(--keyshu-primary-dark) !important;
  transform: translateY(-1px);
}

/* Nút Thanh toán */
.header .cart-item .woocommerce-mini-cart__buttons.buttons a.checkout {
  border: 1.5px solid var(--keyshu-danger) !important;
  background: linear-gradient(135deg, #ff5145 0%, #ff2f22 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 16px rgba(255, 59, 47, 0.22) !important;
}

.header .cart-item .woocommerce-mini-cart__buttons.buttons a.checkout::after {
  content: "\f061";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);

  font-family: "Font Awesome 7 Free", "Font Awesome 6 Free";
  font-size: 13px;
  font-weight: 900;
  color: #ffffff;
}

.header .cart-item .woocommerce-mini-cart__buttons.buttons a.checkout:hover {
  background: linear-gradient(135deg, #f44336 0%, #d8281e 100%) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(216, 40, 30, 0.28) !important;
}

/* =========================================================
   8. RESPONSIVE TABLET
========================================================= */

@media (max-width: 1024px) {
  .header .cart-item.has-dropdown > .nav-dropdown.nav-dropdown-default {
    width: 340px !important;
    min-width: 340px !important;
    max-width: 340px !important;
  }

  .header .cart-item .widget_shopping_cart_content {
    padding: 20px 18px 16px !important;
  }

  .header .cart-item .woocommerce-mini-cart-item.mini_cart_item {
    padding-left: 88px !important;
  }
}

/* =========================================================
   9. RESPONSIVE MOBILE
========================================================= */

@media (max-width: 768px) {
  .header .cart-item.has-dropdown > .nav-dropdown.nav-dropdown-default {
    width: calc(100vw - 28px) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 28px) !important;

    right: 14px !important;
    left: auto !important;

    margin-top: 14px !important;
    border-radius: 9px !important;
  }

  .header .cart-item.has-dropdown > .nav-dropdown.nav-dropdown-default::before {
    right: 28px;
  }

  .header .cart-item .widget_shopping_cart_content {
    padding: 18px 16px 14px !important;
  }

  .header .cart-item .widget_shopping_cart_content::before {
    top: 18px;
    left: 16px;
    width: 38px;
    height: 38px;
    font-size: 16px;
  }

  .header .cart-item .widget_shopping_cart_content::after {
    min-height: 58px;
    padding: 0 46px 16px 50px;
    font-size: 15px;
  }

  .header .cart-item .widget_shopping_cart_content .woocommerce-mini-cart::before {
    top: 18px;
    right: 16px;
    width: 38px;
    height: 38px;
    font-size: 16px;
  }

  .header .cart-item ul.woocommerce-mini-cart.cart_list.product_list_widget {
    max-height: 300px;
  }

  .header .cart-item .woocommerce-mini-cart-item.mini_cart_item {
    min-height: 92px;
    padding: 11px 38px 11px 78px !important;
  }

  .header .cart-item .woocommerce-mini-cart-item.mini_cart_item img {
    top: 11px;
    width: 64px !important;
    height: 64px !important;
  }

  .header .cart-item .woocommerce-mini-cart-item.mini_cart_item > a:not(.remove) {
    font-size: 13px !important;
  }

  .header .cart-item .ux-mini-cart-qty,
  .header .cart-item .woocommerce-mini-cart-item .quantity {
    font-size: 12px !important;
  }

  .header .cart-item .woocommerce-mini-cart-item .quantity .amount,
  .header .cart-item .woocommerce-mini-cart-item .quantity bdi {
    font-size: 13px !important;
  }

  .header .cart-item .woocommerce-mini-cart-item a.remove,
  .header .cart-item .woocommerce-mini-cart-item a.remove_from_cart_button {
    top: 31px !important;
    width: 28px !important;
    height: 28px !important;
  }

  .header .cart-item .woocommerce-mini-cart__total.total {
    min-height: 50px;
    padding-left: 54px !important;
  }

  .header .cart-item .woocommerce-mini-cart__total.total .amount,
  .header .cart-item .woocommerce-mini-cart__total.total bdi {
    font-size: 16px;
  }

  .header .cart-item .woocommerce-mini-cart__buttons.buttons a.button {
    min-height: 40px !important;
    font-size: 13px !important;
  }
}

/* =========================================================
   10. MOBILE NHỎ
========================================================= */

@media (max-width: 420px) {
  .header .cart-item .woocommerce-mini-cart__total.total {
    gap: 8px;
  }

  .header .cart-item .woocommerce-mini-cart__total.total strong {
    font-size: 13px;
  }

  .header .cart-item .woocommerce-mini-cart__total.total .amount,
  .header .cart-item .woocommerce-mini-cart__total.total bdi {
    font-size: 15px;
  }
}
/* =========================================================
   KEYSHU - SHOP SIDEBAR FILTER
   Đã chỉnh sửa:
   - Mobile: ẩn hoàn toàn bộ lọc / sidebar shop.
   - Desktop từ 850px: giữ nguyên giao diện bộ lọc cũ.
========================================================= */

@media (max-width: 849px) {
  body .category-page-row > .col.large-3.hide-for-medium,
  body .category-page-row #shop-sidebar.sidebar-inner,
  body #shop-sidebar.sidebar-inner {
    display: none !important;
  }

  body .category-page-row > .col.large-9 {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
    margin-top: 0 !important;
  }
}

@media (min-width: 850px) {
  /* =========================================================
     KEYSHU - SHOP SIDEBAR FILTER
     Mobile First - Clean Compact Version
     Dùng cho Flatsome + WooCommerce

     Target:
     #shop-sidebar
     .widget_product_categories
     .product-categories
     .widget_price_filter
  ========================================================= */

  :root {
    --keyshu-primary: #03B0B1;
    --keyshu-primary-dark: #008f91;
    --keyshu-primary-soft: rgba(3, 176, 177, 0.08);

    --keyshu-text: #243842;
    --keyshu-text-soft: #66737f;
    --keyshu-icon: #7f8b94;
    --keyshu-border: #e4ebee;
    --keyshu-white: #ffffff;

    --keyshu-shadow: rgba(35, 55, 70, 0.10);
  }

  /* =========================================================
     1. KHUNG SIDEBAR - MOBILE FIRST
  ========================================================= */

  #shop-sidebar.sidebar-inner {
    position: relative;
    width: 100%;
    padding: 18px 12px 20px;
    border-radius: 16px;
    background:
      radial-gradient(circle at 78% 5%, rgba(3, 176, 177, 0.12) 0 11px, transparent 12px),
      radial-gradient(circle at 93% 12%, rgba(3, 176, 177, 0.08) 0 20px, transparent 21px),
      linear-gradient(180deg, #ffffff 0%, #fbffff 100%);
    border: 1px solid rgba(230, 237, 240, 0.95);
    box-shadow:
      0 10px 26px rgba(35, 55, 70, 0.08),
      0 3px 10px rgba(35, 55, 70, 0.04);
    overflow: hidden;
  }

  /* Trang trí góc phải */
  #shop-sidebar.sidebar-inner::before {
    content: "";
    position: absolute;
    top: -18px;
    right: -46px;
    width: 110px;
    height: 135px;
    opacity: 0.14;
    background:
      linear-gradient(135deg, transparent 0 38%, rgba(3, 176, 177, 0.52) 39% 41%, transparent 42%),
      radial-gradient(ellipse at 72% 58%, rgba(3, 176, 177, 0.42) 0 30px, transparent 31px);
    transform: rotate(-18deg);
    pointer-events: none;
  }

  /* Trang trí góc trái dưới */
  #shop-sidebar.sidebar-inner::after {
    content: "";
    position: absolute;
    left: -54px;
    bottom: -46px;
    width: 120px;
    height: 105px;
    opacity: 0.14;
    border-radius: 55% 45% 48% 52%;
    background:
      radial-gradient(circle at 64% 64%, rgba(3, 176, 177, 0.20) 0 2px, transparent 3px),
      radial-gradient(circle at 52% 46%, rgba(3, 176, 177, 0.16) 0 2px, transparent 3px),
      linear-gradient(135deg, rgba(3, 176, 177, 0.18), rgba(255, 255, 255, 0.55));
    pointer-events: none;
  }

  #shop-sidebar.sidebar-inner > aside {
    position: relative;
    z-index: 2;
  }

  /* =========================================================
     2. TIÊU ĐỀ WIDGET
  ========================================================= */

  #shop-sidebar .widget-title.shop-sidebar {
    display: block;
    margin: 0 0 7px;
    color: var(--keyshu-text);
    font-size: 21px;
    line-height: 1.15;
    font-weight: 900;
    letter-spacing: 0.3px;
    text-transform: uppercase;
  }

  #shop-sidebar .is-divider.small {
    width: 34px;
    height: 2px;
    margin: 0 0 14px;
    background: var(--keyshu-primary);
    border-radius: 999px;
  }

  #shop-sidebar .widget_price_filter .widget-title.shop-sidebar {
    margin-top: 20px;
    color: var(--keyshu-primary-dark);
    font-size: 16px;
    letter-spacing: 0.5px;
  }

  /* =========================================================
     3. RESET DANH MỤC
  ========================================================= */

  #shop-sidebar .widget_product_categories {
    margin: 0 0 18px !important;
  }

  #shop-sidebar .product-categories,
  #shop-sidebar .product-categories ul,
  #shop-sidebar .product-categories li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    border: 0 !important;
  }

  #shop-sidebar .product-categories {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  /* Ẩn mục All */
  #shop-sidebar .product-categories > li.cat-item-15 {
    display: none !important;
  }

  /* =========================================================
     4. DANH MỤC CHA
  ========================================================= */

  #shop-sidebar .product-categories > li.cat-parent {
    position: relative;
    border: 1px solid var(--keyshu-border) !important;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow:
      0 6px 16px rgba(35, 55, 70, 0.055),
      0 2px 6px rgba(35, 55, 70, 0.03);
    overflow: hidden;
  }

  #shop-sidebar .product-categories > li.cat-parent > a {
    position: relative;
    min-height: 46px;
    padding: 0 38px 0 52px !important;
    display: flex !important;
    align-items: center;
    color: var(--keyshu-text) !important;
    background: #ffffff;
    border-bottom: 1px solid var(--keyshu-border);
    font-size: 14px !important;
    line-height: 1.25;
    font-weight: 900 !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0 !important;
  }

  /* Icon tròn danh mục cha */
  #shop-sidebar .product-categories > li.cat-parent > a::before {
    content: "\f290";
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(3, 176, 177, 0.10);
    color: var(--keyshu-primary);
    font-family: "Font Awesome 7 Free", "Font Awesome 6 Free";
    font-size: 13px;
    font-weight: 900;
  }

  /* Icon riêng: Giải pháp làn da */
  #shop-sidebar .product-categories > li.cat-item-69 > a::before {
    content: "\f5a0";
  }

  /* Toggle */
  #shop-sidebar .product-categories > li.cat-parent > button.toggle {
    position: absolute !important;
    top: 6px;
    right: 8px;
    width: 32px;
    height: 32px;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border: 0 !important;
    background: transparent !important;
    color: var(--keyshu-primary-dark) !important;
    cursor: pointer;
  }

  #shop-sidebar .product-categories > li.cat-parent > button.toggle i {
    display: none !important;
  }

  #shop-sidebar .product-categories > li.cat-parent > button.toggle::before {
    content: "\f077";
    font-family: "Font Awesome 7 Free", "Font Awesome 6 Free";
    font-size: 11px;
    font-weight: 900;
    color: var(--keyshu-primary-dark);
  }

  #shop-sidebar .product-categories > li.cat-parent[aria-expanded="false"] > button.toggle::before {
    content: "\f078";
  }

  /* =========================================================
     5. DANH MỤC CON
  ========================================================= */

  #shop-sidebar .product-categories > li.cat-parent > ul.children {
    display: block;
    padding: 8px 10px 10px !important;
    background: rgba(255, 255, 255, 0.9);
  }

  #shop-sidebar .product-categories > li.cat-parent[aria-expanded="false"] > ul.children {
    display: none;
  }

  #shop-sidebar .product-categories ul.children > li {
    position: relative;
  }

  #shop-sidebar .product-categories ul.children > li > a {
    position: relative;
    min-height: 38px;
    padding: 0 8px 0 42px !important;
    display: flex !important;
    align-items: center;
    border-radius: 8px;
    color: var(--keyshu-text-soft) !important;
    font-size: 13px !important;
    line-height: 1.25;
    font-weight: 600 !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    transition:
      color 0.22s ease,
      background-color 0.22s ease,
      box-shadow 0.22s ease;
  }

  #shop-sidebar .product-categories ul.children > li:not(:last-child) > a::after {
    content: "";
    position: absolute;
    left: 42px;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--keyshu-border);
  }

  /* Icon con */
  #shop-sidebar .product-categories ul.children > li > a::before {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--keyshu-icon);
    font-family: "Font Awesome 7 Free", "Font Awesome 6 Free";
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
  }

  /* Icon theo từng danh mục */
  #shop-sidebar .cat-item-73 > a::before {
    content: "\f00a";
  }

  #shop-sidebar .cat-item-75 > a::before {
    content: "\f630";
  }

  #shop-sidebar .cat-item-76 > a::before {
    content: "\f72f";
  }

  #shop-sidebar .cat-item-77 > a::before {
    content: "\f485";
  }

  #shop-sidebar .cat-item-71 > a::before {
    content: "\f58f";
  }

  #shop-sidebar .cat-item-74 > a::before {
    content: "\f72f";
  }

  #shop-sidebar .cat-item-80 > a::before {
    content: "\f043";
  }

  #shop-sidebar .cat-item-79 > a::before {
    content: "\f773";
  }

  #shop-sidebar .cat-item-85 > a::before {
    content: "\f254";
  }

  #shop-sidebar .cat-item-78 > a::before {
    content: "\f192";
  }

  #shop-sidebar .cat-item-82 > a::before {
    content: "\f4d8";
  }

  #shop-sidebar .cat-item-81 > a::before {
    content: "\f0d0";
  }

  #shop-sidebar .cat-item-84 > a::before {
    content: "\f185";
  }

  /* Hover */
  #shop-sidebar .product-categories ul.children > li > a:hover {
    color: var(--keyshu-text) !important;
    background: rgba(3, 176, 177, 0.06);
  }

  /* Active */
  #shop-sidebar .product-categories ul.children > li.current-cat > a,
  #shop-sidebar .product-categories ul.children > li.active > a {
    color: var(--keyshu-text) !important;
    background: linear-gradient(90deg, rgba(3, 176, 177, 0.13), rgba(3, 176, 177, 0.04)) !important;
    font-weight: 900 !important;
    box-shadow: inset 3px 0 0 var(--keyshu-primary);
  }

  #shop-sidebar .product-categories ul.children > li.current-cat > a::before,
  #shop-sidebar .product-categories ul.children > li.active > a::before {
    color: var(--keyshu-primary);
  }

  /* =========================================================
     6. DANH MỤC KHÔNG CÓ CON
  ========================================================= */

  #shop-sidebar .product-categories > li:not(.cat-parent):not(.cat-item-15) {
    position: relative;
    border: 1px solid var(--keyshu-border) !important;
    border-radius: 10px;
    background: #ffffff;
    box-shadow:
      0 6px 16px rgba(35, 55, 70, 0.055),
      0 2px 6px rgba(35, 55, 70, 0.03);
    overflow: hidden;
  }

  #shop-sidebar .product-categories > li:not(.cat-parent):not(.cat-item-15) > a {
    position: relative;
    min-height: 46px;
    padding: 0 38px 0 52px !important;
    display: flex !important;
    align-items: center;
    color: var(--keyshu-text) !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
    text-transform: none !important;
  }

  #shop-sidebar .product-categories > li:not(.cat-parent):not(.cat-item-15) > a::before {
    content: "\f00a";
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(3, 176, 177, 0.10);
    color: var(--keyshu-primary);
    font-family: "Font Awesome 7 Free", "Font Awesome 6 Free";
    font-size: 13px;
    font-weight: 900;
  }

  #shop-sidebar .product-categories > li:not(.cat-parent):not(.cat-item-15)::after {
    content: "\f078";
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--keyshu-primary-dark);
    font-family: "Font Awesome 7 Free", "Font Awesome 6 Free";
    font-size: 11px;
    font-weight: 900;
  }

  /* =========================================================
     7. PRICE FILTER - ĐÃ SỬA LỆCH GIÁ
  ========================================================= */

  #shop-sidebar .widget_price_filter {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--keyshu-border);
  }

  #shop-sidebar .widget_price_filter form {
    margin: 0 !important;
  }

  #shop-sidebar .price_slider_wrapper {
    padding: 14px 0 0;
  }

  /* Slider track */
  #shop-sidebar .price_slider {
    position: relative;
    height: 6px !important;
    margin: 22px 10px 22px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #e4eff1 !important;
    box-shadow: none !important;
  }

  /* Range */
  #shop-sidebar .price_slider .ui-slider-range {
    height: 6px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--keyshu-primary-dark) !important;
    box-shadow: none !important;
  }

  /* Handle */
  #shop-sidebar .price_slider .ui-slider-handle {
    top: 50% !important;
    transform: translateY(-50%);
    width: 18px !important;
    height: 18px !important;
    margin-left: -9px !important;
    border-radius: 50% !important;
    border: 2px solid var(--keyshu-primary) !important;
    background: #ffffff !important;
    box-shadow:
      0 3px 8px rgba(3, 176, 177, 0.20),
      0 0 0 2px rgba(255, 255, 255, 0.9) !important;
    cursor: pointer;
  }

  /* Reset phần amount */
  #shop-sidebar .price_slider_amount {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: center;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center;
  }

  /* Label giá thật của WooCommerce */
  #shop-sidebar .price_label {
    order: 1;
    display: block !important;
    width: 100%;
    margin: 0 !important;
    padding: 0 4px !important;
    color: var(--keyshu-text-soft) !important;
    font-size: 12px;
    line-height: 1.45;
    font-weight: 700;
    text-align: center;
    float: none !important;
  }

  /* Giá từ / đến */
  #shop-sidebar .price_label .from,
  #shop-sidebar .price_label .to {
    color: var(--keyshu-primary-dark);
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
  }

  /* Nút lọc */
  #shop-sidebar .widget_price_filter .button {
    order: 2;
    position: relative;
    width: 72%;
    min-width: 112px;
    max-width: 170px;
    min-height: 40px;
    margin: 0 auto !important;
    padding: 0 18px 0 42px !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: linear-gradient(135deg, #04c4c6 0%, #008f91 100%) !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    float: none !important;
    clear: both !important;
    font-size: 14px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px;
    box-shadow: 0 10px 20px rgba(3, 176, 177, 0.20);
    transition:
      transform 0.22s ease,
      box-shadow 0.22s ease,
      background 0.22s ease;
  }

  #shop-sidebar .widget_price_filter .button::before {
    content: "\f0b0";
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    font-family: "Font Awesome 7 Free", "Font Awesome 6 Free";
    font-size: 13px;
    font-weight: 900;
    color: #ffffff;
  }

  #shop-sidebar .widget_price_filter .button:hover {
    background: linear-gradient(135deg, #03B0B1 0%, #007f83 100%) !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 14px 26px rgba(3, 176, 177, 0.28);
  }

  /* Ẩn clear gây lệch layout */
  #shop-sidebar .price_slider_amount .clear {
    display: none !important;
  }

  /* Ẩn input giá */
  #shop-sidebar .price_slider_amount input {
    display: none !important;
  }

  /* =========================================================
     8. TABLET - TỪ 768PX
  ========================================================= */

  @media (min-width: 768px) {
    #shop-sidebar.sidebar-inner {
      padding: 20px 14px 20px;
    }

    #shop-sidebar .widget-title.shop-sidebar {
      font-size: 23px;
    }

    #shop-sidebar .widget_price_filter .widget-title.shop-sidebar {
      font-size: 17px;
    }

    #shop-sidebar .product-categories > li.cat-parent > a,
    #shop-sidebar .product-categories > li:not(.cat-parent):not(.cat-item-15) > a {
      min-height: 48px;
      padding-left: 56px !important;
      font-size: 15px !important;
    }

    #shop-sidebar .product-categories > li.cat-parent > a::before,
    #shop-sidebar .product-categories > li:not(.cat-parent):not(.cat-item-15) > a::before {
      left: 12px;
      width: 32px;
      height: 32px;
      font-size: 14px;
    }

    #shop-sidebar .product-categories ul.children > li > a {
      min-height: 39px;
      padding-left: 46px !important;
      font-size: 13.5px !important;
    }

    #shop-sidebar .product-categories ul.children > li > a::before {
      left: 16px;
      font-size: 12.5px;
    }

    #shop-sidebar .product-categories ul.children > li:not(:last-child) > a::after {
      left: 46px;
    }

    #shop-sidebar .price_label {
      font-size: 12.5px;
    }

    #shop-sidebar .price_label .from,
    #shop-sidebar .price_label .to {
      font-size: 13.5px;
    }

    #shop-sidebar .widget_price_filter .button {
      width: 70%;
      min-height: 42px;
      font-size: 15px !important;
    }
  }

  /* =========================================================
     9. DESKTOP - TỪ 1200PX
  ========================================================= */

  @media (min-width: 1200px) {
    #shop-sidebar.sidebar-inner {
      padding: 24px 18px 22px;
      box-shadow:
        0 14px 36px rgba(35, 55, 70, 0.09),
        0 4px 14px rgba(35, 55, 70, 0.045);
    }

    #shop-sidebar.sidebar-inner::before {
      top: -10px;
      right: -32px;
      width: 120px;
      height: 145px;
    }

    #shop-sidebar.sidebar-inner::after {
      width: 130px;
      height: 110px;
    }

    #shop-sidebar .widget-title.shop-sidebar {
      font-size: 25px;
    }

    #shop-sidebar .is-divider.small {
      width: 40px;
      margin-bottom: 16px;
    }

    #shop-sidebar .widget_price_filter .widget-title.shop-sidebar {
      font-size: 18px;
    }

    #shop-sidebar .product-categories {
      gap: 12px;
    }

    #shop-sidebar .product-categories > li.cat-parent,
    #shop-sidebar .product-categories > li:not(.cat-parent):not(.cat-item-15) {
      border-radius: 12px;
    }

    #shop-sidebar .product-categories > li.cat-parent > a,
    #shop-sidebar .product-categories > li:not(.cat-parent):not(.cat-item-15) > a {
      min-height: 54px;
      padding-left: 64px !important;
      padding-right: 44px !important;
      font-size: 16px !important;
    }

    #shop-sidebar .product-categories > li.cat-parent > a::before,
    #shop-sidebar .product-categories > li:not(.cat-parent):not(.cat-item-15) > a::before {
      left: 15px;
      width: 34px;
      height: 34px;
      font-size: 15px;
    }

    #shop-sidebar .product-categories > li.cat-parent > button.toggle {
      top: 11px;
      right: 12px;
    }

    #shop-sidebar .product-categories > li.cat-parent > ul.children {
      padding: 9px 12px 12px !important;
    }

    #shop-sidebar .product-categories ul.children > li > a {
      min-height: 42px;
      padding-left: 54px !important;
      font-size: 14.5px !important;
    }

    #shop-sidebar .product-categories ul.children > li > a::before {
      left: 21px;
      font-size: 14px;
    }

    #shop-sidebar .product-categories ul.children > li:not(:last-child) > a::after {
      left: 54px;
    }

    #shop-sidebar .price_slider {
      margin-left: 12px !important;
      margin-right: 12px !important;
    }

    #shop-sidebar .price_label {
      font-size: 13px;
    }

    #shop-sidebar .price_label .from,
    #shop-sidebar .price_label .to {
      font-size: 14px;
    }

    #shop-sidebar .widget_price_filter .button {
      width: 68%;
      max-width: 180px;
      min-height: 44px;
      font-size: 16px !important;
    }
  }
  /* Luôn mở sẵn Danh mục sản phẩm */
  #shop-sidebar .product-categories > li.cat-item-68 > ul.children {
    display: block !important;
  }
}

/* =========================================================
   KEYSHU - MY ACCOUNT LOGIN / REGISTER UI
   Dùng riêng cho trang WooCommerce My Account khi chưa đăng nhập
========================================================= */

body.woocommerce-account:not(.logged-in) {
  background: #f5f8fb;
}

body.woocommerce-account:not(.logged-in) #main {
  background: #f5f8fb;
}

body.woocommerce-account:not(.logged-in) .my-account-header {
  display: none !important;
}

body.woocommerce-account:not(.logged-in) .page-wrapper.my-account {
  margin: 0 !important;
  padding: 40px 16px 72px !important;
  background: #f5f8fb;
}

body.woocommerce-account:not(.logged-in) .page-wrapper.my-account > .container {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.woocommerce-account:not(.logged-in) .woocommerce-notices-wrapper {
  width: 100%;
  max-width: 498px;
  margin: 0 auto 16px;
}

/* CARD CHÍNH */
body.woocommerce-account:not(.logged-in) #customer_login {
  --keyshu-teal: #03b0b1;
  --keyshu-teal-dark: #07999a;
  --keyshu-red: #ef3735;
  --keyshu-red-dark: #dc2f2e;
  --keyshu-text: #40506a;
  --keyshu-muted: #8b9aae;
  --keyshu-border: #cbd7e6;

  position: relative;
  display: block !important;
  width: 100% !important;
  max-width: 498px !important;
  margin: 0 auto !important;
  padding: 46px 35px 40px !important;
  overflow: hidden;

  background: #ffffff;
  border-radius: 18px;
  border: 0 !important;
  box-shadow: 0 22px 54px rgba(28, 43, 68, 0.12);
}

/* Thanh màu trên cùng */
body.woocommerce-account:not(.logged-in) #customer_login::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  border-radius: 18px 18px 0 0;
  background: var(--keyshu-teal);
}

body.woocommerce-account:not(.logged-in) #customer_login.keyshu-login-active::before {
  background: linear-gradient(
    90deg,
    var(--keyshu-teal) 0%,
    var(--keyshu-teal) 48%,
    #667085 50%,
    var(--keyshu-red) 52%,
    var(--keyshu-red) 100%
  );
}

body.woocommerce-account:not(.logged-in) #customer_login.keyshu-register-active::before {
  background: var(--keyshu-red);
}

/* Reset Flatsome row/column */
body.woocommerce-account:not(.logged-in) #customer_login.row,
body.woocommerce-account:not(.logged-in) #customer_login.row-large,
body.woocommerce-account:not(.logged-in) #customer_login.row-divided {
  margin-left: auto !important;
  margin-right: auto !important;
}

body.woocommerce-account:not(.logged-in) #customer_login > .col,
body.woocommerce-account:not(.logged-in) #customer_login > .large-6,
body.woocommerce-account:not(.logged-in) #customer_login .col-1,
body.woocommerce-account:not(.logged-in) #customer_login .col-2 {
  width: 100% !important;
  max-width: 100% !important;
  flex-basis: 100% !important;
  padding: 0 !important;
  border: 0 !important;
}

body.woocommerce-account:not(.logged-in) #customer_login.row-divided > .col + .col {
  border-left: 0 !important;
}

body.woocommerce-account:not(.logged-in) #customer_login .keyshu-hidden-title {
  display: none !important;
}

/* TAB */
body.woocommerce-account:not(.logged-in) .keyshu-auth-tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  margin: 0 0 26px;
  border-bottom: 1px solid #e7edf5;
}

body.woocommerce-account:not(.logged-in) .keyshu-auth-tab {
  position: relative;
  height: 34px;
  padding: 0 10px 16px;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  cursor: pointer;

  color: #98a4b8;
  font-family: "SVN-Gilroy", sans-serif;
  font-size: 15px;
  line-height: 1;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.2px;
}

body.woocommerce-account:not(.logged-in) .keyshu-auth-tab::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  border-radius: 999px;
  background: transparent;
}

body.woocommerce-account:not(.logged-in) #customer_login.keyshu-login-active .keyshu-auth-tab[data-tab="login"] {
  color: var(--keyshu-teal);
}

body.woocommerce-account:not(.logged-in) #customer_login.keyshu-login-active .keyshu-auth-tab[data-tab="login"]::after {
  background: var(--keyshu-teal);
}

body.woocommerce-account:not(.logged-in) #customer_login.keyshu-register-active .keyshu-auth-tab[data-tab="register"] {
  color: var(--keyshu-red);
}

body.woocommerce-account:not(.logged-in) #customer_login.keyshu-register-active .keyshu-auth-tab[data-tab="register"]::after {
  background: var(--keyshu-red);
}

/* FORM */
body.woocommerce-account:not(.logged-in) #customer_login form.login,
body.woocommerce-account:not(.logged-in) #customer_login form.register {
  display: flex !important;
  flex-direction: column;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

body.woocommerce-account:not(.logged-in) #customer_login .form-row {
  width: 100%;
  margin: 0 0 18px !important;
  padding: 0 !important;
}

body.woocommerce-account:not(.logged-in) #customer_login label {
  display: block;
  margin: 0 0 8px !important;
  color: var(--keyshu-text);
  font-size: 13.5px;
  line-height: 1.35;
  font-weight: 800;
  text-transform: none;
}

body.woocommerce-account:not(.logged-in) #customer_login .required,
body.woocommerce-account:not(.logged-in) #customer_login .screen-reader-text {
  display: none !important;
}

/* INPUT */
body.woocommerce-account:not(.logged-in) #customer_login .keyshu-field {
  position: relative;
}

body.woocommerce-account:not(.logged-in) #customer_login .keyshu-field::before {
  position: absolute;
  left: 15px;
  top: 43px;
  z-index: 2;

  color: #96a8c0;
  font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free";
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}

body.woocommerce-account:not(.logged-in) #customer_login .keyshu-icon-user::before {
  content: "\f007";
}

body.woocommerce-account:not(.logged-in) #customer_login .keyshu-icon-email::before {
  content: "\f0e0";
}

body.woocommerce-account:not(.logged-in) #customer_login .keyshu-icon-phone::before {
  content: "\f095";
}

body.woocommerce-account:not(.logged-in) #customer_login .keyshu-icon-lock::before {
  content: "\f023";
}

body.woocommerce-account:not(.logged-in) #customer_login input.input-text,
body.woocommerce-account:not(.logged-in) #customer_login input[type="text"],
body.woocommerce-account:not(.logged-in) #customer_login input[type="email"],
body.woocommerce-account:not(.logged-in) #customer_login input[type="tel"],
body.woocommerce-account:not(.logged-in) #customer_login input[type="password"] {
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 0 44px 0 45px !important;

  border: 1px solid var(--keyshu-border) !important;
  border-radius: 9px !important;
  background: #ffffff !important;
  box-shadow: none !important;

  color: #334155;
  font-family: "SVN-Gilroy", sans-serif;
  font-size: 14px;
  font-weight: 600;
  outline: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body.woocommerce-account:not(.logged-in) #customer_login input.input-text::placeholder {
  color: #8b94a3;
  font-weight: 500;
}

body.woocommerce-account:not(.logged-in) #customer_login input.input-text:focus,
body.woocommerce-account:not(.logged-in) #customer_login input[type="text"]:focus,
body.woocommerce-account:not(.logged-in) #customer_login input[type="email"]:focus,
body.woocommerce-account:not(.logged-in) #customer_login input[type="tel"]:focus,
body.woocommerce-account:not(.logged-in) #customer_login input[type="password"]:focus {
  border-color: var(--keyshu-teal) !important;
  box-shadow: 0 0 0 4px rgba(3, 176, 177, 0.08) !important;
}

body.woocommerce-account:not(.logged-in) #customer_login.keyshu-register-active input.input-text:focus,
body.woocommerce-account:not(.logged-in) #customer_login.keyshu-register-active input[type="text"]:focus,
body.woocommerce-account:not(.logged-in) #customer_login.keyshu-register-active input[type="email"]:focus,
body.woocommerce-account:not(.logged-in) #customer_login.keyshu-register-active input[type="tel"]:focus,
body.woocommerce-account:not(.logged-in) #customer_login.keyshu-register-active input[type="password"]:focus {
  border-color: var(--keyshu-red) !important;
  box-shadow: 0 0 0 4px rgba(239, 55, 53, 0.08) !important;
}

/* Password eye WooCommerce */
body.woocommerce-account:not(.logged-in) #customer_login .password-input {
  display: block;
  position: relative;
}

body.woocommerce-account:not(.logged-in) #customer_login .show-password-input {
  position: absolute !important;
  top: 0 !important;
  right: 8px !important;
  width: 38px !important;
  height: 48px !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #96a8c0 !important;
  box-shadow: none !important;
}

/* SẮP XẾP THỨ TỰ FORM ĐĂNG KÝ */
body.woocommerce-account:not(.logged-in) #customer_login form.register .keyshu-fullname-row {
  order: 1;
}

body.woocommerce-account:not(.logged-in) #customer_login form.register .keyshu-reg-email-row {
  order: 2;
}

body.woocommerce-account:not(.logged-in) #customer_login form.register .keyshu-phone-row {
  order: 3;
}

body.woocommerce-account:not(.logged-in) #customer_login form.register .keyshu-reg-password-row {
  order: 4;
}

body.woocommerce-account:not(.logged-in) #customer_login form.register .keyshu-terms-row {
  order: 5;
}

body.woocommerce-account:not(.logged-in) #customer_login form.register .keyshu-register-submit-row {
  order: 6;
}

body.woocommerce-account:not(.logged-in) #customer_login form.register .keyshu-social-auth {
  order: 7;
}

/* Ẩn text mặc định "Một liên kết để đặt mật khẩu..." và privacy text dài */
body.woocommerce-account:not(.logged-in) #customer_login form.register > p:not(.form-row) {
  display: none !important;
}

body.woocommerce-account:not(.logged-in) #customer_login .woocommerce-privacy-policy-text {
  display: none !important;
}

/* REMEMBER + LOST PASSWORD */
body.woocommerce-account:not(.logged-in) #customer_login .keyshu-remember-row {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 20px !important;
}

body.woocommerce-account:not(.logged-in) #customer_login .keyshu-remember-row label,
body.woocommerce-account:not(.logged-in) #customer_login .keyshu-terms-row label {
  display: flex !important;
  align-items: center;
  gap: 9px;
  margin: 0 !important;
  color: #61718a;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 600;
  cursor: pointer;
}

body.woocommerce-account:not(.logged-in) #customer_login input[type="checkbox"] {
  flex: 0 0 auto;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  accent-color: var(--keyshu-teal);
}

body.woocommerce-account:not(.logged-in) #customer_login.keyshu-register-active input[type="checkbox"] {
  accent-color: var(--keyshu-red);
}

body.woocommerce-account:not(.logged-in) #customer_login .lost_password {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1;
}

body.woocommerce-account:not(.logged-in) #customer_login .lost_password a,
body.woocommerce-account:not(.logged-in) #customer_login .keyshu-terms-row a {
  color: var(--keyshu-teal);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

body.woocommerce-account:not(.logged-in) #customer_login .lost_password a:hover,
body.woocommerce-account:not(.logged-in) #customer_login .keyshu-terms-row a:hover {
  text-decoration: underline;
}

/* BUTTON */
body.woocommerce-account:not(.logged-in) #customer_login .keyshu-submit-row {
  margin: 0 0 22px !important;
}

body.woocommerce-account:not(.logged-in) #customer_login button[type="submit"],
body.woocommerce-account:not(.logged-in) #customer_login .woocommerce-button,
body.woocommerce-account:not(.logged-in) #customer_login .button {
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 0 20px !important;

  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 22px rgba(3, 176, 177, 0.18) !important;

  color: #ffffff !important;
  font-family: "SVN-Gilroy", sans-serif;
  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  letter-spacing: 0.2px;

  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 9px;

  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

body.woocommerce-account:not(.logged-in) #customer_login button[name="login"] {
  background: linear-gradient(135deg, var(--keyshu-teal) 0%, var(--keyshu-teal-dark) 100%) !important;
}

body.woocommerce-account:not(.logged-in) #customer_login button[name="register"] {
  background: linear-gradient(135deg, var(--keyshu-red) 0%, var(--keyshu-red-dark) 100%) !important;
  box-shadow: 0 12px 24px rgba(239, 55, 53, 0.22) !important;
}

body.woocommerce-account:not(.logged-in) #customer_login button[type="submit"]:hover {
  transform: translateY(-2px);
}

body.woocommerce-account:not(.logged-in) #customer_login button[name="login"]:hover {
  box-shadow: 0 16px 28px rgba(3, 176, 177, 0.25) !important;
}

body.woocommerce-account:not(.logged-in) #customer_login button[name="register"]:hover {
  box-shadow: 0 16px 30px rgba(239, 55, 53, 0.28) !important;
}

body.woocommerce-account:not(.logged-in) #customer_login .keyshu-btn-icon {
  font-size: 14px;
  line-height: 1;
}

/* SOCIAL LOGIN */
body.woocommerce-account:not(.logged-in) #customer_login .keyshu-social-auth {
  margin-top: 8px;
}

body.woocommerce-account:not(.logged-in) #customer_login .keyshu-social-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 12px 0 18px;
  color: #9aa6b8;
  font-size: 13px;
  font-weight: 700;
}

body.woocommerce-account:not(.logged-in) #customer_login .keyshu-social-divider::before,
body.woocommerce-account:not(.logged-in) #customer_login .keyshu-social-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e9eef5;
}

body.woocommerce-account:not(.logged-in) #customer_login .keyshu-social-buttons .nsl-container-buttons,
body.woocommerce-account:not(.logged-in) #customer_login .keyshu-social-buttons .nsl-container {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

body.woocommerce-account:not(.logged-in) #customer_login .keyshu-social-buttons .nsl-button {
  width: 100% !important;
  min-height: 42px !important;
  border-radius: 9px !important;
  border: 1px solid var(--keyshu-border) !important;
  box-shadow: none !important;
}

/* WooCommerce notice */
body.woocommerce-account:not(.logged-in) .woocommerce-error,
body.woocommerce-account:not(.logged-in) .woocommerce-message,
body.woocommerce-account:not(.logged-in) .woocommerce-info {
  max-width: 498px;
  margin-left: auto !important;
  margin-right: auto !important;
  border-radius: 12px;
  font-size: 14px;
}

/* RESPONSIVE */
@media (max-width: 640px) {
  body.woocommerce-account:not(.logged-in) .page-wrapper.my-account {
    padding: 22px 12px 46px !important;
  }

  body.woocommerce-account:not(.logged-in) #customer_login {
    max-width: 100% !important;
    padding: 38px 24px 32px !important;
    border-radius: 18px;
  }

  body.woocommerce-account:not(.logged-in) .keyshu-auth-tabs {
    margin-bottom: 24px;
  }

  body.woocommerce-account:not(.logged-in) .keyshu-auth-tab {
    font-size: 14px;
  }

  body.woocommerce-account:not(.logged-in) #customer_login label {
    font-size: 13px;
  }

  body.woocommerce-account:not(.logged-in) #customer_login input.input-text,
  body.woocommerce-account:not(.logged-in) #customer_login input[type="text"],
  body.woocommerce-account:not(.logged-in) #customer_login input[type="email"],
  body.woocommerce-account:not(.logged-in) #customer_login input[type="tel"],
  body.woocommerce-account:not(.logged-in) #customer_login input[type="password"] {
    height: 47px !important;
    min-height: 47px !important;
    font-size: 13.5px;
  }

  body.woocommerce-account:not(.logged-in) #customer_login .keyshu-field::before {
    top: 42px;
  }

  body.woocommerce-account:not(.logged-in) #customer_login .keyshu-remember-row {
    align-items: flex-start;
  }

  body.woocommerce-account:not(.logged-in) #customer_login .keyshu-remember-row label,
  body.woocommerce-account:not(.logged-in) #customer_login .keyshu-terms-row label {
    font-size: 12.5px;
  }

  body.woocommerce-account:not(.logged-in) #customer_login .lost_password a {
    font-size: 12.5px;
    white-space: nowrap;
  }

  body.woocommerce-account:not(.logged-in) #customer_login button[type="submit"] {
    height: 48px !important;
    font-size: 14px !important;
  }
}

@media (max-width: 380px) {
  body.woocommerce-account:not(.logged-in) #customer_login {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  body.woocommerce-account:not(.logged-in) #customer_login .keyshu-social-buttons .nsl-container-buttons,
  body.woocommerce-account:not(.logged-in) #customer_login .keyshu-social-buttons .nsl-container {
    grid-template-columns: 1fr !important;
  }
}
/* =========================================================
   KEYSHU - WOOCOMMERCE LOST PASSWORD PAGE
   Trang: /my-account/lost-password/
   Icon chính: Font Awesome f084
   Dành cho WordPress + Flatsome + WooCommerce
========================================================= */

/* ================================
   1. BIẾN MÀU CHUNG
================================ */

:root {
  --keyshu-primary: #03B0B1;
  --keyshu-primary-dark: #018e91;
  --keyshu-primary-light: #72e0e1;
  --keyshu-text: #5d6b75;
  --keyshu-heading: #1b4d55;
  --keyshu-border: #dce9ee;
  --keyshu-bg: #f3fbfc;
  --keyshu-white: #ffffff;
  --keyshu-danger: #ee4d2d;
}

/* =========================================================
   2. NỀN TRANG QUÊN MẬT KHẨU
========================================================= */

body.woocommerce-lost-password #main,
body.woocommerce-account:has(form.woocommerce-ResetPassword.lost_reset_password) #main {
  background: linear-gradient(180deg, #f5fcfd 0%, #edf8fa 100%) !important;
}

/* Ẩn tiêu đề My account mặc định */
body.woocommerce-lost-password .my-account-header,
body.woocommerce-account:has(form.woocommerce-ResetPassword.lost_reset_password) .my-account-header {
  display: none !important;
}

/* Reset khoảng cách wrapper */
body.woocommerce-lost-password .page-wrapper.my-account,
body.woocommerce-account:has(form.woocommerce-ResetPassword.lost_reset_password) .page-wrapper.my-account {
  margin: 0 !important;
  padding: 72px 16px 96px !important;
}

/* Container chính */
body.woocommerce-lost-password .page-wrapper.my-account .container,
body.woocommerce-account:has(form.woocommerce-ResetPassword.lost_reset_password) .page-wrapper.my-account .container {
  width: 100% !important;
  max-width: 640px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* Khối WooCommerce */
body.woocommerce-lost-password .woocommerce,
body.woocommerce-account:has(form.woocommerce-ResetPassword.lost_reset_password) .woocommerce {
  width: 100% !important;
}

/* =========================================================
   3. CARD FORM QUÊN MẬT KHẨU
========================================================= */

body.woocommerce-lost-password form.woocommerce-ResetPassword.lost_reset_password,
body.woocommerce-account form.woocommerce-ResetPassword.lost_reset_password {
  position: relative !important;
  width: 100% !important;
  max-width: 640px !important;
  margin: 0 auto !important;
  padding: 44px 38px 38px !important;
  border-radius: 24px !important;
  background: var(--keyshu-white) !important;
  border: 1px solid rgba(3, 176, 177, 0.16) !important;
  box-shadow:
    0 18px 45px rgba(32, 102, 112, 0.10),
    0 4px 12px rgba(32, 102, 112, 0.04) !important;
  overflow: hidden !important;
}

/* Thanh màu trên form */
body.woocommerce-lost-password form.woocommerce-ResetPassword.lost_reset_password::before,
body.woocommerce-account form.woocommerce-ResetPassword.lost_reset_password::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 6px !important;
  background: linear-gradient(
    90deg,
    var(--keyshu-primary) 0%,
    var(--keyshu-primary-light) 50%,
    var(--keyshu-primary) 100%
  ) !important;
}

/* Tắt icon cũ nếu còn cache */
body.woocommerce-lost-password form.woocommerce-ResetPassword.lost_reset_password::after,
body.woocommerce-account form.woocommerce-ResetPassword.lost_reset_password::after {
  content: none !important;
  display: none !important;
}

/* =========================================================
   4. ICON FONT AWESOME f084
   f084 = icon key
========================================================= */

body.woocommerce-lost-password form.woocommerce-ResetPassword.lost_reset_password > p:first-child::before,
body.woocommerce-account form.woocommerce-ResetPassword.lost_reset_password > p:first-child::before {
  content: "\f084" !important;
  font-family: "Font Awesome 7 Free", "Font Awesome 6 Free" !important;
  font-weight: 900 !important;

  width: 58px !important;
  height: 58px !important;
  margin: 0 auto 18px !important;
  border-radius: 50% !important;

  background: rgba(3, 176, 177, 0.10) !important;
  color: var(--keyshu-primary) !important;

  font-size: 23px !important;
  line-height: 58px !important;
  display: block !important;
  text-align: center !important;

  box-shadow:
    inset 0 0 0 1px rgba(3, 176, 177, 0.14),
    0 8px 20px rgba(3, 176, 177, 0.08) !important;
}

/* =========================================================
   5. ĐOẠN MÔ TẢ ĐẦU FORM
========================================================= */

body.woocommerce-lost-password form.woocommerce-ResetPassword.lost_reset_password > p:first-child,
body.woocommerce-account form.woocommerce-ResetPassword.lost_reset_password > p:first-child {
  max-width: 450px !important;
  margin: 0 auto 28px !important;
  color: var(--keyshu-text) !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
  font-weight: 650 !important;
  text-align: center !important;
}

/* =========================================================
   6. FORM ROW / LABEL
========================================================= */

body.woocommerce-lost-password form.woocommerce-ResetPassword.lost_reset_password .form-row,
body.woocommerce-account form.woocommerce-ResetPassword.lost_reset_password .form-row {
  width: 100% !important;
  margin: 0 0 22px !important;
  padding: 0 !important;
  float: none !important;
  display: block !important;
}

/* Label */
body.woocommerce-lost-password form.woocommerce-ResetPassword.lost_reset_password label,
body.woocommerce-account form.woocommerce-ResetPassword.lost_reset_password label {
  display: block !important;
  margin: 0 0 9px !important;
  color: var(--keyshu-heading) !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  font-weight: 800 !important;
  text-transform: none !important;
}

/* Dấu sao bắt buộc */
body.woocommerce-lost-password form.woocommerce-ResetPassword.lost_reset_password .required,
body.woocommerce-account form.woocommerce-ResetPassword.lost_reset_password .required {
  color: var(--keyshu-danger) !important;
  text-decoration: none !important;
}

/* =========================================================
   7. INPUT EMAIL / USERNAME
========================================================= */

body.woocommerce-lost-password form.woocommerce-ResetPassword.lost_reset_password input.input-text,
body.woocommerce-account form.woocommerce-ResetPassword.lost_reset_password input.input-text {
  width: 100% !important;
  height: 52px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  border-radius: 13px !important;
  border: 1.5px solid var(--keyshu-border) !important;
  background: #fbfeff !important;
  color: var(--keyshu-heading) !important;
  font-size: 15px !important;
  line-height: 52px !important;
  font-weight: 650 !important;
  outline: none !important;
  box-shadow: none !important;
  transition: all 0.25s ease !important;
}

/* Hover input */
body.woocommerce-lost-password form.woocommerce-ResetPassword.lost_reset_password input.input-text:hover,
body.woocommerce-account form.woocommerce-ResetPassword.lost_reset_password input.input-text:hover {
  border-color: rgba(3, 176, 177, 0.45) !important;
  background: #ffffff !important;
}

/* Focus input */
body.woocommerce-lost-password form.woocommerce-ResetPassword.lost_reset_password input.input-text:focus,
body.woocommerce-account form.woocommerce-ResetPassword.lost_reset_password input.input-text:focus {
  border-color: var(--keyshu-primary) !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 4px rgba(3, 176, 177, 0.10) !important;
}

/* Xóa clear mặc định WooCommerce */
body.woocommerce-lost-password form.woocommerce-ResetPassword.lost_reset_password .clear,
body.woocommerce-account form.woocommerce-ResetPassword.lost_reset_password .clear {
  display: none !important;
  clear: none !important;
}

/* =========================================================
   8. NÚT ĐẶT LẠI MẬT KHẨU
========================================================= */

body.woocommerce-lost-password form.woocommerce-ResetPassword.lost_reset_password .woocommerce-Button.button,
body.woocommerce-account form.woocommerce-ResetPassword.lost_reset_password .woocommerce-Button.button {
  width: 100% !important;
  min-height: 52px !important;
  height: 52px !important;
  margin: 4px 0 0 !important;
  padding: 0 24px !important;

  border: none !important;
  border-radius: 999px !important;
  background: linear-gradient(
    135deg,
    var(--keyshu-primary) 0%,
    #12c7c8 48%,
    var(--keyshu-primary-dark) 100%
  ) !important;

  color: #ffffff !important;
  font-size: 14px !important;
  line-height: 52px !important;
  font-weight: 900 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  text-align: center !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  cursor: pointer !important;
  box-shadow: 0 14px 28px rgba(3, 176, 177, 0.25) !important;
  transition: all 0.25s ease !important;
}

/* Tắt icon phía sau nút để không bị ô vuông */
body.woocommerce-lost-password form.woocommerce-ResetPassword.lost_reset_password .woocommerce-Button.button::before,
body.woocommerce-lost-password form.woocommerce-ResetPassword.lost_reset_password .woocommerce-Button.button::after,
body.woocommerce-account form.woocommerce-ResetPassword.lost_reset_password .woocommerce-Button.button::before,
body.woocommerce-account form.woocommerce-ResetPassword.lost_reset_password .woocommerce-Button.button::after {
  content: none !important;
  display: none !important;
}

/* Hover nút */
body.woocommerce-lost-password form.woocommerce-ResetPassword.lost_reset_password .woocommerce-Button.button:hover,
body.woocommerce-account form.woocommerce-ResetPassword.lost_reset_password .woocommerce-Button.button:hover {
  background: linear-gradient(
    135deg,
    #029fa1 0%,
    #12c7c8 48%,
    #007f83 100%
  ) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 18px 36px rgba(3, 176, 177, 0.32) !important;
}

/* Khi bấm nút */
body.woocommerce-lost-password form.woocommerce-ResetPassword.lost_reset_password .woocommerce-Button.button:active,
body.woocommerce-account form.woocommerce-ResetPassword.lost_reset_password .woocommerce-Button.button:active {
  transform: translateY(0) !important;
  box-shadow: 0 10px 22px rgba(3, 176, 177, 0.24) !important;
}

/* =========================================================
   9. THÔNG BÁO WOOCOMMERCE
========================================================= */

body.woocommerce-lost-password .woocommerce-notices-wrapper,
body.woocommerce-account:has(form.woocommerce-ResetPassword.lost_reset_password) .woocommerce-notices-wrapper {
  width: 100% !important;
  max-width: 640px !important;
  margin: 0 auto 18px !important;
}

body.woocommerce-lost-password .woocommerce-message,
body.woocommerce-lost-password .woocommerce-info,
body.woocommerce-lost-password .woocommerce-error,
body.woocommerce-account:has(form.woocommerce-ResetPassword.lost_reset_password) .woocommerce-message,
body.woocommerce-account:has(form.woocommerce-ResetPassword.lost_reset_password) .woocommerce-info,
body.woocommerce-account:has(form.woocommerce-ResetPassword.lost_reset_password) .woocommerce-error {
  border-radius: 14px !important;
  border-top-color: var(--keyshu-primary) !important;
  background: #ffffff !important;
  color: var(--keyshu-text) !important;
  box-shadow: 0 10px 24px rgba(30, 95, 105, 0.08) !important;
}

/* =========================================================
   10. RESPONSIVE - TABLET
========================================================= */

@media (max-width: 768px) {
  body.woocommerce-lost-password .page-wrapper.my-account,
  body.woocommerce-account:has(form.woocommerce-ResetPassword.lost_reset_password) .page-wrapper.my-account {
    padding: 52px 18px 76px !important;
  }

  body.woocommerce-lost-password .page-wrapper.my-account .container,
  body.woocommerce-account:has(form.woocommerce-ResetPassword.lost_reset_password) .page-wrapper.my-account .container {
    max-width: 560px !important;
  }

  body.woocommerce-lost-password form.woocommerce-ResetPassword.lost_reset_password,
  body.woocommerce-account form.woocommerce-ResetPassword.lost_reset_password {
    padding: 40px 28px 32px !important;
    border-radius: 22px !important;
  }

  body.woocommerce-lost-password form.woocommerce-ResetPassword.lost_reset_password > p:first-child,
  body.woocommerce-account form.woocommerce-ResetPassword.lost_reset_password > p:first-child {
    font-size: 14.5px !important;
    line-height: 1.7 !important;
  }

  body.woocommerce-lost-password form.woocommerce-ResetPassword.lost_reset_password > p:first-child::before,
  body.woocommerce-account form.woocommerce-ResetPassword.lost_reset_password > p:first-child::before {
    width: 56px !important;
    height: 56px !important;
    line-height: 56px !important;
    font-size: 22px !important;
  }
}

/* =========================================================
   11. RESPONSIVE - MOBILE
========================================================= */

@media (max-width: 480px) {
  body.woocommerce-lost-password .page-wrapper.my-account,
  body.woocommerce-account:has(form.woocommerce-ResetPassword.lost_reset_password) .page-wrapper.my-account {
    padding: 34px 14px 58px !important;
  }

  body.woocommerce-lost-password .page-wrapper.my-account .container,
  body.woocommerce-account:has(form.woocommerce-ResetPassword.lost_reset_password) .page-wrapper.my-account .container {
    max-width: 100% !important;
  }

  body.woocommerce-lost-password form.woocommerce-ResetPassword.lost_reset_password,
  body.woocommerce-account form.woocommerce-ResetPassword.lost_reset_password {
    padding: 34px 18px 24px !important;
    border-radius: 18px !important;
  }

  body.woocommerce-lost-password form.woocommerce-ResetPassword.lost_reset_password > p:first-child::before,
  body.woocommerce-account form.woocommerce-ResetPassword.lost_reset_password > p:first-child::before {
    width: 52px !important;
    height: 52px !important;
    margin-bottom: 16px !important;
    font-size: 21px !important;
    line-height: 52px !important;
  }

  body.woocommerce-lost-password form.woocommerce-ResetPassword.lost_reset_password > p:first-child,
  body.woocommerce-account form.woocommerce-ResetPassword.lost_reset_password > p:first-child {
    max-width: 100% !important;
    margin-bottom: 22px !important;
    font-size: 13.5px !important;
    line-height: 1.65 !important;
  }

  body.woocommerce-lost-password form.woocommerce-ResetPassword.lost_reset_password label,
  body.woocommerce-account form.woocommerce-ResetPassword.lost_reset_password label {
    font-size: 13.5px !important;
  }

  body.woocommerce-lost-password form.woocommerce-ResetPassword.lost_reset_password input.input-text,
  body.woocommerce-account form.woocommerce-ResetPassword.lost_reset_password input.input-text {
    height: 48px !important;
    line-height: 48px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
  }

  body.woocommerce-lost-password form.woocommerce-ResetPassword.lost_reset_password .woocommerce-Button.button,
  body.woocommerce-account form.woocommerce-ResetPassword.lost_reset_password .woocommerce-Button.button {
    min-height: 48px !important;
    height: 48px !important;
    line-height: 48px !important;
    font-size: 13px !important;
    padding: 0 18px !important;
  }
}

/* =========================================================
   12. MOBILE RẤT NHỎ
========================================================= */

@media (max-width: 360px) {
  body.woocommerce-lost-password .page-wrapper.my-account,
  body.woocommerce-account:has(form.woocommerce-ResetPassword.lost_reset_password) .page-wrapper.my-account {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  body.woocommerce-lost-password form.woocommerce-ResetPassword.lost_reset_password,
  body.woocommerce-account form.woocommerce-ResetPassword.lost_reset_password {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  body.woocommerce-lost-password form.woocommerce-ResetPassword.lost_reset_password > p:first-child,
  body.woocommerce-account form.woocommerce-ResetPassword.lost_reset_password > p:first-child {
    font-size: 13px !important;
  }

  body.woocommerce-lost-password form.woocommerce-ResetPassword.lost_reset_password .woocommerce-Button.button,
  body.woocommerce-account form.woocommerce-ResetPassword.lost_reset_password .woocommerce-Button.button {
    font-size: 12px !important;
  }
}
a.button.primary.wc-backward {
    border-radius: 30px;
}
/* =========================================================
   KEYSHU - WOOCOMMERCE CART PAGE REDESIGN
   Flatsome + WooCommerce
   Mobile First - Full CSS
========================================================= */

body.woocommerce-cart {
  --ks-cart-primary: #03b0b1;
  --ks-cart-primary-dark: #04989a;
  --ks-cart-red: #e02b2b;
  --ks-cart-red-dark: #c92121;
  --ks-cart-text: #1f2b3d;
  --ks-cart-muted: #7b8aa0;
  --ks-cart-soft: #f8fbff;
  --ks-cart-border: #e8eef5;
  --ks-cart-border-dark: #c9d7e8;
  --ks-cart-white: #ffffff;
  --ks-cart-shadow: 0 10px 25px rgba(31, 43, 61, 0.045);

  --ks-cart-pad: 14px;
  --ks-cart-thumb: 74px;
  --ks-cart-remove: 30px;
  --ks-cart-gap: 12px;
}

/* =========================================================
   1. BREADCRUMB / CHECKOUT STEPS
========================================================= */

body.woocommerce-cart .checkout-page-title {
  display: block !important;
  padding: 18px 14px 8px !important;
  background: #ffffff !important;
}

body.woocommerce-cart .checkout-page-title .page-title-inner {
  max-width: 1220px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

body.woocommerce-cart .checkout-breadcrumbs {
  justify-content: center !important;
  gap: 9px !important;
  margin: 0 !important;
  color: #c4ccd6 !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  text-shadow: none !important;
}

body.woocommerce-cart .checkout-breadcrumbs a {
  color: #c4ccd6 !important;
  text-decoration: none !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-shadow: none !important;
}

body.woocommerce-cart .checkout-breadcrumbs a.current {
  color: var(--ks-cart-text) !important;
  font-weight: 800 !important;
}

body.woocommerce-cart .checkout-breadcrumbs .divider {
  color: #b9c3cf !important;
  opacity: 1 !important;
}

/* =========================================================
   2. LAYOUT TỔNG
========================================================= */

body.woocommerce-cart #main {
  background: #ffffff !important;
}

body.woocommerce-cart .cart-container.page-checkout {
  max-width: 1220px !important;
  padding: 18px 14px 38px !important;
  font-family: "SVN-Gilroy", sans-serif !important;
}

body.woocommerce-cart .cart-container.page-checkout .woocommerce > .woocommerce.row {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 18px !important;
  margin: 0 !important;
}

body.woocommerce-cart .cart-container.page-checkout .row-divided > .col + .col {
  border-left: 0 !important;
}

body.woocommerce-cart .cart-container.page-checkout .cart-auto-refresh,
body.woocommerce-cart .cart-container.page-checkout .cart-collaterals {
  width: 100% !important;
  max-width: 100% !important;
  flex-basis: 100% !important;
  padding: 0 !important;
}

/* =========================================================
   3. FORM / WRAPPER
========================================================= */

body.woocommerce-cart .cart-container.page-checkout .woocommerce-cart-form {
  position: relative !important;
}

body.woocommerce-cart .cart-container.page-checkout .cart-wrapper {
  position: relative !important;
  padding-top: 0 !important;
  overflow: visible !important;
}

body.woocommerce-cart .cart-container.page-checkout .cart-wrapper::before,
body.woocommerce-cart .cart-container.page-checkout .cart-wrapper::after {
  display: none !important;
  content: none !important;
}

/* =========================================================
   4. TABLE CART THÀNH CARD
========================================================= */

body.woocommerce-cart .cart-container.page-checkout table.shop_table.cart {
  position: static !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-collapse: separate !important;
  background: transparent !important;
}

body.woocommerce-cart .cart-container.page-checkout table.shop_table.cart thead {
  display: none !important;
}

body.woocommerce-cart .cart-container.page-checkout table.shop_table.cart tbody {
  display: block !important;
  width: 100% !important;
}

body.woocommerce-cart .cart-container.page-checkout table.shop_table.cart td {
  display: block !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* =========================================================
   5. CARD SẢN PHẨM - MOBILE
========================================================= */

body.woocommerce-cart .cart-container.page-checkout table.shop_table.cart tr.cart_item {
  position: relative !important;
  display: grid !important;
  grid-template-columns: var(--ks-cart-thumb) minmax(0, 1fr) var(--ks-cart-remove) !important;
  grid-template-rows: auto auto auto auto !important;
  column-gap: var(--ks-cart-gap) !important;
  row-gap: 8px !important;
  width: 100% !important;
  min-height: 156px !important;
  margin: 0 0 14px !important;
  padding: var(--ks-cart-pad) !important;
  border: 1px solid var(--ks-cart-border) !important;
  border-radius: 16px !important;
  background: var(--ks-cart-white) !important;
  box-shadow: var(--ks-cart-shadow) !important;
}

/* =========================================================
   6. ẢNH SẢN PHẨM - MOBILE
========================================================= */

body.woocommerce-cart .cart-container.page-checkout td.product-thumbnail {
  grid-column: 1 !important;
  grid-row: 1 / span 4 !important;
  width: var(--ks-cart-thumb) !important;
  align-self: start !important;
}

body.woocommerce-cart .cart-container.page-checkout td.product-thumbnail a {
  width: 66px !important;
  height: 66px !important;
  border: 1px solid var(--ks-cart-border) !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

body.woocommerce-cart .cart-container.page-checkout td.product-thumbnail img {
  width: 100% !important;
  height: 100% !important;
  padding: 7px !important;
  object-fit: contain !important;
  border-radius: 12px !important;
}

/* =========================================================
   7. TÊN SẢN PHẨM - MOBILE
========================================================= */

body.woocommerce-cart .cart-container.page-checkout td.product-name {
  grid-column: 2 / 4 !important;
  grid-row: 1 !important;
  padding: 0 !important;
  align-self: start !important;
}

body.woocommerce-cart .cart-container.page-checkout td.product-name::before {
  display: none !important;
}

body.woocommerce-cart .cart-container.page-checkout td.product-name > a {
  color: var(--ks-cart-text) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  text-shadow: none !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

body.woocommerce-cart .cart-container.page-checkout td.product-name > a:hover {
  color: var(--ks-cart-primary) !important;
}

body.woocommerce-cart .cart-container.page-checkout .mobile-product-price {
  display: none !important;
}

/* =========================================================
   8. ĐƠN GIÁ - MOBILE
========================================================= */

body.woocommerce-cart .cart-container.page-checkout td.product-price {
  grid-column: 2 / 4 !important;
  grid-row: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-self: start !important;
  width: fit-content !important;
  max-width: 100% !important;
  min-height: 26px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  border: 1px solid rgba(224, 43, 43, 0.16) !important;
  border-radius: 999px !important;
  background: #fff7f7 !important;
  color: var(--ks-cart-red) !important;
  font-size: 11px !important;
  line-height: 26px !important;
  font-weight: 900 !important;
  box-shadow: 0 6px 14px rgba(224, 43, 43, 0.06) !important;
  text-shadow: none !important;
}

body.woocommerce-cart .cart-container.page-checkout td.product-price::before {
  content: "Đơn giá: " !important;
  margin-right: 3px !important;
  color: #68788f !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

body.woocommerce-cart .cart-container.page-checkout td.product-price .amount,
body.woocommerce-cart .cart-container.page-checkout td.product-price bdi,
body.woocommerce-cart .cart-container.page-checkout td.product-price .woocommerce-Price-currencySymbol {
  color: var(--ks-cart-red) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  text-shadow: none !important;
}

/* =========================================================
   9. SỐ LƯỢNG - MOBILE
========================================================= */

body.woocommerce-cart .cart-container.page-checkout td.product-quantity {
  grid-column: 2 / 4 !important;
  grid-row: 3 !important;
  margin: 0 !important;
  align-self: center !important;
  justify-self: start !important;
}

body.woocommerce-cart .cart-container.page-checkout td.product-quantity::before {
  display: none !important;
}

body.woocommerce-cart .cart-container.page-checkout .ux-quantity.quantity.buttons_added {
  width: fit-content !important;
  height: 34px !important;
  border: 1px solid var(--ks-cart-border-dark) !important;
  border-radius: 999px !important;
  background: #f8fbff !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center !important;
}

body.woocommerce-cart .cart-container.page-checkout .ux-quantity .button,
body.woocommerce-cart .cart-container.page-checkout .ux-quantity input[type="button"] {
  width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #5d718b !important;
  font-size: 17px !important;
  line-height: 32px !important;
  font-weight: 900 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

body.woocommerce-cart .cart-container.page-checkout .ux-quantity input.qty {
  width: 36px !important;
  height: 32px !important;
  min-height: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--ks-cart-text) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  text-align: center !important;
  box-shadow: none !important;
  text-shadow: none !important;
  appearance: textfield !important;
  -moz-appearance: textfield !important;
}

body.woocommerce-cart .cart-container.page-checkout .ux-quantity input.qty::-webkit-outer-spin-button,
body.woocommerce-cart .cart-container.page-checkout .ux-quantity input.qty::-webkit-inner-spin-button {
  margin: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

/* =========================================================
   10. THÀNH TIỀN + ICON XÓA - MOBILE
   Thành tiền bên trái, icon xóa cùng hàng bên phải
========================================================= */

body.woocommerce-cart .cart-container.page-checkout td.product-subtotal {
  grid-column: 2 !important;
  grid-row: 4 !important;
  justify-self: stretch !important;
  align-self: center !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 32px !important;
  text-align: left !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

body.woocommerce-cart .cart-container.page-checkout td.product-subtotal::before {
  content: "THÀNH TIỀN" !important;
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  color: #91a0b5 !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
  white-space: nowrap !important;
}

body.woocommerce-cart .cart-container.page-checkout td.product-subtotal .amount,
body.woocommerce-cart .cart-container.page-checkout td.product-subtotal bdi,
body.woocommerce-cart .cart-container.page-checkout td.product-subtotal .woocommerce-Price-currencySymbol {
  color: var(--ks-cart-red) !important;
  font-size: 17px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  text-shadow: none !important;
  white-space: nowrap !important;
}

/* Icon xóa nằm cùng hàng với thành tiền, sáng phải */
body.woocommerce-cart .cart-container.page-checkout td.product-remove {
  position: static !important;
  grid-column: 3 !important;
  grid-row: 4 !important;
  justify-self: end !important;
  align-self: center !important;
  z-index: 5 !important;
  width: 28px !important;
  height: 28px !important;
  margin: 0 !important;
}

body.woocommerce-cart .cart-container.page-checkout td.product-remove a.remove {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  border: 1px solid rgba(224, 43, 43, 0.18) !important;
  border-radius: 999px !important;
  background: #fff5f5 !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 28px !important;
  text-align: center !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 6px 14px rgba(224, 43, 43, 0.08) !important;
  transition: all 0.25s ease !important;
  text-shadow: none !important;
}

body.woocommerce-cart .cart-container.page-checkout td.product-remove a.remove::after {
  content: "\f2ed" !important;
  font-family: "Font Awesome 7 Free", "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  color: var(--ks-cart-red) !important;
  font-size: 13px !important;
  line-height: 1 !important;
  text-decoration: none !important;
  text-shadow: none !important;
}

body.woocommerce-cart .cart-container.page-checkout td.product-remove a.remove:hover {
  background: var(--ks-cart-red) !important;
  border-color: var(--ks-cart-red) !important;
  transform: translateY(-2px) !important;
}

body.woocommerce-cart .cart-container.page-checkout td.product-remove a.remove:hover::after {
  color: #ffffff !important;
}

/* =========================================================
   11. ACTION CUỐI BẢNG
========================================================= */

body.woocommerce-cart .cart-container.page-checkout table.shop_table.cart tr:not(.cart_item) {
  display: block !important;
  margin-top: 8px !important;
}

body.woocommerce-cart .cart-container.page-checkout table.shop_table.cart td.actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 0 !important;
  border: 0 !important;
}

body.woocommerce-cart .cart-container.page-checkout .continue-shopping {
  width: 100% !important;
  float: none !important;
}

body.woocommerce-cart .cart-container.page-checkout .button-continue-shopping {
  width: 100% !important;
  min-height: 42px !important;
  margin: 0 !important;
  border: 1.5px solid var(--ks-cart-primary) !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: var(--ks-cart-primary) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.woocommerce-cart .cart-container.page-checkout button[name="update_cart"] {
  width: 100% !important;
  min-height: 42px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  background: #eef4fa !important;
  color: #8c9aad !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

body.woocommerce-cart .cart-container.page-checkout button[name="update_cart"]:disabled {
  display: none !important;
}

/* =========================================================
   12. SIDEBAR - TỔNG CỘNG GIỎ HÀNG
========================================================= */

body.woocommerce-cart .cart-container.page-checkout .cart-sidebar {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

body.woocommerce-cart .cart-container.page-checkout .cart-sidebar,
body.woocommerce-cart .cart-container.page-checkout .cart-sidebar .col-inner {
  padding: 0 !important;
}

body.woocommerce-cart .cart-container.page-checkout .cart_totals,
body.woocommerce-cart .cart-container.page-checkout .ux-cart-coupon {
  width: 100% !important;
  margin: 0 !important;
  padding: 20px 18px !important;
  border: 1px solid var(--ks-cart-border) !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  box-shadow: var(--ks-cart-shadow) !important;
}

body.woocommerce-cart .cart-container.page-checkout .cart_totals h2 {
  margin: 0 0 14px !important;
  padding: 0 0 14px !important;
  border-bottom: 1px solid var(--ks-cart-border) !important;
  color: var(--ks-cart-text) !important;
  font-size: 17px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
  text-shadow: none !important;
}

body.woocommerce-cart .cart-container.page-checkout .cart_totals table.shop_table {
  width: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-collapse: collapse !important;
}

body.woocommerce-cart .cart-container.page-checkout .cart_totals table.shop_table tbody {
  display: block !important;
  width: 100% !important;
}

body.woocommerce-cart .cart-container.page-checkout .cart_totals table.shop_table tr {
  width: 100% !important;
  padding: 9px 0 !important;
  border: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

body.woocommerce-cart .cart-container.page-checkout .cart_totals table.shop_table th,
body.woocommerce-cart .cart-container.page-checkout .cart_totals table.shop_table td {
  width: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #607089 !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}

body.woocommerce-cart .cart-container.page-checkout .cart_totals table.shop_table td {
  color: var(--ks-cart-text) !important;
  font-weight: 900 !important;
  text-align: right !important;
}

body.woocommerce-cart .cart-container.page-checkout .cart_totals table.shop_table .amount,
body.woocommerce-cart .cart-container.page-checkout .cart_totals table.shop_table bdi {
  color: var(--ks-cart-text) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  text-shadow: none !important;
}

body.woocommerce-cart .cart-container.page-checkout .cart_totals tr.order-total {
  margin-top: 10px !important;
  padding-top: 18px !important;
  border-top: 1px solid var(--ks-cart-border) !important;
}

body.woocommerce-cart .cart-container.page-checkout .cart_totals tr.order-total th {
  color: var(--ks-cart-text) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}

body.woocommerce-cart .cart-container.page-checkout .cart_totals tr.order-total td {
  display: block !important;
}

body.woocommerce-cart .cart-container.page-checkout .cart_totals tr.order-total .amount,
body.woocommerce-cart .cart-container.page-checkout .cart_totals tr.order-total bdi,
body.woocommerce-cart .cart-container.page-checkout .cart_totals tr.order-total .woocommerce-Price-currencySymbol {
  color: var(--ks-cart-red) !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  text-shadow: none !important;
}

body.woocommerce-cart .cart-container.page-checkout .cart_totals tr.order-total td::after {
  content: "*Đã bao gồm VAT";
  display: block;
  margin-top: 4px;
  color: #98a6ba;
  font-size: 11px;
  font-style: italic;
  font-weight: 700;
  text-shadow: none !important;
}

body.woocommerce-cart .cart-container.page-checkout .wc-proceed-to-checkout {
  margin: 18px 0 0 !important;
  padding: 0 !important;
}

body.woocommerce-cart .cart-container.page-checkout .checkout-button {
  width: 100% !important;
  min-height: 52px !important;
  margin: 0 !important;
  padding: 0 22px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #ff4138 0%, var(--ks-cart-red-dark) 100%) !important;
  color: #ffffff !important;
  font-size: 0 !important;
  line-height: 52px !important;
  font-weight: 900 !important;
  letter-spacing: 0.2px !important;
  text-align: center !important;
  box-shadow: 0 12px 24px rgba(224, 43, 43, 0.24) !important;
  text-shadow: none !important;
}

body.woocommerce-cart .cart-container.page-checkout .checkout-button::after {
  content: "TIẾN HÀNH THANH TOÁN";
  color: #ffffff;
  font-size: 14px;
  font-weight: 900;
  text-shadow: none !important;
}

body.woocommerce-cart .cart-container.page-checkout .checkout-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(224, 43, 43, 0.32) !important;
}

body.woocommerce-cart .cart-container.page-checkout .cart_totals::after {
  content: "Vui lòng kiểm tra Sản phẩm & Quà tặng trước khi thanh toán";
  display: block;
  margin-top: 14px;
  color: #6f8097;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 700;
  text-shadow: none !important;
}

/* =========================================================
   13. MÃ GIẢM GIÁ
========================================================= */

body.woocommerce-cart .cart-container.page-checkout .ux-cart-coupon {
  position: relative !important;
}

body.woocommerce-cart .cart-container.page-checkout .ux-cart-coupon::before {
  content: "Mã Giảm Giá";
  display: block;
  margin: 0 0 16px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--ks-cart-border);
  color: var(--ks-cart-text);
  font-size: 16px;
  line-height: 1.2;
  font-weight: 900;
  text-shadow: none !important;
}

body.woocommerce-cart .cart-container.page-checkout .ux-cart-coupon .coupon {
  margin: 0 !important;
  padding: 0 !important;
}

body.woocommerce-cart .cart-container.page-checkout .ux-cart-coupon .widget-title {
  display: none !important;
}

body.woocommerce-cart .cart-container.page-checkout .ux-cart-coupon input.input-text {
  width: 100% !important;
  height: 44px !important;
  margin: 0 0 12px !important;
  padding: 0 18px !important;
  border: 1px solid var(--ks-cart-border-dark) !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: var(--ks-cart-text) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-align: center !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

body.woocommerce-cart .cart-container.page-checkout .ux-cart-coupon input.input-text::placeholder {
  color: #8b98aa !important;
}

body.woocommerce-cart .cart-container.page-checkout .ux-cart-coupon button[name="apply_coupon"] {
  width: 100% !important;
  height: 46px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--ks-cart-primary) !important;
  color: #ffffff !important;
  font-size: 0 !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  box-shadow: 0 10px 20px rgba(3, 176, 177, 0.18) !important;
  text-shadow: none !important;
}

body.woocommerce-cart .cart-container.page-checkout .ux-cart-coupon button[name="apply_coupon"]::after {
  content: "ÁP DỤNG";
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
  text-shadow: none !important;
}

body.woocommerce-cart .cart-container.page-checkout .ux-cart-coupon button[name="apply_coupon"]:hover {
  background: var(--ks-cart-primary-dark) !important;
  transform: translateY(-2px);
}

/* =========================================================
   14. TABLET / DESKTOP - HEADER CỘT TỰ TẠO
   Ảnh | Tên sản phẩm | Số lượng | Thành tiền | Xóa
========================================================= */

@media (min-width: 768px) {
  body.woocommerce-cart {
    --ks-cart-pad: 18px;
    --ks-cart-thumb: 86px;
    --ks-cart-qty: 126px;
    --ks-cart-subtotal: 150px;
    --ks-cart-remove: 50px;
    --ks-cart-gap: 18px;
  }

  body.woocommerce-cart .checkout-page-title {
    padding: 22px 14px 14px !important;
  }

  body.woocommerce-cart .checkout-breadcrumbs,
  body.woocommerce-cart .checkout-breadcrumbs a {
    font-size: 20px !important;
  }

  body.woocommerce-cart .cart-container.page-checkout {
    padding: 24px 18px 48px !important;
  }

  body.woocommerce-cart .cart-container.page-checkout .cart-wrapper {
    padding-top: 56px !important;
  }

  body.woocommerce-cart .cart-container.page-checkout .cart-wrapper::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 42px !important;
    border: 1px solid var(--ks-cart-border) !important;
    border-radius: 14px !important;
    background: var(--ks-cart-soft) !important;
    box-sizing: border-box !important;
    z-index: 1 !important;
  }

  body.woocommerce-cart .cart-container.page-checkout .cart-wrapper::after {
    content: "ẢNH" !important;
    display: flex !important;
    position: absolute !important;
    top: 0 !important;
    left: var(--ks-cart-pad) !important;
    width: var(--ks-cart-thumb) !important;
    height: 42px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    color: #6d7d92 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
    text-shadow: none !important;
    z-index: 2 !important;
  }

  body.woocommerce-cart .cart-container.page-checkout .woocommerce-cart-form::before {
    content: "TÊN SẢN PHẨM" !important;
    display: flex !important;
    position: absolute !important;
    top: 0 !important;
    left: calc(var(--ks-cart-pad) + var(--ks-cart-thumb) + var(--ks-cart-gap)) !important;
    right: calc(var(--ks-cart-pad) + var(--ks-cart-qty) + var(--ks-cart-subtotal) + var(--ks-cart-remove) + var(--ks-cart-gap) + var(--ks-cart-gap) + var(--ks-cart-gap)) !important;
    height: 42px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    color: #6d7d92 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
    text-shadow: none !important;
    white-space: nowrap !important;
    z-index: 2 !important;
    pointer-events: none !important;
  }

  body.woocommerce-cart .cart-container.page-checkout .woocommerce-cart-form::after {
    content: "SỐ LƯỢNG" !important;
    display: flex !important;
    position: absolute !important;
    top: 0 !important;
    right: calc(var(--ks-cart-pad) + var(--ks-cart-subtotal) + var(--ks-cart-remove) + var(--ks-cart-gap) + var(--ks-cart-gap)) !important;
    width: var(--ks-cart-qty) !important;
    height: 42px !important;
    align-items: center !important;
    justify-content: center !important;
    color: #6d7d92 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
    text-shadow: none !important;
    white-space: nowrap !important;
    z-index: 2 !important;
    pointer-events: none !important;
  }

  body.woocommerce-cart .cart-container.page-checkout table.shop_table.cart::before {
    content: "THÀNH TIỀN" !important;
    display: flex !important;
    position: absolute !important;
    top: 0 !important;
    right: calc(var(--ks-cart-pad) + var(--ks-cart-remove) + var(--ks-cart-gap)) !important;
    width: var(--ks-cart-subtotal) !important;
    height: 42px !important;
    align-items: center !important;
    justify-content: flex-end !important;
    color: #6d7d92 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
    text-shadow: none !important;
    white-space: nowrap !important;
    z-index: 2 !important;
    pointer-events: none !important;
  }

  body.woocommerce-cart .cart-container.page-checkout table.shop_table.cart::after {
    content: "XÓA" !important;
    display: flex !important;
    position: absolute !important;
    top: 0 !important;
    right: var(--ks-cart-pad) !important;
    width: var(--ks-cart-remove) !important;
    height: 42px !important;
    align-items: center !important;
    justify-content: center !important;
    color: #6d7d92 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
    text-shadow: none !important;
    white-space: nowrap !important;
    z-index: 2 !important;
    pointer-events: none !important;
  }

  body.woocommerce-cart .cart-container.page-checkout table.shop_table.cart tr.cart_item {
    display: grid !important;
    grid-template-columns:
      var(--ks-cart-thumb)
      minmax(0, 1fr)
      var(--ks-cart-qty)
      var(--ks-cart-subtotal)
      var(--ks-cart-remove) !important;
    min-height: 126px !important;
    padding: 22px var(--ks-cart-pad) !important;
    gap: 0 var(--ks-cart-gap) !important;
  }

  body.woocommerce-cart .cart-container.page-checkout td.product-thumbnail {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    width: var(--ks-cart-thumb) !important;
  }

  body.woocommerce-cart .cart-container.page-checkout td.product-thumbnail a {
    width: 78px !important;
    height: 78px !important;
  }

  body.woocommerce-cart .cart-container.page-checkout td.product-name {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: end !important;
    padding-right: 0 !important;
  }

  body.woocommerce-cart .cart-container.page-checkout td.product-name > a {
    font-size: 15px !important;
  }

  body.woocommerce-cart .cart-container.page-checkout td.product-price {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: start !important;
    justify-self: start !important;
    margin-top: 8px !important;
  }

  body.woocommerce-cart .cart-container.page-checkout td.product-quantity {
    grid-column: 3 !important;
    grid-row: 1 / span 2 !important;
    align-self: center !important;
    justify-self: center !important;
    margin-top: 0 !important;
  }

  body.woocommerce-cart .cart-container.page-checkout td.product-subtotal {
    grid-column: 4 !important;
    grid-row: 1 / span 2 !important;
    align-self: center !important;
    justify-self: end !important;
    margin-top: 0 !important;
    padding-right: 0 !important;
    text-align: right !important;
    display: block !important;
  }

  body.woocommerce-cart .cart-container.page-checkout td.product-subtotal::before {
    display: none !important;
    content: none !important;
  }

  body.woocommerce-cart .cart-container.page-checkout td.product-remove {
    position: static !important;
    grid-column: 5 !important;
    grid-row: 1 / span 2 !important;
    justify-self: center !important;
    align-self: center !important;
    transform: none !important;
  }

  body.woocommerce-cart .cart-container.page-checkout td.product-remove a.remove {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
  }

  body.woocommerce-cart .cart-container.page-checkout table.shop_table.cart td.actions {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  body.woocommerce-cart .cart-container.page-checkout .continue-shopping,
  body.woocommerce-cart .cart-container.page-checkout .button-continue-shopping,
  body.woocommerce-cart .cart-container.page-checkout button[name="update_cart"] {
    width: auto !important;
  }
}

/* =========================================================
   15. DESKTOP
========================================================= */

@media (min-width: 1024px) {
  body.woocommerce-cart {
    --ks-cart-pad: 24px;
    --ks-cart-thumb: 86px;
    --ks-cart-qty: 126px;
    --ks-cart-subtotal: 150px;
    --ks-cart-remove: 50px;
    --ks-cart-gap: 20px;
  }

  body.woocommerce-cart .cart-container.page-checkout {
    padding: 28px 16px 60px !important;
  }

  body.woocommerce-cart .cart-container.page-checkout .woocommerce > .woocommerce.row {
    grid-template-columns: minmax(0, 1fr) 380px !important;
    gap: 32px !important;
    align-items: start !important;
  }

  body.woocommerce-cart .cart-container.page-checkout .cart-auto-refresh {
    grid-column: 1 !important;
  }

  body.woocommerce-cart .cart-container.page-checkout .cart-collaterals {
    grid-column: 2 !important;
  }

  body.woocommerce-cart .cart-container.page-checkout .cart-sidebar {
    position: sticky !important;
    top: 96px !important;
  }

  body.woocommerce-cart .cart-container.page-checkout table.shop_table.cart tr.cart_item {
    min-height: 130px !important;
    border-radius: 18px !important;
  }

  body.woocommerce-cart .cart-container.page-checkout td.product-thumbnail a {
    width: 80px !important;
    height: 80px !important;
  }

  body.woocommerce-cart .cart-container.page-checkout td.product-name > a {
    max-width: 430px !important;
    font-size: 15px !important;
  }

  body.woocommerce-cart .cart-container.page-checkout td.product-subtotal .amount,
  body.woocommerce-cart .cart-container.page-checkout td.product-subtotal bdi {
    font-size: 18px !important;
  }

  body.woocommerce-cart .cart-container.page-checkout .cart_totals,
  body.woocommerce-cart .cart-container.page-checkout .ux-cart-coupon {
    padding: 22px 24px !important;
  }
}

/* =========================================================
   16. DESKTOP LỚN
========================================================= */

@media (min-width: 1200px) {
  body.woocommerce-cart .cart-container.page-checkout {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
/* =========================================================
   17. ẨN LOADING KHI CẬP NHẬT GIỎ HÀNG - DESKTOP
========================================================= */

@media (min-width: 768px) {
  body.woocommerce-cart .woocommerce .blockUI,
  body.woocommerce-cart .woocommerce .blockOverlay,
  body.woocommerce-cart .woocommerce-cart-form .blockUI,
  body.woocommerce-cart .woocommerce-cart-form .blockOverlay,
  body.woocommerce-cart .cart_totals .blockUI,
  body.woocommerce-cart .cart_totals .blockOverlay,
  body.woocommerce-cart .processing::before,
  body.woocommerce-cart .processing::after,
  body.woocommerce-cart .loading::before,
  body.woocommerce-cart .loading::after {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    background: transparent !important;
  }
}
/* =========================================================
   KEYSHU CHECKOUT UI - SAFE FULL CSS
   Chỉ chạy ở trang Checkout
   Không ảnh hưởng trang Giỏ hàng
========================================================= */

/* =========================
   1. CHECKOUT PAGE BASE
========================= */

body.woocommerce-checkout {
  --ks-primary: #03b0b1;
  --ks-primary-dark: #02999a;
  --ks-red: #ee2d2d;
  --ks-text: #17223e;
  --ks-muted: #66758b;
  --ks-light: #f5f8fb;
  --ks-border: #e7edf5;
  --ks-input-border: #dbe4ef;
  --ks-shadow: 0 16px 36px rgba(26, 42, 68, 0.06);

  background: var(--ks-light) !important;
  font-family: "SVN-Gilroy", sans-serif;
}

body.woocommerce-checkout #main {
  background: var(--ks-light) !important;
}

/* =========================
   2. BREADCRUMB CHECKOUT
========================= */

body.woocommerce-checkout .checkout-page-title {
  display: block !important;
  background: var(--ks-light) !important;
  padding: 18px 0 8px !important;
  margin: 0 !important;
  border: 0 !important;
}

body.woocommerce-checkout .checkout-page-title .page-title-inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 16px !important;
}

body.woocommerce-checkout .checkout-breadcrumbs {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 0 14px !important;
  border-bottom: 1px solid #dce4ee !important;
  font-size: 20px !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

body.woocommerce-checkout .checkout-breadcrumbs a {
  display: inline-flex !important;
  align-items: center !important;
  color: #b7bec9 !important;
  text-decoration: none !important;
  font-size: 20px !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
  letter-spacing: 0.8px;
  opacity: 1 !important;
}

body.woocommerce-checkout .checkout-breadcrumbs a.current {
  color: var(--ks-text) !important;
  font-weight: 500 !important;
}

body.woocommerce-checkout .checkout-breadcrumbs a.no-click {
  color: #c9ced6 !important;
}

body.woocommerce-checkout .checkout-breadcrumbs .divider {
  display: inline-flex !important;
  align-items: center !important;
  color: #c9ced6 !important;
  font-size: 16px !important;
  opacity: 1 !important;
}

body.woocommerce-checkout .checkout-breadcrumbs .divider i {
  font-size: 16px !important;
  color: #c9ced6 !important;
}

/* =========================
   3. PAGE LAYOUT
========================= */

body.woocommerce-checkout .cart-container.container.page-wrapper.page-checkout {
  max-width: 1320px !important;
  width: 100% !important;
  padding: 0 24px 50px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

body.woocommerce-checkout .page-checkout .woocommerce {
  display: grid !important;
  /* grid-template-columns: minmax(0, 2fr) minmax(360px, 1fr) !important; */
  column-gap: 30px !important;
  row-gap: 0 !important;
  align-items: start !important;
}
/* Cột trái - Thông tin giao hàng */
body.woocommerce-checkout .page-checkout form.checkout.woocommerce-checkout > .row > .large-7.col {
  grid-column: 1 !important;
  grid-row: 2 / span 7 !important;
  width: 100% !important;
  max-width: none !important;
  flex: none !important;
  padding: 0 !important;
}

/* Cột phải - Giỏ hàng, mã giảm giá, đơn hàng */
body.woocommerce-checkout .page-checkout .ks-checkout-cart-title,
body.woocommerce-checkout .page-checkout .woocommerce-checkout-review-order-table tbody,
body.woocommerce-checkout .page-checkout .checkout_coupon.woocommerce-form-coupon,
body.woocommerce-checkout .page-checkout .woocommerce-checkout-review-order-table tfoot,
body.woocommerce-checkout .page-checkout #payment.woocommerce-checkout-payment {
  grid-column: 2 !important;
}

body.woocommerce-checkout .page-checkout .woocommerce > .woocommerce-notices-wrapper {
  grid-column: 1;
  grid-row: 1;
  width: 100% !important;
  margin: 0 0 14px !important;
}

body.woocommerce-checkout .page-checkout .woocommerce > .woocommerce-notices-wrapper:empty {
  display: none !important;
  margin: 0 !important;
}

body.woocommerce-checkout .page-checkout .woocommerce-message,
body.woocommerce-checkout .page-checkout .woocommerce-info,
body.woocommerce-checkout .page-checkout .woocommerce-error {
  margin: 0 0 14px !important;
  padding: 10px 14px 10px 34px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: #1fbf84 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

body.woocommerce-checkout .page-checkout .woocommerce-message::before,
body.woocommerce-checkout .page-checkout .woocommerce-info::before {
  color: #1fbf84 !important;
  left: 10px !important;
  top: 10px !important;
}

body.woocommerce-checkout .page-checkout .woocommerce-error {
  color: #e3342f !important;
}

body.woocommerce-checkout .page-checkout .woocommerce-error::before {
  color: #e3342f !important;
  left: 10px !important;
  top: 10px !important;
}

/* Ẩn dòng mở mã giảm giá mặc định */
body.woocommerce-checkout .page-checkout .woocommerce-form-coupon-toggle {
  display: none !important;
}

/* Cho phép sắp xếp lại layout checkout */
body.woocommerce-checkout .page-checkout form.checkout.woocommerce-checkout,
body.woocommerce-checkout .page-checkout form.checkout.woocommerce-checkout > .row,
body.woocommerce-checkout .page-checkout form.checkout.woocommerce-checkout > .row > .large-5.col,
body.woocommerce-checkout .page-checkout form.checkout.woocommerce-checkout .large-5.col > .col-inner,
body.woocommerce-checkout .page-checkout form.checkout.woocommerce-checkout .checkout-sidebar,
body.woocommerce-checkout .page-checkout form.checkout.woocommerce-checkout #order_review,
body.woocommerce-checkout .page-checkout .woocommerce-checkout-review-order-table {
  display: contents !important;
}

body.woocommerce-checkout .page-checkout form.checkout.woocommerce-checkout > .row > .large-7.col {
  grid-column: 1;
  grid-row: 2 / span 7;
  width: auto !important;
  max-width: none !important;
  flex: none !important;
  padding: 0 !important;
}

body.woocommerce-checkout .page-checkout .large-5.col,
body.woocommerce-checkout .page-checkout .large-7.col {
  float: none !important;
}

body.woocommerce-checkout .page-checkout .large-5.col .col-inner.has-border {
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.woocommerce-checkout .page-checkout .woocommerce-privacy-policy-text {
  display: none !important;
}

/* =========================
   4. LEFT COLUMN - SHIPPING INFO
========================= */

body.woocommerce-checkout .page-checkout #customer_details {
  width: 100%;
}

body.woocommerce-checkout .page-checkout .woocommerce-billing-fields h3 {
  margin: 0 0 18px !important;
  color: var(--ks-text) !important;
  font-size: 20px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

body.woocommerce-checkout .page-checkout .woocommerce-billing-fields__field-wrapper {
  width: 100%;
  padding: 28px 28px 24px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid var(--ks-border);
  box-shadow: var(--ks-shadow);
}

body.woocommerce-checkout .page-checkout .woocommerce-billing-fields__field-wrapper::after {
  content: "";
  display: block;
  clear: both;
}

body.woocommerce-checkout .page-checkout .form-row {
  padding: 0 !important;
  margin: 0 0 18px !important;
}

body.woocommerce-checkout .page-checkout .woocommerce-billing-fields .form-row-wide {
  width: 100% !important;
  float: none !important;
  clear: both !important;
}

body.woocommerce-checkout .page-checkout .woocommerce-billing-fields .form-row-first,
body.woocommerce-checkout .page-checkout .woocommerce-billing-fields .form-row-last {
  width: calc(50% - 8px) !important;
  clear: none !important;
}

body.woocommerce-checkout .page-checkout .woocommerce-billing-fields .form-row-first {
  float: left !important;
}

body.woocommerce-checkout .page-checkout .woocommerce-billing-fields .form-row-last {
  float: right !important;
}

body.woocommerce-checkout .page-checkout .woocommerce-billing-fields label {
  display: block;
  margin: 0 0 8px !important;
  color: var(--ks-text) !important;
  font-size: 13px !important;
  line-height: 1.3;
  font-weight: 800 !important;
}

body.woocommerce-checkout .page-checkout .woocommerce-billing-fields .required {
  color: var(--ks-text) !important;
  text-decoration: none !important;
}

body.woocommerce-checkout .page-checkout .woocommerce-billing-fields .optional {
  display: none !important;
}

body.woocommerce-checkout .page-checkout .woocommerce-billing-fields input.input-text,
body.woocommerce-checkout .page-checkout .woocommerce-billing-fields textarea.input-text {
  width: 100% !important;
  min-height: 46px;
  height: 46px;
  padding: 0 16px !important;
  border-radius: 9px !important;
  border: 1px solid var(--ks-input-border) !important;
  background: #ffffff !important;
  color: var(--ks-text) !important;
  font-size: 14px !important;
  font-weight: 500;
  box-shadow: none !important;
  outline: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body.woocommerce-checkout .page-checkout .woocommerce-billing-fields textarea.input-text {
  padding-top: 13px !important;
  resize: vertical;
  overflow: hidden;
}

body.woocommerce-checkout .page-checkout .woocommerce-billing-fields input.input-text::placeholder,
body.woocommerce-checkout .page-checkout .woocommerce-billing-fields textarea.input-text::placeholder {
  color: #8b96a8 !important;
}

body.woocommerce-checkout .page-checkout .woocommerce-billing-fields input.input-text:focus,
body.woocommerce-checkout .page-checkout .woocommerce-billing-fields textarea.input-text:focus {
  border-color: var(--ks-primary) !important;
  box-shadow: 0 0 0 3px rgba(3, 176, 177, 0.1) !important;
}

/* =========================
   5. RIGHT COLUMN - CART TITLE
========================= */

/* Ẩn tiêu đề mặc định của WooCommerce */
body.woocommerce-checkout .page-checkout #order_review_heading {
  display: none !important;
}

/* Tiêu đề giỏ hàng custom từ function PHP */
body.woocommerce-checkout .page-checkout .ks-checkout-cart-title {
  grid-column: 2;
  grid-row: 2;
  margin: 0 !important;
  padding: 20px 18px 14px !important;
  border-radius: 16px 16px 0 0;
  background: #ffffff;
  border: 1px solid var(--ks-border);
  border-bottom: 0;
  box-shadow: 0 14px 32px rgba(26, 42, 68, 0.06);
  color: var(--ks-text) !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  text-transform: none !important;
}

body.woocommerce-checkout .page-checkout .ks-checkout-cart-title .ks-cart-count {
  margin-left: 5px;
  color: #8995aa;
  font-size: 11px;
  font-weight: 600;
  vertical-align: 1px;
}

body.woocommerce-checkout .page-checkout .ks-checkout-cart-title::after {
  content: "⌃";
  float: right;
  color: #66758b;
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
}

/* =========================
   6. RIGHT COLUMN - CART PRODUCTS
========================= */

body.woocommerce-checkout .page-checkout .woocommerce-checkout-review-order-table thead {
  display: none !important;
}

body.woocommerce-checkout .page-checkout .woocommerce-checkout-review-order-table tbody {
  grid-column: 2;
  grid-row: 3;
  display: block !important;
  width: 100% !important;
  max-height: 258px;
  margin: 0 0 20px !important;
  padding: 0 16px 0 !important;
  border-radius: 0 0 16px 16px;
  border: 1px solid var(--ks-border);
  border-top: 0;
  background: #ffffff;
  box-shadow: 0 14px 32px rgba(26, 42, 68, 0.06);
  overflow-y: auto;
  overflow-x: hidden;
}

body.woocommerce-checkout .page-checkout .woocommerce-checkout-review-order-table tbody::-webkit-scrollbar {
  width: 4px;
}

body.woocommerce-checkout .page-checkout .woocommerce-checkout-review-order-table tbody::-webkit-scrollbar-track {
  background: #edf2f7;
  border-radius: 999px;
}

body.woocommerce-checkout .page-checkout .woocommerce-checkout-review-order-table tbody::-webkit-scrollbar-thumb {
  background: #c2ccda;
  border-radius: 999px;
}

body.woocommerce-checkout .page-checkout .woocommerce-checkout-review-order-table tr.cart_item {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 10px;
  align-items: center;
  padding: 14px 0 !important;
  border-bottom: 1px dashed #edf2f6 !important;
}

body.woocommerce-checkout .page-checkout .woocommerce-checkout-review-order-table tr.cart_item:last-of-type {
  border-bottom: 0 !important;
}

body.woocommerce-checkout .page-checkout .woocommerce-checkout-review-order-table td,
body.woocommerce-checkout .page-checkout .woocommerce-checkout-review-order-table th {
  padding: 0 !important;
  border: 0 !important;
}

body.woocommerce-checkout .page-checkout .woocommerce-checkout-review-order-table td.product-name {
  position: relative;
  min-height: 54px;
  padding-left: 64px !important;
  color: var(--ks-text) !important;
  font-size: 12.5px !important;
  line-height: 1.35;
  font-weight: 800;
}

/* fallback nếu chưa có ảnh */
body.woocommerce-checkout .page-checkout .woocommerce-checkout-review-order-table td.product-name::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 52px;
  height: 52px;
  border-radius: 8px;
  border: 1px solid #edf2f7;
  background:
    radial-gradient(circle at 50% 45%, rgba(3, 176, 177, 0.1) 0%, rgba(3, 176, 177, 0) 54%),
    linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9);
}

/* ảnh sản phẩm thật */
body.woocommerce-checkout .page-checkout .ks-checkout-product-thumb {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 52px;
  height: 52px;
  border-radius: 8px;
  border: 1px solid #edf2f7;
  background: #ffffff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.woocommerce-checkout .page-checkout .ks-checkout-product-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

body.woocommerce-checkout .page-checkout .woocommerce-checkout-review-order-table .product-quantity {
  display: block;
  margin-top: 6px;
  color: #7b899f !important;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 600;
}

body.woocommerce-checkout .page-checkout .woocommerce-checkout-review-order-table td.product-total {
  text-align: right;
  white-space: nowrap;
  color: var(--ks-text) !important;
  font-size: 12px !important;
  line-height: 1.2;
  font-weight: 800;
}

body.woocommerce-checkout .page-checkout .woocommerce-checkout-review-order-table td.product-total::before {
  content: "Thành tiền: ";
  color: #7b899f;
  font-size: 11px;
  font-weight: 600;
}

body.woocommerce-checkout .page-checkout .woocommerce-checkout-review-order-table td.product-total .amount,
body.woocommerce-checkout .page-checkout .woocommerce-checkout-review-order-table td.product-total bdi {
  color: var(--ks-text) !important;
  font-weight: 800 !important;
}

/* =========================================================
   FIX - TỔNG TIỀN TRONG GIỎ HÀNG ĐỨNG IM KHI CUỘN
========================================================= */

body.woocommerce-checkout .page-checkout .ks-cart-total-row {
  display: block !important;
  position: sticky !important;
  bottom: 0 !important;
  z-index: 20 !important;

  margin: 0 -16px !important;
  padding: 0 !important;
  border: 0 !important;
  background: #f8fafc !important;
  box-shadow: 0 -8px 16px rgba(26, 42, 68, 0.06) !important;
}

body.woocommerce-checkout .page-checkout .ks-cart-total-row td {
  display: flex !important;
  align-items: center;
  justify-content: space-between;

  width: 100% !important;
  padding: 16px 18px !important;
  border: 0 !important;
  background: #f8fafc !important;
}

body.woocommerce-checkout .page-checkout .ks-cart-total-row .ks-cart-total-label {
  color: var(--ks-text);
  font-size: 13px;
  font-weight: 800;
}

body.woocommerce-checkout .page-checkout .ks-cart-total-row .ks-cart-total-value,
body.woocommerce-checkout .page-checkout .ks-cart-total-row .ks-cart-total-value .amount,
body.woocommerce-checkout .page-checkout .ks-cart-total-row .ks-cart-total-value bdi {
  color: var(--ks-red) !important;
  font-size: 15px;
  font-weight: 900 !important;
}

body.woocommerce-checkout .page-checkout .ks-cart-total-row td {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  width: 100% !important;
  padding: 16px 18px !important;
  border: 0 !important;
  background: #f8fafc !important;
}

body.woocommerce-checkout .page-checkout .ks-cart-total-row .ks-cart-total-label {
  color: var(--ks-text);
  font-size: 13px;
  font-weight: 800;
}

body.woocommerce-checkout .page-checkout .ks-cart-total-row .ks-cart-total-value,
body.woocommerce-checkout .page-checkout .ks-cart-total-row .ks-cart-total-value .amount,
body.woocommerce-checkout .page-checkout .ks-cart-total-row .ks-cart-total-value bdi {
  color: var(--ks-red) !important;
  font-size: 15px;
  font-weight: 900 !important;
}

/* =========================
   7. RIGHT COLUMN - COUPON
========================= */

body.woocommerce-checkout .page-checkout .checkout_coupon.woocommerce-form-coupon {
  grid-column: 2;
  grid-row: 4;
  display: block !important;
  position: relative;
  width: 100% !important;
  margin: 0 0 20px !important;
  padding: 18px !important;
  border-radius: 16px !important;
  border: 1px solid var(--ks-border) !important;
  background: #ffffff !important;
  box-shadow: 0 14px 32px rgba(26, 42, 68, 0.06);
}

body.woocommerce-checkout .page-checkout .checkout_coupon.woocommerce-form-coupon::before {
  content: "Mã Giảm Giá";
  display: block;
  margin-bottom: 14px;
  padding-right: 150px;
  color: var(--ks-text);
  font-size: 15px;
  line-height: 1.2;
  font-weight: 800;
}

body.woocommerce-checkout .page-checkout .checkout_coupon.woocommerce-form-coupon::after {
  content: "Mã Giảm Giá & Ưu Đãi Của Tôi ›";
  position: absolute;
  top: 20px;
  right: 18px;
  max-width: 145px;
  color: #1d55d8;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

body.woocommerce-checkout .page-checkout .checkout_coupon .coupon {
  margin: 0 !important;
  padding: 0 !important;
}

body.woocommerce-checkout .page-checkout .checkout_coupon .flex-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
}

body.woocommerce-checkout .page-checkout .checkout_coupon .flex-col.flex-grow {
  flex: 1 1 auto !important;
  min-width: 0;
}

body.woocommerce-checkout .page-checkout .checkout_coupon .flex-col:last-child {
  flex: 0 0 auto !important;
}

body.woocommerce-checkout .page-checkout .checkout_coupon input#coupon_code {
  width: 100% !important;
  height: 42px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  border: 1px solid var(--ks-input-border) !important;
  background: #f8fbfd !important;
  color: var(--ks-text) !important;
  font-size: 13px !important;
  box-shadow: none !important;
  outline: none !important;
  text-transform: none !important;
}

body.woocommerce-checkout .page-checkout .checkout_coupon input#coupon_code::placeholder {
  color: #8b96a8 !important;
}

body.woocommerce-checkout .page-checkout .checkout_coupon button[name="apply_coupon"] {
  height: 42px !important;
  min-width: 96px;
  padding: 0 18px !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: var(--ks-primary) !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  box-shadow: none !important;
}

body.woocommerce-checkout .page-checkout .checkout_coupon button[name="apply_coupon"]:hover {
  background: var(--ks-primary-dark) !important;
}

/* =========================
   8. RIGHT COLUMN - ORDER SUMMARY
========================= */

body.woocommerce-checkout .page-checkout .woocommerce-checkout-review-order-table tfoot {
  grid-column: 2;
  grid-row: 5;
  display: block !important;
  width: 100% !important;
  margin: 0 0 18px !important;
  padding: 22px 18px !important;
  border-radius: 16px !important;
  border: 1px solid var(--ks-border) !important;
  background: #ffffff !important;
  box-shadow: 0 14px 32px rgba(26, 42, 68, 0.06);
}

body.woocommerce-checkout .page-checkout .woocommerce-checkout-review-order-table tfoot::before {
  content: "Đơn Hàng Của Bạn";
  display: block;
  margin-bottom: 16px;
  color: var(--ks-text);
  font-size: 15px;
  line-height: 1.25;
  font-weight: 800;
}

body.woocommerce-checkout .page-checkout .woocommerce-checkout-review-order-table tfoot tr {
  display: flex !important;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0 !important;
  border: 0 !important;
}

body.woocommerce-checkout .page-checkout .woocommerce-checkout-review-order-table tfoot th,
body.woocommerce-checkout .page-checkout .woocommerce-checkout-review-order-table tfoot td {
  display: block !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.woocommerce-checkout .page-checkout .woocommerce-checkout-review-order-table tfoot th {
  color: #6b7890 !important;
  font-size: 13px !important;
  line-height: 1.3;
  font-weight: 600 !important;
  text-align: left;
}

body.woocommerce-checkout .page-checkout .woocommerce-checkout-review-order-table tfoot td {
  color: var(--ks-text) !important;
  font-size: 13px !important;
  line-height: 1.3;
  font-weight: 800 !important;
  text-align: right;
  white-space: nowrap;
}

body.woocommerce-checkout .page-checkout .woocommerce-checkout-review-order-table tfoot .amount,
body.woocommerce-checkout .page-checkout .woocommerce-checkout-review-order-table tfoot bdi {
  color: var(--ks-text) !important;
  font-weight: 800 !important;
}

body.woocommerce-checkout .page-checkout .woocommerce-checkout-review-order-table tfoot .cart-discount th,
body.woocommerce-checkout .page-checkout .woocommerce-checkout-review-order-table tfoot .cart-discount td {
  color: #5f6f88 !important;
}

body.woocommerce-checkout .page-checkout .woocommerce-checkout-review-order-table tfoot .cart-discount .amount {
  color: var(--ks-text) !important;
}

body.woocommerce-checkout .page-checkout .woocommerce-checkout-review-order-table tfoot .cart-discount a {
  color: var(--ks-primary) !important;
  font-weight: 800;
  text-decoration: none !important;
}

body.woocommerce-checkout .page-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total {
  margin-top: 12px;
  padding-top: 18px !important;
  border-top: 1px solid #edf2f6 !important;
  align-items: center;
}

body.woocommerce-checkout .page-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total th {
  color: var(--ks-text) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

body.woocommerce-checkout .page-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total td,
body.woocommerce-checkout .page-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total .amount,
body.woocommerce-checkout .page-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total bdi {
  color: var(--ks-red) !important;
  font-size: 18px !important;
  line-height: 1.15;
  font-weight: 900 !important;
}

body.woocommerce-checkout .page-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total td::after {
  content: "*Đã bao gồm VAT";
  display: block;
  margin-top: 2px;
  color: #8b96a8;
  font-size: 10px;
  font-style: italic;
  font-weight: 600;
}

/* =========================
   9. PAYMENT + PLACE ORDER BUTTON
========================= */

body.woocommerce-checkout .page-checkout #payment.woocommerce-checkout-payment {
  grid-column: 2;
  grid-row: 6;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.woocommerce-checkout .page-checkout #payment .wc_payment_methods {
  display: none !important;
}

body.woocommerce-checkout .page-checkout #payment .woocommerce-terms-and-conditions-wrapper {
  display: none !important;
}

body.woocommerce-checkout .page-checkout #payment .form-row.place-order {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.woocommerce-checkout .page-checkout #place_order {
  position: relative;
  width: 100% !important;
  height: 52px !important;
  margin: 0 !important;
  padding: 0 20px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #ff443b 0%, #d7252b 100%) !important;
  color: transparent !important;
  font-size: 0 !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  box-shadow: 0 14px 26px rgba(220, 38, 38, 0.28) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body.woocommerce-checkout .page-checkout #place_order::after {
  content: "TIẾN HÀNH THANH TOÁN";
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.3px;
}

body.woocommerce-checkout .page-checkout #place_order:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 30px rgba(220, 38, 38, 0.34) !important;
}

/* =========================
   10. MOBILE
========================= */

@media (max-width: 849px) {
  body.woocommerce-checkout .checkout-page-title {
    padding: 12px 0 6px !important;
  }

  body.woocommerce-checkout .checkout-breadcrumbs {
    gap: 7px !important;
    padding-bottom: 10px !important;
    font-size: 12px !important;
    letter-spacing: 0.2px;
    overflow-x: auto;
    white-space: nowrap;
    justify-content: flex-start !important;
    scrollbar-width: none;
  }

  body.woocommerce-checkout .checkout-breadcrumbs::-webkit-scrollbar {
    display: none;
  }

  body.woocommerce-checkout .checkout-breadcrumbs a,
  body.woocommerce-checkout .checkout-breadcrumbs .divider,
  body.woocommerce-checkout .checkout-breadcrumbs .divider i {
    display: inline-flex !important;
    font-size: 12px !important;
    white-space: nowrap;
  }

  body.woocommerce-checkout .cart-container.container.page-wrapper.page-checkout {
    max-width: 390px !important;
    padding: 8px 12px 38px !important;
  }

  body.woocommerce-checkout .page-checkout .woocommerce {
    grid-template-columns: 1fr !important;
    column-gap: 0;
    row-gap: 0;
  }

  body.woocommerce-checkout .page-checkout .woocommerce > .woocommerce-notices-wrapper {
    grid-column: 1;
    grid-row: 1;
  }

  body.woocommerce-checkout .page-checkout form.checkout.woocommerce-checkout > .row > .large-7.col {
    grid-column: 1;
    grid-row: 2;
  }

  body.woocommerce-checkout .page-checkout .woocommerce-billing-fields h3 {
    font-size: 18px !important;
    margin-bottom: 18px !important;
  }

  body.woocommerce-checkout .page-checkout .woocommerce-billing-fields h3::after {
    max-width: 330px;
    font-size: 12px;
  }

  body.woocommerce-checkout .page-checkout .woocommerce-billing-fields__field-wrapper {
    padding: 17px 16px 16px;
    border-radius: 14px;
    box-shadow: 0 12px 28px rgba(26, 42, 68, 0.05);
  }

  body.woocommerce-checkout .page-checkout .form-row {
    margin-bottom: 15px !important;
  }

  body.woocommerce-checkout .page-checkout .woocommerce-billing-fields .form-row-first,
  body.woocommerce-checkout .page-checkout .woocommerce-billing-fields .form-row-last {
    width: 100% !important;
    float: none !important;
    clear: both !important;
  }

  body.woocommerce-checkout .page-checkout .woocommerce-billing-fields label {
    font-size: 12.5px !important;
    margin-bottom: 7px !important;
  }

  body.woocommerce-checkout .page-checkout .woocommerce-billing-fields input.input-text,
  body.woocommerce-checkout .page-checkout .woocommerce-billing-fields textarea.input-text {
    height: 38px;
    min-height: 38px;
    padding: 0 13px !important;
    border-radius: 9px !important;
    font-size: 12.5px !important;
  }

  body.woocommerce-checkout .page-checkout .woocommerce-billing-fields textarea.input-text {
    padding-top: 10px !important;
  }

  body.woocommerce-checkout .page-checkout .ks-checkout-cart-title {
    grid-column: 1;
    grid-row: 3;
    margin-top: 30px !important;
    padding: 22px 20px 13px !important;
    border-radius: 14px 14px 0 0;
    font-size: 15px !important;
  }

  body.woocommerce-checkout .page-checkout .ks-checkout-cart-title .ks-cart-count {
    font-size: 10.5px;
  }

  body.woocommerce-checkout .page-checkout .woocommerce-checkout-review-order-table tbody {
    grid-column: 1;
    grid-row: 4;
    max-height: 258px;
    margin-bottom: 18px !important;
    padding: 0 17px 0 !important;
    border-radius: 0 0 14px 14px !important;
  }

  body.woocommerce-checkout .page-checkout .woocommerce-checkout-review-order-table tr.cart_item {
    gap: 8px;
    padding: 13px 0 !important;
  }

  body.woocommerce-checkout .page-checkout .woocommerce-checkout-review-order-table td.product-name {
    min-height: 50px;
    padding-left: 61px !important;
    font-size: 12px !important;
  }

  body.woocommerce-checkout .page-checkout .woocommerce-checkout-review-order-table td.product-name::before,
  body.woocommerce-checkout .page-checkout .ks-checkout-product-thumb {
    width: 50px;
    height: 50px;
  }

  body.woocommerce-checkout .page-checkout .woocommerce-checkout-review-order-table td.product-total {
    font-size: 11.5px !important;
  }

  body.woocommerce-checkout .page-checkout .ks-cart-total-row {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 20 !important;
  margin: 0 -17px !important;
}

  body.woocommerce-checkout .page-checkout .ks-cart-total-row td {
    padding: 15px 17px !important;
  }

  body.woocommerce-checkout .page-checkout .checkout_coupon.woocommerce-form-coupon {
    grid-column: 1;
    grid-row: 5;
    margin-bottom: 18px !important;
    padding: 17px !important;
    border-radius: 14px !important;
  }

  body.woocommerce-checkout .page-checkout .checkout_coupon.woocommerce-form-coupon::before {
    font-size: 14px;
    margin-bottom: 14px;
    padding-right: 130px;
  }

  body.woocommerce-checkout .page-checkout .checkout_coupon.woocommerce-form-coupon::after {
    top: 19px;
    right: 17px;
    max-width: 125px;
    font-size: 10px;
  }

  body.woocommerce-checkout .page-checkout .checkout_coupon .flex-row {
    gap: 9px !important;
  }

  body.woocommerce-checkout .page-checkout .checkout_coupon input#coupon_code {
    height: 38px !important;
    padding: 0 14px !important;
    font-size: 12px !important;
  }

  body.woocommerce-checkout .page-checkout .checkout_coupon button[name="apply_coupon"] {
    height: 38px !important;
    min-width: 90px;
    padding: 0 14px !important;
    font-size: 11px !important;
  }

  body.woocommerce-checkout .page-checkout .woocommerce-checkout-review-order-table tfoot {
    grid-column: 1;
    grid-row: 6;
    margin-bottom: 18px !important;
    padding: 20px 18px !important;
    border-radius: 14px !important;
  }

  body.woocommerce-checkout .page-checkout .woocommerce-checkout-review-order-table tfoot::before {
    font-size: 14px;
  }

  body.woocommerce-checkout .page-checkout .woocommerce-checkout-review-order-table tfoot th,
  body.woocommerce-checkout .page-checkout .woocommerce-checkout-review-order-table tfoot td {
    font-size: 12.5px !important;
  }

  body.woocommerce-checkout .page-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total th {
    font-size: 13px !important;
  }

  body.woocommerce-checkout .page-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total td,
  body.woocommerce-checkout .page-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total .amount,
  body.woocommerce-checkout .page-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total bdi {
    font-size: 18px !important;
  }

  body.woocommerce-checkout .page-checkout #payment.woocommerce-checkout-payment {
    grid-column: 1;
    grid-row: 7;
  }

  body.woocommerce-checkout .page-checkout #place_order {
    height: 48px !important;
  }

  body.woocommerce-checkout .page-checkout #place_order::after {
    font-size: 12px;
  }
}

/* =========================
   11. SMALL MOBILE
========================= */

@media (max-width: 390px) {
  body.woocommerce-checkout .cart-container.container.page-wrapper.page-checkout {
    max-width: 100% !important;
  }

  body.woocommerce-checkout .page-checkout .checkout_coupon.woocommerce-form-coupon::before {
    padding-right: 0;
  }

  body.woocommerce-checkout .page-checkout .checkout_coupon.woocommerce-form-coupon::after {
    position: static;
    display: block;
    max-width: 100%;
    margin: -7px 0 13px;
    text-align: left;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  body.woocommerce-checkout .page-checkout .woocommerce-checkout-review-order-table tr.cart_item {
    grid-template-columns: 1fr;
  }

  body.woocommerce-checkout .page-checkout .woocommerce-checkout-review-order-table td.product-total {
    text-align: left;
    padding-left: 61px !important;
  }

  body.woocommerce-checkout .page-checkout .checkout_coupon .flex-row {
    flex-wrap: nowrap !important;
  }

  body.woocommerce-checkout .page-checkout .checkout_coupon button[name="apply_coupon"] {
    min-width: 82px;
  }
}
/* =========================================================
   FIX MẠNH - XOÁ LOADING Ở FORM ÁP DỤNG MÃ GIẢM GIÁ
========================================================= */

/* 1. Xoá overlay/loading do WooCommerce BlockUI chèn vào */
body.woocommerce-checkout .blockUI,
body.woocommerce-checkout .blockOverlay,
body.woocommerce-checkout .blockMsg {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 2. Xoá spinner/overlay khi form mã giảm giá bị class processing */
body.woocommerce-checkout form.checkout_coupon.processing::before,
body.woocommerce-checkout form.checkout_coupon.processing::after,
body.woocommerce-checkout .checkout_coupon.processing::before,
body.woocommerce-checkout .checkout_coupon.processing::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  animation: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* 3. Không cho khối mã giảm giá bị mờ khi đang xử lý */
body.woocommerce-checkout form.checkout_coupon.processing,
body.woocommerce-checkout form.checkout_coupon.processing *,
body.woocommerce-checkout .checkout_coupon.processing,
body.woocommerce-checkout .checkout_coupon.processing * {
  opacity: 1 !important;
}

/* 4. Xoá icon loading nếu nút Áp dụng bị thêm trạng thái loading */
body.woocommerce-checkout .checkout_coupon button[name="apply_coupon"].loading::before,
body.woocommerce-checkout .checkout_coupon button[name="apply_coupon"].loading::after,
body.woocommerce-checkout .checkout_coupon button[name="apply_coupon"]::before,
body.woocommerce-checkout .checkout_coupon button[name="apply_coupon"]::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  animation: none !important;
}

/* 5. Giữ lại nút Áp dụng không bị xoay / mờ */
body.woocommerce-checkout .checkout_coupon button[name="apply_coupon"] {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
}
/* =========================================================
   FIX - TEXT LỖI MÃ GIẢM GIÁ
========================================================= */

body.woocommerce-checkout .page-checkout .checkout_coupon .coupon-error-notice {
  display: block !important;
  margin-top: 8px !important;
  color: #6b7890 !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
}
/* =========================================================
   KEYSHU - WOOCOMMERCE THANK YOU PAGE FINAL CSS
   Flatsome + WooCommerce
   Container: 1320px
   Dán thay thế toàn bộ CSS cũ của trang order received
========================================================= */

:root {
  --ks-primary: #03b0b1;
  --ks-primary-dark: #008f91;
  --ks-primary-soft: rgba(3, 176, 177, 0.09);

  --ks-heading: #153f49;
  --ks-text: #4f6270;
  --ks-muted: #7a8b96;

  --ks-bg: #f5fafb;
  --ks-card: #ffffff;
  --ks-card-soft: #f8fcfd;
  --ks-border: #dfeaf0;

  --ks-danger: #ef3434;

  --ks-radius-xl: 24px;
  --ks-radius-lg: 18px;
  --ks-radius-md: 12px;

  --ks-shadow-main: 0 18px 45px rgba(21, 63, 73, 0.08);
  --ks-shadow-card: 0 10px 28px rgba(21, 63, 73, 0.06);

  --ks-fa: "Font Awesome 7 Free", "Font Awesome 6 Free";
}

/* =========================================================
   MAIN CONTAINER 1320PX
========================================================= */

body.woocommerce-checkout .cart-container.container.page-wrapper.page-checkout {
  width: 100%;
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  padding: 26px 32px 70px;
  box-sizing: border-box;
}

/* Container phụ nếu Flatsome render thêm class khác */
body.woocommerce-checkout .cart-container.page-wrapper.page-checkout,
body.woocommerce-checkout .cart-container.page-checkout,
body.woocommerce-checkout .cart-container.container {
  width: 100%;
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* =========================================================
   CHECKOUT BREADCRUMB
========================================================= */

body.woocommerce-checkout .checkout-page-title {
  background: transparent;
  padding: 22px 0 0;
  border: none;
}

body.woocommerce-checkout .checkout-page-title .container {
  width: 100%;
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 32px;
  padding-right: 32px;
  box-sizing: border-box;
}

body.woocommerce-checkout .checkout-breadcrumbs {
  width: 100%;
  max-width: 100%;
  padding: 0 0 18px;
  margin: 0;

  border-bottom: 1px solid rgba(21, 63, 73, 0.12);

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
}

body.woocommerce-checkout .checkout-breadcrumbs a,
body.woocommerce-checkout .checkout-breadcrumbs span,
body.woocommerce-checkout .checkout-breadcrumbs .divider {
  color: #b1bdc4;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

body.woocommerce-checkout .checkout-breadcrumbs .current,
body.woocommerce-checkout .checkout-breadcrumbs a.current,
body.woocommerce-checkout .checkout-breadcrumbs span.current,
body.woocommerce-checkout .checkout-breadcrumbs .active {
  color: var(--ks-heading);
  font-weight: 900;
}

/* =========================================================
   WOOCOMMERCE WRAPPER
   Lưu ý: không dùng grid-template-columns: minmax(0, 1fr) 340px ở đây
========================================================= */

body.woocommerce-checkout .page-checkout .woocommerce {
  width: 100%;
  max-width: 100%;
  display: block;
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
}

/* =========================================================
   THANK YOU PAGE MAIN LAYOUT
========================================================= */

body.woocommerce-checkout .page-checkout .woocommerce .woocommerce-order.row {
  width: 100%;
  max-width: 100%;

  margin: 0;
  padding: 0;

  display: grid;
  grid-template-columns: minmax(0, 1fr) 430px;
  gap: 34px;
  align-items: start;
}

body.woocommerce-checkout .page-checkout .woocommerce .woocommerce-order.row > .large-7,
body.woocommerce-checkout .page-checkout .woocommerce .woocommerce-order.row > .large-5,
body.woocommerce-checkout .page-checkout .woocommerce .woocommerce-order.row > .col {
  width: 100%;
  max-width: 100%;
  flex: none;
  flex-basis: auto;

  padding-left: 0;
  padding-right: 0;

  margin-left: 0;
  margin-right: 0;

  box-sizing: border-box;
}

body.woocommerce-checkout .page-checkout .woocommerce .woocommerce-order.row > .large-7 {
  grid-column: 1;
  min-width: 0;
}

body.woocommerce-checkout .page-checkout .woocommerce .woocommerce-order.row > .large-5 {
  grid-column: 2;
  min-width: 0;
}

/* =========================================================
   PAYMENT NOTICE
========================================================= */

body.woocommerce-checkout .woocommerce-order.row > .large-7 > p:first-child {
  position: relative;

  margin: 0 0 20px;
  padding: 16px 18px 16px 50px;

  border-radius: 16px;
  border: 1px solid var(--ks-border);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--ks-shadow-card);

  color: var(--ks-text);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 700;
}

body.woocommerce-checkout .woocommerce-order.row > .large-7 > p:first-child::before {
  content: "\f0d1";
  font-family: var(--ks-fa);
  font-weight: 900;

  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);

  width: 24px;
  height: 24px;
  border-radius: 50%;

  background: var(--ks-primary-soft);
  color: var(--ks-primary);

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 11px;
}

/* =========================================================
   RIGHT SUCCESS CARD
========================================================= */

body.woocommerce-checkout .woocommerce-order.row > .large-5 .col-inner,
body.woocommerce-checkout .woocommerce-order.row > .large-5 .is-well,
body.woocommerce-checkout .woocommerce-order.row > .large-5 .is-well.col-inner.entry-content {
  width: 100%;
  max-width: 430px;

  position: sticky;
  top: 24px;

  margin: 0 0 0 auto;
  padding: 28px 26px;

  border: 1px solid rgba(3, 176, 177, 0.18);
  border-radius: var(--ks-radius-xl);

  background:
    linear-gradient(180deg, rgba(3, 176, 177, 0.08) 0%, rgba(255, 255, 255, 1) 32%),
    #ffffff;

  box-shadow: var(--ks-shadow-main);
  overflow: hidden;
}

body.woocommerce-checkout .woocommerce-thankyou-order-received {
  position: relative;

  margin: 0 0 22px;

  border: none;
  border-bottom: 1px solid var(--ks-border);

  color: var(--ks-muted);
  font-size: 15px;
  line-height: 1.65;
  font-weight: 650;
  text-align: center;
  padding: 130px 0 20px;
}

body.woocommerce-checkout .woocommerce-thankyou-order-received::before {
  content: "\f00c";
  font-family: var(--ks-fa);
  font-weight: 900;

  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);

  width: 78px;
  height: 78px;
  border-radius: 50%;

  background: linear-gradient(135deg, var(--ks-primary), var(--ks-primary-dark));
  color: #ffffff;

  border: none;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 30px;
  box-shadow: 0 16px 34px rgba(3, 176, 177, 0.25);
}

body.woocommerce-checkout .woocommerce-thankyou-order-received::after {
  content: "Đặt hàng thành công!";
  position: absolute;
  left: 50%;
  top: 96px;
  transform: translateX(-50%);

  width: 100%;
  text-align: center;

  color: var(--ks-heading);
  font-size: 28px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: -0.5px;
}

body.woocommerce-checkout .woocommerce-thankyou-order-received strong {
  color: var(--ks-primary-dark);
  font-weight: 850;
}

/* =========================================================
   ORDER OVERVIEW LIST
========================================================= */

body.woocommerce-checkout .woocommerce-order-overview {
  margin: 0;
  padding: 0;
  list-style: none;

  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

body.woocommerce-checkout .woocommerce-order-overview li {
  position: relative;

  margin: 0;
  padding: 13px 14px 13px 42px;

  border: 1px solid var(--ks-border);
  border-radius: 14px;
  background: #ffffff;

  color: var(--ks-muted);
  font-size: 13px;
  line-height: 1.55;
  font-weight: 700;
  text-transform: none;

  box-shadow: 0 7px 18px rgba(21, 63, 73, 0.04);
}

body.woocommerce-checkout .woocommerce-order-overview li::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 20px;

  width: 8px;
  height: 8px;
  border-radius: 50%;

  background: var(--ks-primary);
  box-shadow: 0 0 0 5px rgba(3, 176, 177, 0.1);
}

body.woocommerce-checkout .woocommerce-order-overview li strong {
  display: inline;

  color: var(--ks-heading);
  font-size: 13px;
  line-height: 1.55;
  font-weight: 900;

  word-break: break-word;
}

body.woocommerce-checkout .woocommerce-order-overview .email strong,
body.woocommerce-checkout .woocommerce-order-overview li.email strong {
  word-break: break-all;
}

body.woocommerce-checkout .is-well .clear {
  display: none;
}

/* =========================================================
   LEFT CARDS
========================================================= */

body.woocommerce-checkout .woocommerce-order-details,
body.woocommerce-checkout .woocommerce-customer-details {
  width: 100%;
  max-width: 100%;

  margin: 0 0 24px;
  padding: 26px;

  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-xl);
  background: rgba(255, 255, 255, 0.98);

  box-shadow: var(--ks-shadow-card);
}

/* =========================================================
   SECTION TITLES
========================================================= */

body.woocommerce-checkout .woocommerce-order-details__title,
body.woocommerce-checkout .woocommerce-column__title {
  display: flex;
  align-items: center;
  gap: 11px;

  margin: 0 0 20px;

  color: var(--ks-heading);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 900;
  letter-spacing: -0.4px;
  text-transform: none;
}

body.woocommerce-checkout .woocommerce-order-details__title::before,
body.woocommerce-checkout .woocommerce-column__title::before {
  font-family: var(--ks-fa);
  font-weight: 900;

  width: 30px;
  height: 30px;
  border-radius: 50%;

  background: var(--ks-primary-soft);
  color: var(--ks-primary);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 13px;
  flex: 0 0 auto;
}

body.woocommerce-checkout .woocommerce-order-details__title::before {
  content: "\f291";
}

body.woocommerce-checkout .woocommerce-column__title::before {
  content: "\f05a";
}

/* =========================================================
   ORDER DETAILS TABLE
========================================================= */

body.woocommerce-checkout .woocommerce-table--order-details {
  width: 100%;
  max-width: 100%;

  margin: 0;

  border: 1px solid var(--ks-border);
  border-radius: 18px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;

  background: #ffffff;
}

body.woocommerce-checkout .woocommerce-table--order-details thead th {
  padding: 17px 20px;

  border: none;
  border-bottom: 1px solid var(--ks-border);
  background: #f6fafb;

  color: var(--ks-muted);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 900;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

body.woocommerce-checkout .woocommerce-table--order-details thead th.product-name {
  text-align: left;
}

body.woocommerce-checkout .woocommerce-table--order-details thead th.product-total {
  text-align: right;
}

body.woocommerce-checkout .woocommerce-table--order-details tbody td {
  padding: 17px 20px;

  border: none;
  border-bottom: 1px solid #edf3f5;
  background: #ffffff;

  vertical-align: top;
}

body.woocommerce-checkout .woocommerce-table--order-details .product-name {
  width: 70%;
  padding-right: 16px;
}

body.woocommerce-checkout .woocommerce-table--order-details .product-name a {
  color: var(--ks-heading);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 800;
  text-decoration: none;
}

body.woocommerce-checkout .woocommerce-table--order-details .product-name a:hover {
  color: var(--ks-primary-dark);
}

body.woocommerce-checkout .woocommerce-table--order-details .product-quantity {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-left: 7px;
  padding: 4px 8px;

  border-radius: 999px;
  background: var(--ks-primary-soft);

  color: var(--ks-primary-dark);
  font-size: 11px;
  line-height: 1;
  font-weight: 900;
  white-space: nowrap;
}

body.woocommerce-checkout .woocommerce-table--order-details .product-total {
  width: 30%;
  text-align: right;
  white-space: nowrap;
}

body.woocommerce-checkout .woocommerce-table--order-details .amount,
body.woocommerce-checkout .woocommerce-table--order-details .amount bdi {
  color: var(--ks-heading);
  font-size: 14px;
  font-weight: 900;
}

/* Table footer */
body.woocommerce-checkout .woocommerce-table--order-details tfoot th,
body.woocommerce-checkout .woocommerce-table--order-details tfoot td {
  padding: 15px 20px;

  border: none;
  border-bottom: 1px solid #edf3f5;
  background: #fbfdfe;

  color: var(--ks-text);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 800;
}

body.woocommerce-checkout .woocommerce-table--order-details tfoot th {
  text-align: left;
}

body.woocommerce-checkout .woocommerce-table--order-details tfoot td {
  text-align: right;
}

body.woocommerce-checkout .woocommerce-table--order-details tfoot tr:last-child th,
body.woocommerce-checkout .woocommerce-table--order-details tfoot tr:last-child td {
  border-bottom: none;
}

/* Highlight dòng tổng cộng */
body.woocommerce-checkout .woocommerce-table--order-details tfoot tr:nth-child(2) th,
body.woocommerce-checkout .woocommerce-table--order-details tfoot tr:nth-child(2) td {
  background: #ffffff;
}

body.woocommerce-checkout .woocommerce-table--order-details tfoot tr:nth-child(2) th {
  color: var(--ks-heading);
  font-size: 17px;
  font-weight: 900;
}

body.woocommerce-checkout .woocommerce-table--order-details tfoot tr:nth-child(2) td,
body.woocommerce-checkout .woocommerce-table--order-details tfoot tr:nth-child(2) td .amount,
body.woocommerce-checkout .woocommerce-table--order-details tfoot tr:nth-child(2) td .amount bdi {
  color: var(--ks-danger);
  font-size: 20px;
  font-weight: 900;
}

/* =========================================================
   CUSTOMER DETAILS
   Tên + địa chỉ dùng chung 1 icon
   Phone + Email có icon riêng, tất cả icon thẳng hàng
========================================================= */

body.woocommerce-checkout .woocommerce-customer-details address {
  --ks-customer-icon-left: 22px;
  --ks-customer-text-left: 58px;
  --ks-customer-icon-size: 21px;

  /* Icon dùng chung cho tên + địa chỉ */
  --ks-customer-main-icon-top: 94px;

  position: relative;

  margin: 0;
  padding: 22px 22px 22px var(--ks-customer-text-left);

  border: 1px solid var(--ks-border);
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdfe 100%);

  color: var(--ks-text);
  font-size: 14px;
  line-height: 1.65;
  font-style: normal;
  font-weight: 700;
}

/* Tiêu đề nhỏ */
body.woocommerce-checkout .woocommerce-customer-details address::before {
  content: "Thông tin nhận hàng";
  display: block;

  margin-bottom: 14px;
  padding-bottom: 14px;

  border-bottom: 1px solid var(--ks-border);

  color: var(--ks-heading);
  font-size: 15px;
  line-height: 1.4;
  font-weight: 900;
}

body.woocommerce-checkout .woocommerce-customer-details address::after {
  content: "\f3c5";
  font-family: var(--ks-fa);
  font-weight: 900;

  position: absolute;
  left: var(--ks-customer-icon-left);
  top: var(--ks-customer-main-icon-top);
  transform: translateY(-50%);

  width: var(--ks-customer-icon-size);
  height: var(--ks-customer-icon-size);
  border-radius: 50%;

  background: var(--ks-primary-soft);
  color: var(--ks-primary);

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 10px;
}

/* Khoảng cách dòng tên / địa chỉ */
body.woocommerce-checkout .woocommerce-customer-details address br {
  display: block;
  content: "";
  margin-bottom: 7px;
}

/* Điện thoại + Email */
body.woocommerce-checkout .woocommerce-customer-details--phone,
body.woocommerce-checkout .woocommerce-customer-details--email {
  position: relative;

  margin: 10px 0 0 calc(var(--ks-customer-icon-left) - var(--ks-customer-text-left));
  padding-left: calc(var(--ks-customer-text-left) - var(--ks-customer-icon-left));

  color: var(--ks-muted);
  font-size: 14px;
  line-height: var(--ks-customer-icon-size);
  font-style: normal;
  font-weight: 700;
}

body.woocommerce-checkout .woocommerce-customer-details--phone::before,
body.woocommerce-checkout .woocommerce-customer-details--email::before {
  font-family: var(--ks-fa);
  font-weight: 900;

  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);

  width: var(--ks-customer-icon-size);
  height: var(--ks-customer-icon-size);
  border-radius: 50%;

  background: var(--ks-primary-soft);
  color: var(--ks-primary);

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 10px;
}

body.woocommerce-checkout .woocommerce-customer-details--phone::before {
  content: "\f095";
}

body.woocommerce-checkout .woocommerce-customer-details--email::before {
  content: "\f0e0";
}

body.woocommerce-checkout .woocommerce-customer-details--email {
  word-break: break-word;
}

/* =========================================================
   BUTTONS IF EXISTS
========================================================= */

body.woocommerce-checkout .woocommerce-order a.button,
body.woocommerce-checkout .woocommerce-order .button,
body.woocommerce-checkout .woocommerce-order .wc-forward {
  min-height: 46px;
  padding: 0 26px;

  border-radius: 999px;
  border: 1px solid var(--ks-primary);

  background: var(--ks-primary);
  color: #ffffff;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  font-size: 14px;
  font-weight: 800;
  text-transform: none;

  box-shadow: 0 10px 22px rgba(3, 176, 177, 0.22);
  transition: 0.25s ease;
}

body.woocommerce-checkout .woocommerce-order a.button:hover,
body.woocommerce-checkout .woocommerce-order .button:hover,
body.woocommerce-checkout .woocommerce-order .wc-forward:hover {
  background: var(--ks-primary-dark);
  border-color: var(--ks-primary-dark);
  transform: translateY(-1px);
}

/* =========================================================
   TABLET RESPONSIVE
========================================================= */

@media (max-width: 1024px) {
  body.woocommerce-checkout .cart-container.container.page-wrapper.page-checkout {
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }

  body.woocommerce-checkout .checkout-page-title .container {
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }

  body.woocommerce-checkout .page-checkout .woocommerce .woocommerce-order.row {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  body.woocommerce-checkout .page-checkout .woocommerce .woocommerce-order.row > .large-5 {
    grid-column: 1;
    order: 1;
  }

  body.woocommerce-checkout .page-checkout .woocommerce .woocommerce-order.row > .large-7 {
    grid-column: 1;
    order: 2;
  }

  body.woocommerce-checkout .woocommerce-order.row > .large-5 .col-inner,
  body.woocommerce-checkout .woocommerce-order.row > .large-5 .is-well,
  body.woocommerce-checkout .woocommerce-order.row > .large-5 .is-well.col-inner.entry-content {
    max-width: 100%;
    position: relative;
    top: 0;
    margin-left: 0;
    margin-right: 0;
  }

  body.woocommerce-checkout .woocommerce-thankyou-order-received::after {
    font-size: 27px;
  }

  body.woocommerce-checkout .woocommerce-order-details,
  body.woocommerce-checkout .woocommerce-customer-details {
    padding: 22px;
  }
}

/* =========================================================
   MOBILE RESPONSIVE
========================================================= */

@media (max-width: 600px) {
  body.woocommerce-checkout .checkout-page-title {
    display: none;
  }

  body.woocommerce-checkout .cart-container.container.page-wrapper.page-checkout {
    padding: 12px 12px 36px;
  }

  body.woocommerce-checkout .page-checkout .woocommerce .woocommerce-order.row {
    gap: 16px;
  }

  body.woocommerce-checkout .woocommerce-order.row > .large-5 .col-inner,
  body.woocommerce-checkout .woocommerce-order.row > .large-5 .is-well,
  body.woocommerce-checkout .woocommerce-order.row > .large-5 .is-well.col-inner.entry-content {
    padding: 22px 16px;
    border-radius: 18px;
  }

  body.woocommerce-checkout .woocommerce-thankyou-order-received {
    padding-top: 92px;
    font-size: 13.5px;
    line-height: 2.65;
  }

  body.woocommerce-checkout .woocommerce-thankyou-order-received::before {
    width: 62px;
    height: 62px;
    border-width: 7px;
    font-size: 22px;
  }

  body.woocommerce-checkout .woocommerce-thankyou-order-received::after {
    top: 72px;
    font-size: 23px;
    letter-spacing: -0.3px;
  }

  body.woocommerce-checkout .woocommerce-order-overview {
    gap: 10px;
  }

  body.woocommerce-checkout .woocommerce-order-overview li {
    padding: 12px 12px 12px 36px;
    font-size: 12.5px;
  }

  body.woocommerce-checkout .woocommerce-order-overview li::before {
    left: 14px;
    top: 18px;
    width: 7px;
    height: 7px;
  }

  body.woocommerce-checkout .woocommerce-order-overview li strong {
    display: block;
    margin-top: 4px;
    font-size: 13px;
  }

  body.woocommerce-checkout .woocommerce-order.row > .large-7 > p:first-child {
    padding: 13px 14px 13px 42px;
    font-size: 13px;
    border-radius: 14px;
  }

  body.woocommerce-checkout .woocommerce-order.row > .large-7 > p:first-child::before {
    left: 14px;
  }

  body.woocommerce-checkout .woocommerce-order-details,
  body.woocommerce-checkout .woocommerce-customer-details {
    padding: 16px;
    border-radius: 16px;
  }

  body.woocommerce-checkout .woocommerce-order-details__title,
  body.woocommerce-checkout .woocommerce-column__title {
    margin-bottom: 14px;
    font-size: 19px;
  }

  body.woocommerce-checkout .woocommerce-order-details__title::before,
  body.woocommerce-checkout .woocommerce-column__title::before {
    width: 25px;
    height: 25px;
    font-size: 11px;
  }

  body.woocommerce-checkout .woocommerce-table--order-details {
    border-radius: 14px;
  }

  body.woocommerce-checkout .woocommerce-table--order-details thead {
    display: none;
  }

  body.woocommerce-checkout .woocommerce-table--order-details tbody tr,
  body.woocommerce-checkout .woocommerce-table--order-details tfoot tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
  }

  body.woocommerce-checkout .woocommerce-table--order-details tbody td {
    padding: 14px;
  }

  body.woocommerce-checkout .woocommerce-table--order-details .product-name {
    width: auto;
    padding-right: 0;
  }

  body.woocommerce-checkout .woocommerce-table--order-details .product-name a {
    font-size: 13px;
    line-height: 1.45;
  }

  body.woocommerce-checkout .woocommerce-table--order-details .product-quantity {
    width: fit-content;
    margin: 7px 0 0;
  }

  body.woocommerce-checkout .woocommerce-table--order-details .product-total {
    width: auto;
    text-align: right;
  }

  body.woocommerce-checkout .woocommerce-table--order-details .amount,
  body.woocommerce-checkout .woocommerce-table--order-details .amount bdi {
    font-size: 13px;
  }

  body.woocommerce-checkout .woocommerce-table--order-details tfoot th,
  body.woocommerce-checkout .woocommerce-table--order-details tfoot td {
    padding: 12px 14px;
    font-size: 13px;
  }

  body.woocommerce-checkout .woocommerce-table--order-details tfoot tr:nth-child(2) th {
    font-size: 15px;
  }

  body.woocommerce-checkout .woocommerce-table--order-details tfoot tr:nth-child(2) td,
  body.woocommerce-checkout .woocommerce-table--order-details tfoot tr:nth-child(2) td .amount,
  body.woocommerce-checkout .woocommerce-table--order-details tfoot tr:nth-child(2) td .amount bdi {
    font-size: 17px;
  }

  /* =========================================================
   FIX MOBILE - CUSTOMER DETAILS
   Sửa icon tên/địa chỉ/phone/email không bị lệch
========================================================= */

@media (max-width: 600px) {
  body.woocommerce-checkout .woocommerce-customer-details address {
    --ks-customer-icon-left: 24px;
    --ks-customer-text-left: 58px;
    --ks-customer-icon-size: 20px;
    --ks-customer-main-icon-top: 93px;

    position: relative;

    margin: 0;
    padding: 16px 16px 16px var(--ks-customer-text-left);

    border: 1px solid var(--ks-border);
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdfe 100%);

    color: var(--ks-text);
    font-size: 13px;
    line-height: 1.55;
    font-style: normal;
    font-weight: 700;
  }

  body.woocommerce-checkout .woocommerce-customer-details address::before {
    content: "Thông tin nhận hàng";
    display: block;

    margin-bottom: 14px;
    padding-bottom: 14px;

    border-bottom: 1px solid var(--ks-border);

    color: var(--ks-heading);
    font-size: 14px;
    line-height: 1.4;
    font-weight: 900;
  }

  /* Icon dùng chung cho tên + địa chỉ */
  body.woocommerce-checkout .woocommerce-customer-details address::after {
    content: "\f3c5";
    font-family: var(--ks-fa);
    font-weight: 900;

    position: absolute;
    left: var(--ks-customer-icon-left);
    top: var(--ks-customer-main-icon-top);
    transform: translateY(-50%);

    width: var(--ks-customer-icon-size);
    height: var(--ks-customer-icon-size);
    border-radius: 50%;

    background: var(--ks-primary-soft);
    color: var(--ks-primary);

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 9px;
  }

  body.woocommerce-checkout .woocommerce-customer-details address br {
    display: block;
    content: "";
    margin-bottom: 6px;
  }

  /* Phone + email: icon nằm trong card, không bị tràn ra ngoài */
  body.woocommerce-checkout .woocommerce-customer-details--phone,
  body.woocommerce-checkout .woocommerce-customer-details--email {
    position: relative;

    margin: 10px 0 0 calc(var(--ks-customer-icon-left) - var(--ks-customer-text-left));
    padding-left: calc(var(--ks-customer-text-left) - var(--ks-customer-icon-left));

    color: var(--ks-muted);
    font-size: 13px;
    line-height: var(--ks-customer-icon-size);
    font-style: normal;
    font-weight: 700;
  }

  body.woocommerce-checkout .woocommerce-customer-details--phone::before,
  body.woocommerce-checkout .woocommerce-customer-details--email::before {
    font-family: var(--ks-fa);
    font-weight: 900;

    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);

    width: var(--ks-customer-icon-size);
    height: var(--ks-customer-icon-size);
    border-radius: 50%;

    background: var(--ks-primary-soft);
    color: var(--ks-primary);

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 9px;
  }

  body.woocommerce-checkout .woocommerce-customer-details--phone::before {
    content: "\f095";
  }

  body.woocommerce-checkout .woocommerce-customer-details--email::before {
    content: "\f0e0";
  }

  body.woocommerce-checkout .woocommerce-customer-details--email {
    word-break: break-word;
  }
}
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 390px) {
  body.woocommerce-checkout .cart-container.container.page-wrapper.page-checkout {
    padding-left: 10px;
    padding-right: 10px;
  }

  body.woocommerce-checkout .woocommerce-thankyou-order-received::after {
    font-size: 21px;
  }

  body.woocommerce-checkout .woocommerce-table--order-details tbody tr,
  body.woocommerce-checkout .woocommerce-table--order-details tfoot tr {
    grid-template-columns: 1fr;
    gap: 0;
  }

  body.woocommerce-checkout .woocommerce-table--order-details .product-total,
  body.woocommerce-checkout .woocommerce-table--order-details tfoot td {
    text-align: left;
  }

  body.woocommerce-checkout .woocommerce-table--order-details tfoot td {
    padding-top: 0;
  }
}
/* =========================================================
   MY ACCOUNT - EDIT ACCOUNT FORM FINAL FIX
   Flatsome + WooCommerce
   Trang: /my-account/edit-account/
========================================================= */

.woocommerce-account .woocommerce-MyAccount-content {
  --acc-main: #03b0b1;
  --acc-main-dark: #01989a;
  --acc-text: #1f2937;
  --acc-muted: #64748b;
  --acc-border: #dce9ef;
  --acc-border-soft: #edf4f7;
  --acc-icon-bg: #dff8f8;
  --acc-shadow: 0 10px 28px rgba(15, 23, 42, 0.055);

  font-family: "SVN-Gilroy", sans-serif;
}

/* Reset float mặc định WooCommerce */
.woocommerce-account .woocommerce-EditAccountForm.edit-account .form-row-first,
.woocommerce-account .woocommerce-EditAccountForm.edit-account .form-row-last,
.woocommerce-account .woocommerce-EditAccountForm.edit-account .form-row-wide {
  float: none !important;
  width: auto !important;
}

/* Ẩn clear mặc định */
.woocommerce-account .woocommerce-EditAccountForm.edit-account > .clear {
  display: none !important;
}

/* Form tổng */
.woocommerce-account .woocommerce-EditAccountForm.edit-account {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: 48px auto auto auto auto;
  column-gap: 20px;
  row-gap: 14px;
  margin: 0;
}

/* =========================================================
   CARD 1 - THÔNG TIN CÁ NHÂN
========================================================= */

/* Nền card 1 */
.woocommerce-account .woocommerce-EditAccountForm.edit-account::before {
  content: "";
  grid-column: 1 / -1;
  grid-row: 1 / 4;
  position: relative;
  z-index: -1;

  border: 1px solid var(--acc-border);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: var(--acc-shadow);
}

/* Tiêu đề card 1 */
.woocommerce-account .woocommerce-EditAccountForm.edit-account::after {
  content: "1. Thông tin cá nhân";
  grid-column: 1 / -1;
  grid-row: 1;

  position: relative;
  z-index: 2;

  height: 28px;
  min-height: 28px;
  margin-top: 14px;
  padding-left: 58px;

  display: flex;
  align-items: center;

  color: var(--acc-text);
  font-family: "SVN-Gilroy", sans-serif;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  text-transform: none;
}

/* Field 1 - Tên */
.woocommerce-account .woocommerce-EditAccountForm.edit-account > p:nth-of-type(1) {
  grid-column: 1;
  grid-row: 2;
}

/* Field 2 - Họ */
.woocommerce-account .woocommerce-EditAccountForm.edit-account > p:nth-of-type(2) {
  grid-column: 2;
  grid-row: 2;
}

/* Field 3 - Tên hiển thị */
.woocommerce-account .woocommerce-EditAccountForm.edit-account > p:nth-of-type(3) {
  grid-column: 1;
  grid-row: 3;
  padding-bottom: 18px;
}

/* Field 4 - Email */
.woocommerce-account .woocommerce-EditAccountForm.edit-account > p:nth-of-type(4) {
  grid-column: 2;
  grid-row: 3;
  padding-bottom: 18px;
}

/* Style 4 field đầu */
.woocommerce-account .woocommerce-EditAccountForm.edit-account > p:nth-of-type(1),
.woocommerce-account .woocommerce-EditAccountForm.edit-account > p:nth-of-type(2),
.woocommerce-account .woocommerce-EditAccountForm.edit-account > p:nth-of-type(3),
.woocommerce-account .woocommerce-EditAccountForm.edit-account > p:nth-of-type(4) {
  position: relative;
  z-index: 1;
  margin: 0 !important;
}

.woocommerce-account .woocommerce-EditAccountForm.edit-account > p:nth-of-type(1),
.woocommerce-account .woocommerce-EditAccountForm.edit-account > p:nth-of-type(3) {
  padding-left: 22px;
}

.woocommerce-account .woocommerce-EditAccountForm.edit-account > p:nth-of-type(2),
.woocommerce-account .woocommerce-EditAccountForm.edit-account > p:nth-of-type(4) {
  padding-right: 22px;
}

/* Vòng tròn icon user card 1 */
.woocommerce-account .woocommerce-EditAccountForm.edit-account > p:nth-of-type(1)::before {
  content: "";
  position: absolute;
  top: -48px;
  left: 22px;

  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--acc-icon-bg);
}

/* Icon user card 1 */
.woocommerce-account .woocommerce-EditAccountForm.edit-account > p:nth-of-type(1)::after {
  content: "\f007";
  position: absolute;
  top: -48px;
  left: 22px;

  width: 28px;
  height: 28px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--acc-main);
  font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 12px;
  line-height: 1;
}

/* =========================================================
   LABEL + INPUT CHUNG
========================================================= */

.woocommerce-account .woocommerce-EditAccountForm.edit-account label {
  display: block;
  margin: 0 0 7px;

  color: var(--acc-text);
  font-family: "SVN-Gilroy", sans-serif;
  font-size: 12px;
  line-height: 1.3;
  font-weight: 700;
}

/* Ẩn dấu sao bắt buộc */
.woocommerce-account .woocommerce-EditAccountForm.edit-account .required {
  display: none;
}

/* Ẩn mô tả tên hiển thị */
.woocommerce-account .woocommerce-EditAccountForm.edit-account #account_display_name_description {
  display: none !important;
}

/* Input */
.woocommerce-account .woocommerce-EditAccountForm.edit-account input.input-text,
.woocommerce-account .woocommerce-EditAccountForm.edit-account input[type="text"],
.woocommerce-account .woocommerce-EditAccountForm.edit-account input[type="email"],
.woocommerce-account .woocommerce-EditAccountForm.edit-account input[type="password"] {
  width: 100%;
  height: 32px;
  margin: 0;
  padding: 0 12px;

  border: 1px solid #d7e2e8;
  border-radius: 5px;
  background: #ffffff;
  box-shadow: none !important;
  outline: none;

  color: #526173;
  font-family: "SVN-Gilroy", sans-serif;
  font-size: 12px;
  font-weight: 500;

  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.woocommerce-account .woocommerce-EditAccountForm.edit-account input.input-text:focus,
.woocommerce-account .woocommerce-EditAccountForm.edit-account input[type="text"]:focus,
.woocommerce-account .woocommerce-EditAccountForm.edit-account input[type="email"]:focus,
.woocommerce-account .woocommerce-EditAccountForm.edit-account input[type="password"]:focus {
  border-color: var(--acc-main);
  box-shadow: 0 0 0 3px rgba(3, 176, 177, 0.1) !important;
}

/* =========================================================
   CARD 2 - THAY ĐỔI MẬT KHẨU
   FIX: Không dùng legend để hiển thị nữa
========================================================= */

.woocommerce-account .woocommerce-EditAccountForm.edit-account fieldset {
  grid-column: 1 / -1;
  grid-row: 4;

  position: relative;

  margin: 6px 0 0 !important;
  padding: 74px 20px 14px !important;

  border: 1px solid var(--acc-border) !important;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: var(--acc-shadow);
}

/* Ẩn legend gốc để tránh lỗi nhảy ra ngoài border */
.woocommerce-account .woocommerce-EditAccountForm.edit-account fieldset > legend {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Icon khóa card 2 */
.woocommerce-account .woocommerce-EditAccountForm.edit-account fieldset::before {
  content: "\f023";

  position: absolute;
  top: 15px;
  left: 20px;

  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--acc-icon-bg);

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--acc-main);
  font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 12px;
  line-height: 1;

  z-index: 2;
}

/* Text + line card 2 */
.woocommerce-account .woocommerce-EditAccountForm.edit-account fieldset::after {
  content: "2. Thay đổi mật khẩu";

  position: absolute;
  top: 15px;
  left: 58px;
  right: 20px;

  height: 42px;
  padding-bottom: 13px;

  display: flex;
  align-items: center;

  border-bottom: 1px solid var(--acc-border-soft);

  color: var(--acc-text);
  font-family: "SVN-Gilroy", sans-serif;
  font-size: 13px;
  line-height: 1;
  font-weight: 800;
  text-transform: none;

  z-index: 1;
}

/* Dòng mật khẩu */
.woocommerce-account .woocommerce-EditAccountForm.edit-account fieldset p {
  margin: 0 0 12px !important;
}

.woocommerce-account .woocommerce-EditAccountForm.edit-account fieldset p:last-child {
  margin-bottom: 0 !important;
}

/* Wrapper password */
.woocommerce-account .woocommerce-EditAccountForm.edit-account .password-input {
  position: relative;
  display: block;
  width: 100%;
}

.woocommerce-account .woocommerce-EditAccountForm.edit-account .password-input input {
  padding-right: 42px !important;
}

/* Nút mắt */
.woocommerce-account .woocommerce-EditAccountForm.edit-account .show-password-input {
  position: absolute !important;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);

  width: 28px;
  height: 28px;
  margin: 0 !important;
  padding: 0 !important;

  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer;
}

/* Xoá icon mặc định nếu theme/WooCommerce chèn */
.woocommerce-account .woocommerce-EditAccountForm.edit-account .show-password-input::after {
  display: none !important;
}

/* Icon mắt */
.woocommerce-account .woocommerce-EditAccountForm.edit-account .show-password-input::before {
  content: "\f06e" !important;
  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #64748b;
  font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 12px;
  line-height: 1;
}

.woocommerce-account .woocommerce-EditAccountForm.edit-account .show-password-input:hover::before {
  color: var(--acc-main);
}

/* =========================================================
   BUTTON LƯU THAY ĐỔI
========================================================= */

.woocommerce-account .woocommerce-EditAccountForm.edit-account > p:last-of-type {
  grid-column: 1 / -1;
  grid-row: 5;

  margin: 2px 0 0 !important;
  padding: 0;
}

.woocommerce-account .woocommerce-EditAccountForm.edit-account .woocommerce-Button.button,
.woocommerce-account .woocommerce-EditAccountForm.edit-account button[name="save_account_details"] {
  min-width: 170px;
  height: 42px;
  padding: 0 22px;

  border: none !important;
  border-radius: 5px;
  background: linear-gradient(135deg, var(--acc-main) 0%, var(--acc-main-dark) 100%) !important;
  box-shadow: 0 10px 22px rgba(3, 176, 177, 0.23);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  color: #ffffff !important;
  font-family: "SVN-Gilroy", sans-serif;
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;

  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.woocommerce-account .woocommerce-EditAccountForm.edit-account .woocommerce-Button.button::before,
.woocommerce-account .woocommerce-EditAccountForm.edit-account button[name="save_account_details"]::before {
  content: "\f0c7";
  font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 13px;
  line-height: 1;
}

.woocommerce-account .woocommerce-EditAccountForm.edit-account .woocommerce-Button.button:hover,
.woocommerce-account .woocommerce-EditAccountForm.edit-account button[name="save_account_details"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(3, 176, 177, 0.3);
}

/* =========================================================
   MOBILE RESPONSIVE
========================================================= */

@media (max-width: 768px) {
  .woocommerce-account .woocommerce-EditAccountForm.edit-account {
    grid-template-columns: 1fr;
    grid-template-rows: 48px auto auto auto auto auto auto;
    row-gap: 13px;
  }

  .woocommerce-account .woocommerce-EditAccountForm.edit-account::before {
    grid-column: 1;
    grid-row: 1 / 6;
  }

  .woocommerce-account .woocommerce-EditAccountForm.edit-account::after {
    grid-column: 1;
    grid-row: 1;
  }

  .woocommerce-account .woocommerce-EditAccountForm.edit-account > p:nth-of-type(1) {
    grid-column: 1;
    grid-row: 2;
  }

  .woocommerce-account .woocommerce-EditAccountForm.edit-account > p:nth-of-type(2) {
    grid-column: 1;
    grid-row: 3;
  }

  .woocommerce-account .woocommerce-EditAccountForm.edit-account > p:nth-of-type(3) {
    grid-column: 1;
    grid-row: 4;
    padding-bottom: 0;
  }

  .woocommerce-account .woocommerce-EditAccountForm.edit-account > p:nth-of-type(4) {
    grid-column: 1;
    grid-row: 5;
    padding-bottom: 18px;
  }

  .woocommerce-account .woocommerce-EditAccountForm.edit-account > p:nth-of-type(1),
  .woocommerce-account .woocommerce-EditAccountForm.edit-account > p:nth-of-type(2),
  .woocommerce-account .woocommerce-EditAccountForm.edit-account > p:nth-of-type(3),
  .woocommerce-account .woocommerce-EditAccountForm.edit-account > p:nth-of-type(4) {
    padding-left: 18px;
    padding-right: 18px;
  }

  .woocommerce-account .woocommerce-EditAccountForm.edit-account > p:nth-of-type(1)::before,
  .woocommerce-account .woocommerce-EditAccountForm.edit-account > p:nth-of-type(1)::after {
    left: 18px;
  }

  .woocommerce-account .woocommerce-EditAccountForm.edit-account fieldset {
    grid-column: 1;
    grid-row: 6;
    padding: 74px 16px 14px !important;
  }

  .woocommerce-account .woocommerce-EditAccountForm.edit-account fieldset::before {
    left: 16px;
  }

  .woocommerce-account .woocommerce-EditAccountForm.edit-account fieldset::after {
    left: 54px;
    right: 16px;
  }

  .woocommerce-account .woocommerce-EditAccountForm.edit-account > p:last-of-type {
    grid-column: 1;
    grid-row: 7;
  }

  .woocommerce-account .woocommerce-EditAccountForm.edit-account .woocommerce-Button.button,
  .woocommerce-account .woocommerce-EditAccountForm.edit-account button[name="save_account_details"] {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .woocommerce-account .woocommerce-EditAccountForm.edit-account {
    row-gap: 12px;
  }

  .woocommerce-account .woocommerce-EditAccountForm.edit-account::before,
  .woocommerce-account .woocommerce-EditAccountForm.edit-account fieldset {
    border-radius: 10px;
  }

  .woocommerce-account .woocommerce-EditAccountForm.edit-account input.input-text,
  .woocommerce-account .woocommerce-EditAccountForm.edit-account input[type="text"],
  .woocommerce-account .woocommerce-EditAccountForm.edit-account input[type="email"],
  .woocommerce-account .woocommerce-EditAccountForm.edit-account input[type="password"] {
    height: 34px;
  }
}
/* =========================================================
   MY ACCOUNT - ADDRESS PAGE
   Flatsome + WooCommerce
   Trang: /my-account/edit-address/
========================================================= */

.woocommerce-account .woocommerce-MyAccount-content {
  --addr-main: #03b0b1;
  --addr-main-dark: #01999a;
  --addr-text: #1f2937;
  --addr-muted: #64748b;
  --addr-border: #dce9ef;
  --addr-soft: #e6fbfb;
  --addr-bg: #ffffff;
  --addr-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);

  font-family: "SVN-Gilroy", sans-serif;
}

/* Ẩn notice rỗng */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-notices-wrapper:empty {
  display: none !important;
}

/* Đoạn mô tả phía trên */
.woocommerce-account .woocommerce-MyAccount-content > p {
  position: relative;
  margin: 0 0 22px !important;
  padding: 18px 22px 18px 58px;

  border: 1px solid var(--addr-border);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: var(--addr-shadow);

  color: #4b5563;
  font-size: 15px;
  line-height: 1.6;
  font-weight: 500;
}

/* Icon mô tả */
.woocommerce-account .woocommerce-MyAccount-content > p::before {
  content: "👋";
  position: absolute;
  top: 50%;
  left: 22px;
  transform: translateY(-50%);

  width: 26px;
  height: 26px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 20px;
  line-height: 1;
}

/* =========================================================
   ADDRESS GRID
========================================================= */

.woocommerce-account .woocommerce-Addresses.addresses,
.woocommerce-account .u-columns.woocommerce-Addresses {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;

  width: 100%;
  margin: 0 !important;
}

/* Reset cột mặc định WooCommerce */
.woocommerce-account .woocommerce-Addresses .woocommerce-Address,
.woocommerce-account .woocommerce-Addresses .u-column1,
.woocommerce-account .woocommerce-Addresses .u-column2,
.woocommerce-account .woocommerce-Addresses .col-1,
.woocommerce-account .woocommerce-Addresses .col-2 {
  float: none !important;
  width: auto !important;
  max-width: none !important;
}

/* Card địa chỉ */
.woocommerce-account .woocommerce-Address {
  position: relative;
  min-height: 365px;
  padding: 30px 28px 26px;

  border: 1px solid var(--addr-border);
  border-radius: 12px;
  background: var(--addr-bg);
  box-shadow: var(--addr-shadow);

  overflow: hidden;
}

/* Header card */
.woocommerce-account .woocommerce-Address .woocommerce-Address-title {
  position: relative;
  min-height: 68px;
  margin: 0 0 22px !important;
  padding: 0 0 18px 72px;

  display: flex;
  align-items: center;
  gap: 12px;

  border-bottom: 1px solid var(--addr-border);
}

/* Icon nền */
.woocommerce-account .woocommerce-Address .woocommerce-Address-title::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;

  width: 52px;
  height: 52px;
  border-radius: 10px;
  background: var(--addr-soft);
}

/* Icon thanh toán */
.woocommerce-account .woocommerce-Address.u-column1 .woocommerce-Address-title::after,
.woocommerce-account .woocommerce-Address.col-1 .woocommerce-Address-title::after {
  content: "\f09d";
  position: absolute;
  top: 0;
  left: 0;

  width: 52px;
  height: 52px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--addr-main);
  font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 20px;
}

/* Icon giao hàng */
.woocommerce-account .woocommerce-Address.u-column2 .woocommerce-Address-title::after,
.woocommerce-account .woocommerce-Address.col-2 .woocommerce-Address-title::after {
  content: "\f0d1";
  position: absolute;
  top: 0;
  left: 0;

  width: 52px;
  height: 52px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--addr-main);
  font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 20px;
}

/* Tiêu đề */
.woocommerce-account .woocommerce-Address .woocommerce-Address-title h2 {
  margin: 0 !important;
  padding: 0 !important;

  color: var(--addr-text);
  font-size: 18px;
  line-height: 1.3;
  font-weight: 800;
  text-transform: none;
}

/* Badge Mặc định */
.woocommerce-account .woocommerce-Address .woocommerce-Address-title h2::after {
  content: "Mặc định";
  margin-left: 12px;
  padding: 6px 13px;

  border-radius: 999px;
  background: var(--addr-soft);
  color: var(--addr-main);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 12px;
  line-height: 1;
  font-weight: 800;
  vertical-align: middle;
}

/* Link sửa địa chỉ mặc định */
.woocommerce-account .woocommerce-Address .woocommerce-Address-title .edit {
  position: absolute;
  left: 0;
  bottom: -242px;

  min-width: 132px;
  height: 42px;
  padding: 0 18px 0 46px;

  border: 1.5px solid var(--addr-main);
  border-radius: 6px;
  background: #ffffff;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: var(--addr-main) !important;
  font-size: 0;
  font-weight: 800;
  text-decoration: none !important;

  transition: all 0.22s ease;
  z-index: 3;
}

/* Text nút */
.woocommerce-account .woocommerce-Address .woocommerce-Address-title .edit::after {
  content: "Chỉnh sửa";
  font-family: "SVN-Gilroy", sans-serif;
  font-size: 13px;
  line-height: 1;
  font-weight: 800;
}

/* Icon bút */
.woocommerce-account .woocommerce-Address .woocommerce-Address-title .edit::before {
  content: "\f303";
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);

  color: var(--addr-main);
  font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 14px;
}

.woocommerce-account .woocommerce-Address .woocommerce-Address-title .edit:hover {
  background: var(--addr-main);
  color: #ffffff !important;
  box-shadow: 0 10px 20px rgba(3, 176, 177, 0.18);
  transform: translateY(-1px);
}

.woocommerce-account .woocommerce-Address .woocommerce-Address-title .edit:hover::before {
  color: #ffffff;
}

.woocommerce-account .woocommerce-Address .woocommerce-Address-title .edit:hover::after {
  color: #ffffff;
}

/* =========================================================
   ADDRESS TEXT
========================================================= */

.woocommerce-account .woocommerce-Address address {
  position: relative;
  min-height: 165px;
  margin: 0 0 74px !important;
  padding-left: 32px;

  color: #64748b;
  font-size: 15px;
  line-height: 1.85;
  font-weight: 500;
  font-style: normal;
}

/* Icon cột trái trong address */
.woocommerce-account .woocommerce-Address address::before {
  content: "\f007\A\f3c5";
  white-space: pre;

  position: absolute;
  top: 2px;
  left: 0;

  width: 18px;

  color: #64748b;
  font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 13px;
  line-height: 2.75;
  text-align: center;
}

/* Tên dòng đầu nhìn đậm hơn một chút nếu trình duyệt hỗ trợ */
.woocommerce-account .woocommerce-Address address::first-line {
  color: #4b5563;
  font-weight: 700;
}

/* Nếu địa chỉ trống */
.woocommerce-account .woocommerce-Address address:empty::after {
  content: "Bạn chưa thêm địa chỉ.";
  color: #94a3b8;
  font-style: italic;
}

/* =========================================================
   RESPONSIVE TABLET
========================================================= */

@media (max-width: 992px) {
  .woocommerce-account .woocommerce-Addresses.addresses,
  .woocommerce-account .u-columns.woocommerce-Addresses {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .woocommerce-account .woocommerce-Address {
    min-height: auto;
    padding: 26px 24px 24px;
  }

  .woocommerce-account .woocommerce-Address .woocommerce-Address-title .edit {
    position: relative;
    left: auto;
    bottom: auto;
    margin-top: 20px;
  }

  .woocommerce-account .woocommerce-Address address {
    min-height: auto;
    margin-bottom: 0 !important;
  }

  .woocommerce-account .woocommerce-Address .woocommerce-Address-title {
    flex-wrap: wrap;
  }
}

/* =========================================================
   RESPONSIVE MOBILE
========================================================= */

@media (max-width: 576px) {
  .woocommerce-account .woocommerce-MyAccount-content > p {
    padding: 14px 16px 14px 48px;
    font-size: 13px;
    line-height: 1.55;
    border-radius: 10px;
  }

  .woocommerce-account .woocommerce-MyAccount-content > p::before {
    left: 16px;
    font-size: 18px;
  }

  .woocommerce-account .woocommerce-Addresses.addresses,
  .woocommerce-account .u-columns.woocommerce-Addresses {
    gap: 14px;
  }

  .woocommerce-account .woocommerce-Address {
    padding: 20px 18px 18px;
    border-radius: 10px;
  }

  .woocommerce-account .woocommerce-Address .woocommerce-Address-title {
    min-height: 58px;
    padding-left: 60px;
    padding-bottom: 16px;
    margin-bottom: 18px !important;
  }

  .woocommerce-account .woocommerce-Address .woocommerce-Address-title::before,
  .woocommerce-account .woocommerce-Address.u-column1 .woocommerce-Address-title::after,
  .woocommerce-account .woocommerce-Address.col-1 .woocommerce-Address-title::after,
  .woocommerce-account .woocommerce-Address.u-column2 .woocommerce-Address-title::after,
  .woocommerce-account .woocommerce-Address.col-2 .woocommerce-Address-title::after {
    width: 44px;
    height: 44px;
    font-size: 17px;
  }

  .woocommerce-account .woocommerce-Address .woocommerce-Address-title h2 {
    font-size: 16px;
  }

  .woocommerce-account .woocommerce-Address .woocommerce-Address-title h2::after {
    margin-left: 8px;
    padding: 5px 10px;
    font-size: 11px;
  }

  .woocommerce-account .woocommerce-Address address {
    padding-left: 28px;
    font-size: 14px;
    line-height: 1.8;
  }

  .woocommerce-account .woocommerce-Address address::before {
    font-size: 12px;
    line-height: 2.65;
  }

  .woocommerce-account .woocommerce-Address .woocommerce-Address-title .edit {
    width: 100%;
    min-width: 100%;
    height: 42px;
    margin-top: 18px;
  }
}
/* =========================================================
   MY ACCOUNT - ORDERS PAGE FINAL
   Flatsome + WooCommerce
   Trang: /my-account/orders/
   Chỉ dùng CSS custom / child theme
========================================================= */

.woocommerce-account .woocommerce-MyAccount-content {
  --ord-main: #03b0b1;
  --ord-main-dark: #01989a;
  --ord-text: #1f2937;
  --ord-muted: #64748b;
  --ord-soft-text: #8492a6;
  --ord-border: #dce9ef;
  --ord-border-soft: #eef4f7;
  --ord-bg: #ffffff;
  --ord-soft: #e8fbfb;
  --ord-shadow: 0 14px 34px rgba(15, 23, 42, 0.065);

  font-family: "SVN-Gilroy", sans-serif;
}

/* Ẩn notice rỗng */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-notices-wrapper:empty {
  display: none !important;
}

/* =========================================================
   ORDER CARD WRAPPER
========================================================= */

.woocommerce-account .woocommerce-MyAccount-content .touch-scroll-table {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 110px 20px 16px;
  overflow: hidden !important;

  border: 1px solid var(--ord-border);
  border-radius: 14px;
  background:
    radial-gradient(circle at 94% 8%, rgba(3, 176, 177, 0.08) 0 44px, transparent 45px),
    linear-gradient(180deg, #ffffff 0%, #fbffff 100%);
  box-shadow: var(--ord-shadow);
}

/* Icon header */
.woocommerce-account .woocommerce-MyAccount-content .touch-scroll-table::before {
  content: "\f290";
  position: absolute;
  top: 24px;
  left: 26px;

  width: 58px;
  height: 58px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, var(--ord-main) 0 20px, transparent 21px),
    linear-gradient(135deg, #dffafa 0%, #ffffff 100%);

  border: 1px solid rgba(3, 176, 177, 0.22);
  box-shadow:
    0 8px 18px rgba(3, 176, 177, 0.14),
    inset 0 0 0 6px rgba(3, 176, 177, 0.08);

  display: flex;
  align-items: center;
  justify-content: center;

  color: #ffffff;
  font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
  z-index: 2;
}

/* Title header */
.woocommerce-account .woocommerce-MyAccount-content .touch-scroll-table::after {
  content: "Lịch sử đơn hàng";
  position: absolute;
  top: 40px;
  left: 102px;
  right: 20px;

  color: var(--ord-text);
  font-family: "SVN-Gilroy", sans-serif;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -0.2px;
}

/* Subtitle */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table {
  position: relative;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table::before {
  content: "Theo dõi và quản lý các đơn hàng của bạn";
  position: absolute;
  top: -70px;
  left: 82px;
  right: 20px;

  color: var(--ord-muted);
  font-family: "SVN-Gilroy", sans-serif;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
}

/* Trang trí icon túi bên phải */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table::after {
  content: "\f54e";
  position: absolute;
  top: -92px;
  right: 36px;

  color: rgba(3, 176, 177, 0.13);
  font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 78px;
  line-height: 1;
  pointer-events: none;
}

/* =========================================================
   TABLE BASE
========================================================= */

.woocommerce-account table.woocommerce-orders-table,
.woocommerce-account table.woocommerce-MyAccount-orders,
.woocommerce-account table.account-orders-table {
  width: 100%;
  margin: 0 !important;

  border: 1px solid var(--ord-border) !important;
  border-radius: 10px;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden;

  background: #ffffff;
  box-shadow: none !important;
}

/* Header */
.woocommerce-account .woocommerce-orders-table thead th {
  height: 46px;
  padding: 0 14px !important;

  border: none !important;
  border-bottom: 1px solid var(--ord-border) !important;
  background: #ffffff;

  color: #66778a;
  font-family: "SVN-Gilroy", sans-serif;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-align: left;
  vertical-align: middle;
}

.woocommerce-account .woocommerce-orders-table thead th:last-child {
  text-align: right;
}

/* Body */
.woocommerce-account .woocommerce-orders-table tbody tr {
  background: #ffffff;
  transition: background 0.2s ease;
}

.woocommerce-account .woocommerce-orders-table tbody tr:hover th,
.woocommerce-account .woocommerce-orders-table tbody tr:hover td {
  background: #fbffff;
}

.woocommerce-account .woocommerce-orders-table tbody th,
.woocommerce-account .woocommerce-orders-table tbody td {
  min-height: 62px;
  padding: 14px 14px !important;

  border: none !important;
  border-bottom: 1px solid var(--ord-border-soft) !important;
  background: #ffffff;

  color: var(--ord-muted);
  font-family: "SVN-Gilroy", sans-serif;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 600;
  vertical-align: middle;
}

.woocommerce-account .woocommerce-orders-table tbody tr:last-child th,
.woocommerce-account .woocommerce-orders-table tbody tr:last-child td {
  border-bottom: none !important;
}

/* =========================================================
   COLUMN WIDTH
========================================================= */

.woocommerce-account .woocommerce-orders-table__header-order-number,
.woocommerce-account .woocommerce-orders-table__cell-order-number {
  width: 14%;
}

.woocommerce-account .woocommerce-orders-table__header-order-date,
.woocommerce-account .woocommerce-orders-table__cell-order-date {
  width: 17%;
}

.woocommerce-account .woocommerce-orders-table__header-order-status,
.woocommerce-account .woocommerce-orders-table__cell-order-status {
  width: 18%;
}

.woocommerce-account .woocommerce-orders-table__header-order-total,
.woocommerce-account .woocommerce-orders-table__cell-order-total {
  width: 22%;
}

.woocommerce-account .woocommerce-orders-table__header-order-actions,
.woocommerce-account .woocommerce-orders-table__cell-order-actions {
  width: 29%;
  text-align: right;
}

/* =========================================================
   ORDER NUMBER
========================================================= */

.woocommerce-account .woocommerce-orders-table__cell-order-number a {
  color: var(--ord-main) !important;
  font-size: 15px;
  line-height: 1;
  font-weight: 900;
  text-decoration: none !important;
}

.woocommerce-account .woocommerce-orders-table__cell-order-number a:hover {
  color: var(--ord-main-dark) !important;
}

/* =========================================================
   DATE
========================================================= */

.woocommerce-account .woocommerce-orders-table__cell-order-date time {
  position: relative;
  padding-left: 24px;

  color: #66778a;
  font-size: 14px;
  font-weight: 700;
}

.woocommerce-account .woocommerce-orders-table__cell-order-date time::before {
  content: "\f073";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);

  color: #8da0ad;
  font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free";
  font-weight: 400;
  font-size: 13px;
}

/* =========================================================
   STATUS BADGES
========================================================= */

.woocommerce-account .woocommerce-orders-table__cell-order-status {
  font-size: 0 !important;
}

.woocommerce-account .woocommerce-orders-table__cell-order-status::before {
  min-width: 104px;
  height: 30px;
  padding: 0 14px;

  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-family: "SVN-Gilroy", sans-serif;
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
  white-space: nowrap;
}

/* Đang xử lý */
.woocommerce-account tr.woocommerce-orders-table__row--status-processing .woocommerce-orders-table__cell-order-status::before {
  content: "• Đang xử lý";
  background: #fff7ed;
  color: #f97316;
  border: 1px solid #fed7aa;
}

/* Chờ thanh toán */
.woocommerce-account tr.woocommerce-orders-table__row--status-pending .woocommerce-orders-table__cell-order-status::before {
  content: "• Chờ thanh toán";
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
}

/* Đã hoàn thành */
.woocommerce-account tr.woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status::before {
  content: "• Đã hoàn thành";
  background: #ecfdf5;
  color: #16a34a;
  border: 1px solid #bbf7d0;
}

/* Đã hủy */
.woocommerce-account tr.woocommerce-orders-table__row--status-cancelled .woocommerce-orders-table__cell-order-status::before {
  content: "• Đã hủy";
  background: #f8fafc;
  color: #64748b;
  border: 1px solid #dbe4ea;
}

/* Thất bại */
.woocommerce-account tr.woocommerce-orders-table__row--status-failed .woocommerce-orders-table__cell-order-status::before {
  content: "• Thất bại";
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

/* Đã hoàn lại tiền */
.woocommerce-account tr.woocommerce-orders-table__row--status-refunded .woocommerce-orders-table__cell-order-status::before {
  content: "• Đã hoàn tiền";
  background: #f5f3ff;
  color: #7c3aed;
  border: 1px solid #ddd6fe;
}

/* =========================================================
   TOTAL
========================================================= */

.woocommerce-account .woocommerce-orders-table__cell-order-total {
  color: #7b8794;
  font-size: 13px;
  font-weight: 600;
}

.woocommerce-account .woocommerce-orders-table__cell-order-total .woocommerce-Price-amount {
  display: block;
  margin-bottom: 4px;

  color: var(--ord-text);
  font-size: 15px;
  line-height: 1.2;
  font-weight: 900;
}

.woocommerce-account .woocommerce-orders-table__cell-order-total del {
  display: block;
  margin-bottom: 4px;

  color: #9aa8b6;
  font-size: 12px;
  font-weight: 700;
  opacity: 0.85;
}

.woocommerce-account .woocommerce-orders-table__cell-order-total ins {
  display: block;
  margin-bottom: 4px;

  color: var(--ord-text);
  font-weight: 900;
  text-decoration: none !important;
}

/* =========================================================
   ACTION BUTTONS
========================================================= */

.woocommerce-account .woocommerce-orders-table__cell-order-actions {
  text-align: right;
  white-space: normal;
}

.woocommerce-account .woocommerce-orders-table__cell-order-actions .button,
.woocommerce-account .woocommerce-orders-table__cell-order-actions .woocommerce-button {
  height: 34px;
  min-width: auto;
  margin: 3px 0 3px 6px !important;
  padding: 0 13px !important;

  border-radius: 7px !important;
  border: 1.5px solid var(--ord-main) !important;
  background: #ffffff !important;
  box-shadow: none !important;

  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;

  color: var(--ord-main) !important;
  font-family: "SVN-Gilroy", sans-serif;
  font-size: 0 !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  text-transform: none !important;
  text-decoration: none !important;
  white-space: nowrap;

  transition: all 0.22s ease;
}

/* Nút xem chi tiết */
.woocommerce-account .woocommerce-orders-table__cell-order-actions .button.view,
.woocommerce-account .woocommerce-orders-table__cell-order-actions .woocommerce-button.view {
  min-width: 132px;
}

.woocommerce-account .woocommerce-orders-table__cell-order-actions .button.view::before,
.woocommerce-account .woocommerce-orders-table__cell-order-actions .woocommerce-button.view::before {
  content: "\f06e";
  color: currentColor;
  font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 12px;
}

.woocommerce-account .woocommerce-orders-table__cell-order-actions .button.view::after,
.woocommerce-account .woocommerce-orders-table__cell-order-actions .woocommerce-button.view::after {
  content: "Xem chi tiết";
  color: currentColor;
  font-family: "SVN-Gilroy", sans-serif;
  font-size: 12px;
  font-weight: 800;
}

/* Nút thanh toán */
.woocommerce-account .woocommerce-orders-table__cell-order-actions .button.pay,
.woocommerce-account .woocommerce-orders-table__cell-order-actions .woocommerce-button.pay {
  min-width: 102px;
  border-color: #16a34a !important;
  color: #16a34a !important;
}

.woocommerce-account .woocommerce-orders-table__cell-order-actions .button.pay::before,
.woocommerce-account .woocommerce-orders-table__cell-order-actions .woocommerce-button.pay::before {
  content: "\f09d";
  color: currentColor;
  font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 12px;
}

.woocommerce-account .woocommerce-orders-table__cell-order-actions .button.pay::after,
.woocommerce-account .woocommerce-orders-table__cell-order-actions .woocommerce-button.pay::after {
  content: "Thanh toán";
  color: currentColor;
  font-family: "SVN-Gilroy", sans-serif;
  font-size: 12px;
  font-weight: 800;
}

/* Nút hủy */
.woocommerce-account .woocommerce-orders-table__cell-order-actions .button.cancel,
.woocommerce-account .woocommerce-orders-table__cell-order-actions .woocommerce-button.cancel {
  min-width: 78px;
  border-color: #ef4444 !important;
  color: #ef4444 !important;
}

.woocommerce-account .woocommerce-orders-table__cell-order-actions .button.cancel::before,
.woocommerce-account .woocommerce-orders-table__cell-order-actions .woocommerce-button.cancel::before {
  content: "\f00d";
  color: currentColor;
  font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 12px;
}

.woocommerce-account .woocommerce-orders-table__cell-order-actions .button.cancel::after,
.woocommerce-account .woocommerce-orders-table__cell-order-actions .woocommerce-button.cancel::after {
  content: "Hủy";
  color: currentColor;
  font-family: "SVN-Gilroy", sans-serif;
  font-size: 12px;
  font-weight: 800;
}

/* Hover */
.woocommerce-account .woocommerce-orders-table__cell-order-actions .button.view:hover,
.woocommerce-account .woocommerce-orders-table__cell-order-actions .woocommerce-button.view:hover {
  background: var(--ord-main) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(3, 176, 177, 0.18) !important;
}

.woocommerce-account .woocommerce-orders-table__cell-order-actions .button.pay:hover,
.woocommerce-account .woocommerce-orders-table__cell-order-actions .woocommerce-button.pay:hover {
  background: #16a34a !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

.woocommerce-account .woocommerce-orders-table__cell-order-actions .button.cancel:hover,
.woocommerce-account .woocommerce-orders-table__cell-order-actions .woocommerce-button.cancel:hover {
  background: #ef4444 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {
  .woocommerce-account .woocommerce-MyAccount-content .touch-scroll-table {
    padding: 104px 16px 14px;
  }

  .woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table::after {
    display: none;
  }

  .woocommerce-account .woocommerce-orders-table tbody th,
  .woocommerce-account .woocommerce-orders-table tbody td {
    padding: 13px 10px !important;
    font-size: 13px;
  }

  .woocommerce-account .woocommerce-orders-table__cell-order-actions .button,
  .woocommerce-account .woocommerce-orders-table__cell-order-actions .woocommerce-button {
    height: 32px;
    padding: 0 10px !important;
  }

  .woocommerce-account .woocommerce-orders-table__cell-order-actions .button.view,
  .woocommerce-account .woocommerce-orders-table__cell-order-actions .woocommerce-button.view {
    min-width: 116px;
  }

  .woocommerce-account .woocommerce-orders-table__cell-order-actions .button.view::after,
  .woocommerce-account .woocommerce-orders-table__cell-order-actions .woocommerce-button.view::after {
    content: "Chi tiết";
  }
}

/* =========================================================
   MOBILE - CARD LAYOUT
========================================================= */

@media (max-width: 768px) {
  .woocommerce-account .woocommerce-MyAccount-content .touch-scroll-table {
    padding: 104px 12px 12px;
    border-radius: 12px;
    overflow: visible !important;
  }

  .woocommerce-account .woocommerce-MyAccount-content .touch-scroll-table::before {
    top: 20px;
    left: 18px;
    width: 50px;
    height: 50px;
    font-size: 16px;
  }

  .woocommerce-account .woocommerce-MyAccount-content .touch-scroll-table::after {
    top: 24px;
    left: 82px;
    right: 14px;
    font-size: 18px;
  }

  .woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table::before {
    top: -58px;
    left: 70px;
    right: 10px;
    font-size: 12px;
  }

  .woocommerce-account table.woocommerce-orders-table,
  .woocommerce-account table.woocommerce-MyAccount-orders,
  .woocommerce-account table.account-orders-table {
    display: block !important;
    border: none !important;
    border-radius: 0;
    background: transparent;
  }

  .woocommerce-account .woocommerce-orders-table thead {
    display: none !important;
  }

  .woocommerce-account .woocommerce-orders-table tbody {
    display: block;
  }

  .woocommerce-account .woocommerce-orders-table tbody tr {
    display: block;
    margin: 0 0 12px;
    padding: 14px;

    border: 1px solid var(--ord-border);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.045);
  }

  .woocommerce-account .woocommerce-orders-table tbody th,
  .woocommerce-account .woocommerce-orders-table tbody td {
    display: flex !important;
    width: 100% !important;
    min-height: 36px;
    padding: 8px 0 !important;

    border: none !important;
    background: transparent !important;

    align-items: center;
    justify-content: space-between;
    gap: 16px;

    text-align: right;
  }

  .woocommerce-account .woocommerce-orders-table tbody th::before,
  .woocommerce-account .woocommerce-orders-table tbody td::before {
    content: attr(data-title);
    flex: 0 0 auto;

    color: #64748b;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    text-align: left;
  }

  .woocommerce-account .woocommerce-orders-table__cell-order-number a {
    font-size: 16px;
  }

  .woocommerce-account .woocommerce-orders-table__cell-order-date time {
    padding-left: 0;
  }

  .woocommerce-account .woocommerce-orders-table__cell-order-date time::before {
    display: none;
  }

  .woocommerce-account .woocommerce-orders-table__cell-order-status::before {
    min-width: auto;
    height: 28px;
    padding: 0 12px;
  }

  .woocommerce-account .woocommerce-orders-table__cell-order-total {
    align-items: flex-start !important;
  }

  .woocommerce-account .woocommerce-orders-table__cell-order-total .woocommerce-Price-amount,
  .woocommerce-account .woocommerce-orders-table__cell-order-total del,
  .woocommerce-account .woocommerce-orders-table__cell-order-total ins {
    text-align: right;
  }

  .woocommerce-account .woocommerce-orders-table__cell-order-actions {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 8px;
    padding-top: 12px !important;
    text-align: center;
  }

  .woocommerce-account .woocommerce-orders-table__cell-order-actions::before {
    display: none !important;
  }

  .woocommerce-account .woocommerce-orders-table__cell-order-actions .button,
  .woocommerce-account .woocommerce-orders-table__cell-order-actions .woocommerce-button {
    width: 100%;
    min-width: 100% !important;
    height: 40px;
    margin: 0 !important;
  }

  .woocommerce-account .woocommerce-orders-table__cell-order-actions .button.view::after,
  .woocommerce-account .woocommerce-orders-table__cell-order-actions .woocommerce-button.view::after {
    content: "Xem chi tiết";
  }
}

@media (max-width: 480px) {
  .woocommerce-account .woocommerce-MyAccount-content .touch-scroll-table {
    padding: 100px 10px 10px;
  }

  .woocommerce-account .woocommerce-MyAccount-content .touch-scroll-table::before {
    left: 14px;
  }

  .woocommerce-account .woocommerce-MyAccount-content .touch-scroll-table::after {
    left: 76px;
    font-size: 17px;
  }

  .woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table::before {
    left: 66px;
    font-size: 11px;
  }

  .woocommerce-account .woocommerce-orders-table tbody tr {
    padding: 12px;
  }

  .woocommerce-account .woocommerce-orders-table tbody th,
  .woocommerce-account .woocommerce-orders-table tbody td {
    gap: 12px;
  }

  .woocommerce-account .woocommerce-orders-table tbody th::before,
  .woocommerce-account .woocommerce-orders-table tbody td::before {
    font-size: 10.5px;
  }
}
/* =========================================================
   KEYSHU - MY ACCOUNT / VIEW ORDER DETAIL
   Flatsome + WooCommerce
   Trang: /my-account/view-order/
========================================================= */

.woocommerce-account .woocommerce-MyAccount-content {
  --ks-od-main: #03b0b1;
  --ks-od-main-dark: #01989a;
  --ks-od-text: #1f2937;
  --ks-od-heading: #12333b;
  --ks-od-muted: #64748b;
  --ks-od-border: #dbe9ef;
  --ks-od-border-soft: #eef4f7;
  --ks-od-bg: #ffffff;
  --ks-od-soft: #e8fbfb;
  --ks-od-success: #16a34a;
  --ks-od-danger: #ef2f19;
  --ks-od-shadow: 0 14px 34px rgba(15, 23, 42, 0.065);

  font-family: "SVN-Gilroy", sans-serif;
}

/* Ẩn notice rỗng */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-notices-wrapper:empty {
  display: none !important;
}

/* =========================================================
   1. BANNER TRẠNG THÁI ĐƠN HÀNG
========================================================= */

.woocommerce-account .woocommerce-MyAccount-content > p:first-of-type:has(mark.order-number) {
  position: relative !important;
  box-sizing: border-box !important;

  width: 100% !important;
  min-height: 112px !important;
  margin: 0 0 24px !important;
  padding: 30px 210px 26px 125px !important;

  border: 1px solid var(--ks-od-border) !important;
  border-radius: 12px !important;

  background:
    radial-gradient(circle at 92% 50%, rgba(3, 176, 177, 0.08) 0 72px, transparent 74px),
    linear-gradient(135deg, #f8ffff 0%, #ffffff 58%, #f2ffff 100%) !important;

  box-shadow: var(--ks-od-shadow) !important;

  color: var(--ks-od-text) !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
  font-weight: 700 !important;

  overflow: hidden !important;
}

/* Icon tròn bên trái */
.woocommerce-account .woocommerce-MyAccount-content > p:first-of-type:has(mark.order-number)::before {
  content: "\f09d" !important;

  position: absolute !important;
  top: 50% !important;
  left: 28px !important;
  transform: translateY(-50%) !important;

  width: 68px !important;
  height: 68px !important;
  border-radius: 50% !important;

  background:
    radial-gradient(circle at center, var(--ks-od-main) 0 24px, transparent 25px),
    linear-gradient(135deg, #dffafa 0%, #ffffff 100%) !important;

  border: 1px solid rgba(3, 176, 177, 0.24) !important;

  box-shadow:
    0 8px 18px rgba(3, 176, 177, 0.14),
    inset 0 0 0 7px rgba(3, 176, 177, 0.08) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  color: #ffffff !important;
  font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  font-size: 20px !important;
  line-height: 1 !important;
  z-index: 2 !important;
}

/* Icon túi bên phải */
.woocommerce-account .woocommerce-MyAccount-content > p:first-of-type:has(mark.order-number)::after {
  content: "\f290" !important;

  position: absolute !important;
  top: 50% !important;
  right: 52px !important;
  transform: translateY(-50%) !important;

  color: rgba(3, 176, 177, 0.18) !important;
  font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  font-size: 78px !important;
  line-height: 1 !important;

  pointer-events: none !important;
  z-index: 1 !important;
}

/* Xoá nền vàng mặc định */
.woocommerce-account .woocommerce-MyAccount-content mark {
  padding: 0 !important;
  background: transparent !important;
  color: inherit !important;
  font-weight: 900 !important;
}

.woocommerce-account .woocommerce-MyAccount-content mark.order-number,
.woocommerce-account .woocommerce-MyAccount-content mark.order-date {
  color: var(--ks-od-main) !important;
}

/* Badge trạng thái */
.woocommerce-account .woocommerce-MyAccount-content mark.order-status {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;

  min-height: 27px !important;
  margin-left: 2px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;

  background: #dcfce7 !important;
  border: 1px solid #bbf7d0 !important;
  color: var(--ks-od-success) !important;

  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

.woocommerce-account .woocommerce-MyAccount-content mark.order-status::before {
  content: "\f058" !important;
  font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  font-size: 12px !important;
}

/* =========================================================
   2. TIÊU ĐỀ CHI TIẾT ĐƠN HÀNG
========================================================= */

.woocommerce-account .woocommerce-order-details {
  margin: 0 0 18px !important;
}

.woocommerce-account .woocommerce-order-details__title {
  margin: 0 0 14px !important;
  padding: 0 !important;

  color: var(--ks-od-heading) !important;
  font-size: 22px !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
  letter-spacing: -0.2px !important;
  text-transform: none !important;
}

/* =========================================================
   3. BẢNG CHI TIẾT ĐƠN HÀNG
========================================================= */

.woocommerce-account table.woocommerce-table--order-details,
.woocommerce-account table.order_details {
  width: 100% !important;
  margin: 0 !important;

  border: 1px solid var(--ks-od-border) !important;
  border-radius: 12px !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden !important;

  background: #ffffff !important;
  box-shadow: var(--ks-od-shadow) !important;
}

/* Header bảng */
.woocommerce-account table.order_details thead th {
  height: 48px !important;
  padding: 0 18px !important;

  border: none !important;
  border-bottom: 1px solid var(--ks-od-border) !important;
  background: #ffffff !important;

  color: #64748b !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
  letter-spacing: 0.7px !important;
  text-transform: uppercase !important;
  vertical-align: middle !important;
}

.woocommerce-account table.order_details thead th.product-total {
  text-align: right !important;
}

/* Dòng sản phẩm */
.woocommerce-account table.order_details tbody tr.order_item {
  height: auto !important;
}

.woocommerce-account table.order_details tbody td {
  min-height: 64px !important;
  padding: 12px 18px !important;

  border: none !important;
  border-bottom: 1px solid var(--ks-od-border-soft) !important;
  background: #ffffff !important;

  vertical-align: middle !important;
}

/* Cột sản phẩm */
.woocommerce-account table.order_details tbody td.product-name {
  position: relative !important;
  padding-left: 86px !important;

  color: var(--ks-od-text) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  font-weight: 700 !important;
}

/* Ô ảnh giả sản phẩm */
.woocommerce-account table.order_details tbody td.product-name::before {
  content: "" !important;

  position: absolute !important;
  top: 50% !important;
  left: 18px !important;
  transform: translateY(-50%) !important;

  width: 42px !important;
  height: 42px !important;
  border-radius: 7px !important;

  background:
    linear-gradient(135deg, rgba(3, 176, 177, 0.16), rgba(255, 255, 255, 0.95)),
    radial-gradient(circle at center, rgba(3, 176, 177, 0.12), transparent 70%) !important;

  border: 1px solid rgba(3, 176, 177, 0.22) !important;
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.72) !important;
}

/* Icon hộp sản phẩm */
.woocommerce-account table.order_details tbody td.product-name::after {
  content: "\f466" !important;

  position: absolute !important;
  top: 50% !important;
  left: 18px !important;
  transform: translateY(-50%) !important;

  width: 42px !important;
  height: 42px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  color: rgba(3, 176, 177, 0.62) !important;
  font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  font-size: 16px !important;
}

/* Link sản phẩm */
.woocommerce-account table.order_details tbody td.product-name a {
  color: var(--ks-od-main) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  font-weight: 900 !important;
  text-decoration: none !important;
}

.woocommerce-account table.order_details tbody td.product-name a:hover {
  color: var(--ks-od-main-dark) !important;
}

.woocommerce-account table.order_details .product-quantity {
  color: #475569 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

/* Cột tổng */
.woocommerce-account table.order_details tbody td.product-total {
  text-align: right !important;
  color: var(--ks-od-text) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

/* =========================================================
   4. FOOTER TABLE
========================================================= */

.woocommerce-account table.order_details tfoot th,
.woocommerce-account table.order_details tfoot td {
  min-height: 42px !important;
  padding: 10px 18px !important;

  border: none !important;
  border-bottom: 1px solid var(--ks-od-border-soft) !important;
  background: #ffffff !important;

  color: #64748b !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  font-weight: 800 !important;
  vertical-align: middle !important;
}

.woocommerce-account table.order_details tfoot tr:last-child th,
.woocommerce-account table.order_details tfoot tr:last-child td {
  border-bottom: none !important;
}

.woocommerce-account table.order_details tfoot td {
  text-align: right !important;
  color: var(--ks-od-text) !important;
  font-weight: 900 !important;
}

.woocommerce-account table.order_details tfoot .woocommerce-Price-amount {
  color: var(--ks-od-text) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

/* Giảm giá */
.woocommerce-account table.order_details tfoot tr:nth-child(2) td,
.woocommerce-account table.order_details tfoot tr:nth-child(2) td .woocommerce-Price-amount {
  color: var(--ks-od-danger) !important;
}

/* Hoàn tiền */
.woocommerce-account table.order_details tfoot tr:nth-child(3) td,
.woocommerce-account table.order_details tfoot tr:nth-child(3) td .woocommerce-Price-amount {
  color: var(--ks-od-danger) !important;
}

/* Ghi chú hoàn tiền */
.woocommerce-account table.order_details tfoot small {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;

  margin-top: 5px !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;

  background: #dcfce7 !important;
  color: var(--ks-od-success) !important;

  font-size: 11px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
}

.woocommerce-account table.order_details tfoot small::before {
  content: "\f058" !important;
  font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  font-size: 11px !important;
}

/* Tổng cộng */
.woocommerce-account table.order_details tfoot tr:nth-last-child(2) th,
.woocommerce-account table.order_details tfoot tr:nth-last-child(2) td {
  padding-top: 14px !important;
  padding-bottom: 14px !important;

  color: var(--ks-od-text) !important;
  font-size: 17px !important;
  font-weight: 900 !important;
}

.woocommerce-account table.order_details tfoot tr:nth-last-child(2) td .woocommerce-Price-amount {
  color: var(--ks-od-danger) !important;
  font-size: 18px !important;
}

.woocommerce-account table.order_details tfoot del {
  margin-right: 8px !important;
  color: #94a3b8 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  opacity: 0.8 !important;
}

.woocommerce-account table.order_details tfoot ins {
  color: var(--ks-od-danger) !important;
  text-decoration: none !important;
}

/* Phương thức thanh toán */
.woocommerce-account table.order_details tfoot tr:last-child td {
  color: #64748b !important;
  font-weight: 800 !important;
}

/* =========================================================
   5. GRID THÔNG TIN KHÁCH HÀNG
========================================================= */

.woocommerce-account .woocommerce-order-details + .woocommerce-customer-details {
  display: grid !important;
  gap: 18px !important;

  margin: 18px 0 0 !important;
  padding: 0 !important;
}

/* =========================================================
   6. CARD ĐỊA CHỈ THANH TOÁN
========================================================= */

/* Tiêu đề Địa chỉ thanh toán */
.woocommerce-account .woocommerce-order-details + .woocommerce-customer-details > .woocommerce-column__title {
  grid-column: 1 !important;
  grid-row: 1 !important;

  position: relative !important;
  z-index: 2 !important;

  height: 22px !important;
  min-height: 22px !important;
  margin: 0 0 -44px !important;
  padding: 20px 22px 0 22px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;

  color: var(--ks-od-text) !important;
  font-size: 15px !important;
  line-height: 22px !important;
  font-weight: 900 !important;
  text-transform: none !important;
}

/* Icon tiêu đề Địa chỉ thanh toán */
.woocommerce-account .woocommerce-order-details + .woocommerce-customer-details > .woocommerce-column__title::before {
  content: "\f007" !important;

  position: static !important;
  transform: none !important;

  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  color: var(--ks-od-main) !important;
  font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

/* Card address - padding top đã hạ xuống 40px */
.woocommerce-account .woocommerce-order-details + .woocommerce-customer-details > address {
  grid-column: 1 !important;
  grid-row: 1 !important;

  position: relative !important;

  min-height: 164px !important;
  margin: 0 !important;
  padding: 40px 22px 18px 54px !important;

  border: 1px solid var(--ks-od-border) !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: var(--ks-od-shadow) !important;

  color: #64748b !important;
  font-size: 13px !important;
  line-height: 24px !important;
  font-weight: 700 !important;
  font-style: normal !important;
}

/* Icon từng dòng address - đã hạ theo padding top 40px */
.woocommerce-account .woocommerce-order-details + .woocommerce-customer-details > address::before {
  content: "\f007\A\f3c5\A\f095\A\f0e0" !important;
  white-space: pre !important;

  position: absolute !important;
  top: 40px !important;
  left: 24px !important;

  width: 16px !important;

  color: #64748b !important;
  font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  font-size: 12px !important;
  line-height: 24px !important;
  text-align: center !important;
}

/* Phone + email */
.woocommerce-account .woocommerce-order-details + .woocommerce-customer-details > address p {
  margin: 0 !important;
  padding: 0 !important;

  color: #64748b !important;
  font-size: 13px !important;
  line-height: 24px !important;
  font-weight: 700 !important;
}

/* Ẩn icon mặc định WooCommerce */
.woocommerce-account .woocommerce-order-details + .woocommerce-customer-details .woocommerce-customer-details--phone::before,
.woocommerce-account .woocommerce-order-details + .woocommerce-customer-details .woocommerce-customer-details--email::before {
  display: none !important;
}

/* =========================================================
   RESPONSIVE TABLET
========================================================= */

@media (max-width: 992px) {
  .woocommerce-account .woocommerce-MyAccount-content > p:first-of-type:has(mark.order-number) {
    padding-right: 150px !important;
  }

  .woocommerce-account .woocommerce-MyAccount-content > p:first-of-type:has(mark.order-number)::after {
    right: 32px !important;
    font-size: 58px !important;
  }

  .woocommerce-account table.order_details tbody td.product-name {
    padding-left: 76px !important;
  }

  .woocommerce-account table.order_details tbody td.product-name::before,
  .woocommerce-account table.order_details tbody td.product-name::after {
    left: 16px !important;
  }
}

/* =========================================================
   RESPONSIVE MOBILE
========================================================= */

@media (max-width: 768px) {
  .woocommerce-account .woocommerce-MyAccount-content > p:first-of-type:has(mark.order-number) {
    min-height: auto !important;
    margin-bottom: 18px !important;
    padding: 90px 18px 18px !important;

    font-size: 14px !important;
    line-height: 1.65 !important;
    border-radius: 12px !important;
  }

  .woocommerce-account .woocommerce-MyAccount-content > p:first-of-type:has(mark.order-number)::before {
    top: 20px !important;
    left: 18px !important;
    transform: none !important;

    width: 54px !important;
    height: 54px !important;
    font-size: 16px !important;
  }

  .woocommerce-account .woocommerce-MyAccount-content > p:first-of-type:has(mark.order-number)::after {
    top: 22px !important;
    right: 22px !important;
    transform: none !important;

    font-size: 54px !important;
  }

  .woocommerce-account .woocommerce-order-details__title {
    font-size: 20px !important;
  }

  .woocommerce-account table.order_details thead th,
  .woocommerce-account table.order_details tbody td,
  .woocommerce-account table.order_details tfoot th,
  .woocommerce-account table.order_details tfoot td {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .woocommerce-account table.order_details tbody td.product-name {
    padding-left: 64px !important;
    font-size: 12px !important;
  }

  .woocommerce-account table.order_details tbody td.product-name a {
    font-size: 12px !important;
  }

  .woocommerce-account table.order_details tbody td.product-name::before,
  .woocommerce-account table.order_details tbody td.product-name::after {
    left: 12px !important;
    width: 38px !important;
    height: 38px !important;
  }

  .woocommerce-account table.order_details tbody td.product-total,
  .woocommerce-account table.order_details tfoot td {
    font-size: 12px !important;
  }

  .woocommerce-account .woocommerce-order-details + .woocommerce-customer-details {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

}

/* =========================================================
   SMALL MOBILE - TABLE CARD MODE
========================================================= */

@media (max-width: 520px) {
  .woocommerce-account table.order_details,
  .woocommerce-account table.order_details thead,
  .woocommerce-account table.order_details tbody,
  .woocommerce-account table.order_details tfoot,
  .woocommerce-account table.order_details tr,
  .woocommerce-account table.order_details th,
  .woocommerce-account table.order_details td {
    display: block !important;
    width: 100% !important;
  }

  .woocommerce-account table.order_details thead {
    display: none !important;
  }

  .woocommerce-account table.order_details tbody tr.order_item {
    position: relative !important;
    height: auto !important;
    padding: 12px !important;
    border-bottom: 1px solid var(--ks-od-border-soft) !important;
  }

  .woocommerce-account table.order_details tbody td {
    height: auto !important;
    min-height: auto !important;
    padding: 0 !important;
    border-bottom: none !important;
  }

  .woocommerce-account table.order_details tbody td.product-name {
    padding-left: 56px !important;
    min-height: 44px !important;
  }

  .woocommerce-account table.order_details tbody td.product-name::before,
  .woocommerce-account table.order_details tbody td.product-name::after {
    top: 0 !important;
    left: 0 !important;
    transform: none !important;

    width: 42px !important;
    height: 42px !important;
  }

  .woocommerce-account table.order_details tbody td.product-total {
    margin-top: 8px !important;
    padding-left: 56px !important;
    text-align: left !important;
  }

  .woocommerce-account table.order_details tfoot tr {
    display: grid !important;
    grid-template-columns: 44% 56% !important;
    align-items: center !important;
    gap: 8px !important;

    padding: 10px 12px !important;
    border-bottom: 1px solid var(--ks-od-border-soft) !important;
  }

  .woocommerce-account table.order_details tfoot tr:last-child {
    border-bottom: none !important;
  }

  .woocommerce-account table.order_details tfoot th,
  .woocommerce-account table.order_details tfoot td {
    padding: 0 !important;
    border-bottom: none !important;
  }

  .woocommerce-account table.order_details tfoot th {
    font-size: 12px !important;
  }

  .woocommerce-account table.order_details tfoot td {
    text-align: right !important;
    font-size: 12px !important;
  }

  .woocommerce-account table.order_details tfoot small {
    justify-content: center !important;
    text-align: center !important;
  }

  .woocommerce-account .woocommerce-order-details + .woocommerce-customer-details > .woocommerce-column__title {
    padding-left: 18px !important;
  }

  .woocommerce-account .woocommerce-order-details + .woocommerce-customer-details > address {
    padding-left: 50px !important;
    padding-top: 40px !important;
    padding-right: 18px !important;
  }

  .woocommerce-account .woocommerce-order-details + .woocommerce-customer-details > address::before {
    top: 40px !important;
    left: 22px !important;
  }
}
/* =========================================================
   KEYSHU - NÚT ĐẶT HÀNG LẠI
   Trang chi tiết đơn hàng WooCommerce
========================================================= */

.woocommerce-account .woocommerce-MyAccount-content .order-again {
  margin: 18px 0 34px !important;
  padding: 0 !important;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

/* Nút Đặt hàng lại */
.woocommerce-account .woocommerce-MyAccount-content .order-again .button {
  min-width: 150px;
  height: 42px;
  padding: 0 20px !important;

  border: none !important;
  border-radius: 6px !important;
  background: linear-gradient(135deg, #03b0b1 0%, #01989a 100%) !important;
  box-shadow: 0 10px 22px rgba(3, 176, 177, 0.22) !important;

  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;

  color: #ffffff !important;
  font-family: "SVN-Gilroy", sans-serif;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px;
  text-transform: none !important;
  text-decoration: none !important;

  cursor: pointer;
  transition: all 0.22s ease;
}

/* Icon đặt hàng lại */
.woocommerce-account .woocommerce-MyAccount-content .order-again .button::before {
  content: "\f2f1";
  font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 13px;
  line-height: 1;
}

/* Hover */
.woocommerce-account .woocommerce-MyAccount-content .order-again .button:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, #01989a 0%, #017f80 100%) !important;
  box-shadow: 0 12px 26px rgba(3, 176, 177, 0.3) !important;
  color: #ffffff !important;
}

/* Active */
.woocommerce-account .woocommerce-MyAccount-content .order-again .button:active {
  transform: translateY(0);
  box-shadow: 0 6px 16px rgba(3, 176, 177, 0.22) !important;
}

/* Mobile */
@media (max-width: 576px) {
  .woocommerce-account .woocommerce-MyAccount-content .order-again {
    margin: 16px 0 24px !important;
  }

  .woocommerce-account .woocommerce-MyAccount-content .order-again .button {
    width: 100%;
    min-width: 100%;
    height: 44px;
  }
}
/* =========================================================
   KEYSHU - NÚT HÀNH ĐỘNG TRONG CHI TIẾT ĐƠN HÀNG
   Nút: Thanh toán / Hủy
========================================================= */

/* Dòng hành động trong bảng chi tiết đơn hàng */
.woocommerce-account table.order_details tfoot th.order-actions--heading,
.woocommerce-account table.order_details tfoot th.order-actions--heading + td {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
  vertical-align: middle !important;
}

/* Label Hành động */
.woocommerce-account table.order_details tfoot th.order-actions--heading {
  color: #1f2937 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

/* Ô chứa nút */
.woocommerce-account table.order_details tfoot th.order-actions--heading + td {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  text-align: right !important;
}

/* Reset nút hành động */
.woocommerce-account table.order_details tfoot .order-actions-button,
.woocommerce-account table.order_details tfoot .woocommerce-button.order-actions-button {
  min-width: 118px !important;
  height: 38px !important;
  margin: 0 !important;
  padding: 0 16px !important;

  border-radius: 7px !important;
  box-shadow: none !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;

  font-family: "SVN-Gilroy", sans-serif !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  text-transform: none !important;
  text-decoration: none !important;
  letter-spacing: 0 !important;

  cursor: pointer !important;
  transition: all 0.22s ease !important;
}

/* =========================================================
   NÚT THANH TOÁN
========================================================= */

.woocommerce-account table.order_details tfoot .order-actions-button.pay,
.woocommerce-account table.order_details tfoot .woocommerce-button.pay.order-actions-button {
  border: 1.5px solid #16a34a !important;
  background: #ffffff !important;
  color: #16a34a !important;
}

/* Icon Thanh toán */
.woocommerce-account table.order_details tfoot .order-actions-button.pay::before,
.woocommerce-account table.order_details tfoot .woocommerce-button.pay.order-actions-button::before {
  content: "\f09d" !important;
  font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  color: currentColor !important;
}

/* Hover Thanh toán */
.woocommerce-account table.order_details tfoot .order-actions-button.pay:hover,
.woocommerce-account table.order_details tfoot .woocommerce-button.pay.order-actions-button:hover {
  background: #16a34a !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 20px rgba(22, 163, 74, 0.22) !important;
}

/* =========================================================
   NÚT HỦY
========================================================= */

.woocommerce-account table.order_details tfoot .order-actions-button.cancel,
.woocommerce-account table.order_details tfoot .woocommerce-button.cancel.order-actions-button {
  border: 1.5px solid #ef4444 !important;
  background: #ffffff !important;
  color: #ef4444 !important;
}

/* Icon Hủy */
.woocommerce-account table.order_details tfoot .order-actions-button.cancel::before,
.woocommerce-account table.order_details tfoot .woocommerce-button.cancel.order-actions-button::before {
  content: "\f00d" !important;
  font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  color: currentColor !important;
}

/* Hover Hủy */
.woocommerce-account table.order_details tfoot .order-actions-button.cancel:hover,
.woocommerce-account table.order_details tfoot .woocommerce-button.cancel.order-actions-button:hover {
  background: #ef4444 !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 20px rgba(239, 68, 68, 0.22) !important;
}

/* Click */
.woocommerce-account table.order_details tfoot .order-actions-button:active,
.woocommerce-account table.order_details tfoot .woocommerce-button.order-actions-button:active {
  transform: translateY(0) !important;
  box-shadow: none !important;
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 520px) {
  .woocommerce-account table.order_details tfoot th.order-actions--heading + td {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    text-align: center !important;
  }

  .woocommerce-account table.order_details tfoot .order-actions-button,
  .woocommerce-account table.order_details tfoot .woocommerce-button.order-actions-button {
    width: 100% !important;
    min-width: 100% !important;
    height: 40px !important;
  }
}
/* =========================================================
   KEYSHU - CUSTOMER DETAILS: BILLING / SHIPPING ADDRESS
   WooCommerce order detail address columns
========================================================= */

.woocommerce-account .woocommerce-customer-details .woocommerce-columns--addresses {
  --ks-addr-main: #03b0b1;
  --ks-addr-main-dark: #01989a;
  --ks-addr-text: #1f2937;
  --ks-addr-muted: #64748b;
  --ks-addr-border: #dbe9ef;
  --ks-addr-bg: #ffffff;
  --ks-addr-shadow: 0 14px 34px rgba(15, 23, 42, 0.065);

  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;

  width: 100% !important;
  margin: 18px 0 0 !important;
  padding: 0 !important;

  font-family: "SVN-Gilroy", sans-serif;
}

/* Reset float / width mặc định của WooCommerce */
.woocommerce-account .woocommerce-customer-details .woocommerce-columns--addresses .woocommerce-column,
.woocommerce-account .woocommerce-customer-details .woocommerce-columns--addresses .col-1,
.woocommerce-account .woocommerce-customer-details .woocommerce-columns--addresses .col-2 {
  float: none !important;
  width: auto !important;
  max-width: none !important;
}

/* Card địa chỉ */
.woocommerce-account .woocommerce-customer-details .woocommerce-columns--addresses .woocommerce-column {
  position: relative !important;

  min-height: 164px !important;
  margin: 0 !important;
  padding: 20px 22px 18px !important;

  border: 1px solid var(--ks-addr-border) !important;
  border-radius: 12px !important;
  background: var(--ks-addr-bg) !important;
  box-shadow: var(--ks-addr-shadow) !important;

  overflow: hidden !important;
}

/* Tiêu đề card */
.woocommerce-account .woocommerce-customer-details .woocommerce-columns--addresses .woocommerce-column__title {
  margin: 0 0 18px !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;

  color: var(--ks-addr-text) !important;
  font-size: 15px !important;
  line-height: 22px !important;
  font-weight: 900 !important;
  text-transform: none !important;
}

/* Icon tiêu đề - Địa chỉ thanh toán */
.woocommerce-account .woocommerce-customer-details .woocommerce-column--billing-address .woocommerce-column__title::before {
  content: "\f007" !important;

  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  color: var(--ks-addr-main) !important;
  font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

/* Icon tiêu đề - Địa chỉ giao hàng */
.woocommerce-account .woocommerce-customer-details .woocommerce-column--shipping-address .woocommerce-column__title::before {
  content: "\f0d1" !important;

  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  color: var(--ks-addr-main) !important;
  font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  font-size: 15px !important;
  line-height: 1 !important;
}

/* Nội dung address */
.woocommerce-account .woocommerce-customer-details .woocommerce-columns--addresses address {
  position: relative !important;

  margin: 0 !important;
  padding: 0 0 0 30px !important;

  color: var(--ks-addr-muted) !important;
  font-size: 13px !important;
  line-height: 24px !important;
  font-weight: 700 !important;
  font-style: normal !important;
}

/* Icon từng dòng - thanh toán */
.woocommerce-account .woocommerce-customer-details .woocommerce-column--billing-address address::before {
  content: "\f007\A\f3c5\A\f095\A\f0e0" !important;
  white-space: pre !important;

  position: absolute !important;
  top: 0 !important;
  left: 0 !important;

  width: 16px !important;

  color: var(--ks-addr-muted) !important;
  font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  font-size: 12px !important;
  line-height: 24px !important;
  text-align: center !important;
}

/* Icon từng dòng - giao hàng */
.woocommerce-account .woocommerce-customer-details .woocommerce-column--shipping-address address::before {
  content: "\f3c5" !important;

  position: absolute !important;
  top: 0 !important;
  left: 0 !important;

  width: 16px !important;
  height: 24px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  color: var(--ks-addr-muted) !important;
  font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

/* Phone + email */
.woocommerce-account .woocommerce-customer-details .woocommerce-columns--addresses address p {
  margin: 0 !important;
  padding: 0 !important;

  color: var(--ks-addr-muted) !important;
  font-size: 13px !important;
  line-height: 24px !important;
  font-weight: 700 !important;
}

/* Ẩn icon mặc định WooCommerce để không bị đè */
.woocommerce-account .woocommerce-customer-details .woocommerce-customer-details--phone::before,
.woocommerce-account .woocommerce-customer-details .woocommerce-customer-details--email::before {
  display: none !important;
}

/* Hover nhẹ cho card */
.woocommerce-account .woocommerce-customer-details .woocommerce-columns--addresses .woocommerce-column {
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.woocommerce-account .woocommerce-customer-details .woocommerce-columns--addresses .woocommerce-column:hover {
  border-color: rgba(3, 176, 177, 0.32) !important;
  transform: translateY(-1px);
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.085) !important;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 768px) {
  .woocommerce-account .woocommerce-customer-details .woocommerce-columns--addresses {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin-top: 16px !important;
  }

  .woocommerce-account .woocommerce-customer-details .woocommerce-columns--addresses .woocommerce-column {
    min-height: auto !important;
    padding: 18px 18px 16px !important;
    border-radius: 10px !important;
  }

  .woocommerce-account .woocommerce-customer-details .woocommerce-columns--addresses .woocommerce-column__title {
    font-size: 14px !important;
    margin-bottom: 14px !important;
  }

  .woocommerce-account .woocommerce-customer-details .woocommerce-columns--addresses address {
    font-size: 13px !important;
    line-height: 23px !important;
  }

  .woocommerce-account .woocommerce-customer-details .woocommerce-columns--addresses address::before {
    line-height: 23px !important;
  }

  .woocommerce-account .woocommerce-customer-details .woocommerce-columns--addresses address p {
    line-height: 23px !important;
  }
}
/* =========================================================
   FIX MOBILE CHECKOUT - 1 CỘT ĐÚNG THỨ TỰ
   Thứ tự:
   1. Thông tin giao hàng
   2. Giỏ hàng
   3. Mã giảm giá
   4. Đơn hàng của bạn
   5. Nút thanh toán
========================================================= */

@media (max-width: 849px) {

  /* Chống tràn ngang mobile */
  html,
  body {
    overflow-x: hidden !important;
  }

  /* Container vừa màn hình mobile */
  body.woocommerce-checkout .cart-container.container.page-wrapper.page-checkout {
    width: 100% !important;
    max-width: 100% !important;
    padding: 8px 12px 38px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* Layout checkout về 1 cột */
  body.woocommerce-checkout .page-checkout .woocommerce {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Giữ cấu trúc display contents để các khối con được sắp xếp bằng grid */
  body.woocommerce-checkout .page-checkout form.checkout.woocommerce-checkout,
  body.woocommerce-checkout .page-checkout form.checkout.woocommerce-checkout > .row,
  body.woocommerce-checkout .page-checkout form.checkout.woocommerce-checkout > .row > .large-5.col,
  body.woocommerce-checkout .page-checkout form.checkout.woocommerce-checkout .large-5.col > .col-inner,
  body.woocommerce-checkout .page-checkout form.checkout.woocommerce-checkout .checkout-sidebar,
  body.woocommerce-checkout .page-checkout form.checkout.woocommerce-checkout #order_review,
  body.woocommerce-checkout .page-checkout .woocommerce-checkout-review-order-table {
    display: contents !important;
  }

  /* Reset 2 cột của Flatsome */
  body.woocommerce-checkout .page-checkout .large-5.col,
  body.woocommerce-checkout .page-checkout .large-7.col {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    float: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 1. Thông tin giao hàng */
  body.woocommerce-checkout .page-checkout form.checkout.woocommerce-checkout > .row > .large-7.col {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 0 18px !important;
  }

  body.woocommerce-checkout .page-checkout #customer_details,
  body.woocommerce-checkout .page-checkout .woocommerce-billing-fields,
  body.woocommerce-checkout .page-checkout .woocommerce-billing-fields__field-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body.woocommerce-checkout .page-checkout .woocommerce-billing-fields__field-wrapper {
    padding: 17px 16px 16px !important;
    border-radius: 14px !important;
  }

  /* Các ô input về 1 cột */
  body.woocommerce-checkout .page-checkout .woocommerce-billing-fields .form-row-first,
  body.woocommerce-checkout .page-checkout .woocommerce-billing-fields .form-row-last,
  body.woocommerce-checkout .page-checkout .woocommerce-billing-fields .form-row-wide {
    width: 100% !important;
    float: none !important;
    clear: both !important;
  }

  /* 2. Tiêu đề giỏ hàng */
  body.woocommerce-checkout .page-checkout .ks-checkout-cart-title {
    grid-column: 1 !important;
    grid-row: 3 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 18px 17px 12px !important;
    border-radius: 14px 14px 0 0 !important;
    box-sizing: border-box !important;
  }

  /* 2. Danh sách sản phẩm trong giỏ hàng */
  body.woocommerce-checkout .page-checkout .woocommerce-checkout-review-order-table tbody {
    grid-column: 1 !important;
    grid-row: 4 !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 258px !important;
    margin: 0 0 18px !important;
    padding: 0 17px !important;
    border-radius: 0 0 14px 14px !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  /* 3. Mã giảm giá */
  body.woocommerce-checkout .page-checkout .checkout_coupon.woocommerce-form-coupon {
    grid-column: 1 !important;
    grid-row: 5 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 18px !important;
    padding: 17px !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
  }

  body.woocommerce-checkout .page-checkout .checkout_coupon .flex-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 9px !important;
    width: 100% !important;
  }

  body.woocommerce-checkout .page-checkout .checkout_coupon input#coupon_code {
    width: 100% !important;
    min-width: 0 !important;
    height: 38px !important;
  }

  body.woocommerce-checkout .page-checkout .checkout_coupon button[name="apply_coupon"] {
    flex: 0 0 auto !important;
    min-width: 90px !important;
    height: 38px !important;
  }

  /* 4. Đơn hàng của bạn */
  body.woocommerce-checkout .page-checkout .woocommerce-checkout-review-order-table tfoot {
    grid-column: 1 !important;
    grid-row: 6 !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 18px !important;
    padding: 20px 18px !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
  }

  /* 5. Nút tiến hành thanh toán */
  body.woocommerce-checkout .page-checkout #payment.woocommerce-checkout-payment {
    grid-column: 1 !important;
    grid-row: 7 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.woocommerce-checkout .page-checkout #place_order {
    width: 100% !important;
    height: 48px !important;
    margin: 0 !important;
  }
}
/* =========================================================
   KEYSHU - CHECKOUT ORDER PAY / REVIEW ORDER
   Chỉ áp dụng cho trang: /checkout/order-pay/
   Không ảnh hưởng trang checkout thường
========================================================= */

body.woocommerce-order-pay {
  --ks-pay-primary: #03b0b1;
  --ks-pay-primary-dark: #02898b;
  --ks-pay-text: #182235;
  --ks-pay-soft: #68758a;
  --ks-pay-border: #dfe8ee;
  --ks-pay-bg: #f4f9fd;
  --ks-pay-white: #ffffff;
  --ks-pay-red: #ff302f;
  --ks-pay-red-dark: #df2028;
  --ks-pay-green: #20a464;
  --ks-pay-shadow: 0 20px 50px rgba(28, 55, 75, 0.13);

  background:
    radial-gradient(circle at 15% 10%, rgba(3, 176, 177, 0.07) 0 160px, transparent 165px),
    radial-gradient(circle at 85% 12%, rgba(3, 176, 177, 0.06) 0 180px, transparent 185px),
    linear-gradient(180deg, #f7fbff 0%, #eef5fa 100%) !important;
  color: var(--ks-pay-text);
  overflow-x: hidden;
}

/* =========================================================
   1. BREADCRUMB CHECKOUT STEP
========================================================= */

body.woocommerce-order-pay .checkout-page-title.page-title {
  padding: 24px 0 18px !important;
  background: transparent !important;
  border: 0 !important;
}

body.woocommerce-order-pay .checkout-page-title .page-title-inner {
  max-width: 1320px !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

body.woocommerce-order-pay .checkout-breadcrumbs {
  width: 100%;
  justify-content: center !important;
  gap: 26px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 18px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  letter-spacing: 0.6px !important;
}

body.woocommerce-order-pay .checkout-breadcrumbs a {
  position: relative;
  color: #b9c1cd !important;
  text-decoration: none !important;
  opacity: 1 !important;
  transition: color 0.2s ease;
}

body.woocommerce-order-pay .checkout-breadcrumbs a.current {
  color: var(--ks-pay-text) !important;
}

body.woocommerce-order-pay .checkout-breadcrumbs .divider {
  color: #bdc7d2 !important;
  opacity: 1 !important;
  font-size: 16px !important;
}

/* =========================================================
   2. CONTAINER CHÍNH
========================================================= */

body.woocommerce-order-pay .cart-container.container.page-wrapper.page-checkout {
  width: 100% !important;
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: 0 24px 42px !important;
  box-sizing: border-box !important;
}

body.woocommerce-order-pay .cart-container > .woocommerce {
  width: 100% !important;
  max-width: 100% !important;
}

body.woocommerce-order-pay .woocommerce-notices-wrapper {
  max-width: 1320px;
  margin: 0 auto 14px;
}

/* =========================================================
   3. CARD XEM LẠI ĐƠN HÀNG
========================================================= */

body.woocommerce-order-pay form#order_review {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 118px 42px 38px !important;
  border: 1px solid rgba(218, 228, 235, 0.95) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: var(--ks-pay-shadow) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* Icon đầu card */
body.woocommerce-order-pay form#order_review::before {
  content: "\f570";
  position: absolute;
  top: 28px;
  left: 48px;
  width: 74px;
  height: 74px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.65), rgba(255,255,255,0.2)),
    rgba(3, 176, 177, 0.11);
  color: var(--ks-pay-primary-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Font Awesome 7 Free", "Font Awesome 6 Free";
  font-size: 31px;
  font-weight: 900;
  box-shadow: inset 0 0 0 1px rgba(3, 176, 177, 0.08);
}

/* Badge thanh toán an toàn */
body.woocommerce-order-pay form#order_review::after {
  content: "Thanh toán an toàn\A Thông tin của bạn được bảo mật";
  position: absolute;
  top: 34px;
  right: 46px;
  min-width: 250px;
  min-height: 62px;
  padding: 13px 18px 12px 64px;
  border: 1px solid rgba(3, 176, 177, 0.18);
  border-radius: 9px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.75), rgba(255,255,255,0.45)),
    rgba(3, 176, 177, 0.06);
  color: var(--ks-pay-soft);
  white-space: pre-line;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 600;
  box-sizing: border-box;
}

/* Icon khiên trong badge */
body.woocommerce-order-pay #payment::before {
  content: "\f3ed";
  position: absolute;
  top: 46px;
  right: 280px;
  z-index: 3;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #69c7b8 0%, #36a994 100%);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Font Awesome 7 Free", "Font Awesome 6 Free";
  font-size: 18px;
  font-weight: 900;
  pointer-events: none;
}

/* Tiêu đề giả bằng CSS */
body.woocommerce-order-pay form#order_review .shop_table {
  position: relative !important;
}

body.woocommerce-order-pay form#order_review .shop_table::before {
  content: "XEM LẠI ĐƠN HÀNG";
  position: absolute;
  top: -88px;
  left: 100px;
  color: var(--ks-pay-text);
  font-size: 26px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

body.woocommerce-order-pay form#order_review .shop_table::after {
  content: "Vui lòng kiểm tra lại thông tin sản phẩm và thanh toán trước khi đặt hàng";
  position: absolute;
  top: -52px;
  left: 100px;
  color: var(--ks-pay-soft);
  font-size: 15px;
  line-height: 1.4;
  font-weight: 500;
}

/* =========================================================
   4. BẢNG SẢN PHẨM
========================================================= */

body.woocommerce-order-pay form#order_review table.shop_table {
  width: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: transparent !important;
  display: block !important;
}

body.woocommerce-order-pay form#order_review table.shop_table thead,
body.woocommerce-order-pay form#order_review table.shop_table tbody,
body.woocommerce-order-pay form#order_review table.shop_table tfoot {
  width: 100% !important;
}

body.woocommerce-order-pay form#order_review table.shop_table thead {
  display: table !important;
  table-layout: fixed !important;
  overflow: hidden !important;
  border: 1px solid var(--ks-pay-border) !important;
  border-bottom: 0 !important;
  border-radius: 12px 12px 0 0 !important;
  background: linear-gradient(180deg, #ffffff 0%, #f7fafc 100%) !important;
}

body.woocommerce-order-pay form#order_review table.shop_table tbody {
  display: table !important;
  table-layout: fixed !important;
  overflow: hidden !important;
  border-left: 1px solid var(--ks-pay-border) !important;
  border-right: 1px solid var(--ks-pay-border) !important;
  border-bottom: 1px solid var(--ks-pay-border) !important;
  border-radius: 0 0 12px 12px !important;
  background: #ffffff !important;
}

body.woocommerce-order-pay form#order_review table.shop_table thead tr,
body.woocommerce-order-pay form#order_review table.shop_table tbody tr {
  display: table-row !important;
}

body.woocommerce-order-pay form#order_review table.shop_table th,
body.woocommerce-order-pay form#order_review table.shop_table td {
  border: 0 !important;
  background: transparent !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
}

body.woocommerce-order-pay form#order_review table.shop_table thead th {
  height: 50px !important;
  padding: 0 28px !important;
  color: #596879 !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
}

body.woocommerce-order-pay form#order_review table.shop_table tbody td {
  min-height: 65px !important;
  padding: 10px 28px !important;
  border-top: 1px solid #edf2f5 !important;
  color: var(--ks-pay-text) !important;
  font-size: 15.5px !important;
  line-height: 1.45 !important;
  font-weight: 600 !important;
}

body.woocommerce-order-pay form#order_review table.shop_table tbody tr:first-child td {
  border-top: 0 !important;
}

/* Column width */
body.woocommerce-order-pay form#order_review table.shop_table .product-name {
  width: 60% !important;
  text-align: left !important;
}

body.woocommerce-order-pay form#order_review table.shop_table .product-quantity {
  width: 18% !important;
  text-align: left !important;
}

body.woocommerce-order-pay form#order_review table.shop_table .product-total,
body.woocommerce-order-pay form#order_review table.shop_table .product-subtotal {
  width: 22% !important;
  text-align: right !important;
}

/* Tạo thumbnail giả vì HTML chưa có ảnh sản phẩm */
body.woocommerce-order-pay form#order_review table.shop_table tbody td.product-name {
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
}

body.woocommerce-order-pay form#order_review table.shop_table tbody td.product-name::before {
  content: "\f1c5";
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border-radius: 8px;
  border: 1px solid #e4ebef;
  background:
    linear-gradient(135deg, rgba(255, 214, 219, 0.45), rgba(238, 250, 249, 0.8)),
    #ffffff;
  color: rgba(3, 176, 177, 0.58);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Font Awesome 7 Free", "Font Awesome 6 Free";
  font-size: 19px;
  font-weight: 400;
  box-shadow: 0 4px 10px rgba(28, 55, 75, 0.09);
}

body.woocommerce-order-pay form#order_review table.shop_table tbody td.product-quantity strong {
  color: var(--ks-pay-text) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

body.woocommerce-order-pay form#order_review table.shop_table tbody td.product-subtotal,
body.woocommerce-order-pay form#order_review table.shop_table tbody td.product-subtotal .amount,
body.woocommerce-order-pay form#order_review table.shop_table tbody td.product-subtotal bdi {
  color: var(--ks-pay-text) !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

/* =========================================================
   5. KHỐI TỔNG TIỀN
========================================================= */

body.woocommerce-order-pay form#order_review table.shop_table tfoot {
  display: block !important;
  width: 100% !important;
  margin-top: 18px !important;
  border: 1px solid var(--ks-pay-border) !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  overflow: hidden !important;
}

body.woocommerce-order-pay form#order_review table.shop_table tfoot tr {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 18px !important;
  min-height: 39px !important;
  padding: 0 28px !important;
  border-top: 1px solid #edf2f5 !important;
}

body.woocommerce-order-pay form#order_review table.shop_table tfoot tr:first-child {
  border-top: 0 !important;
}

body.woocommerce-order-pay form#order_review table.shop_table tfoot th,
body.woocommerce-order-pay form#order_review table.shop_table tfoot td {
  display: block !important;
  width: auto !important;
  padding: 0 !important;
  border: 0 !important;
  color: #596879 !important;
  font-size: 15.5px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
}

body.woocommerce-order-pay form#order_review table.shop_table tfoot th {
  position: relative;
  text-align: left !important;
}

body.woocommerce-order-pay form#order_review table.shop_table tfoot tr:not(:nth-child(3)):not(:last-child) th::after {
  content: "";
  position: absolute;
  left: calc(100% + 12px);
  right: -720px;
  top: 50%;
  height: 1px;
  border-top: 1px dashed #dce5eb;
  transform: translateY(-50%);
}

body.woocommerce-order-pay form#order_review table.shop_table tfoot td {
  position: relative;
  z-index: 2;
  /* background: #ffffff !important; */
  text-align: right !important;
}

body.woocommerce-order-pay form#order_review table.shop_table tfoot td,
body.woocommerce-order-pay form#order_review table.shop_table tfoot td .amount,
body.woocommerce-order-pay form#order_review table.shop_table tfoot td bdi {
  color: var(--ks-pay-text) !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

/* Giảm giá */
body.woocommerce-order-pay form#order_review table.shop_table tfoot tr:nth-child(2) td,
body.woocommerce-order-pay form#order_review table.shop_table tfoot tr:nth-child(2) td .amount,
body.woocommerce-order-pay form#order_review table.shop_table tfoot tr:nth-child(2) td bdi {
  color: var(--ks-pay-green) !important;
}

/* Tổng cộng */
body.woocommerce-order-pay form#order_review table.shop_table tfoot tr:nth-child(3) {
  min-height: 66px !important;
  margin-top: 6px !important;
  background:
    radial-gradient(circle at 85% 50%, rgba(255, 48, 47, 0.09), transparent 36%),
    linear-gradient(90deg, rgba(255, 48, 47, 0.08), rgba(255, 48, 47, 0.02)) !important;
}

body.woocommerce-order-pay form#order_review table.shop_table tfoot tr:nth-child(3) th {
  color: var(--ks-pay-red) !important;
  font-size: 23px !important;
  font-weight: 900 !important;
}

body.woocommerce-order-pay form#order_review table.shop_table tfoot tr:nth-child(3) td,
body.woocommerce-order-pay form#order_review table.shop_table tfoot tr:nth-child(3) td .amount,
body.woocommerce-order-pay form#order_review table.shop_table tfoot tr:nth-child(3) td bdi {
  color: var(--ks-pay-red) !important;
  font-size: 25px !important;
  font-weight: 900 !important;
}

/* Phương thức thanh toán */
body.woocommerce-order-pay form#order_review table.shop_table tfoot tr:last-child {
  min-height: 60px !important;
  background: #ffffff !important;
}

body.woocommerce-order-pay form#order_review table.shop_table tfoot tr:last-child td {
  display: inline-flex !important;
  align-items: center !important;
  /* justify-content: flex-end !important; */
  gap: 12px !important;
  color: var(--ks-pay-text) !important;
  font-weight: 900 !important;
}

body.woocommerce-order-pay form#order_review table.shop_table tfoot tr:last-child td::before {
  content: "\f555";
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #fff4e6;
  color: #c47b20;
  border: 1px solid #f2d8b6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Font Awesome 7 Free", "Font Awesome 6 Free";
  font-size: 15px;
  font-weight: 900;
  padding: 10px;
}

/* =========================================================
   6. PAYMENT + NÚT THANH TOÁN
========================================================= */

body.woocommerce-order-pay form#order_review #payment {
  position: static !important;
  margin: 22px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.woocommerce-order-pay form#order_review #payment ul.wc_payment_methods,
body.woocommerce-order-pay form#order_review #payment .payment_box,
body.woocommerce-order-pay form#order_review #payment .woocommerce-terms-and-conditions-wrapper {
  display: none !important;
}

body.woocommerce-order-pay form#order_review #payment .form-row {
  margin: 0 !important;
  padding: 0 !important;
}

body.woocommerce-order-pay form#order_review #place_order {
  position: relative !important;
  width: 100% !important;
  min-height: 64px !important;
  margin: 0 !important;
  padding: 0 70px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #ff3343 0%, #ff4128 48%, #db1f28 100%) !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 17px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  box-shadow: 0 16px 28px rgba(227, 34, 43, 0.27) !important;
  cursor: pointer !important;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    filter 0.22s ease !important;
}

body.woocommerce-order-pay form#order_review #place_order::after {
  content: "\f061";
  margin-left: 24px;
  font-family: "Font Awesome 7 Free", "Font Awesome 6 Free";
  font-size: 20px;
  font-weight: 900;
}

body.woocommerce-order-pay form#order_review #place_order:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.02) !important;
  box-shadow: 0 20px 36px rgba(227, 34, 43, 0.34) !important;
}


/* =========================================================
   8. RESPONSIVE TABLET
========================================================= */

@media (max-width: 1024px) {
  body.woocommerce-order-pay .cart-container.container.page-wrapper.page-checkout {
    max-width: 920px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  body.woocommerce-order-pay form#order_review {
    padding: 112px 28px 32px !important;
  }

  body.woocommerce-order-pay form#order_review::before {
    left: 32px;
  }

  body.woocommerce-order-pay form#order_review::after {
    right: 30px;
    min-width: 230px;
  }

  body.woocommerce-order-pay #payment::before {
    right: 238px;
  }

  body.woocommerce-order-pay form#order_review .shop_table::before,
  body.woocommerce-order-pay form#order_review .shop_table::after {
    left: 96px;
  }

  body.woocommerce-order-pay form#order_review table.shop_table thead th,
  body.woocommerce-order-pay form#order_review table.shop_table tbody td {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  body.woocommerce-order-pay form#order_review table.shop_table .product-name {
    width: 58% !important;
  }

  body.woocommerce-order-pay form#order_review table.shop_table .product-quantity {
    width: 17% !important;
  }

  body.woocommerce-order-pay form#order_review table.shop_table .product-total,
  body.woocommerce-order-pay form#order_review table.shop_table .product-subtotal {
    width: 25% !important;
  }

  body.woocommerce-order-pay form#order_review table.shop_table tfoot tr {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
}

/* =========================================================
   9. RESPONSIVE MOBILE
========================================================= */

@media (max-width: 768px) {
  body.woocommerce-order-pay .checkout-page-title.page-title {
    padding: 18px 0 12px !important;
  }

  body.woocommerce-order-pay .checkout-page-title .page-title-inner {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  body.woocommerce-order-pay .checkout-breadcrumbs {
    gap: 10px !important;
    font-size: 13px !important;
    letter-spacing: 0.2px !important;
    white-space: nowrap !important;
  }

  body.woocommerce-order-pay .checkout-breadcrumbs .divider {
    font-size: 11px !important;
  }

  body.woocommerce-order-pay .checkout-breadcrumbs a.current::after,
  body.woocommerce-order-pay .checkout-breadcrumbs a.current::before {
    display: none !important;
  }

  body.woocommerce-order-pay .cart-container.container.page-wrapper.page-checkout {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 12px 32px !important;
  }

  body.woocommerce-order-pay form#order_review {
    padding: 92px 14px 20px !important;
    border-radius: 15px !important;
    box-shadow: 0 14px 34px rgba(28, 55, 75, 0.12) !important;
  }

  body.woocommerce-order-pay form#order_review::before {
    top: 18px;
    left: 16px;
    width: 54px;
    height: 54px;
    border-radius: 13px;
    font-size: 23px;
  }

  body.woocommerce-order-pay form#order_review::after,
  body.woocommerce-order-pay #payment::before {
    display: none !important;
  }

  body.woocommerce-order-pay form#order_review .shop_table::before {
    top: -68px;
    left: 70px;
    right: 10px;
    font-size: 19px;
    line-height: 1.25;
  }

  body.woocommerce-order-pay form#order_review .shop_table::after {
    top: -40px;
    left: 70px;
    right: 10px;
    font-size: 12.5px;
    line-height: 1.35;
  }

  /* Bảng sản phẩm về dạng card */
  body.woocommerce-order-pay form#order_review table.shop_table thead {
    display: none !important;
  }

  body.woocommerce-order-pay form#order_review table.shop_table tbody {
    display: block !important;
    border: 1px solid var(--ks-pay-border) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  body.woocommerce-order-pay form#order_review table.shop_table tbody tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px 12px !important;
    padding: 13px 14px !important;
    border-top: 1px solid #edf2f5 !important;
  }

  body.woocommerce-order-pay form#order_review table.shop_table tbody tr:first-child {
    border-top: 0 !important;
  }

  body.woocommerce-order-pay form#order_review table.shop_table tbody td {
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: 14px !important;
  }

  body.woocommerce-order-pay form#order_review table.shop_table tbody td.product-name {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    gap: 12px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
  }

  body.woocommerce-order-pay form#order_review table.shop_table tbody td.product-name::before {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
    border-radius: 8px;
    font-size: 17px;
  }

  body.woocommerce-order-pay form#order_review table.shop_table tbody td.product-quantity {
    grid-column: 1 !important;
    width: auto !important;
    text-align: left !important;
    color: var(--ks-pay-soft) !important;
    font-size: 13px !important;
  }

  body.woocommerce-order-pay form#order_review table.shop_table tbody td.product-quantity::before {
    content: "Số lượng: ";
    color: var(--ks-pay-soft);
    font-weight: 600;
  }

  body.woocommerce-order-pay form#order_review table.shop_table tbody td.product-subtotal {
    grid-column: 2 !important;
    width: auto !important;
    text-align: right !important;
  }

  body.woocommerce-order-pay form#order_review table.shop_table tbody td.product-subtotal,
  body.woocommerce-order-pay form#order_review table.shop_table tbody td.product-subtotal .amount,
  body.woocommerce-order-pay form#order_review table.shop_table tbody td.product-subtotal bdi {
    font-size: 15px !important;
  }

  /* Tổng tiền mobile */
  body.woocommerce-order-pay form#order_review table.shop_table tfoot {
    margin-top: 14px !important;
    border-radius: 12px !important;
  }

  body.woocommerce-order-pay form#order_review table.shop_table tfoot tr {
    grid-template-columns: minmax(0, 1fr) auto !important;
    min-height: 42px !important;
    padding: 0 14px !important;
    gap: 12px !important;
  }

  body.woocommerce-order-pay form#order_review table.shop_table tfoot th,
  body.woocommerce-order-pay form#order_review table.shop_table tfoot td,
  body.woocommerce-order-pay form#order_review table.shop_table tfoot td .amount,
  body.woocommerce-order-pay form#order_review table.shop_table tfoot td bdi {
    font-size: 14px !important;
  }

  body.woocommerce-order-pay form#order_review table.shop_table tfoot tr:not(:nth-child(3)):not(:last-child) th::after {
    display: none !important;
  }

  body.woocommerce-order-pay form#order_review table.shop_table tfoot tr:nth-child(3) {
    min-height: 58px !important;
  }

  body.woocommerce-order-pay form#order_review table.shop_table tfoot tr:nth-child(3) th {
    font-size: 20px !important;
  }

  body.woocommerce-order-pay form#order_review table.shop_table tfoot tr:nth-child(3) td,
  body.woocommerce-order-pay form#order_review table.shop_table tfoot tr:nth-child(3) td .amount,
  body.woocommerce-order-pay form#order_review table.shop_table tfoot tr:nth-child(3) td bdi {
    font-size: 21px !important;
  }

  body.woocommerce-order-pay form#order_review table.shop_table tfoot tr:last-child {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    min-height: 72px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  body.woocommerce-order-pay form#order_review table.shop_table tfoot tr:last-child td {
    justify-content: flex-start !important;
    text-align: left !important;
  }

  body.woocommerce-order-pay form#order_review table.shop_table tfoot tr:last-child td::before {
    width: 30px;
    height: 30px;
    border-radius: 7px;
  }

  /* Button mobile */
  body.woocommerce-order-pay form#order_review #payment {
    margin-top: 16px !important;
  }

  body.woocommerce-order-pay form#order_review #place_order {
    min-height: 52px !important;
    padding: 0 24px !important;
    font-size: 14px !important;
    box-shadow: 0 12px 22px rgba(227, 34, 43, 0.24) !important;
  }

  body.woocommerce-order-pay form#order_review #place_order::after {
    margin-left: 14px;
    font-size: 16px;
  }

  body.woocommerce-order-pay .cart-container.container.page-wrapper.page-checkout::after {
    content: "♢ 100% hàng chính hãng\A↻ Đổi trả dễ dàng\A☎ Hỗ trợ 24/7";
    margin-top: 18px;
    white-space: pre-line;
    font-size: 13px;
    gap: 0;
  }
}

/* =========================================================
   10. MOBILE NHỎ
========================================================= */

@media (max-width: 420px) {
  body.woocommerce-order-pay .checkout-breadcrumbs {
    font-size: 12px !important;
    gap: 7px !important;
  }

  body.woocommerce-order-pay .cart-container.container.page-wrapper.page-checkout {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  body.woocommerce-order-pay form#order_review {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  body.woocommerce-order-pay form#order_review .shop_table::before {
    font-size: 17px;
  }

  body.woocommerce-order-pay form#order_review .shop_table::after {
    font-size: 12px;
  }

  body.woocommerce-order-pay form#order_review table.shop_table tbody tr {
    padding: 12px !important;
  }

  body.woocommerce-order-pay form#order_review table.shop_table tbody td.product-name {
    gap: 10px !important;
    font-size: 13.5px !important;
  }

  body.woocommerce-order-pay form#order_review table.shop_table tbody td.product-name::before {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }

  body.woocommerce-order-pay form#order_review table.shop_table tfoot tr {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  body.woocommerce-order-pay form#order_review table.shop_table tfoot tr:nth-child(3) th {
    font-size: 18px !important;
  }

  body.woocommerce-order-pay form#order_review table.shop_table tfoot tr:nth-child(3) td,
  body.woocommerce-order-pay form#order_review table.shop_table tfoot tr:nth-child(3) td .amount,
  body.woocommerce-order-pay form#order_review table.shop_table tfoot tr:nth-child(3) td bdi {
    font-size: 19px !important;
  }
}
/* =========================================================
   FIX CHECKOUT DESKTOP - CỘT GIAO HÀNG CHIẾM 2/3
   Chỉ áp dụng trang checkout thường
   Không ảnh hưởng trang /checkout/order-pay/
========================================================= */

@media (min-width: 850px) {

  /* Chỉ target checkout thường, loại trừ order-pay */
  body.woocommerce-checkout:not(.woocommerce-order-pay)
  .cart-container.container.page-wrapper.page-checkout {
    width: 100% !important;
    max-width: 1320px !important;
    margin: 0 auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    box-sizing: border-box !important;
  }

  /* Grid tổng: trái 2/3, phải 1/3 */
  body.woocommerce-checkout:not(.woocommerce-order-pay)
  .page-checkout .woocommerce {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;

    display: grid !important;
    grid-template-columns: minmax(0, 2fr) minmax(360px, 1fr) !important;
    column-gap: 32px !important;
    row-gap: 0 !important;
    align-items: start !important;
  }

  /* Thông báo WooCommerce nếu có */
  body.woocommerce-checkout:not(.woocommerce-order-pay)
  .page-checkout .woocommerce > .woocommerce-notices-wrapper {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    width: 100% !important;
  }

  /* Giữ cơ chế tách layout hiện tại */
  body.woocommerce-checkout:not(.woocommerce-order-pay)
  .page-checkout form.checkout.woocommerce-checkout,
  body.woocommerce-checkout:not(.woocommerce-order-pay)
  .page-checkout form.checkout.woocommerce-checkout > .row,
  body.woocommerce-checkout:not(.woocommerce-order-pay)
  .page-checkout form.checkout.woocommerce-checkout > .row > .large-5.col,
  body.woocommerce-checkout:not(.woocommerce-order-pay)
  .page-checkout form.checkout.woocommerce-checkout .large-5.col > .col-inner,
  body.woocommerce-checkout:not(.woocommerce-order-pay)
  .page-checkout form.checkout.woocommerce-checkout .checkout-sidebar,
  body.woocommerce-checkout:not(.woocommerce-order-pay)
  .page-checkout form.checkout.woocommerce-checkout #order_review,
  body.woocommerce-checkout:not(.woocommerce-order-pay)
  .page-checkout .woocommerce-checkout-review-order-table {
    display: contents !important;
  }

  /* Cột trái: Thông tin giao hàng chiếm 2/3 */
  body.woocommerce-checkout:not(.woocommerce-order-pay)
  .page-checkout form.checkout.woocommerce-checkout > .row > .large-7.col {
    grid-column: 1 !important;
    grid-row: 2 / span 10 !important;

    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    float: none !important;

    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* Đảm bảo khối form bên trái full 2/3 */
  body.woocommerce-checkout:not(.woocommerce-order-pay)
  .page-checkout #customer_details,
  body.woocommerce-checkout:not(.woocommerce-order-pay)
  .page-checkout .woocommerce-billing-fields,
  body.woocommerce-checkout:not(.woocommerce-order-pay)
  .page-checkout .woocommerce-billing-fields__field-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Cột phải: Giỏ hàng */
  body.woocommerce-checkout:not(.woocommerce-order-pay)
  .page-checkout .ks-checkout-cart-title {
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.woocommerce-checkout:not(.woocommerce-order-pay)
  .page-checkout .woocommerce-checkout-review-order-table tbody {
    grid-column: 2 !important;
    grid-row: 3 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Cột phải: Mã giảm giá */
  body.woocommerce-checkout:not(.woocommerce-order-pay)
  .page-checkout .checkout_coupon.woocommerce-form-coupon {
    grid-column: 2 !important;
    grid-row: 4 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Cột phải: Đơn hàng của bạn */
  body.woocommerce-checkout:not(.woocommerce-order-pay)
  .page-checkout .woocommerce-checkout-review-order-table tfoot {
    grid-column: 2 !important;
    grid-row: 5 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Cột phải: Nút thanh toán */
  body.woocommerce-checkout:not(.woocommerce-order-pay)
  .page-checkout #payment.woocommerce-checkout-payment {
    grid-column: 2 !important;
    grid-row: 6 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.woocommerce-checkout:not(.woocommerce-order-pay)
  .page-checkout #place_order {
    width: 100% !important;
  }
}

/* =========================================================
   FIX TABLET + MOBILE - VỀ 1 CỘT
   Thứ tự:
   1. Thông tin giao hàng
   2. Giỏ hàng
   3. Mã giảm giá
   4. Đơn hàng của bạn
   5. Nút thanh toán
========================================================= */

@media (max-width: 849px) {

  body.woocommerce-checkout:not(.woocommerce-order-pay)
  .cart-container.container.page-wrapper.page-checkout {
    width: 100% !important;
    max-width: 100% !important;
    padding: 8px 12px 38px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }

  body.woocommerce-checkout:not(.woocommerce-order-pay)
  .page-checkout .woocommerce {
    display: grid !important;
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.woocommerce-checkout:not(.woocommerce-order-pay)
  .page-checkout .woocommerce > .woocommerce-notices-wrapper {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  body.woocommerce-checkout:not(.woocommerce-order-pay)
  .page-checkout form.checkout.woocommerce-checkout,
  body.woocommerce-checkout:not(.woocommerce-order-pay)
  .page-checkout form.checkout.woocommerce-checkout > .row,
  body.woocommerce-checkout:not(.woocommerce-order-pay)
  .page-checkout form.checkout.woocommerce-checkout > .row > .large-5.col,
  body.woocommerce-checkout:not(.woocommerce-order-pay)
  .page-checkout form.checkout.woocommerce-checkout .large-5.col > .col-inner,
  body.woocommerce-checkout:not(.woocommerce-order-pay)
  .page-checkout form.checkout.woocommerce-checkout .checkout-sidebar,
  body.woocommerce-checkout:not(.woocommerce-order-pay)
  .page-checkout form.checkout.woocommerce-checkout #order_review,
  body.woocommerce-checkout:not(.woocommerce-order-pay)
  .page-checkout .woocommerce-checkout-review-order-table {
    display: contents !important;
  }

  /* 1. Thông tin giao hàng */
  body.woocommerce-checkout:not(.woocommerce-order-pay)
  .page-checkout form.checkout.woocommerce-checkout > .row > .large-7.col {
    grid-column: 1 !important;
    grid-row: 2 !important;

    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    float: none !important;

    padding: 0 !important;
    margin: 0 0 18px !important;
    box-sizing: border-box !important;
  }

  /* 2. Giỏ hàng */
  body.woocommerce-checkout:not(.woocommerce-order-pay)
  .page-checkout .ks-checkout-cart-title {
    grid-column: 1 !important;
    grid-row: 3 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.woocommerce-checkout:not(.woocommerce-order-pay)
  .page-checkout .woocommerce-checkout-review-order-table tbody {
    grid-column: 1 !important;
    grid-row: 4 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 3. Mã giảm giá */
  body.woocommerce-checkout:not(.woocommerce-order-pay)
  .page-checkout .checkout_coupon.woocommerce-form-coupon {
    grid-column: 1 !important;
    grid-row: 5 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 4. Đơn hàng của bạn */
  body.woocommerce-checkout:not(.woocommerce-order-pay)
  .page-checkout .woocommerce-checkout-review-order-table tfoot {
    grid-column: 1 !important;
    grid-row: 6 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 5. Nút thanh toán */
  body.woocommerce-checkout:not(.woocommerce-order-pay)
  .page-checkout #payment.woocommerce-checkout-payment {
    grid-column: 1 !important;
    grid-row: 7 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}
/* =========================================================
   KEYSHU - LIVE SEARCH DROPDOWN
   Căn dropdown chính giữa ô tìm kiếm Flatsome
   HTML target:
   li.header-search-form.search-form
   form.searchform
   .live-search-results
========================================================= */

:root {
  --ks-live-primary: #03b0b1;
  --ks-live-primary-dark: #028c8e;
  --ks-live-text: #172235;
  --ks-live-soft: #758497;
  --ks-live-border: #dfe9ef;
  --ks-live-bg: #ffffff;
  --ks-live-red: #ff2f22;
  --ks-live-shadow: 0 18px 42px rgba(25, 47, 65, 0.16);
}

/* Cho phép dropdown không bị cắt */
.header-search-form,
.header-search-form .header-search-form-wrapper,
.header-search-form .searchform-wrapper,
.header-search-form form.searchform,
.header-search-form form.searchform .flex-row {
  overflow: visible !important;
}

/* Form tìm kiếm làm mốc để căn dropdown */
.header-search-form form.searchform {
  position: relative !important;
  z-index: 9999 !important;
}

/* Đảm bảo wrapper ô search có chiều rộng ổn định */
.header-search-form .searchform-wrapper {
  position: relative !important;
  z-index: 9999 !important;
}

/* =========================================================
   1. KHUNG LIVE SEARCH - CĂN GIỮA Ô TÌM KIẾM
========================================================= */

.header-search-form .live-search-results {
  position: absolute !important;

  /* Căn giữa theo form.searchform */
  left: 50% !important;
  right: auto !important;
  top: calc(100% + 10px) !important;
  transform: translateX(-50%) !important;

  width: 520px !important;
  max-width: min(520px, calc(100vw - 24px)) !important;

  z-index: 999999 !important;
  text-align: left !important;
  font-family: "SVN-Gilroy", sans-serif !important;
}

/* Khung danh sách */
.header-search-form .live-search-results .autocomplete-suggestions {
  width: 100% !important;
  max-height: 520px !important;

  margin: 0 !important;
  padding: 10px !important;

  border: 1px solid rgba(223, 233, 239, 0.96) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.98) !important;

  box-shadow: var(--ks-live-shadow) !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Thanh cuộn */
.header-search-form .live-search-results .autocomplete-suggestions::-webkit-scrollbar {
  width: 5px;
}

.header-search-form .live-search-results .autocomplete-suggestions::-webkit-scrollbar-track {
  background: transparent;
}

.header-search-form .live-search-results .autocomplete-suggestions::-webkit-scrollbar-thumb {
  background: rgba(3, 176, 177, 0.32);
  border-radius: 999px;
}

/* =========================================================
   2. ITEM SẢN PHẨM
========================================================= */

.header-search-form .live-search-results .autocomplete-suggestion {
  position: relative !important;

  min-height: 74px !important;
  margin: 0 !important;
  padding: 10px 12px !important;

  display: grid !important;
  grid-template-columns: 62px minmax(0, 1fr) 118px !important;
  align-items: center !important;
  gap: 12px !important;

  border-bottom: 1px solid var(--ks-live-border) !important;
  border-radius: 11px !important;
  background: transparent !important;

  color: var(--ks-live-text) !important;
  cursor: pointer !important;

  transition:
    background-color 0.22s ease,
    transform 0.22s ease,
    box-shadow 0.22s ease;
}

.header-search-form .live-search-results .autocomplete-suggestion:last-child {
  border-bottom: 0 !important;
}

.header-search-form .live-search-results .autocomplete-suggestion:hover,
.header-search-form .live-search-results .autocomplete-suggestion.selected {
  background: linear-gradient(
    135deg,
    rgba(3, 176, 177, 0.08),
    rgba(3, 176, 177, 0.035)
  ) !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(3, 176, 177, 0.08);
}

/* Ảnh sản phẩm */
.header-search-form .live-search-results .search-image {
  width: 62px !important;
  height: 62px !important;
  min-width: 62px !important;

  margin: 0 !important;
  padding: 0 !important;

  border-radius: 10px !important;
  border: 1px solid var(--ks-live-border) !important;
  background: #f7fbfc !important;

  object-fit: cover !important;
  box-shadow: 0 4px 12px rgba(26, 54, 75, 0.08);
}

/* Tên sản phẩm */
.header-search-form .live-search-results .search-name {
  min-width: 0 !important;

  color: var(--ks-live-text) !important;
  font-size: 14px !important;
  line-height: 1.42 !important;
  font-weight: 800 !important;

  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Từ khóa được bôi đậm */
.header-search-form .live-search-results .search-name strong {
  color: var(--ks-live-primary-dark) !important;
  font-weight: 900 !important;
  background: rgba(3, 176, 177, 0.13);
  padding: 0 4px;
  border-radius: 4px;
}

/* =========================================================
   3. GIÁ SẢN PHẨM
========================================================= */

.header-search-form .live-search-results .search-price {
  min-width: 118px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 4px !important;

  text-align: right !important;
  white-space: nowrap !important;
}

/* Giá gốc */
.header-search-form .live-search-results .search-price del {
  color: #a8b4bf !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  opacity: 1 !important;
  text-decoration-thickness: 1px !important;
}

.header-search-form .live-search-results .search-price del .amount,
.header-search-form .live-search-results .search-price del bdi {
  color: #a8b4bf !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

/* Giá sale */
.header-search-form .live-search-results .search-price ins {
  text-decoration: none !important;
}

.header-search-form .live-search-results .search-price ins .amount,
.header-search-form .live-search-results .search-price ins bdi,
.header-search-form .live-search-results .search-price > .amount,
.header-search-form .live-search-results .search-price > bdi {
  color: var(--ks-live-red) !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
}

/* Ẩn text screen reader khỏi giao diện */
.header-search-form .live-search-results .screen-reader-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* =========================================================
   4. ITEM KHÔNG CÓ ẢNH / KHÔNG CÓ GIÁ
   Ví dụ: Trang chủ
========================================================= */

.header-search-form .live-search-results .autocomplete-suggestion:not(:has(.search-image)) {
  min-height: 48px !important;
  grid-template-columns: 1fr !important;
  padding: 12px 14px !important;
}

.header-search-form .live-search-results .autocomplete-suggestion:not(:has(.search-image)) .search-name {
  grid-column: 1 !important;
  -webkit-line-clamp: 1 !important;
  font-size: 14px !important;
  color: var(--ks-live-soft) !important;
}

.header-search-form .live-search-results .autocomplete-suggestion:not(:has(.search-image)) .search-name::before {
  content: "\f002";
  margin-right: 8px;
  color: var(--ks-live-primary);
  font-family: "Font Awesome 7 Free", "Font Awesome 6 Free";
  font-weight: 900;
}

/* =========================================================
   5. RESPONSIVE TABLET
========================================================= */

@media (max-width: 1024px) {
  .header-search-form .live-search-results {
    width: 480px !important;
    max-width: min(480px, calc(100vw - 24px)) !important;
  }

  .header-search-form .live-search-results .autocomplete-suggestions {
    max-height: 480px !important;
  }

  .header-search-form .live-search-results .autocomplete-suggestion {
    grid-template-columns: 58px minmax(0, 1fr) 108px !important;
    min-height: 70px !important;
  }

  .header-search-form .live-search-results .search-image {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
  }

  .header-search-form .live-search-results .search-price {
    min-width: 108px !important;
  }
}

/* =========================================================
   6. RESPONSIVE MOBILE
========================================================= */

@media (max-width: 768px) {
  .header-search-form .live-search-results {
    position: fixed !important;

    top: 74px !important;
    left: 12px !important;
    right: 12px !important;
    transform: none !important;

    width: auto !important;
    max-width: none !important;

    z-index: 999999 !important;
  }

  .header-search-form .live-search-results::before {
    display: none !important;
  }

  .header-search-form .live-search-results .autocomplete-suggestions {
    max-height: calc(100vh - 100px) !important;
    padding: 8px !important;
    border-radius: 14px !important;
  }

  .header-search-form .live-search-results .autocomplete-suggestion {
    grid-template-columns: 54px minmax(0, 1fr) !important;
    grid-template-areas:
      "image name"
      "image price" !important;

    min-height: 76px !important;
    gap: 5px 11px !important;
    padding: 10px !important;
  }

  .header-search-form .live-search-results .search-image {
    grid-area: image !important;
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
  }

  .header-search-form .live-search-results .search-name {
    grid-area: name !important;
    font-size: 13.5px !important;
    line-height: 1.35 !important;
    -webkit-line-clamp: 2 !important;
  }

  .header-search-form .live-search-results .search-price {
    grid-area: price !important;
    min-width: 0 !important;

    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;

    text-align: left !important;
  }

  .header-search-form .live-search-results .search-price del,
  .header-search-form .live-search-results .search-price del .amount,
  .header-search-form .live-search-results .search-price del bdi {
    font-size: 11.5px !important;
  }

  .header-search-form .live-search-results .search-price ins .amount,
  .header-search-form .live-search-results .search-price ins bdi,
  .header-search-form .live-search-results .search-price > .amount,
  .header-search-form .live-search-results .search-price > bdi {
    font-size: 14px !important;
  }

  .header-search-form .live-search-results .autocomplete-suggestion:not(:has(.search-image)) {
    display: flex !important;
    min-height: 46px !important;
  }
}

/* =========================================================
   7. MOBILE NHỎ
========================================================= */

@media (max-width: 420px) {
  .header-search-form .live-search-results {
    top: 70px !important;
    left: 10px !important;
    right: 10px !important;
  }

  .header-search-form .live-search-results .autocomplete-suggestion {
    grid-template-columns: 50px minmax(0, 1fr) !important;
  }

  .header-search-form .live-search-results .search-image {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
  }

  .header-search-form .live-search-results .search-name {
    font-size: 13px !important;
  }

  .header-search-form .live-search-results .search-price {
    flex-wrap: wrap !important;
    gap: 5px 8px !important;
  }
}
/* =========================================================
   KEYSHU - THANK YOU PAGE DESKTOP SAFE FIX
   Muc tieu:
   - Chi ap dung cho trang Don hang hoan tat / Order Received.
   - Chi ap dung tren desktop tu 1025px tro len.
   - Khong anh huong Checkout, Cart, My Account, Shop hoac cac trang khac.
   - Cot Chi tiet don hang ben trai chiem 2/3.
   - Cot Dat hang thanh cong ben phai chiem 1/3.

   Cach dung:
   - Dan toan bo file nay xuong CUOI file CSS page hien tai.
   - Xoa cache Flatsome / plugin cache / trinh duyet sau khi dan.
========================================================= */

@media (min-width: 1025px) {

  /* Chi khoanh vung dung trang Thank You cua WooCommerce */
  body.woocommerce-order-received,
  body.woocommerce-checkout.woocommerce-order-received {
    --ks-thankyou-desktop-gap: 34px;
    --ks-thankyou-desktop-left: minmax(0, 2fr);
    --ks-thankyou-desktop-right: minmax(320px, 1fr);
  }

  /* Container rieng cua trang Don hang hoan tat */
  body.woocommerce-order-received .cart-container.container.page-wrapper.page-checkout,
  body.woocommerce-checkout.woocommerce-order-received .cart-container.container.page-wrapper.page-checkout {
    width: 100% !important;
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  /* Reset wrapper WooCommerce chi trong trang Order Received */
  body.woocommerce-order-received .cart-container.page-checkout > .woocommerce,
  body.woocommerce-checkout.woocommerce-order-received .cart-container.page-checkout > .woocommerce {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* Layout chinh: trai 2/3, phai 1/3 */
  body.woocommerce-order-received .cart-container.page-checkout .woocommerce > .woocommerce-order.row,
  body.woocommerce-checkout.woocommerce-order-received .cart-container.page-checkout .woocommerce > .woocommerce-order.row {
    display: grid !important;
    grid-template-columns: var(--ks-thankyou-desktop-left) var(--ks-thankyou-desktop-right) !important;
    column-gap: var(--ks-thankyou-desktop-gap) !important;
    row-gap: 0 !important;
    align-items: start !important;

    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* Tat pseudo cua Flatsome row de grid khong bi lech */
  body.woocommerce-order-received .cart-container.page-checkout .woocommerce > .woocommerce-order.row::before,
  body.woocommerce-order-received .cart-container.page-checkout .woocommerce > .woocommerce-order.row::after,
  body.woocommerce-checkout.woocommerce-order-received .cart-container.page-checkout .woocommerce > .woocommerce-order.row::before,
  body.woocommerce-checkout.woocommerce-order-received .cart-container.page-checkout .woocommerce > .woocommerce-order.row::after {
    display: none !important;
    content: none !important;
  }

  /* Reset cot Flatsome chi trong layout Thank You */
  body.woocommerce-order-received .cart-container.page-checkout .woocommerce > .woocommerce-order.row > .col,
  body.woocommerce-checkout.woocommerce-order-received .cart-container.page-checkout .woocommerce > .woocommerce-order.row > .col {
    float: none !important;
    flex: none !important;
    flex-basis: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Cot trai: Chi tiet don hang + Dia chi thanh toan = 2/3 */
  body.woocommerce-order-received .cart-container.page-checkout .woocommerce > .woocommerce-order.row > .large-7.col,
  body.woocommerce-checkout.woocommerce-order-received .cart-container.page-checkout .woocommerce > .woocommerce-order.row > .large-7.col {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Cot phai: Card Dat hang thanh cong = 1/3 */
  body.woocommerce-order-received .cart-container.page-checkout .woocommerce > .woocommerce-order.row > .large-5.col,
  body.woocommerce-checkout.woocommerce-order-received .cart-container.page-checkout .woocommerce > .woocommerce-order.row > .large-5.col {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Card ben phai khong vuot cot 1/3 */
  body.woocommerce-order-received .cart-container.page-checkout .woocommerce > .woocommerce-order.row > .large-5.col .col-inner,
  body.woocommerce-order-received .cart-container.page-checkout .woocommerce > .woocommerce-order.row > .large-5.col .is-well,
  body.woocommerce-checkout.woocommerce-order-received .cart-container.page-checkout .woocommerce > .woocommerce-order.row > .large-5.col .col-inner,
  body.woocommerce-checkout.woocommerce-order-received .cart-container.page-checkout .woocommerce > .woocommerce-order.row > .large-5.col .is-well {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Bang chi tiet don hang duoc phep rong theo cot 2/3 */
  body.woocommerce-order-received .cart-container.page-checkout .woocommerce-order-details,
  body.woocommerce-order-received .cart-container.page-checkout .woocommerce-customer-details,
  body.woocommerce-checkout.woocommerce-order-received .cart-container.page-checkout .woocommerce-order-details,
  body.woocommerce-checkout.woocommerce-order-received .cart-container.page-checkout .woocommerce-customer-details {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body.woocommerce-order-received .cart-container.page-checkout table.woocommerce-table--order-details,
  body.woocommerce-order-received .cart-container.page-checkout table.order_details,
  body.woocommerce-checkout.woocommerce-order-received .cart-container.page-checkout table.woocommerce-table--order-details,
  body.woocommerce-checkout.woocommerce-order-received .cart-container.page-checkout table.order_details {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    box-sizing: border-box !important;
  }
}
/* =====================================================
   CHECKOUT BILLING FORM - KEYSHU
   Ghi chú nằm trong cùng khung với Họ tên / SĐT / Địa chỉ
   Scope riêng trang WooCommerce Checkout
===================================================== */

body.woocommerce-checkout #customer_details {
  width: 100%;
  background: #ffffff;
  border: 1px solid #dfeaf1;
  border-radius: 14px;
  padding: 26px;
  box-shadow: 0 10px 28px rgba(29, 64, 80, 0.06);
}

/* Reset các khối con để không tạo thêm card riêng */
body.woocommerce-checkout #customer_details .woocommerce-billing-fields,
body.woocommerce-checkout #customer_details .woocommerce-additional-fields,
body.woocommerce-checkout #customer_details .woocommerce-shipping-fields {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Tiêu đề */
body.woocommerce-checkout #customer_details .woocommerce-billing-fields > h3 {
  margin: 0 0 22px !important;
  color: #16223a;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Ẩn tiêu đề Thông tin bổ sung */
body.woocommerce-checkout #customer_details .woocommerce-additional-fields > h3 {
  display: none !important;
}

/* Khung chứa toàn bộ field thanh toán */
body.woocommerce-checkout #customer_details .woocommerce-billing-fields__field-wrapper {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 18px 14px !important;

  background: #ffffff;
  border: 1px solid #dfeaf1;
  border-radius: 14px;
  padding: 26px 26px 156px !important;
  box-shadow: 0 14px 34px rgba(29, 64, 80, 0.045);
}

/* Reset form row mặc định WooCommerce / Flatsome */
body.woocommerce-checkout #customer_details .form-row {
  float: none !important;
  clear: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Họ tên full hàng */
body.woocommerce-checkout #customer_details #billing_last_name_field {
  flex: 0 0 100%;
  max-width: 100%;
}

/* SĐT + Email */
body.woocommerce-checkout #customer_details #billing_phone_field,
body.woocommerce-checkout #customer_details #billing_email_field {
  flex: 0 0 calc(50% - 7px);
  max-width: calc(50% - 7px);
}

/* Tỉnh/Thành phố + Phường/Xã */
body.woocommerce-checkout #customer_details #billing_state_field,
body.woocommerce-checkout #customer_details #billing_city_field {
  flex: 0 0 calc(50% - 7px);
  max-width: calc(50% - 7px);
}

/* Địa chỉ full hàng */
body.woocommerce-checkout #customer_details #billing_address_1_field {
  flex: 0 0 100%;
  max-width: 100%;
}

/* =====================================================
   GHI CHÚ - KÉO VÀO BÊN TRONG KHUNG FIELD
===================================================== */

body.woocommerce-checkout #customer_details .woocommerce-additional-fields {
  position: relative;
  z-index: 2;
  margin: -155px 26px 0 !important;
  width: calc(100% - 52px);
}

body.woocommerce-checkout #customer_details .woocommerce-additional-fields__field-wrapper {
  display: block;
}

body.woocommerce-checkout #customer_details #order_comments_field {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Label chung */
body.woocommerce-checkout #customer_details label {
  display: block;
  margin: 0 0 8px !important;
  color: #16223a;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 700;
}

/* Đổi label ghi chú thành "Ghi chú" */
body.woocommerce-checkout #customer_details #order_comments_field label {
  font-size: 0 !important;
  margin: 0 0 8px !important;
}

body.woocommerce-checkout #customer_details #order_comments_field label::before {
  content: "Ghi chú";
  color: #16223a;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 700;
}

/* Ẩn chữ tuỳ chọn */
body.woocommerce-checkout #customer_details #order_comments_field .optional {
  display: none !important;
}

/* Dấu sao */
body.woocommerce-checkout #customer_details label .required,
body.woocommerce-checkout #customer_details label abbr.required {
  color: #e53935;
  text-decoration: none;
}

/* =====================================================
   INPUT / SELECT / TEXTAREA
===================================================== */

body.woocommerce-checkout #customer_details input.input-text,
body.woocommerce-checkout #customer_details textarea.input-text,
body.woocommerce-checkout #customer_details select {
  width: 100%;
  min-height: 42px;
  margin: 0 !important;
  padding: 0 14px;
  border: 1px solid #d7e4ed;
  border-radius: 8px;
  background: #ffffff;
  color: #405163;
  font-size: 14px;
  font-weight: 500;
  box-shadow: none;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body.woocommerce-checkout #customer_details #order_comments {
  width: 100%;
  min-height: 86px;
  padding: 13px 14px;
  line-height: 1.6;
  resize: vertical;
}

/* Focus */
body.woocommerce-checkout #customer_details input.input-text:focus,
body.woocommerce-checkout #customer_details textarea.input-text:focus,
body.woocommerce-checkout #customer_details select:focus {
  border-color: #03b0b1;
  box-shadow: 0 0 0 3px rgba(3, 176, 177, 0.12);
}

/* Placeholder */
body.woocommerce-checkout #customer_details input.input-text::placeholder,
body.woocommerce-checkout #customer_details textarea.input-text::placeholder {
  color: #8a99a8;
  font-weight: 500;
}

/* =====================================================
   SELECT2 - Tỉnh/Thành phố, Phường/Xã
===================================================== */

body.woocommerce-checkout #customer_details .select2-container {
  width: 100% !important;
}

body.woocommerce-checkout #customer_details .select2-container .select2-selection--single {
  height: 42px;
  min-height: 42px;
  border: 1px solid #d7e4ed;
  border-radius: 8px;
  background: #ffffff;
  display: flex;
  align-items: center;
  box-shadow: none;
  outline: none;
}

body.woocommerce-checkout #customer_details .select2-container .select2-selection--single .select2-selection__rendered {
  width: 100%;
  padding-left: 14px;
  padding-right: 36px;
  color: #405163;
  font-size: 14px;
  font-weight: 500;
  line-height: 42px;
}

body.woocommerce-checkout #customer_details .select2-container .select2-selection--single .select2-selection__arrow {
  height: 42px;
  width: 34px;
  right: 4px;
}

body.woocommerce-checkout #customer_details .select2-container--default.select2-container--focus .select2-selection--single,
body.woocommerce-checkout #customer_details .select2-container--default.select2-container--open .select2-selection--single {
  border-color: #03b0b1;
  box-shadow: 0 0 0 3px rgba(3, 176, 177, 0.12);
}

/* Dropdown Select2 */
body.woocommerce-checkout .select2-dropdown {
  border: 1px solid #d7e4ed;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(29, 64, 80, 0.12);
}

body.woocommerce-checkout .select2-search--dropdown {
  padding: 8px;
}

body.woocommerce-checkout .select2-search--dropdown .select2-search__field {
  min-height: 38px;
  border: 1px solid #d7e4ed;
  border-radius: 7px;
  padding: 0 12px;
  outline: none;
}

body.woocommerce-checkout .select2-results__option {
  padding: 9px 12px;
  color: #405163;
  font-size: 14px;
}

body.woocommerce-checkout .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: #03b0b1;
  color: #ffffff;
}

/* =====================================================
   RESPONSIVE TABLET
===================================================== */

@media (max-width: 849px) {
  body.woocommerce-checkout #customer_details {
    padding: 22px 18px;
    border-radius: 12px;
  }

  body.woocommerce-checkout #customer_details .woocommerce-billing-fields > h3 {
    font-size: 18px;
    margin-bottom: 18px !important;
  }

  body.woocommerce-checkout #customer_details .woocommerce-billing-fields__field-wrapper {
    gap: 16px !important;
    padding: 22px 22px 150px !important;
    border-radius: 12px;
  }

  body.woocommerce-checkout #customer_details #billing_phone_field,
  body.woocommerce-checkout #customer_details #billing_email_field,
  body.woocommerce-checkout #customer_details #billing_state_field,
  body.woocommerce-checkout #customer_details #billing_city_field {
    flex: 0 0 100%;
    max-width: 100%;
  }

  body.woocommerce-checkout #customer_details .woocommerce-additional-fields {
    margin: -132px 22px 0 !important;
    width: calc(100% - 44px);
  }

  body.woocommerce-checkout #customer_details #order_comments {
    min-height: 82px;
  }
}

/* =====================================================
   RESPONSIVE MOBILE
===================================================== */

@media (max-width: 549px) {
  body.woocommerce-checkout #customer_details {
    padding: 18px 14px;
    border-radius: 12px;
  }

  body.woocommerce-checkout #customer_details .woocommerce-billing-fields > h3 {
    font-size: 17px;
    line-height: 1.35;
    margin-bottom: 16px !important;
  }

  body.woocommerce-checkout #customer_details .woocommerce-billing-fields__field-wrapper {
    gap: 15px !important;
    padding: 18px 14px 142px !important;
    border-radius: 12px;
  }

  body.woocommerce-checkout #customer_details .woocommerce-additional-fields {
    margin: -126px 14px 0 !important;
    width: calc(100% - 28px);
  }

  body.woocommerce-checkout #customer_details label,
  body.woocommerce-checkout #customer_details #order_comments_field label::before {
    font-size: 12.5px;
  }

  body.woocommerce-checkout #customer_details input.input-text,
  body.woocommerce-checkout #customer_details textarea.input-text,
  body.woocommerce-checkout #customer_details select,
  body.woocommerce-checkout #customer_details .select2-container .select2-selection--single {
    min-height: 42px;
    border-radius: 8px;
    font-size: 13.5px;
  }

  body.woocommerce-checkout #customer_details .select2-container .select2-selection--single .select2-selection__rendered {
    font-size: 13.5px;
  }

  body.woocommerce-checkout #customer_details #order_comments {
    min-height: 78px;
  }
}
/* =====================================================
   MY ACCOUNT - ORDERS PAGINATION BUTTON
   Nút Kế tiếp / Quay lại trong trang đơn hàng
===================================================== */

body.woocommerce-account .woocommerce-pagination,
body.woocommerce-account .woocommerce-Pagination {
  width: 100%;
  margin: 26px 0 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

/* Nút phân trang */
body.woocommerce-account .woocommerce-pagination .woocommerce-button,
body.woocommerce-account .woocommerce-Pagination .woocommerce-button,
body.woocommerce-account .woocommerce-pagination .woocommerce-Button,
body.woocommerce-account .woocommerce-Pagination .woocommerce-Button {
  min-width: 118px;
  height: 42px;
  padding: 0 18px !important;
  border: 1px solid #03b0b1 !important;
  border-radius: 999px !important;
  background: #03b0b1 !important;
  color: #ffffff !important;
  font-size: 13px;
  line-height: 42px;
  font-weight: 800;
  text-align: center;
  text-transform: none;
  text-decoration: none !important;
  letter-spacing: 0;
  box-shadow: 0 8px 18px rgba(3, 176, 177, 0.22);
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.22s ease;
}

/* Icon mũi tên cho nút Kế tiếp */
body.woocommerce-account .woocommerce-pagination .woocommerce-button--next::after,
body.woocommerce-account .woocommerce-Pagination .woocommerce-Button--next::after {
  content: "→";
  font-size: 15px;
  line-height: 1;
  font-weight: 800;
  transform: translateY(-1px);
}

/* Icon mũi tên cho nút Quay lại nếu có */
body.woocommerce-account .woocommerce-pagination .woocommerce-button--previous::before,
body.woocommerce-account .woocommerce-Pagination .woocommerce-Button--previous::before {
  content: "←";
  font-size: 15px;
  line-height: 1;
  font-weight: 800;
  transform: translateY(-1px);
}

/* Hover */
body.woocommerce-account .woocommerce-pagination .woocommerce-button:hover,
body.woocommerce-account .woocommerce-Pagination .woocommerce-button:hover,
body.woocommerce-account .woocommerce-pagination .woocommerce-Button:hover,
body.woocommerce-account .woocommerce-Pagination .woocommerce-Button:hover {
  background: #ffffff !important;
  color: #03b0b1 !important;
  border-color: #03b0b1 !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(3, 176, 177, 0.28);
}

/* Active click */
body.woocommerce-account .woocommerce-pagination .woocommerce-button:active,
body.woocommerce-account .woocommerce-Pagination .woocommerce-button:active,
body.woocommerce-account .woocommerce-pagination .woocommerce-Button:active,
body.woocommerce-account .woocommerce-Pagination .woocommerce-Button:active {
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(3, 176, 177, 0.2);
}

/* Focus accessibility */
body.woocommerce-account .woocommerce-pagination .woocommerce-button:focus,
body.woocommerce-account .woocommerce-Pagination .woocommerce-button:focus,
body.woocommerce-account .woocommerce-pagination .woocommerce-Button:focus,
body.woocommerce-account .woocommerce-Pagination .woocommerce-Button:focus {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(3, 176, 177, 0.16),
    0 8px 18px rgba(3, 176, 177, 0.22);
}

/* Mobile */
@media (max-width: 549px) {
  body.woocommerce-account .woocommerce-pagination,
  body.woocommerce-account .woocommerce-Pagination {
    margin-top: 20px;
    justify-content: center;
  }

  body.woocommerce-account .woocommerce-pagination .woocommerce-button,
  body.woocommerce-account .woocommerce-Pagination .woocommerce-button,
  body.woocommerce-account .woocommerce-pagination .woocommerce-Button,
  body.woocommerce-account .woocommerce-Pagination .woocommerce-Button {
    width: 100%;
    min-width: 0;
    height: 42px;
    font-size: 13px;
    line-height: 42px;
  }
}