/*
Theme Name: SGTECHPC Theme
Author: Hiếu PC
Version: 1.1 (home menu + mega fix)
*/

/* =================== FONT & GLOBAL =================== */
html, body { margin:0; padding:0; }

@font-face{
  font-family:'SF Pro Display';
  src:local('SF Pro Display Regular'),local('SFProDisplay-Regular'),
      url('assets/fonts/SF-Pro-Display-Regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'SF Pro Display';
  src:local('SF Pro Display Medium'),local('SFProDisplay-Medium'),
      url('assets/fonts/SF-Pro-Display-Medium.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'SF Pro Display';
  src:local('SF Pro Display Semibold'),local('SFProDisplay-Semibold'),
      url('assets/fonts/SF-Pro-Display-Semibold.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'SF Pro Display';
  src:local('SF Pro Display Bold'),local('SFProDisplay-Bold'),
      url('assets/fonts/SF-Pro-Display-Bold.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}

:root{
  --font-sans:'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
              'Helvetica Neue', Arial, 'Noto Sans',
              'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji', sans-serif;

  /* Header */
  --header-row-h:56px;
  --header-row-gap:12px;
  --hdrTop:72px;              /* có thể được JS cập nhật đúng theo chiều cao header */

  /* Search */
  --search-h:43px;
  --search-w:680px;
  --radius:8px;

  /* Layout container */
  --container-max:1620px;
  --container-pad:10px;
  --grid-gap:10px;
  --sidebar-w:280px;
  
}


html, body{
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* =================== HEADER =================== */
.header-top{
  position: sticky; top:0; z-index:700;
  background:linear-gradient(to top,#0b57d0,#0b57d0);
  padding:16px 0; color:#fff;
  transition: padding .18s ease, box-shadow .18s ease, backdrop-filter .18s ease;
}
.admin-bar .header-top{ top:32px; }
@media (max-width:782px){ .admin-bar .header-top{ top:46px; } }

.header-container{ max-width:var(--container-max); margin:0 auto; padding:0 var(--container-pad); box-sizing:border-box; }

.header-grid{
  display:grid;
  grid-template-columns:320px 1fr auto;
  grid-template-rows:var(--header-row-h) var(--header-row-h);
  grid-template-areas:
    "logo benefits auth"
    "category search   right";
  column-gap:20px; row-gap:var(--header-row-gap); align-items:center;
  transition:grid-template-rows .2s ease,row-gap .2s ease,grid-template-columns .2s ease;
}

/* Logo */
.logo-area{ grid-area:logo; display:flex; align-items:center; }
.logo-area img{ height:56px; width:auto; object-fit:contain; display:block; transition:height .18s ease; }

/* Benefit */
.benefit-area{ grid-area:benefits; display:flex; align-items:center; transition:opacity .15s ease; }
.benefit-row{ display:flex; gap:25px; justify-content:space-between; margin:0; width:100%; }
.benefit-item{ display:flex; align-items:center; gap:8px; font-size:14px; white-space:nowrap; color:#fff; }

/* Auth */
.auth-area{ grid-area:auth; justify-self:end; align-self:start; display:flex; gap:10px; }
.btn-auth{
  height:36px; padding:0 14px; border-radius:999px; display:inline-flex; align-items:center;
  background:#fff; color:#0a4c8a; font-weight:700; font-size:14px; border:2px solid #fff;
  text-decoration:none; box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.btn-auth:hover{ background:#f4f8ff; }
.btn-auth.ghost{ background:transparent; color:#fff; border-color:#cfe6ff; }

/* Right group */
.right-area{
  grid-area:right; justify-self:end; align-self:end;
  display:flex; align-items:center; gap:13px; padding:8px 18px;
  background:linear-gradient(135deg,#0a4c8a,#0046b3);
  border-radius:36px; box-shadow:0 6px 18px rgba(0,0,0,.15); color:#fff;
  position:relative; overflow:visible; width:max-content; isolation:isolate;
}
.right-item{ display:flex; align-items:center; gap:10px; min-height:44px; color:#fff; text-decoration:none; padding:0 4px; border-radius:28px; }
.right-area .right-item + .right-item{ position:relative; }
.right-area .right-item + .right-item::before{
  content:""; position:absolute; left:-12px; top:50%; width:4px; height:4px; border-radius:50%;
  background:rgba(255,255,255,.25); transform:translateY(-50%);
}
.right-item .icon-circle{
  position:relative; width:38px; height:38px; flex:0 0 38px; border-radius:50%; background:#fff;
  display:flex; align-items:center; justify-content:center; color:#0aa2e3; font-size:18px; box-shadow:0 2px 6px rgba(0,0,0,.1);
  transition:transform .15s ease;
}
.right-item:hover .icon-circle{ transform:translateY(-1px); }
.icon-circle .cart-badge{
  position:absolute; top:-5px; right:-5px; width:16px; height:16px; border-radius:999px;
  background:#ff204e; color:#fff; font-size:10px; font-weight:800; display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 2px #063d73;
}
.right-item .text{ display:flex; flex-direction:column; line-height:1.2; }
.right-item .text span{ font-size:12px; opacity:.9; margin-bottom:1px; }
.right-item .text strong{ font-size:16px; font-weight:700; color:#fff; }

/* Hàng 2 */
.category-area{ grid-area:category; display:flex; align-items:center; min-width:220px; }
.search-area  { grid-area:search;   display:flex; align-items:center; min-width:0; }

/* Nút danh mục */
.menu-toggle{
  display:flex; align-items:center; gap:10px; height:40px; padding:0 18px;
  background:#0046b3; color:#fff; border:2px solid #fff; border-radius:999px;
  font-size:16px; font-weight:700; cursor:pointer; white-space:nowrap;
}
.menu-toggle .fa-bars{ font-size:18px; }
.menu-toggle .menu-arrow{ margin-left:auto; font-size:14px; color:#fff; }
.menu-toggle:hover{ background:#0043a3; }
#danhmuc-btn[aria-expanded="true"]{ background:#fff; color:#0046b3; border-color:#fff; }
#danhmuc-btn[aria-expanded="true"] .fa-bars{ color:#0046b3; }

/* Overlay + offcanvas */
#menu-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.5); opacity:0; visibility:hidden; transition:.25s ease; z-index:998; }
#menu-overlay.show{ opacity:1; visibility:visible; }
body.menu-open{ overflow:hidden; }
.menu-danhmuc{ transition: box-shadow .2s ease, transform .2s ease; }
.menu-danhmuc.is-open{ box-shadow:0 12px 40px rgba(0,0,0,.18),0 0 0 2px #fff,0 0 0 6px rgba(0,102,204,.20); }

#danhmuc-menu{
  position:fixed; left:0; top:0; bottom:0; width:86%; max-width:360px; background:#fff; z-index:999;
  overflow-y:auto; border-radius:0; box-shadow:0 12px 40px rgba(0,0,0,.18);
  transform:translateX(-100%); opacity:0; visibility:hidden; transition:transform .25s ease, opacity .25s ease, visibility .25s ease;
}
#danhmuc-menu.is-open{ transform:translateX(0); opacity:1; visibility:visible; }

/* HOME: sidebar luôn mở & sticky ngay dưới header */
body.home #danhmuc-menu{
  position: sticky !important;
  top: var(--hdrTop,72px) !important;
  bottom: auto !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  width: var(--sidebar-w); max-width: 100%;
  border-radius:10px; box-shadow:0 12px 32px rgba(0,0,0,.096), 0 2px 6px rgba(0,0,0,.048);
  max-height: calc(100vh - var(--hdrTop,72px) - 20px);
  overflow: visible;          /* <— sửa từ auto thành visible để mega không bị cắt */
  z-index:600;
  transition: top .15s ease;
}

/* Không chặn sticky bởi overflow */
.category-area, .header-container{ overflow: visible; }

/* ===== TRẠNG THÁI COMPACT ===== */
.header-top.is-compact{ padding:8px 0; box-shadow:0 6px 18px rgba(0,0,0,.08); backdrop-filter:saturate(1.1); }
.header-top.is-compact .header-grid{
  grid-template-rows:0 var(--header-row-h);
  row-gap:8px;
  grid-template-columns:240px 1fr auto;
}
.header-top.is-compact .logo-area,
.header-top.is-compact .benefit-area,
.header-top.is-compact .auth-area{
  opacity:0; visibility:hidden; height:0; overflow:hidden; margin:0; padding:0; pointer-events:none;
}
.header-top.is-compact .logo-area img{ height:0; }
.header-top.is-compact .menu-toggle{ height:36px; padding:0 14px; font-size:15px; border-radius:999px; }
.header-top.is-compact .search-area input,
.header-top.is-compact .text-search{ height:38px; }

.header-top{
  position: sticky; 
  top:0; 
  z-index:700;
  background:linear-gradient(to top,#0b57d0,#0b57d0);
  padding:16px 0; 
  color:#fff;
  transition: padding .18s ease, box-shadow .18s ease, backdrop-filter .18s ease;
  isolation:isolate;
  overflow: hidden;    /* <-- THÊM DÒNG NÀY */
}

/* Trống đồng giữa header */
.header-top::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:900px;          /* kích thước tổng thể – tăng/giảm tuỳ ý */
  height:900px;
  transform:translate(-50%, -50%);
  background-image:url('https://sgtechpc.vn/wp-content/uploads/2025/11/dongsondrum.svg');
  background-repeat:no-repeat;
  background-size:contain;
  opacity:0.10;         /* độ mờ – tăng nếu muốn rõ hơn (0.14–0.20) */
  pointer-events:none;
  z-index:-1;
}


/* =================== MENU DANH MỤC (cơ bản) =================== */
.menu-danhmuc{ position:relative; width:var(--sidebar-w); background:#fff; border-radius:10px; box-shadow:0 4px 20px rgba(0,0,0,.05); }
.menu-danhmuc ul{ list-style:none; padding:10px 0; margin:0; }
.menu-item{ margin:4px 12px; }
.menu-item > a{
  display:flex; align-items:center; gap:10px; padding:10px 14px; text-decoration:none; color:#333;
  font-size:15px; border-radius:12px; transition:.3s;
}
.menu-item > a:hover{ background:#e0f0ff; color:#0066cc; }
.menu-item .icon{ width:20px; font-size:16px; text-align:center; flex-shrink:0; }
.menu-item .icon img{ width:20px; height:20px; object-fit:contain; flex-shrink:0; }
.menu-item .arrow{ margin-left:auto; color:#888; font-size:12px; }

/* =================== WRAPPER MENU + SLIDER =================== */
.homepage-wrapper{
  display:grid;
  grid-template-columns:var(--sidebar-w) 1fr;
  gap: var(--grid-gap);
  max-width:var(--container-max);
  margin:0 auto;
  padding:15px 0 0;
  box-sizing:border-box;
  position:relative;
  overflow:visible;
}

.sidebar-left{ position:relative; z-index:30; overflow:visible; }
.main-slider{ min-width:0; }

/* =================== SLIDER (Swiper) =================== */
.custom-slider-container{
  position:relative; border-radius:12px; overflow:hidden; margin:0; height:100% !important; z-index:1;
}
.custom-swiper,
.custom-swiper .swiper,
.custom-swiper .swiper-wrapper,
.custom-swiper .swiper-slide{ width:100%; height:100% !important; }
.custom-swiper .swiper-slide{ background-size:cover; background-position:center; background-repeat:no-repeat; border-radius:12px; }
.custom-swiper .swiper-button-next,
.custom-swiper .swiper-button-prev{ width:42px; height:42px; border-radius:999px; background:rgba(0,0,0,.35); }
.custom-swiper .swiper-button-next::after,
.custom-swiper .swiper-button-prev::after{ font-size:18px; color:#fff; }
.custom-swiper .swiper-pagination{ pointer-events:none; } /* không chặn hover menu */

/* =================== SUBMENU (MEGA) – fill bằng slider =================== */
/* Quan trọng: mega định vị theo .menu-danhmuc (không theo <li>) */
.menu-danhmuc{ position:relative; }
.menu-danhmuc .has-submenu{ position: static; } /* override rule cũ */

.menu-danhmuc .mega-menu{
  display:none;
  position:absolute;
  top:0;
  left: calc(100% + 10px);   /* 10px = gap giữa menu và slider */
  height:100%;
  width: calc(
    min(100vw, var(--container-max))
    - var(--sidebar-w)
    - var(--grid-gap)
    - (2 * var(--container-pad))
  );
  max-width:none;
  min-width:0;
  overflow:auto;
  background:#fff;
  border-radius:12px 12px 12px 12px;
  box-shadow:0 12px 40px rgba(0,0,0,.15);
  padding:12px 16px;
  z-index:60;
}


/* HOME: mở bằng hover */
@media (hover:hover){
  body.home .menu-danhmuc .has-submenu:hover > .mega-menu{ display:flex; }
}
/* Trang khác/offcanvas: mở bằng click (JS thêm .is-open) */
#danhmuc-menu.anchored .has-submenu.is-open > .mega-menu,
.menu-danhmuc.anchored .has-submenu.is-open > .mega-menu{ display:flex; }
/* MOBILE: bung dọc */
@media (max-width:991.98px){
  #danhmuc-menu{ overflow-y:auto; }
  .menu-danhmuc .mega-menu{
    position:static; left:auto; top:auto;
    width:100%; height:auto; max-width:none;
    box-shadow:none; border-radius:0; padding:8px 0 0;
  }
}

/* =================== SEARCH =================== */
.search-area .header-search-group{ position:relative; width:min(100%,var(--search-w)); }
#sgtpc-search-form{
  position:relative; display:flex; align-items:center; height:var(--search-h); width:100%;
  background:#fff; border-radius:var(--radius); padding:0 48px 0 14px; box-shadow:0 4px 12px rgba(0,0,0,.08);
}
.text-search{ flex:1; height:100%; border:0; outline:0; background:transparent; padding:0; font-size:15px; color:#111; }
.text-search::placeholder{ color:#9aa3af; }
.btn-search{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:34px; height:34px; border:0; background:transparent; cursor:pointer; border-radius:50%;
}
.btn-search::before{
  content:""; display:block; width:20px; height:20px; margin:auto;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>') no-repeat center/contain;
}

/* =================== GỢI Ý TÌM KIẾM =================== */
.autocomplete-suggestions{
  position:absolute; left:0; right:0; top:calc(100% + 8px);
  background:#fff; color:#111; border-radius:12px; box-shadow:0 10px 24px rgba(0,0,0,.08);
  max-height:420px; overflow:auto; padding:6px; z-index:1000;
}
.autocomplete-suggestions a.sgtpc-suggest{
  display:grid !important; grid-template-columns:40px 1fr !important; align-items:start; gap:12px;
  padding:8px 10px; border-radius:10px; text-decoration:none; color:inherit;
}
.autocomplete-suggestions a.sgtpc-suggest:hover{ background:#f5f7ff; }
.autocomplete-suggestions a.sgtpc-suggest img{
  grid-column:1; grid-row:1 / span 2; width:40px; height:40px; border-radius:6px; object-fit:cover; background:#f2f2f2;
}
.autocomplete-suggestions a.sgtpc-suggest .t{ grid-column:2; grid-row:1; white-space:normal !important; line-height:1.3; font-weight:600; }
.autocomplete-suggestions a.sgtpc-suggest .p{ grid-column:2; grid-row:2; margin-top:4px; white-space:nowrap; font-weight:700; color:#e60000; }

/* =================== BANNER DƯỚI SLIDER =================== */
.home-under-slider{ display:flex; gap:20px; margin-top:20px; }
.home-under-slider a{ flex:1; min-height:221px; border-radius:13px; overflow:hidden; display:block; }
.home-under-slider a img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:991.98px){
  .home-under-slider{ flex-wrap:wrap; }
  .home-under-slider a{ flex:0 0 calc(50% - 10px); }
}
@media (max-width:575.98px){
  .home-under-slider a{ flex:0 0 100%; }
}

/* =================== BREADCRUMB (nhẹ) =================== */
.breadcrumb{ font-size:14px; margin-bottom:15px; }
.breadcrumb a{ color:#0073aa; text-decoration:none; }
.breadcrumb a:hover{ text-decoration:underline; }

/* ====== BREADCRUMB ====== */
.global-breadcrumb{
  position:relative; padding:14px 0; background:#fff; line-height:16px;
}
.ul.clearfix{
  list-style:none; margin:10px 0 0; padding:0; display:flex; flex-wrap:wrap; align-items:center;
}
.ul.clearfix li{ display:flex; align-items:center; }
.ul.clearfix li + li::before{ content:"›"; margin:0 8px; color:#999; }
.ul.clearfix a{ color:#007bff; text-decoration:none; font-weight:500; }
.ul.clearfix a:hover{ text-decoration:underline; }
.ul.clearfix .current{ color:var(--muted); font-weight:500; }

/* =================== STOCK BADGE =================== */

.stock-badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:0;                 /* bỏ nền pill */
  border-radius:0;
  border:none;
  background:transparent;
  font-weight:500;
  font-size:16px;
  line-height:1;
}

.badge-in {
  color:#16a34a;
  display:flex;
  align-items:center;
  gap:4px;
}

.badge-in::before {
  content:"";
  display:inline-block;
  width:14px;
  height:14px;
  background:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path fill='%2316a34a' d='M6.173 12.414L2.05 8.293l1.414-1.414 2.709 2.708 6.364-6.364 1.414 1.414z'/></svg>") no-repeat center / contain;
}



/* =================== RESPONSIVE TOKENS + CONTAINER =================== */
*,*::before,*::after{ box-sizing:border-box; }
img,svg,video{ max-width:100%; height:auto; display:block; }

.container{ width:100%; margin:auto; padding-inline:var(--container-pad); }
@media (min-width:576px){ .container{ max-width:540px; } }
@media (min-width:768px){ .container{ max-width:720px; } }
@media (min-width:992px){ .container{ max-width:960px; } }
@media (min-width:1200px){ .container{ max-width:1140px; } }
@media (min-width:1400px){ .container{ max-width:1320px; } }
@media (min-width:1620px){ .container{ max-width:var(--container-max); } }

.gap-fluid{ gap:clamp(16px,3vw,40px); }
.text-clip{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wrap{ overflow-wrap:anywhere; }
h1{ font-size:clamp(22px,3vw,32px); }
h2{ font-size:clamp(18px,2.5vw,26px); }
.section{ padding-block:clamp(16px,3vw,32px); }

/* =================== ẨN THÔNG BÁO WC =================== */
.woocommerce-notices-wrapper,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-NoticeGroup,
.woocommerce .woocommerce-notices-wrapper,
.woocommerce-page .woocommerce-notices-wrapper,
footer .woocommerce-message,
footer .woocommerce-info,
footer .woocommerce-error {
  display:none !important;
  height:0 !important;
  margin:0 !important;
  padding:0 !important;
}
.woocommerce-message::before{ display:none !important; }
a.added_to_cart.wc-forward{ display:none !important; }

/* Popup giỏ hàng tự làm */
#cart-popup{
  position:fixed; left:50%; bottom:24px; transform:translate(-50%,16px);
  z-index:99999; display:none; opacity:0; transition:opacity .2s, transform .2s; pointer-events:none;
}
#cart-popup.show{ display:block; opacity:1; transform:translate(-50%,0); pointer-events:auto; }
#cart-popup .cart-popup-content{
  background:#111; color:#fff; border-radius:10px; padding:12px 16px;
  box-shadow:0 6px 24px rgba(0,0,0,.15); font-weight:600; display:flex; align-items:center; gap:10px;
}
#cart-popup .icon{ font-size:18px; line-height:1; }

/* =================== FOOTER =================== */
.site-footer{ color:#fff; font-size:16px; margin-top:40px; }
.site-footer .footer-top,
.site-footer .footer-bottom{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}
.site-footer .footer-top{ background:#0b3d91; padding:40px 0; }
.site-footer .footer-bottom{ background:#1e40af; padding:16px 0; text-align:center; font-size:13px; }
.footer-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; }
.footer-col h4{ font-size:20px; font-weight:700; margin:0 0 14px; text-transform:uppercase; }
.footer-col ul{ list-style:disc; margin:0; padding-left:18px; }
.footer-col a{ color:#dbeafe; text-decoration:none; }
.footer-col a:hover{ color:#fff; text-decoration:underline; }
@media (max-width:992px){ .footer-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:576px){ .footer-grid{ grid-template-columns:1fr; } }




#danhmuc-menu { scroll-margin-top: calc(var(--hdrTop,72px) + 12px); }







:root{
  --sgt-blue: #0b57d0;
  --sgt-orange: #ff7b00;
}

/* container tiêu đề */
.category-title{
  margin: 12px 0 18px;
}

/* nhãn chính */
.category-title a{
  display: inline-block;
  position: relative;
  padding: 10px 22px 10px 26px;
  background: var(--sgt-blue);
  color: #fff;
  font-weight: 800;
  font-size: 30px;
  line-height: 1;
  text-transform: uppercase;
  border-radius: 10px;
  text-decoration: none;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 10px rgba(11, 87, 208, 0.15);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* nếp gấp cam bên trái */
.category-title a::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 100%;
  background: var(--sgt-orange);
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  clip-path: polygon(0 0, 100% 0, 70% 100%, 0% 100%);
}

/* hover nổi nhẹ */
.category-title a:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(11, 87, 208, 0.25);
}



/* ===== NỀN TỔNG THỂ WEBSITE ===== */
body {
  background: linear-gradient(to bottom, #f7faff, #f2f4f8);
}




  /* NỀN + LAYOUT 2 CỘT */
  .sgtpc-cart{
    padding:20px 0 30px;
  }
  .sgtpc-cart-layout{
    display:grid;
    grid-template-columns:minmax(0,2fr) minmax(0,1.1fr);
    gap:24px;
    align-items:flex-start;
  }
  @media(max-width:1024px){
    .sgtpc-cart-layout{
      grid-template-columns:1fr;
    }
  }

  .cart-box{
    background:#fff;
    border-radius:12px;
    padding:16px 18px;
    border:1px solid #e5e7eb;
  }

  /* BẢNG GIỎ HÀNG */
  .cart-table{width:100%;border-collapse:collapse;margin:0;background:#fff;border-radius:10px;overflow:hidden}
  .cart-table th,.cart-table td{padding:12px;border-bottom:1px solid #eee}
  .cart-table thead th{background:#f7f8fa;text-align:left}
  .cart-table td.right{text-align:right}
  .cart-table td.qty{white-space:nowrap}
  .cart-table td.qty input{width:60px;text-align:center;margin:0 6px}
  .cart-table td.qty button{width:28px;height:28px;border:1px solid #ddd;background:#fafafa;border-radius:6px}

  .cart-actions{
    display:flex;
    gap:10px;
    justify-content:flex-end;
    margin-top:12px;
  }

  .btn-primary{background:#1677ff;color:#fff;padding:10px 14px;border-radius:8px;display:inline-block;border:none;cursor:pointer}
  .btn-outline{background:#fff;border:1px solid #ddd;padding:10px 14px;border-radius:8px;display:inline-block}
  .btn-clear{background:#fff;border:1px solid #f3caca;color:#d33;padding:10px 14px;border-radius:8px;cursor:pointer}

  /* FORM KHÁCH HÀNG BÊN PHẢI */
  .sgtpc-checkout{
    background:#fff;
    border:1px solid #d4e5ff;
    border-radius:12px;
    padding:16px 18px;
    margin-top:0;          /* QUAN TRỌNG: bỏ margin-top để form ngang hàng giỏ */
    height:100%;           /* cho nó cao bằng box trái nếu nội dung ít */
    display:flex;
    flex-direction:column;
  }

  .checkout-title{
    font-size:18px;
    margin:0 0 12px;
    color:#1677ff;
  }

  .form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
  }
  .form-grid label{display:flex;flex-direction:column;gap:6px}
  .form-grid label.full{grid-column:1/-1}
  .form-grid input,.form-grid textarea{
    padding:10px 11px;
    border:1px solid #e5e7eb;
    border-radius:10px;
    font-size:14px;
  }

  .checkout-actions{
    margin-top:14px;
  }
  .checkout-msg{margin-top:10px}
  @media(max-width:640px){
    .form-grid{
      grid-template-columns:1fr;
    }
  }