/*
 * Checkout + Cart theo phong cách Shopify: 2 cột sạch, khoảng thở rộng,
 * tóm tắt đơn dính bên phải. Chỉ dùng CSS trên markup chuẩn WooCommerce.
 */

/* ===== CHECKOUT ===== */
.woocommerce-checkout .forma-single,
.woocommerce-checkout main{ max-width:1180px; }
.woocommerce-checkout .site-content-inner,
.woocommerce-checkout .entry-content{ max-width:none; }

form.checkout.woocommerce-checkout{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(32px,5vw,80px);
  align-items:start;
}
#customer_details{ order:1; }
#order_review, #order_review_heading{ order:2; }
#order_review_heading{ display:none; }

/* tiêu đề nhóm */
.woocommerce-billing-fields h3,
.woocommerce-additional-fields h3,
#order_review .shop_table caption{
  font-family:var(--forma-serif,"Cormorant Garamond",serif);
  font-size:26px; font-weight:500; margin:0 0 20px; letter-spacing:-.01em;
}
.woocommerce-billing-fields__field-wrapper{ display:grid; gap:16px; }

/* input Shopify: viền mảnh, bo nhẹ, cao thoáng */
.woocommerce form .form-row{ margin:0; padding:0; }
.woocommerce-checkout .input-text,
.woocommerce-checkout textarea,
.woocommerce-checkout select,
.select2-container--default .select2-selection--single{
  width:100%; border:1px solid #d9d3c8 !important; border-radius:8px !important;
  background:#fff; padding:15px 16px !important; height:auto !important;
  font-family:var(--forma-sans,system-ui); font-size:15px; color:var(--ink,#1e1d1b);
  transition:border-color .2s, box-shadow .2s;
}
.woocommerce-checkout .input-text:focus,
.woocommerce-checkout textarea:focus,
.select2-container--default.select2-container--focus .select2-selection--single{
  border-color:var(--navy,#2A3A43) !important;
  box-shadow:0 0 0 3px rgba(42,58,67,.1); outline:none;
}
.woocommerce form .form-row label{
  font-size:13.5px; color:var(--ink-2,#5f5a52); margin:0 0 6px; display:block; font-weight:400;
}
.woocommerce form .form-row .required{ color:var(--terra,#B26A43); border:0; }
.select2-container .select2-selection--single{ height:auto !important; }
.select2-container--default .select2-selection--single .select2-selection__rendered{ line-height:1.4 !important; padding:0 !important; }
.select2-container--default .select2-selection--single .select2-selection__arrow{ top:16px !important; right:12px !important; }

/* tóm tắt đơn: card dính, nền kem */
#order_review{
  position:sticky; top:96px;
  background:var(--bone,#F3EFE8); padding:28px; border-radius:12px;
}
#order_review .shop_table{ background:transparent; border:0; margin:0; }
#order_review .shop_table th,
#order_review .shop_table td{ border:0; padding:14px 0; border-bottom:1px solid rgba(30,29,27,.1); }
#order_review .shop_table .product-name{ font-size:15px; color:var(--ink); }
#order_review .shop_table .product-total{ text-align:right; white-space:nowrap; }
#order_review .cart-subtotal th, #order_review .order-total th{ font-weight:400; }
#order_review .order-total{ font-size:17px; }
#order_review .order-total .amount{ font-family:var(--forma-serif,serif); font-size:24px; }
#order_review .order-total th, #order_review .order-total td{ border-bottom:0; padding-top:18px; }

/* phương thức thanh toán */
#payment{ background:transparent !important; border-radius:0; margin-top:8px; }
#payment ul.payment_methods{ border:0; padding:0; margin:0 0 8px; }
#payment ul.payment_methods li{
  background:#fff; border:1px solid #d9d3c8; border-radius:8px; padding:16px 18px; margin-bottom:10px; list-style:none;
}
#payment ul.payment_methods li label{ font-weight:500; margin:0; display:inline; }
#payment .payment_box{ background:transparent !important; margin:12px 0 0; padding:0; font-size:14px; color:var(--ink-2); }
#payment .payment_box::before{ display:none; }
#payment .place-order{ padding:0; margin-top:8px; }
#payment .woocommerce-terms-and-conditions-wrapper{ margin:16px 0; font-size:13.5px; color:var(--ink-2); }
#place_order{
  width:100%; background:var(--navy,#2A3A43) !important; color:var(--on-navy,#F1ECE3) !important;
  border-radius:8px !important; height:56px; font-size:15px; letter-spacing:.03em; font-weight:400;
  transition:background .3s;
}
#place_order:hover{ background:var(--navy-deep,#1D2A31) !important; }

@media (max-width:860px){
  form.checkout.woocommerce-checkout{ grid-template-columns:1fr; }
  #order_review{ position:static; }
  #customer_details{ order:2; }
  #order_review{ order:1; margin-bottom:24px; }
}

/* ===== CART ===== */
.woocommerce-cart .ct-woocommerce-cart-form{
  display:grid; grid-template-columns:minmax(0,1fr) 400px;
  gap:clamp(28px,4vw,56px); align-items:start; max-width:1200px; margin:0 auto;
}
.woocommerce-cart .woocommerce-cart-form{ margin:0; min-width:0; }
.woocommerce-cart .cart-collaterals{ width:100%; float:none; margin:0; }
.woocommerce-cart .cart_totals{ width:100% !important; float:none !important; }

/* bảng giỏ sạch */
.woocommerce-cart table.cart{ border:0; margin:0; }
.woocommerce-cart table.cart thead th{
  border:0; border-bottom:1px solid var(--line); padding:0 12px 16px 0;
  font-weight:500; font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3);
}
.woocommerce-cart table.cart td{ border:0; border-bottom:1px solid var(--line); padding:20px 12px 20px 0; vertical-align:middle; }
.woocommerce-cart table.cart td.product-thumbnail{ width:96px; }
.woocommerce-cart table.cart td.product-thumbnail img{ width:80px; height:80px; object-fit:cover; border-radius:8px; }
.woocommerce-cart td.product-name a{ font-size:16px; color:var(--ink); font-weight:400; }
.woocommerce-cart td.product-name .price, .woocommerce-cart td.product-name .amount{ display:block; color:var(--ink-3); font-size:14px; margin-top:4px; }
.woocommerce-cart td.product-price{ display:none; }  /* giá đã hiện dưới tên */
.woocommerce-cart th.product-price{ display:none; }
.woocommerce-cart .product-quantity .quantity{ display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.woocommerce-cart .product-quantity input.qty{ width:52px; border:0; text-align:center; padding:11px 0; background:transparent; -moz-appearance:textfield; }
.woocommerce-cart .product-quantity input.qty::-webkit-outer-spin-button,
.woocommerce-cart .product-quantity input.qty::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.woocommerce-cart td.product-subtotal{ text-align:right; white-space:nowrap; font-size:15px; }
.woocommerce-cart td.product-remove{ width:40px; text-align:right; }
.woocommerce-cart td.product-remove a.remove{ color:var(--ink-3) !important; font-size:22px; line-height:1; }
.woocommerce-cart td.product-remove a.remove:hover{ background:transparent !important; color:var(--terra) !important; }

/* GỠ coupon */
.woocommerce-cart .coupon, .woocommerce-cart .actions .coupon{ display:none !important; }
.woocommerce-cart .actions{ padding:20px 0 0 !important; text-align:right; border:0; }
.woocommerce-cart .actions button[name=update_cart]{
  background:transparent !important; color:var(--ink-2) !important;
  border:1px solid var(--line) !important; border-radius:8px; padding:12px 22px; font-size:13px; height:auto;
}
.woocommerce-cart .actions button[name=update_cart]:hover{ background:var(--bone) !important; }

/* tóm tắt giỏ: card kem dính */
.woocommerce-cart .cart_totals{
  position:sticky; top:96px; background:var(--bone); padding:28px; border-radius:12px;
}
.woocommerce-cart .cart_totals h2{ font-size:24px; margin:0 0 18px; }
.woocommerce-cart .cart_totals table{ border:0; margin:0; }
.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td{ border:0; border-bottom:1px solid rgba(30,29,27,.1); padding:14px 0; font-size:14.5px; }
.woocommerce-cart .cart_totals table th{ font-weight:400; color:var(--ink-2); text-align:left; }
.woocommerce-cart .cart_totals table td{ text-align:right; white-space:nowrap; }
.woocommerce-cart .cart_totals .amount, .woocommerce-cart .cart_totals bdi{ white-space:nowrap; }
.woocommerce-cart .cart_totals .order-total th{ font-weight:500; color:var(--ink); }
.woocommerce-cart .cart_totals .order-total td{ border-bottom:0; }
.woocommerce-cart .cart_totals .order-total .amount{ font-family:var(--forma-serif,serif); font-size:22px; }
.woocommerce-cart .cart_totals .woocommerce-shipping-destination,
.woocommerce-cart .cart_totals .shipping-calculator-button{ font-size:13px; color:var(--ink-3); }
.woocommerce-cart .wc-proceed-to-checkout{ padding:20px 0 0; }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button{
  width:100%; background:var(--navy) !important; color:var(--on-navy) !important;
  border-radius:8px; height:56px; display:flex; align-items:center; justify-content:center;
  font-size:15px; letter-spacing:.03em; white-space:nowrap;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover{ background:var(--navy-deep) !important; }

@media (max-width:860px){
  .woocommerce-cart .ct-woocommerce-cart-form{ grid-template-columns:1fr; }
  .woocommerce-cart .cart_totals{ position:static; }
  .woocommerce-cart table.cart td.product-thumbnail{ width:64px; }
  .woocommerce-cart table.cart td.product-thumbnail img{ width:56px; height:56px; }
}

/* thumbnail qua wrapper Blocksy .ct-media-container */
.woocommerce-cart td.product-thumbnail .ct-media-container,
.woocommerce-cart td.product-thumbnail a{ display:block; width:80px; }
.woocommerce-cart td.product-thumbnail img{ width:80px !important; height:80px !important; object-fit:cover; border-radius:8px; display:block; }

/* "Shipment" của Blocksy (div hardcode, không qua gettext) -> thay bằng tiếng Việt */
.woocommerce-cart .ct-shipping-heading,
.woocommerce-checkout .ct-shipping-heading{ font-size:0 !important; }
.woocommerce-cart .ct-shipping-heading::after,
.woocommerce-checkout .ct-shipping-heading::after{ content:"Vận chuyển"; font-size:14.5px; font-weight:500; color:var(--ink); }

/* checkout: gỡ khung viền ngoài của Blocksy bao quanh order review (tránh card lồng card) */
.woocommerce-checkout .ct-order-review,
.woocommerce-checkout #order_review{ border:0 !important; box-shadow:none !important; padding:0; }
.woocommerce-checkout #order_review{ background:var(--bone); padding:28px; border-radius:12px; }
.woocommerce-checkout .ct-checkout-review-order-wrapper{ border:0 !important; box-shadow:none !important; background:transparent !important; padding:0 !important; }
/* Shipment heading trên checkout */
.woocommerce-checkout .ct-shipping-heading{ font-size:0 !important; }
.woocommerce-checkout .ct-shipping-heading::after{ content:"Vận chuyển"; font-size:14.5px; font-weight:500; }

/* Cart/checkout cần rộng hơn trang tĩnh (page.php bó 900px) */
.woocommerce-cart .forma-single,
.woocommerce-checkout .forma-single{ max-width:1240px !important; }
.woocommerce-cart .forma-prose,
.woocommerce-checkout .forma-prose{ max-width:none !important; }

/* ===== SINGLE PRODUCT (layout FORMA tự dựng) ===== */
.forma-product-page{ max-width:1280px; margin:0 auto; padding:clamp(24px,3vw,48px) clamp(20px,4vw,56px) clamp(60px,6vw,100px); }
.forma-product{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(32px,5vw,72px); align-items:start;
}
.forma-product-media{ min-width:0; }
.forma-product-summary{ min-width:0; padding-top:4px; }
.forma-product-summary .product_title{ font-size:clamp(30px,3.6vw,48px); margin:0 0 14px; line-height:1.08; }
.forma-product-summary .price{ font-family:var(--forma-serif,serif); font-size:28px; color:var(--ink) !important; margin:0 0 22px; display:block; }
.forma-product-summary .price del{ color:var(--ink-3); font-size:20px; margin-right:10px; font-weight:300; }
.forma-product-summary .price ins{ text-decoration:none; }
.forma-product-summary .woocommerce-product-details__short-description{
  color:var(--ink-2); font-size:16px; line-height:1.75; margin:0 0 24px;
  padding-bottom:24px; border-bottom:1px solid var(--line);
}
.forma-product-summary form.cart{ margin:0 0 24px; display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.forma-product-summary form.cart .quantity{ display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.forma-product-summary form.cart .quantity input.qty{ width:56px; border:0; text-align:center; padding:16px 0; background:transparent; -moz-appearance:textfield; }
.forma-product-summary form.cart .quantity input.qty::-webkit-outer-spin-button,
.forma-product-summary form.cart .quantity input.qty::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.forma-product-summary form.cart button.single_add_to_cart_button{
  flex:1; min-width:220px; background:var(--navy) !important; color:var(--on-navy) !important;
  border-radius:8px; height:56px; font-size:15px; letter-spacing:.03em; border:0; transition:background .3s;
}
.forma-product-summary form.cart button.single_add_to_cart_button:hover{ background:var(--navy-deep) !important; }
/* swatches biến thể */
.forma-product-summary .variations{ margin:0 0 22px; width:100%; border-collapse:collapse; }
.forma-product-summary .variations td, .forma-product-summary .variations th{ padding:0 0 14px; border:0; vertical-align:middle; }
.forma-product-summary .variations th.label{ text-align:left; font-weight:400; color:var(--ink-2); width:110px; padding-right:16px; }
.forma-product-summary .reset_variations{ font-size:13px; color:var(--ink-3); }
.forma-product-summary .product_meta{ margin-top:22px; font-size:13.5px; color:var(--ink-3); border-top:1px solid var(--line); padding-top:20px; }
.forma-product-summary .product_meta > span{ display:block; margin-bottom:6px; }
.forma-product-summary .product_meta a{ color:var(--ink-2); }

/* ── PHẦN MÔ TẢ: canh lề với container, padding cân đối, HTML đẹp ── */
.forma-product-detail{ margin-top:clamp(48px,6vw,88px); }
.forma-product-detail .woocommerce-tabs{ max-width:820px; margin:0 auto; }
.forma-product-detail .woocommerce-tabs ul.tabs{
  display:flex; justify-content:center; gap:36px; padding:0; margin:0 0 36px;
  border-bottom:1px solid var(--line); list-style:none;
}
.forma-product-detail .woocommerce-tabs ul.tabs::before{ display:none; }
.forma-product-detail .woocommerce-tabs ul.tabs li{ background:transparent; border:0; border-radius:0; padding:0 0 16px; margin:0; }
.forma-product-detail .woocommerce-tabs ul.tabs li::before,
.forma-product-detail .woocommerce-tabs ul.tabs li::after{ display:none; }
.forma-product-detail .woocommerce-tabs ul.tabs li a{ font-size:15px; color:var(--ink-3); padding:0; font-weight:400; letter-spacing:.02em; }
.forma-product-detail .woocommerce-tabs ul.tabs li.active a{ color:var(--ink); }
.forma-product-detail .woocommerce-tabs ul.tabs li.active{ border-bottom:2px solid var(--navy); margin-bottom:-1px; }

/* nội dung mô tả (nhập HTML) — typography đẹp */
.forma-product-detail .woocommerce-Tabs-panel{ font-size:16px; line-height:1.85; color:var(--ink-2); }
.forma-product-detail .woocommerce-Tabs-panel > *:first-child{ margin-top:0; }
.forma-product-detail .woocommerce-Tabs-panel h2{ font-size:26px; margin:36px 0 14px; color:var(--ink); }
.forma-product-detail .woocommerce-Tabs-panel h3{ font-size:21px; margin:32px 0 12px; color:var(--ink); }
.forma-product-detail .woocommerce-Tabs-panel h4{ font-size:17px; margin:24px 0 8px; color:var(--ink); }
.forma-product-detail .woocommerce-Tabs-panel p{ margin:0 0 18px; }
.forma-product-detail .woocommerce-Tabs-panel ul,
.forma-product-detail .woocommerce-Tabs-panel ol{ margin:0 0 20px; padding-left:22px; }
.forma-product-detail .woocommerce-Tabs-panel li{ margin:0 0 8px; }
.forma-product-detail .woocommerce-Tabs-panel img{ border-radius:8px; margin:24px 0; }
.forma-product-detail .woocommerce-Tabs-panel blockquote{
  border-left:2px solid var(--brass); padding-left:20px; margin:24px 0; font-style:italic; color:var(--ink);
}
.forma-product-detail .woocommerce-Tabs-panel table{ width:100%; border-collapse:collapse; margin:20px 0; }
.forma-product-detail .woocommerce-Tabs-panel table th,
.forma-product-detail .woocommerce-Tabs-panel table td{ padding:12px 16px; border:1px solid var(--line); text-align:left; }
.forma-product-detail .woocommerce-Tabs-panel table th{ background:var(--bone); font-weight:500; color:var(--ink); }
.forma-product-detail .shop_attributes th{ background:var(--bone); }

/* sản phẩm liên quan */
.forma-product-detail .related.products{ max-width:none; margin-top:clamp(56px,7vw,96px); border-top:1px solid var(--line); padding-top:clamp(40px,5vw,72px); }
.forma-product-detail .related.products > h2{ font-family:var(--forma-serif,serif); font-size:clamp(28px,3.4vw,42px); text-align:center; margin:0 0 36px; }
.forma-product-detail .related.products ul.products{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(20px,2.4vw,34px); list-style:none; padding:0; margin:0; }

@media (max-width:860px){
  .forma-product{ grid-template-columns:1fr; }
  .forma-product-detail .related.products ul.products{ grid-template-columns:repeat(2,1fr); }
}

/* ===== GALLERY RIÊNG CỦA FORMA ===== */
.forma-gallery{ position:sticky; top:96px; }
.forma-gallery-main{ position:relative; background:var(--bone); border-radius:10px; overflow:hidden; }
.forma-gallery-main img{ width:100%; height:auto; display:block; aspect-ratio:4/5; object-fit:cover; }
.forma-gallery-zoom{
  position:absolute; top:16px; right:16px; width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.9); color:var(--ink); display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 12px rgba(0,0,0,.12); transition:background .2s, transform .2s; cursor:pointer;
}
.forma-gallery-zoom:hover{ background:#fff; transform:scale(1.05); }
.forma-gallery-thumbs{ display:flex; gap:12px; margin-top:14px; flex-wrap:wrap; }
.forma-gallery-thumb{
  width:84px; height:84px; border-radius:8px; overflow:hidden; padding:0; cursor:pointer;
  box-shadow:0 0 0 1px var(--line); transition:box-shadow .2s, opacity .2s; opacity:.7;
}
.forma-gallery-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.forma-gallery-thumb:hover{ opacity:1; }
.forma-gallery-thumb.is-active{ box-shadow:0 0 0 2px var(--navy); opacity:1; }

/* lightbox phóng to */
.forma-lightbox{
  position:fixed; inset:0; z-index:300; background:rgba(20,20,18,.92);
  display:flex; align-items:center; justify-content:center; padding:40px;
  opacity:0; visibility:hidden; transition:opacity .3s;
}
.forma-lightbox.open{ opacity:1; visibility:visible; }
.forma-lightbox img{ max-width:92vw; max-height:88vh; object-fit:contain; border-radius:4px; }
.forma-lightbox-close{
  position:absolute; top:24px; right:32px; font-size:40px; line-height:1; color:#fff; cursor:pointer; background:none;
}
@media (prefers-reduced-motion:reduce){ .forma-lightbox,.forma-gallery-zoom{ transition:none; } }