/* ==========================================================================
   Service24h — phần riêng cho WordPress + WooCommerce
   Nối markup của WP/Woo vào hệ thống thiết kế ở design-system.css
   1. Menu   2. Header   3. Bố cục   4. Bài viết   5. Widget
   6. WooCommerce   7. Bình luận   8. Gutenberg   9. Responsive
   ========================================================================== */

/* 1. MENU DO WORDPRESS SINH RA ============================================= */
.nav-list{
  list-style:none;margin:0;padding:0;
  display:flex;align-items:center;gap:2px;
}
.nav-list li{position:relative}
.nav-list > li > a{
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 13px;border-radius:var(--r-xs);
  font-size:14.5px;font-weight:600;color:var(--text-2);
  transition:color .2s var(--ease),background-color .2s var(--ease);
}
.nav-list > li > a:hover,
.nav-list > li.current-menu-item > a,
.nav-list > li.current-menu-ancestor > a{color:var(--red);background:var(--red-050)}

/* mũi tên cho mục có menu con */
.nav-list > li.menu-item-has-children > a::after{
  content:"";width:9px;height:9px;flex:none;margin-left:2px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  transition:transform .25s var(--ease);
}
.nav-list > li.menu-item-has-children:hover > a::after{transform:rotate(225deg) translateY(1px)}

/* menu con dạng thả xuống */
.nav-list .sub-menu{
  position:absolute;top:calc(100% + 12px);left:50%;translate:-50% 0;
  min-width:250px;padding:10px;list-style:none;margin:0;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-lg);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;
  z-index:70;
}
.nav-list li:hover > .sub-menu,
.nav-list li:focus-within > .sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav-list .sub-menu::before{content:"";position:absolute;inset:-12px 0 auto;height:12px}
.nav-list .sub-menu a{
  display:block;padding:10px 12px;border-radius:var(--r-sm);
  font-size:14px;font-weight:600;color:var(--text-2);
  transition:background-color .2s var(--ease),color .2s var(--ease);
}
.nav-list .sub-menu a:hover{background:var(--surface-2);color:var(--red)}

/* menu trong drawer mobile */
.drawer-list{list-style:none;margin:0;padding:0}
.drawer-list > li > a{
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 12px;border-radius:var(--r-sm);font-weight:600;font-size:15.5px;
}
.drawer-list > li > a:hover{background:var(--surface-2);color:var(--red)}
.drawer-list .sub-menu{list-style:none;margin:0 0 6px 12px;padding:0;border-left:2px solid var(--line)}
.drawer-list .sub-menu a{
  display:block;padding:11px 12px 11px 16px;font-size:14.5px;color:var(--muted);
}
.drawer-list .sub-menu a:hover{color:var(--red)}

/* menu chân trang */
.footer-col ul{list-style:none;margin:0;padding:0}
.footer-col li a{
  display:block;font-size:14px;color:#a9b2c0;padding:6px 0;
  transition:color .2s var(--ease),transform .2s var(--ease);
}
.footer-col li a:hover{color:#fff;transform:translateX(3px)}

/* 2. HEADER =============================================================== */
.header-icon{
  position:relative;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;color:var(--text-2);
  transition:background-color .2s var(--ease),color .2s var(--ease);
}
.header-icon:hover{background:var(--surface-2);color:var(--red)}
.cart-count{
  position:absolute;top:4px;right:2px;min-width:18px;height:18px;padding:0 5px;
  border-radius:var(--r-pill);background:var(--red);color:#fff;
  font-size:11px;font-weight:800;line-height:18px;text-align:center;
}
.cart-count.is-empty{display:none}
/* nhãn "Gọi tư vấn" phía trên số hotline — 10.5px hơi nhỏ để đọc */
.hotline-txt small{font-size:11px}

.search-panel{
  border-top:1px solid var(--line);background:#fff;
  padding:18px 0;box-shadow:var(--sh-sm);
}
.search-form-row{display:flex;gap:10px}
.search-form-row .search-field{flex:1}
.search-form-row .btn{flex:none}

/* thanh admin của WordPress */
.admin-bar .site-header{top:32px}
@media (max-width:782px){.admin-bar .site-header{top:46px}}

/* 3. BỐ CỤC NỘI DUNG ====================================================== */
.with-sidebar{
  display:grid;grid-template-columns:minmax(0,1fr) 300px;
  gap:clamp(30px,3.4vw,54px);align-items:start;
}
.with-sidebar-left{grid-template-columns:280px minmax(0,1fr)}
/* min-width:0 là bắt buộc: mặc định ô lưới có sàn min-content, nên một bảng
   hoặc mục lục rộng trong bài viết sẽ đẩy cột phình ra ngoài khung nhìn. */
.content-main,.content-sidebar{min-width:0}
.content-sidebar{display:grid;gap:22px;position:sticky;top:calc(var(--header-h) + 20px)}
.section-foot{margin-top:34px;display:flex;justify-content:center}

.empty-state{
  display:grid;justify-items:center;text-align:center;gap:14px;
  padding:clamp(40px,6vw,72px) 24px;
  border:1px dashed var(--line-2);border-radius:var(--r-xl);background:var(--surface-2);
}
.empty-state p{color:var(--muted);max-width:46ch}
.empty-state .search-form{width:min(460px,100%);margin-top:8px}

/* 4. BÀI VIẾT ============================================================= */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.post-card{
  display:flex;flex-direction:column;overflow:hidden;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-lg);
  transition:box-shadow .25s var(--ease),transform .25s var(--ease),border-color .25s var(--ease);
}
.post-card:hover{box-shadow:var(--sh-md);transform:translateY(-4px);border-color:transparent}
.post-card-media{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--surface-3)}
.post-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .45s var(--ease)}
.post-card:hover .post-card-media img{transform:scale(1.04)}
.post-card-fallback{width:100%;height:100%;display:grid;place-items:center;color:var(--muted-2)}
.post-card-body{padding:22px;display:grid;gap:9px;align-content:start;flex:1}
.post-card-body small{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--red)}
.post-card-body h3{font-size:18px;line-height:1.35}
.post-card-body h3 a:hover{color:var(--red)}
.post-card-body p{font-size:14px;color:var(--muted);line-height:1.6}
.post-card-body time{font-size:12.5px;color:var(--muted-2);margin-top:auto;padding-top:6px}

.post-meta{display:flex;align-items:center;gap:10px;font-size:14px}
.post-cover{margin:0 0 30px;border-radius:var(--r-lg);overflow:hidden}
.post-cover img{width:100%;height:auto}

/* nội dung do trình soạn thảo sinh ra */
.prose{max-width:75ch;font-size:16.5px;line-height:1.8;color:var(--text-2)}
.prose-page{max-width:none}
.prose > * + *{margin-top:1.15em}
.prose h2{font-size:clamp(23px,2.4vw,31px);margin-top:1.8em;color:var(--text)}
.prose h3{font-size:clamp(19px,1.9vw,24px);margin-top:1.6em;color:var(--text)}
.prose h4{font-size:18px;margin-top:1.4em;color:var(--text)}
.prose a{color:var(--red);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.prose a:hover{color:var(--red-600)}
.prose ul,.prose ol{padding-left:1.4em;display:grid;gap:.5em}
.prose li{padding-left:.2em}
.prose ul li::marker{color:var(--red)}
.prose img,.prose figure img{border-radius:var(--r-md);height:auto}
.prose figure{margin:2em 0}
.prose figcaption{font-size:13.5px;color:var(--muted);text-align:center;margin-top:10px}
.prose blockquote{
  margin:1.6em 0;padding:20px 26px;border-left:4px solid var(--red);
  background:var(--red-050);border-radius:0 var(--r-md) var(--r-md) 0;
  font-size:17px;color:var(--text);
}
.prose blockquote p{margin:0}
.prose code{
  background:var(--surface-3);padding:2px 6px;border-radius:5px;
  font-size:.9em;font-family:ui-monospace,Menlo,Consolas,monospace;
}
.prose pre{background:var(--ink-900);color:#e6e9ef;padding:20px;border-radius:var(--r-md);overflow:auto}
.prose pre code{background:none;color:inherit;padding:0}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}
.prose table{width:100%;border-collapse:collapse;font-size:15px;display:block;overflow-x:auto}
.prose th,.prose td{border:1px solid var(--line);padding:11px 14px;text-align:left}
.prose th{background:var(--surface-2);font-weight:700;color:var(--text)}

/* phân trang */
.pagination{display:flex;flex-wrap:wrap;gap:8px;margin-top:44px;justify-content:center}
.pagination .page-numbers{
  min-width:44px;height:44px;padding:0 14px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:var(--r-sm);
  font-weight:700;font-size:14.5px;color:var(--text-2);background:#fff;
  transition:border-color .2s var(--ease),color .2s var(--ease),background-color .2s var(--ease);
}
.pagination .page-numbers:hover{border-color:var(--red);color:var(--red)}
.pagination .page-numbers.current{background:var(--grad-brand);border-color:transparent;color:#fff}
.pagination .page-numbers.dots{border:0;background:none}

/* 5. WIDGET =============================================================== */
.widget{
  padding:22px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
}
.widget-title{
  font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text);margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line);
}
.widget ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.widget li{font-size:14.5px}
.widget li a{
  display:block;padding:9px 0;color:var(--text-2);
  transition:color .2s var(--ease),padding-left .2s var(--ease);
}
.widget li a:hover{color:var(--red);padding-left:5px}
.widget li .count{color:var(--muted-2);font-size:12.5px}
.widget select{font-size:15px}

/* 6. WOOCOMMERCE ========================================================== */
.woocommerce-notices-wrapper:empty{display:none}
.woocommerce-message,.woocommerce-info,.woocommerce-error{
  list-style:none;margin:0 0 24px;padding:16px 20px;border-radius:var(--r-md);
  font-size:14.5px;border:1px solid;display:grid;gap:8px;
}
.woocommerce-message{background:#eefaf1;border-color:#bfe6cb;color:#17603a}
.woocommerce-info{background:#eef4fd;border-color:#c3d8f5;color:#1b4b8f}
.woocommerce-error{background:#fff2f1;border-color:#f3c4c1;color:#96151b}
.woocommerce-message a,.woocommerce-info a,.woocommerce-error a{font-weight:700;text-decoration:underline}

/* --- lưới sản phẩm ---
   CSS gốc của WooCommerce (woocommerce-layout.css) dựng lưới bằng float:
       ul.products[class*="columns-"] li.product { width:48%; float:left; clear:both }
   Trong grid thì float/clear bị bỏ qua, nhưng width:48% thì KHÔNG — nó ghi đè
   kích thước ô và làm thẻ co lại còn nửa cột. Phải vô hiệu hoá bằng !important
   vì selector của Woo có độ ưu tiên cao hơn và bản thân clear đã dùng !important. */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product,
ul.products li.product{
  width:auto!important;
  float:none!important;
  clear:none!important;
  margin:0!important;
}
/* WooCommerce thêm ::before/::after để clearfix cho bố cục float.
   Trong grid, pseudo-element cũng trở thành Ô LƯỚI — nó chiếm mất ô đầu tiên
   và đẩy toàn bộ sản phẩm lệch đi một ô. Bắt buộc phải tắt. */
ul.products::before,
ul.products::after{display:none!important}

ul.products{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
}
ul.products.columns-2{grid-template-columns:repeat(2,1fr)}
ul.products.columns-3{grid-template-columns:repeat(3,1fr)}
ul.products.columns-5{grid-template-columns:repeat(5,1fr)}
ul.products li.product{
  position:relative;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  transition:box-shadow .25s var(--ease),transform .25s var(--ease),border-color .25s var(--ease);
}
ul.products li.product:hover{box-shadow:var(--sh-md);transform:translateY(-4px);border-color:transparent}
ul.products li.product a.woocommerce-LoopProduct-link{
  display:flex;flex-direction:column;gap:10px;padding:16px 16px 0;
  min-height:44px;color:inherit;
}
ul.products li.product img{
  width:100%;height:auto;aspect-ratio:1;object-fit:contain;
  background:#fff;border-radius:var(--r-sm);
}
ul.products li.product .woocommerce-loop-product__title{
  font-size:14.5px;font-weight:700;line-height:1.45;color:var(--text);
  min-height:2.9em;margin:0;
}
ul.products li.product .category,
ul.products li.product .product-cat{
  font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);
}
ul.products li.product .price{
  /* margin-top:auto đẩy giá + nút xuống đáy thẻ, để cả hàng thẳng nhau
     dù tên sản phẩm dài ngắn khác nhau */
  margin-top:auto;padding:12px 16px 0;
  font-size:16px;font-weight:800;color:var(--red);
}
ul.products li.product .price del{color:var(--muted-2);font-weight:500;font-size:13.5px;margin-right:6px}
ul.products li.product .price ins{text-decoration:none}
ul.products li.product .button,
ul.products li.product .added_to_cart{
  margin:12px 16px 16px;min-height:44px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:var(--r-pill);padding:11px 18px;
  font-size:14px;font-weight:700;
  background:var(--surface-2);color:var(--text);
  transition:background .22s var(--ease),color .22s var(--ease);
}
ul.products li.product .button:hover{background:var(--grad-brand);color:#fff}
ul.products li.product .added_to_cart{margin-top:0;background:transparent;color:var(--red)}
/* đoạn trích ngắn của sản phẩm (chuyển từ child theme cũ) */
ul.products li.product .loop-excerpt{
  padding:0 16px;margin:0;
  font-size:13px;line-height:1.55;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* khối bài liên quan chèn giữa bài viết (chuyển từ child theme cũ) */
.meta-related{
  margin:2em 0;padding:20px 24px;
  background:var(--surface-2);border:1px solid var(--line);
  border-left:4px solid var(--red);border-radius:0 var(--r-md) var(--r-md) 0;
}
.meta-related ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.meta-related li a{font-weight:600;color:var(--text);font-size:15.5px}
.meta-related li a:hover{color:var(--red)}

span.onsale{
  position:absolute;top:12px;left:12px;z-index:2;
  background:var(--grad-brand);color:#fff;
  padding:5px 11px;border-radius:var(--r-pill);
  font-size:11.5px;font-weight:800;letter-spacing:.04em;
}
.outofstock .woocommerce-loop-product__title::after{
  content:"Hết hàng";display:inline-block;margin-left:8px;
  background:var(--surface-3);color:var(--muted);
  padding:2px 8px;border-radius:var(--r-pill);font-size:11px;font-weight:700;
}

/* --- thanh công cụ danh mục --- */
.woocommerce-result-count{color:var(--muted);font-size:14px;margin:0}
.woocommerce-ordering{margin:0}
.woocommerce-ordering select{min-width:220px}
.woo-content > .woocommerce-notices-wrapper + .woocommerce-result-count,
.woocommerce-result-count{float:none}
.woocommerce-ordering,.woocommerce-result-count{display:inline-block;vertical-align:middle}
.woo-content .woocommerce-result-count{margin-right:auto}
.woo-content form.woocommerce-ordering{float:right}
.woo-content::after{content:"";display:table;clear:both}

/* --- trang sản phẩm --- */
.single-product div.product{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,3.6vw,56px);align-items:start;
}
.single-product div.product .woocommerce-product-gallery{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff}
.single-product div.product .summary{margin:0}
.single-product div.product .product_title{font-size:clamp(24px,2.8vw,36px);margin-bottom:14px}
.single-product div.product p.price{font-size:28px;font-weight:800;color:var(--red);margin:0 0 18px}
.single-product div.product p.price del{font-size:18px;color:var(--muted-2);font-weight:500}
.single-product div.product p.price ins{text-decoration:none}
.single-product .woocommerce-product-details__short-description{color:var(--muted);line-height:1.75;margin-bottom:22px}
.single-product form.cart{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:24px}
.single-product form.cart .quantity input{width:84px;text-align:center}
.single-product .single_add_to_cart_button{
  min-height:52px;padding:14px 30px;border-radius:var(--r-pill);
  background:var(--grad-brand);color:#fff;font-weight:700;font-size:16px;
  box-shadow:var(--sh-red);border:0;cursor:pointer;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.single-product .single_add_to_cart_button:hover{transform:translateY(-2px)}
.product_meta{font-size:13.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:18px;display:grid;gap:6px}
.product_meta a{color:var(--text-2);font-weight:600}
.product_meta a:hover{color:var(--red)}

/* tab mô tả */
.woocommerce-tabs{grid-column:1 / -1;margin-top:clamp(34px,4vw,60px)}
.woocommerce-tabs ul.tabs{
  list-style:none;margin:0 0 24px;padding:0;
  display:flex;flex-wrap:wrap;gap:6px;border-bottom:1px solid var(--line);
}
.woocommerce-tabs ul.tabs li a{
  display:flex;align-items:center;min-height:44px;padding:0 20px;
  font-weight:700;font-size:15px;color:var(--muted);
  border-bottom:3px solid transparent;
}
.woocommerce-tabs ul.tabs li.active a{color:var(--red);border-bottom-color:var(--red)}
.woocommerce-tabs .panel > h2:first-child{display:none}
.woocommerce-tabs .panel{max-width:78ch}

.related.products,.upsells.products{grid-column:1 / -1;margin-top:clamp(34px,4vw,60px)}
.related.products > h2,.upsells.products > h2{font-size:clamp(21px,2.2vw,28px);margin-bottom:22px}

/* --- giỏ hàng & thanh toán --- */
.woocommerce table.shop_table{
  width:100%;border-collapse:collapse;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
}
.woocommerce table.shop_table th{
  background:var(--surface-2);text-align:left;padding:14px 16px;
  font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2);
}
.woocommerce table.shop_table td{padding:16px;border-top:1px solid var(--line);font-size:15px;vertical-align:middle}
.woocommerce table.shop_table img{width:64px;height:auto;border-radius:var(--r-sm)}
.woocommerce .cart_totals,.woocommerce-checkout-review-order{
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;
}
.woocommerce .button,.woocommerce button.button,.woocommerce input.button,
.woocommerce a.button, .wc-block-components-button{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;padding:13px 24px;border:0;border-radius:var(--r-pill);
  background:var(--grad-brand);color:#fff;font-weight:700;font-size:15px;cursor:pointer;
  box-shadow:var(--sh-red);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.woocommerce .button:hover{transform:translateY(-2px);color:#fff}
.woocommerce .button.alt{background:var(--ink-900);box-shadow:var(--sh-sm)}
.woocommerce .checkout-button{width:100%}
.woocommerce form .form-row{display:grid;gap:7px;margin-bottom:16px}
.woocommerce form .form-row label{font-size:13.5px;font-weight:700}
.woocommerce .required{color:var(--red);text-decoration:none}
.woocommerce-billing-fields h3,.woocommerce-additional-fields h3,
#order_review_heading{font-size:21px;margin:26px 0 16px}

/* tài khoản */
.woocommerce-MyAccount-navigation ul{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.woocommerce-MyAccount-navigation li a{
  display:flex;align-items:center;min-height:44px;padding:0 18px;
  border:1px solid var(--line);border-radius:var(--r-pill);
  font-weight:600;font-size:14.5px;color:var(--text-2);background:#fff;
}
.woocommerce-MyAccount-navigation li.is-active a{background:var(--grad-brand);border-color:transparent;color:#fff}

/* danh mục ở trang chủ */
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cat-card{
  display:grid;justify-items:center;text-align:center;gap:10px;
  padding:24px 18px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-lg);
  transition:box-shadow .25s var(--ease),transform .25s var(--ease),border-color .25s var(--ease);
}
.cat-card:hover{box-shadow:var(--sh-md);transform:translateY(-4px);border-color:transparent}
.cat-card:hover .icon-tile{background:var(--grad-brand);color:#fff}
.cat-card img{width:78px;height:78px;object-fit:contain;border-radius:var(--r-sm)}
.cat-card b{font-size:15px;line-height:1.4}
.cat-card small{font-size:12.5px;color:var(--muted-2)}

/* 7. BÌNH LUẬN =========================================================== */
.comments{margin-top:clamp(40px,5vw,70px);padding-top:clamp(30px,4vw,50px);border-top:1px solid var(--line)}
.comment-list{list-style:none;margin:0 0 40px;padding:0;display:grid;gap:18px}
.comment-list ol.children{list-style:none;margin:18px 0 0 clamp(16px,4vw,44px);padding:0;display:grid;gap:18px}
.comment-body{
  padding:20px 22px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
}
.comment-author{display:flex;align-items:center;gap:11px;font-weight:700;font-size:15px}
.comment-author img{border-radius:50%}
.comment-metadata{font-size:12.5px;color:var(--muted-2);margin:6px 0 12px}
.comment-content{color:var(--text-2);line-height:1.7;font-size:15.5px}
.comment-content p + p{margin-top:.8em}
.reply a{font-size:13.5px;font-weight:700;color:var(--red)}
.comment-form .form-submit{margin-top:6px}

/* 8. GUTENBERG =========================================================== */
.alignfull{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.alignwide{width:min(1100px,100%);margin-inline:auto}
.alignleft{float:left;margin:0 1.6em 1.2em 0;max-width:50%}
.alignright{float:right;margin:0 0 1.2em 1.6em;max-width:50%}
.aligncenter{margin-inline:auto;display:block}
.wp-caption{max-width:100%}
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);white-space:nowrap;
}
.screen-reader-text:focus{
  position:static!important;width:auto;height:auto;clip:auto;
  padding:12px 18px;background:var(--ink-900);color:#fff;border-radius:var(--r-xs);
}

/* 8b. VÙNG CHẠM 44px — áp ở MỌI khổ màn hình =============================
   Máy tính bảng cũng là thiết bị cảm ứng nên không giới hạn trong media
   query mobile. Trên desktop các quy tắc này chỉ làm link thoáng hơn.

   Ngoại lệ có chủ ý: liên kết nằm giữa đoạn văn (.prose p a) KHÔNG ép 44px
   vì sẽ phá giãn dòng — Google cũng không tính link inline trong body text.
   ========================================================================= */
.nav-list > li > a,
.nav-list .sub-menu a,
.drawer-list > li > a,
.widget li a,
.footer-col li a,
.woocommerce-MyAccount-navigation li a{
  min-height:44px;display:flex;align-items:center;
}
.nav-list > li > a{display:inline-flex}
.pagination .page-numbers{min-height:44px}
.burger,.drawer-close,.to-top,.header-icon{width:44px;height:44px}
.hotline{min-height:44px}
.footer-social a{width:44px;height:44px}
.topbar-inner{min-height:44px}
.topbar-links a{min-height:44px}
/* breadcrumb: bỏ padding của thanh, dồn chiều cao vào chính link để bấm được */
.crumbs-inner{padding:0}
.crumbs-inner a,.crumbs-inner > span{min-height:48px;display:inline-flex;align-items:center}
/* cả thẻ bài viết là một vùng bấm, thay vì chỉ dòng tiêu đề */
.post-card{position:relative}
.post-card-body h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.woocommerce-message a,.woocommerce-info a,.woocommerce-error a{
  display:inline-flex;align-items:center;min-height:44px;
}
/* nhãn chữ hoa cỡ nhỏ: giữ ở ngưỡng đọc được ở mọi khổ */
.footer-contact small,.contact-card small,.intent-row small,
.address-card small,.facts small{font-size:11.5px}

/* 9. RESPONSIVE ========================================================== */
@media (max-width:1080px){
  /* minmax(0,1fr) chứ không phải 1fr — xem ghi chú ở mục 3 */
  .with-sidebar,.with-sidebar-left{grid-template-columns:minmax(0,1fr)}
  .content-sidebar{position:static;order:2}
  .with-sidebar-left .content-sidebar{order:2}
  ul.products,ul.products.columns-5{grid-template-columns:repeat(3,1fr)}
  .post-grid{grid-template-columns:repeat(2,1fr)}
  .cat-grid{grid-template-columns:repeat(3,1fr)}
  .single-product div.product{grid-template-columns:1fr}
}
@media (max-width:760px){
  .nav-list .sub-menu{display:none}
  ul.products,ul.products.columns-3,ul.products.columns-5{grid-template-columns:repeat(2,1fr)}
  .post-grid{grid-template-columns:1fr}
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .woo-content form.woocommerce-ordering{float:none;width:100%;margin-top:12px}
  .woocommerce-ordering select{width:100%}
  .woocommerce table.shop_table,
  .woocommerce table.shop_table thead,
  .woocommerce table.shop_table tbody,
  .woocommerce table.shop_table tr,
  .woocommerce table.shop_table td{display:block;width:100%}
  .woocommerce table.shop_table thead{display:none}
  .woocommerce table.shop_table tr{border-top:1px solid var(--line);padding:6px 0}
  .woocommerce table.shop_table td{border:0;display:flex;justify-content:space-between;gap:14px;padding:9px 16px}
  .woocommerce table.shop_table td::before{content:attr(data-title);font-weight:700;color:var(--muted)}
  .prose{font-size:16px}
  .single-product .single_add_to_cart_button{width:100%}

  ul.products li.product .woocommerce-loop-product__title{min-height:2.9em}
}
@media (max-width:420px){
  ul.products,ul.products.columns-3{grid-template-columns:1fr}
  .cat-grid{grid-template-columns:1fr}
}