/**



 * COMPONENT CSS



 * Nơi lưu trữ:



 * 1. Quan hệ selector cha-con (.parent .child, .parent > .child)



 * 2. Ghép nhiều class (.className1.className2, .btn.btn-primary)



 * 3. Hover cha tác động con (.parent:hover .child)



 * 4. Background Gradient phức tạp, Glassmorphism, Box-shadow đa tầng



 * 5. Menu Dropdown đa cấp & Mobile Navigation Drawer



 * 6. WooCommerce Custom Overrides (Cart, Checkout, Single Product, Badges)



 */







/* ==========================================================================



   GLOBAL MINIMUM FONT SIZE & ROBOTO TYPOGRAPHY (>= 1rem / 16px)



   ========================================================================== */



html {



  font-size: 16px;



  font-family: 'Roboto', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;



}







body {



  font-size: 1rem;



  font-family: 'Roboto', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;



}







button,



input,



optgroup,



select,



textarea,



h1, h2, h3, h4, h5, h6,



p, a, span, li, td, th {



  font-family: inherit;



}







/* Ensure that all text elements cannot fall below 1rem */



small,



sub,



sup,



.text-xs,



.text-sm,



.sm\:text-sm,



.text-\[10px\],



.text-\[11px\],



.badge,



.tag,



.breadcrumb,



.woocommerce-breadcrumb,



.comment-date,



.comment-metadata,



.post-date,



.meta-item,



.post-meta,



.post-meta span,



.toolbar-result-count,



.archive-description,



.cat-link,



.sub-cat-link,



.category-sidebar-header {



  font-size: 1rem !important;



}







/* ==========================================================================



   1. BACKGROUND GRADIENTS & SPECIAL EFFECTS



   ========================================================================== */



.bg-gradient-hero {



  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #1e3a8a 100%);



}







.bg-gradient-accent {



  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);



}







.bg-gradient-card {



  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);



}







.glass-header {



  background-color: rgba(255, 255, 255, 0.92);



  backdrop-filter: blur(12px);



  -webkit-backdrop-filter: blur(12px);



  border-bottom: 1px solid rgba(226, 232, 240, 0.8);



}







/* ==========================================================================



   2. NÚT BẤM VÀ MULTI-CLASS SELECTORS (.className1.className2)



   ========================================================================== */



.btn {



  display: inline-flex;



  align-items: center;



  justify-content: center;



  gap: 0.5rem;



  font-weight: 600;



  border-radius: var(--radius-lg);



  padding: 0.625rem 1.25rem;



  transition: all 0.2s ease-in-out;



  cursor: pointer;



  border: 1px solid transparent;



}







.btn.btn-primary {



  background-color: var(--color-primary);



  color: #ffffff;



}







.btn.btn-primary:hover {



  background-color: var(--color-primary-hover);



  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);



}







.btn.btn-secondary {



  background-color: var(--color-secondary);



  color: #ffffff;



}







.btn.btn-secondary:hover {



  background-color: var(--color-secondary-hover);



}







.btn.btn-outline {



  background-color: transparent;



  border-color: var(--color-slate-300);



  color: var(--color-slate-700);



}







.btn.btn-outline:hover {



  border-color: var(--color-primary);



  color: var(--color-primary);



  background-color: var(--color-slate-50);



}







.btn.btn-sm {



  padding: 0.375rem 0.75rem;



  font-size: 1rem;



}







.btn.btn-lg {



  padding: 0.75rem 1.75rem;



  font-size: 1.125rem;



}







/* ==========================================================================



   3. CARD SẢN PHẨM & HIỆU ỨNG HOVER CON (.parent:hover .child)



   ========================================================================== */



.product-card {



  border: 1px solid var(--color-slate-200);



  position: relative;



  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;



}







.product-card:hover {



  transform: translateY(-4px);



  border-color: #cbd5e1;



  box-shadow: 0 12px 24px -4px rgba(15, 23, 42, 0.08);



}







/* Hover cha tác động phóng to ảnh thumbnail con */



.product-card .thumbnail-wrapper img {



  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);



}







.product-card:hover .thumbnail-wrapper img {



  transform: none !important;



}







/* Hover cha tác động hiện thanh nút hành động con */



.product-card .product-hover-actions {



  opacity: 0;



  visibility: hidden;



  transform: translateY(8px);



  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;



}







.product-card:hover .product-hover-actions {



  opacity: 1;



  visibility: visible;



  transform: translateY(0);



}







/* ==========================================================================



   4. LOGO WEBSITE & TÙY BIẾN NHẬN DIỆN TRANG WEB (CUSTOM LOGO)



   ========================================================================== */



.custom-logo-link {



  display: inline-flex;



  align-items: center;



  line-height: 1;



  text-decoration: none;



}







.custom-logo {



  max-height: 3rem; /* 48px */



  width: auto;



  height: auto;



  object-fit: contain;



  display: block;



}







.footer-col-about .custom-logo {



  max-height: 2.75rem; /* 44px */



}







/* ==========================================================================



   5. NAVIGATION MENU PHONG CÁCH BRICKS BUILDER & SUBMENU ĐA CẤP



   ========================================================================== */



.site-navigation .nav-menu {



  position: relative;



}







.site-navigation .menu-item {



  position: relative;



}







.site-navigation .menu-item > a {



  display: inline-flex;



  align-items: center;



  gap: 0.25rem;



  padding: 0.5rem 0;



  color: var(--color-slate-700);



  transition: color 0.2s ease;



}







.site-navigation .menu-item > a:hover,



.site-navigation .menu-item.current-menu-item > a {



  color: var(--color-primary);



}







/* Submenu Dropdown hiển thị khi hover cha */



.site-navigation .sub-menu {



  position: absolute;



  top: 100%;



  left: 0;



  min-width: 220px;



  background-color: #ffffff;



  border-radius: var(--radius-xl);



  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);



  border: 1px solid var(--color-slate-100);



  padding: 0.5rem;



  opacity: 0;



  visibility: hidden;



  transform: translateY(10px);



  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);



  z-index: 50;



}







.site-navigation .menu-item-has-children:hover > .sub-menu {



  opacity: 1;



  visibility: visible;



  transform: translateY(0);



}







.site-navigation .sub-menu .menu-item > a {



  display: block;



  padding: 0.5rem 0.75rem;



  font-size: 1rem;



  border-radius: var(--radius-md);



  color: var(--color-slate-600);



}







.site-navigation .sub-menu .menu-item > a:hover {



  background-color: var(--color-slate-50);



  color: var(--color-primary);



}







/* Submenu cấp 2 (Nested) */



.site-navigation .sub-menu .menu-item-has-children > .sub-menu {



  top: 0;



  left: 100%;



}







/* ==========================================================================



   5. MOBILE DRAWER NAVIGATION



   ========================================================================== */



.mobile-nav-backdrop {



  position: fixed;



  inset: 0;



  background: rgba(15, 23, 42, 0.6);



  backdrop-filter: blur(4px);



  z-index: 998;



  opacity: 0;



  visibility: hidden;



  transition: opacity 0.3s ease, visibility 0.3s;



}







.mobile-nav-backdrop.is-active {



  opacity: 1;



  visibility: visible;



}







.mobile-nav-drawer {



  position: fixed;



  top: 0;



  right: 0;



  bottom: 0;



  width: 85%;



  max-width: 320px;



  background-color: #075723 !important; /* Màu primary chủ đạo RESTEK */



  color: #ffffff;



  z-index: 999;



  transform: translateX(100%);



  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);



  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.35);



  display: flex;



  flex-direction: column;



}







.mobile-nav-drawer.is-open {



  transform: translateX(0);



}







.mobile-nav-drawer .mobile-menu-list > li > a {



  display: flex;



  align-items: center;



  justify-content: space-between;



  padding: 0.75rem 0.5rem;



  color: #ffffff !important;



  font-weight: 700;



  text-transform: uppercase !important;



  letter-spacing: 0.025em;



  transition: all 0.2s ease;



  border-bottom: 1px solid rgba(255, 255, 255, 0.1);



}







.mobile-nav-drawer .mobile-menu-list > li > a:hover,



.mobile-nav-drawer .mobile-menu-list > li.current-menu-item > a {



  color: #fde047 !important;



  padding-left: 0.75rem;



}







.mobile-nav-drawer .sub-menu {



  display: none;



  background-color: rgba(0, 0, 0, 0.18);



  border-radius: 0.5rem;



  padding: 0.35rem 0.75rem 0.5rem 1rem;



  margin: 0.25rem 0 0.5rem 0;



  border-left: 3px solid #f59e0b;



}







.mobile-nav-drawer .sub-menu a {



  display: block;



  padding: 0.45rem 0;



  color: rgba(255, 255, 255, 0.9) !important;



  font-size: 0.8125rem;



  font-weight: 600;



}







.mobile-nav-drawer .sub-menu a:hover {



  color: #fde047 !important;



}







.mobile-nav-drawer .menu-item.is-expanded > .sub-menu {



  display: block;



}







/* ==========================================================================



   6. WOOCOMMERCE CHUYÊN BIỆT (OVERRIDES)



   ========================================================================== */







/* Star Ratings */



.star-rating {



  overflow: hidden;



  position: relative;



  height: 1.2em;



  line-height: 1.2;



  font-size: 1rem;



  width: 5.4em;



  font-family: star;



  color: var(--color-accent);



}







/* Form Fields Chung (Inputs, Labels, Select, Textarea) */



.woocommerce form .form-row {



  margin-bottom: 1.25rem;



  display: block;



}







.woocommerce form .form-row label {



  display: block;



  font-size: 1rem;



  font-weight: 600;



  color: var(--color-slate-700);



  margin-bottom: 0.375rem;



}







.woocommerce form .form-row label .required {



  color: var(--color-danger);



  font-weight: 700;



}







.woocommerce form .form-row .input-text,



.woocommerce form .form-row select,



.woocommerce form .form-row textarea {



  width: 100%;



  background-color: var(--color-slate-50);



  border: 1px solid var(--color-slate-300);



  border-radius: var(--radius-xl);



  padding: 0.625rem 1rem;



  font-size: 1rem;



  color: var(--color-slate-900);



  outline: none;



  transition: all 0.2s ease;



}







.woocommerce form .form-row .input-text:focus,



.woocommerce form .form-row select:focus,



.woocommerce form .form-row textarea:focus {



  border-color: var(--color-primary);



  background-color: #ffffff;



  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);



}







/* Select2 Container Overrides cho WooCommerce Dropdown */



.select2-container--default .select2-selection--single {



  height: 42px !important;



  background-color: var(--color-slate-50) !important;



  border: 1px solid var(--color-slate-300) !important;



  border-radius: var(--radius-xl) !important;



  display: flex !important;



  align-items: center !important;



  padding-left: 0.5rem !important;



}







.select2-container--default .select2-selection--single .select2-selection__arrow {



  height: 40px !important;



  right: 0.5rem !important;



}







/* Bảng Giỏ hàng Responsive trên Mobile */



@media (max-width: 767px) {



  .woocommerce-cart-form table.shop_table {



    display: block;



    width: 100%;



    border: none;



  }



  .woocommerce-cart-form table.shop_table thead {



    display: none;



  }



  .woocommerce-cart-form table.shop_table tbody,



  .woocommerce-cart-form table.shop_table tr {



    display: block;



    width: 100%;



  }



  .woocommerce-cart-form table.shop_table tr.cart_item {



    margin-bottom: 1.25rem;



    padding: 1rem;



    background: #ffffff;



    border-radius: var(--radius-xl);



    border: 1px solid var(--color-slate-200);



    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);



  }



  .woocommerce-cart-form table.shop_table td {



    display: flex;



    justify-content: space-between;



    align-items: center;



    padding: 0.625rem 0;



    border: none;



    border-bottom: 1px dashed var(--color-slate-100);



  }



  .woocommerce-cart-form table.shop_table td:last-child {



    border-bottom: none;



  }



  .woocommerce-cart-form table.shop_table td::before {



    content: attr(data-title);



    font-weight: 600;



    font-size: 1rem;



    color: var(--color-slate-500);



  }



  .woocommerce-cart-form table.shop_table td.product-thumbnail {



    justify-content: center;



    padding-bottom: 0.75rem;



  }



  .woocommerce-cart-form table.shop_table td.product-thumbnail::before {



    display: none;



  }



  .woocommerce-cart-form table.shop_table td.product-remove {



    justify-content: flex-end;



  }



  .woocommerce-cart-form table.shop_table td.product-remove::before {



    display: none;



  }



}







/* Nút Tiến Hành Thanh Toán & Thao Tác Giỏ Hàng */



.wc-proceed-to-checkout a.checkout-button {



  display: block;



  width: 100%;



  text-align: center;



  padding: 0.875rem 1.5rem;



  font-size: 1rem;



  font-weight: 700;



  border-radius: var(--radius-xl);



  background: var(--color-primary);



  color: #ffffff;



  box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.2);



  transition: all 0.2s ease;



}







.wc-proceed-to-checkout a.checkout-button:hover {



  background: var(--color-primary-hover);



  transform: translateY(-1px);



  box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3);



}







/* Khung Mã Giảm Giá Checkout Toggle */



.woocommerce-form-coupon-toggle .woocommerce-info {



  background: #ffffff;



  border: 1px solid var(--color-slate-200);



  border-radius: var(--radius-xl);



  padding: 0.875rem 1.25rem;



  margin-bottom: 1.5rem;



  font-size: 1rem;



  color: var(--color-slate-700);



}







.woocommerce-form-coupon-toggle .showcoupon {



  color: var(--color-primary);



  font-weight: 600;



}







form.checkout_coupon {



  background: #ffffff;



  border: 1px solid var(--color-slate-200);



  border-radius: var(--radius-xl);



  padding: 1.25rem;



  margin-bottom: 2rem;



  display: flex;



  flex-wrap: wrap;



  gap: 0.75rem;



  align-items: center;



}







/* Form Thanh toán WooCommerce 2 Cột */



@media (min-width: 1024px) {



  form.woocommerce-checkout {



    display: grid;



    grid-template-columns: 7fr 5fr;



    gap: 2rem;



    align-items: start;



  }



}







/* Bảng Đơn Hàng Tại Checkout (#order_review) */



#order_review table.shop_table {



  width: 100%;



  border-collapse: collapse;



}







#order_review table.shop_table th,



#order_review table.shop_table td {



  padding: 0.75rem 0;



  border-bottom: 1px solid var(--color-slate-100);



  font-size: 1rem;



}







#order_review table.shop_table tr.order-total th,



#order_review table.shop_table tr.order-total td {



  border-top: 2px solid var(--color-slate-200);



  border-bottom: none;



  padding-top: 1rem;



  font-size: 1.125rem;



  font-weight: 800;



  color: var(--color-slate-900);



}







#order_review table.shop_table tr.order-total td strong {



  color: var(--color-primary);



}







/* Phương Thức Thanh Toán (Payment Gateways) */



ul.wc_payment_methods {



  list-style: none;



  padding: 0;



  margin: 1.5rem 0 0 0;



  display: flex;



  flex-direction: column;



  gap: 0.75rem;



}







ul.wc_payment_methods li.wc_payment_method {



  border: 1px solid var(--color-slate-200);



  border-radius: var(--radius-xl);



  padding: 1rem;



  background-color: var(--color-slate-50);



  transition: all 0.2s ease;



}







ul.wc_payment_methods li.wc_payment_method:hover,



ul.wc_payment_methods li.wc_payment_method input[type="radio"]:checked ~ label {



  border-color: var(--color-primary);



}







ul.wc_payment_methods li.wc_payment_method label {



  font-weight: 600;



  font-size: 1rem;



  color: var(--color-slate-900);



  cursor: pointer;



  display: inline-flex;



  align-items: center;



  gap: 0.5rem;



}







ul.wc_payment_methods div.payment_box {



  margin-top: 0.75rem;



  padding: 0.75rem 1rem;



  background: #ffffff;



  border-radius: var(--radius-lg);



  font-size: 1rem;



  line-height: 1.5;



  color: var(--color-slate-600);



  border-left: 3px solid var(--color-primary);



}







/* Nút Đặt Hàng (#place_order) */



#order_review #place_order {



  display: block;



  width: 100%;



  margin-top: 1.5rem;



  padding: 1rem 1.5rem;



  font-size: 1.05rem;



  font-weight: 700;



  border-radius: var(--radius-xl);



  background: var(--color-primary);



  color: #ffffff;



  border: none;



  cursor: pointer;



  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.25);



  transition: all 0.25s ease;



}







#order_review #place_order:hover {



  background: var(--color-primary-hover);



  box-shadow: 0 8px 16px rgba(37, 99, 235, 0.35);



  transform: translateY(-1px);



}







/* Badges Thông Báo (Notices & Alerts) */



.woocommerce-message, 



.woocommerce-error, 



.woocommerce-info {



  display: flex;



  align-items: center;



  justify-content: space-between;



  flex-wrap: wrap;



  gap: 1rem;



  padding: 1rem 1.5rem;



  margin-bottom: 1.5rem;



  border-radius: var(--radius-xl);



  font-size: 1rem;



  font-weight: 500;



}







.woocommerce-message {



  background-color: #ecfdf5;



  color: #065f46;



  border-left: 4px solid var(--color-success);



}







.woocommerce-message a.button {



  background: #ffffff;



  color: #065f46;



  border: 1px solid #a7f3d0;



  border-radius: var(--radius-md);



  padding: 0.375rem 0.875rem;



  font-size: 1rem;



  font-weight: 600;



  text-decoration: none;



  transition: all 0.2s;



}







.woocommerce-message a.button:hover {



  background: #065f46;



  color: #ffffff;



}







.woocommerce-error {



  background-color: #fef2f2;



  color: #991b1b;



  border-left: 4px solid var(--color-danger);



}







.woocommerce-info {



  background-color: #eff6ff;



  color: #1e40af;



  border-left: 4px solid var(--color-primary);



}







/* My Account Bảng Đơn Hàng */



table.woocommerce-orders-table {



  width: 100%;



  border-collapse: collapse;



}







table.woocommerce-orders-table th {



  background-color: var(--color-slate-50);



  font-size: 1rem;



  font-weight: 700;



  text-transform: uppercase;



  letter-spacing: 0.05em;



  color: var(--color-slate-500);



  padding: 0.75rem 1rem;



}







table.woocommerce-orders-table td {



  padding: 1rem;



  font-size: 1rem;



  border-bottom: 1px solid var(--color-slate-100);



}







table.woocommerce-orders-table a.woocommerce-button {



  background-color: var(--color-slate-100);



  color: var(--color-slate-800);



  padding: 0.375rem 0.875rem;



  border-radius: var(--radius-lg);



  font-size: 1rem;



  font-weight: 600;



  transition: all 0.2s;



}







table.woocommerce-orders-table a.woocommerce-button:hover {



  background-color: var(--color-primary);



  color: #ffffff;



}







/* ==========================================================================



   7. SWIPER SLIDER CUSTOM STYLING



   ========================================================================== */



.swiper {



  width: 100%;



  height: 100%;



}







/* Swiper Navigation Buttons tinh chỉnh hiện đại */



.swiper-button-next,



.swiper-button-prev {



  width: 44px;



  height: 44px;



  background-color: rgba(255, 255, 255, 0.95);



  color: var(--color-slate-800);



  border-radius: var(--radius-full);



  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);



  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);



  border: 1px solid var(--color-slate-100);



}







.swiper-button-next:hover,



.swiper-button-prev:hover {



  background-color: var(--color-primary);



  color: #ffffff;



  transform: scale(1.08);



}







.swiper-button-next::after,



.swiper-button-prev::after {



  font-size: 1rem;



  font-weight: 700;



}







/* Swiper Pagination Bullets */



.swiper-pagination-bullet {



  width: 8px;



  height: 8px;



  background: var(--color-slate-400);



  opacity: 0.5;



  transition: all 0.3s ease;



}







.swiper-pagination-bullet-active {



  width: 24px;



  border-radius: var(--radius-full);



  background: var(--color-primary);



  opacity: 1;



}







/* Hero Slider Specifics */



.hero-swiper .swiper-pagination-bullet {



  background: #ffffff;



  opacity: 0.6;



}







.hero-swiper .swiper-pagination-bullet-active {



  background: #ffffff;



  opacity: 1;



}







/* ==========================================================================



   8. GSAP ANIMATION HELPERS (CHỐNG FOUC)



   ========================================================================== */



.gsap-reveal {



  opacity: 0;



  will-change: transform, opacity;



}







/* ==========================================================================



   9. ICON & MULTILINE TEXT ALIGNMENT HELPERS



   ========================================================================== */



.icon-first-line,



.icon-box-horizontal {



  display: flex;



  align-items: flex-start;



}







.icon-first-line > svg,



.icon-first-line > .icon,



.icon-box-horizontal > svg,



.icon-box-horizontal > .icon,



.icon-box-horizontal > .icon-box {



  flex-shrink: 0;



  margin-top: 0.125rem; /* Căn ngang chuẩn xác với cap-height của dòng chữ đầu tiên */



}







/* ==========================================================================



   10. ACCESSIBILITY ENHANCEMENTS (A11Y 100 PTS)



   ========================================================================== */



.skip-link {



  position: absolute;



  top: -9999px;



  left: 1rem;



  z-index: 9999;



}







.skip-link:focus,



.skip-link:focus-visible {



  top: 1rem;



  position: fixed;



  z-index: 99999;



}







/* Tôn trọng người dùng bật chế độ giảm hiệu ứng chuyển động */



@media (prefers-reduced-motion: reduce) {



  *, *::before, *::after {



    animation-duration: 0.01ms !important;



    animation-iteration-count: 1 !important;



    transition-duration: 0.01ms !important;



    scroll-behavior: auto !important;



  }



}







/* ==========================================================================



   11. RESTEK CUSTOM COMPONENTS & LAYOUT STYLING



   ========================================================================== */



.restek-topbar {



  background-color: #0f172a;



  color: #cbd5e1;



  font-size: 1rem;



}







.restek-navbar {



  background-color: #075723; /* Nền xanh đậm đồng nhất chuẩn ảnh mẫu */



  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);



}







.restek-category-tab {



  background-color: #0a7a33; /* Xanh lá sáng phẳng, không viền, không bo tròn, không nổi */



  color: #ffffff;



  border: none !important;



  border-radius: 0 !important;



  box-shadow: none !important;



  cursor: pointer;



  height: 46px;



  display: inline-flex;



  align-items: center;



  font-weight: 700;



  font-size: 1rem;



  letter-spacing: 0.025em;



  padding: 0 1.25rem;



  transition: background-color 0.2s ease;



}







.restek-category-tab:hover {



  background-color: #08662a;



}







/* Khung tìm kiếm phẳng chuẩn ảnh mẫu */



.restek-search-bar {



  display: flex;



  align-items: center;



  border-radius: 2px;



  overflow: hidden;



}







.restek-search-bar .search-field {



  height: 32px;



  border: none !important;



  outline: none !important;



  border-radius: 2px 0 0 2px;



  padding: 0 0.625rem;



  font-size: 1rem;



  color: #1e293b;



  background: #ffffff;



}







.restek-search-bar .search-submit,



.search-submit,



.restek-search-form button {



  height: 32px;



  width: 34px;



  background-color: #b43c00;



  border: 0 !important;



  border-width: 0 !important;



  border-style: none !important;



  outline: none !important;



  box-shadow: none !important;



  border-radius: 0 2px 2px 0;



  color: #ffffff;



  display: flex;



  align-items: center;



  justify-content: center;



  cursor: pointer;



  -webkit-appearance: none;



  appearance: none;



  transition: background-color 0.2s ease;



}







.restek-search-bar .search-submit:hover,



.search-submit:hover,



.restek-search-form button:hover {



  background-color: #9a3412;



  border: 0 !important;



  outline: none !important;



}







/* Back to Top Button: Phẳng tuyệt đối, không có viền 2 màu */



#back-to-top-btn {



  border: 0 !important;



  border-width: 0 !important;



  border-style: none !important;



  outline: none !important;



  background-color: #1e293b;



  color: #ffffff;



  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);



  cursor: pointer;



  -webkit-appearance: none;



  appearance: none;



}







/* ==========================================================================



   STICKY HEADER ANIMATION & STYLES (> 100px)



   ========================================================================== */



.restek-sticky-header-container {



  width: 100%;



  position: relative;



  z-index: 100;



}







.restek-sticky-header-inner {



  width: 100%;



  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;



}







.restek-sticky-header-inner.is-sticky {



  position: fixed;



  top: 0;



  left: 0;



  right: 0;



  z-index: 1000;



  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);



  animation: restekSlideDownHeader 0.52s cubic-bezier(0.16, 1, 0.3, 1) forwards;



}







/* Offset khi có thanh WP Admin Bar */



.admin-bar .restek-sticky-header-inner.is-sticky {



  top: 32px;



}



@media screen and (max-width: 782px) {



  .admin-bar .restek-sticky-header-inner.is-sticky {



    top: 46px;



  }



}







.restek-sticky-header-inner.is-sticky .site-header {



  padding-top: 0.25rem !important;



  padding-bottom: 0.25rem !important;



  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);



}







/* Logo giữ nguyên kích thước đầy đủ khi sticky (không thu nhỏ) */



.restek-sticky-header-inner.is-sticky .site-branding img {



  max-height: 76px !important;



}







.restek-sticky-header-inner.is-sticky .contact-personnel-card {



  padding-top: 0.1rem;



  padding-bottom: 0.1rem;



}







@keyframes restekSlideDownHeader {



  0% {



    transform: translateY(-100%);



    opacity: 0.7;



  }



  100% {



    transform: translateY(0);



    opacity: 1;



  }



}







/* Header Menu in hoa hết (Uppercase) */



.restek-navbar .nav-menu a,



.restek-navbar .nav-menu > li > a,



.mobile-nav-drawer .nav-menu a {



  text-transform: uppercase !important;



  letter-spacing: 0.02em;



}







#back-to-top-btn:hover {



  background-color: #334155;



  border: 0 !important;



  outline: none !important;



}







/* Category Sidebar & Hierarchical Flyout Menu */



.category-sidebar {



  background-color: #ffffff;



  border: 1px solid #e2e8f0;



  border-radius: 0.75rem;



  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);



  position: relative;



  z-index: 30;



}







.category-sidebar .category-sidebar-header {



  padding: 0.75rem 1rem;



  background-color: #075723; /* Nền xanh thương hiệu RESTEK */



  color: #ffffff;



  font-weight: 700;



  font-size: 1rem;



  text-transform: uppercase;



  letter-spacing: 0.05em;



  border-top-left-radius: 0.75rem;



  border-top-right-radius: 0.75rem;



}







.category-sidebar .cat-list-root {



  list-style: none;



  margin: 0;



  padding: 0.25rem 0;



  position: static;



}







.category-sidebar .cat-item {



  position: relative;



  list-style: none;



  border-bottom: 1px solid #f1f5f9;



  transition: all 0.2s ease;



}







.category-sidebar .cat-item:last-child {



  border-bottom: none;



}







.category-sidebar .cat-link {



  display: flex;



  align-items: center;



  justify-content: space-between;



  padding: 0.55rem 0.85rem;



  font-size: 1rem;



  font-weight: 500;



  color: #334155;



  text-decoration: none;



  transition: all 0.15s ease-in-out;



}







.category-sidebar .cat-item:hover > .cat-link {



  background-color: #f0fdf4;



  color: #075723;



  padding-left: 1.05rem;



}







.category-sidebar .cat-item:hover > .cat-link svg {



  transform: translateX(3px);



  color: #075723;



}







/* Category Flyout Menu (Desktop: hiển thị bay sang phải khi hover) */



.category-sidebar .cat-item {



  position: relative;



  list-style: none;



  border-bottom: 1px solid #f1f5f9;



  transition: all 0.2s ease;



}







.category-sidebar .cat-item.has-children:hover,



.category-sidebar .cat-item.has-children.is-active {



  z-index: 120;



}







.category-sidebar .cat-flyout-menu {



  position: absolute;



  top: -1px;



  left: 100%;



  width: 320px;



  background-color: #ffffff;



  border: 1px solid #cbd5e1;



  border-radius: 0.5rem;



  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);



  z-index: 150;



  opacity: 0;



  visibility: hidden;



  transform: translateX(6px);



  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;



  pointer-events: none;



  margin-left: 0;



}







/* Cầu nối vô hình chống rớt hover khi lia chuột từ menu cha sang menu con */



.category-sidebar .cat-flyout-menu::before {



  content: "";



  position: absolute;



  top: 0;



  left: -15px;



  width: 16px;



  height: 100%;



  background: transparent;



}







.category-sidebar .cat-item.has-children:hover > .cat-flyout-menu,



.category-sidebar .cat-item.has-children.is-active > .cat-flyout-menu {



  opacity: 1 !important;



  visibility: visible !important;



  transform: translateX(0) !important;



  pointer-events: auto !important;



  display: block !important;



}







.category-sidebar .cat-flyout-inner {



  overflow: hidden;



  border-radius: 0.5rem;



}







.category-sidebar .cat-flyout-header {



  padding: 0.65rem 0.85rem;



  background: #f8fafc;



  border-bottom: 1px solid #e2e8f0;



  display: flex;



  align-items: center;



  justify-content: space-between;



}







.category-sidebar .cat-flyout-header h4 {



  margin: 0;



  font-size: 1rem;



  font-weight: 700;



  color: #0f172a;



}







.category-sidebar .cat-flyout-header a {



  font-size: 1rem;



  color: #075723;



  font-weight: 600;



  text-decoration: underline;



}







.category-sidebar .subcat-list {



  list-style: none;



  margin: 0;



  padding: 0.35rem 0.4rem;



  max-height: 440px;



  overflow-y: auto;



}







.category-sidebar .subcat-item a {



  display: flex;



  align-items: center;



  justify-content: space-between;



  padding: 0.4rem 0.65rem;



  border-radius: 0.375rem;



  font-size: 1rem;



  color: #475569;



  text-decoration: none;



  transition: all 0.15s ease;



}







.category-sidebar .subcat-item a:hover {



  background-color: #f0fdf4;



  color: #075723;



  padding-left: 0.85rem;



}







/* Service Promo Cards (Hero bottom) */



.service-promo-card {



  position: relative;



  overflow: hidden;



  border-radius: var(--radius-xl);



  height: 200px;



  box-shadow: 0 4px 14px rgba(0,0,0,0.08);



  transition: transform 0.3s ease, box-shadow 0.3s ease;



}







.service-promo-card:hover {



  transform: translateY(-4px);



  box-shadow: 0 16px 28px rgba(0,0,0,0.16);



}







.service-promo-card .service-bg-img {



  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);



}







.service-promo-card:hover .service-bg-img {



  transform: scale(1.08);



}







.service-promo-card .service-overlay {



  background: linear-gradient(180deg, rgba(15,23,42,0.2) 0%, rgba(15,23,42,0.85) 100%);



}







/* Header Personnel Contact Card (Bo duong phan cach doc xam) */



.contact-personnel-card {



  border-left: none !important;



  padding-left: 0 !important;



  transition: opacity 0.2s ease;



}







.contact-personnel-card:hover {



  border-color: transparent !important;



}







/* Search Bar */



.restek-search-form {



  position: relative;



  display: flex;



  align-items: center;



  width: 100%;



  max-width: 320px;



}







.restek-search-form input {



  padding-right: 2.75rem;



  border-radius: var(--radius-full);



}







/* Product Card Styling */



.restek-product-card {



  background: #ffffff;



  border: 1px solid #e2e8f0;



  border-radius: var(--radius-xl);



  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;



  display: flex;



  flex-direction: column;



  position: relative;



}







.restek-product-card:hover {



  transform: translateY(-0.5rem) !important;



  box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.1), 0 8px 16px -6px rgba(0, 0, 0, 0.04) !important;



  border-color: #075723 !important;



}







.restek-product-card .img-box img {



  transition: transform 0.4s ease;



}







.restek-product-card:hover .img-box img {



  transform: none !important;



}







/* Floating Contact Button */



.floating-contact-widget {



  position: fixed;



  bottom: 24px;



  right: 24px;



  display: flex;



  flex-direction: column;



  gap: 12px;



  z-index: 999;



}







.floating-btn {



  width: 52px;



  height: 52px;



  border-radius: 50%;



  display: flex;



  align-items: center;



  justify-content: center;



  color: #ffffff;



  box-shadow: 0 6px 16px rgba(0,0,0,0.2);



  transition: transform 0.2s ease, box-shadow 0.2s ease;



  position: relative;



  text-decoration: none;



}







.floating-btn:hover {



  transform: scale(1.1);



  box-shadow: 0 10px 24px rgba(0,0,0,0.3);



}







.floating-btn.btn-hotline {



  background-color: #dc2626;



}







.floating-btn, .floating-btn * { color: #ffffff !important; }



.floating-btn.btn-zalo { background-color: #004eb7 !important;



  background-color: #0054cc;



}







.pulse-ring {



  position: absolute;



  inset: -4px;



  border-radius: 50%;



  border: 2px solid currentColor;



  animation: pulse-ring-anim 2s infinite;



  opacity: 0.6;



}







@keyframes pulse-ring-anim {



  0% { transform: scale(0.95); opacity: 0.8; }



  50% { transform: scale(1.25); opacity: 0; }



  100% { transform: scale(0.95); opacity: 0; }



}







/* ==========================================================================



   12. SVG SIZING ENFORCEMENT & REST-BAR MENU



   ========================================================================== */



svg.w-3 { width: 0.75rem !important; height: 0.75rem !important; }



svg.w-3\.5 { width: 0.875rem !important; height: 0.875rem !important; }



svg.w-4 { width: 1rem !important; height: 1rem !important; }



svg.w-5 { width: 1.25rem !important; height: 1.25rem !important; }



svg.w-6 { width: 1.5rem !important; height: 1.5rem !important; }



svg.w-7 { width: 1.75rem !important; height: 1.75rem !important; }



svg.w-8 { width: 2rem !important; height: 2rem !important; }



svg.w-9 { width: 2.25rem !important; height: 2.25rem !important; }



svg.w-10 { width: 2.5rem !important; height: 2.5rem !important; }



svg.w-12 { width: 3rem !important; height: 3rem !important; }







svg.h-3 { height: 0.75rem !important; }



svg.h-3\.5 { height: 0.875rem !important; }



svg.h-4 { height: 1rem !important; }



svg.h-5 { height: 1.25rem !important; }



svg.h-6 { height: 1.5rem !important; }



svg.h-7 { height: 1.75rem !important; }



svg.h-8 { height: 2rem !important; }



svg.h-9 { height: 2.25rem !important; }



svg.h-10 { height: 2.5rem !important; }



svg.h-12 { height: 3rem !important; }







.restek-navbar .nav-menu {



  display: flex !important;



  flex-direction: row !important;



  align-items: center !important;



  justify-content: center !important;



  list-style: none !important;



  margin: 0 auto !important;



  padding: 0 !important;



  gap: 0 !important;



}







.restek-navbar .nav-menu > li {



  list-style: none !important;



  margin: 0 !important;



  padding: 0 !important;



  display: inline-flex !important;



  align-items: center !important;



}







/* Ký tự phân cách | giữa các menu như ảnh mẫu */



.restek-navbar .nav-menu > li + li::before {



  content: "|";



  color: rgba(255, 255, 255, 0.4);



  margin: 0 0.5rem;



  font-weight: 300;



  font-size: 1rem;



  user-select: none;



}







@media (min-width: 1280px) {



  .restek-navbar .nav-menu > li + li::before {



    margin: 0 0.85rem;



  }



}







.restek-navbar .nav-menu > li > a {



  display: inline-flex !important;



  align-items: center !important;



  color: #ffffff !important;



  font-weight: 700 !important;



  font-size: 1rem !important;



  padding: 0.75rem 0.25rem !important;



  text-decoration: none !important;



  transition: color 0.2s ease !important;



  white-space: nowrap !important;



  letter-spacing: 0.025em;



}







.restek-navbar .nav-menu > li > a:hover {



  color: #86efac !important;



}







.restek-navbar .nav-menu > li.current-menu-item > a {



  color: #ffffff !important;



}







/* ==========================================================================



   HERO SWIPER BANNER (Min Height 85vh, Bỏ tỷ lệ 16/9)



   ========================================================================== */



.hero-swiper {



  width: 100% !important;



  position: relative;



  overflow: hidden;



  border-radius: 0 !important;



  min-height: 85vh !important;



  aspect-ratio: auto !important;



}







/* Desktop */



@media (min-width: 1024px) {



  .hero-swiper {



    min-height: 85vh !important;



    aspect-ratio: auto !important;



  }



  .hero-swiper .swiper-slide {



    min-height: 85vh !important;



  }



}







/* Tablet */



@media (min-width: 641px) and (max-width: 1023px) {



  .hero-swiper {



    min-height: 70vh !important;



    aspect-ratio: auto !important;



  }



  .hero-swiper .swiper-slide {



    min-height: 70vh !important;



  }



}







/* Mobile */



@media (max-width: 640px) {



  .hero-swiper {



    min-height: 520px !important;



    aspect-ratio: auto !important;



  }



  .hero-swiper .swiper-slide {



    min-height: 520px !important;



  }



}







.hero-swiper .swiper-slide {



  width: 100% !important;



  position: relative;



  display: flex !important;



  align-items: center;



}











/* Category Sidebar Styling */



.category-sidebar {



  background-color: #ffffff;



  border-radius: 0.75rem;



  border: 1px solid #e2e8f0;



  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);



  overflow: visible !important;



}







.category-sidebar ul {



  list-style: none !important;



  margin: 0 !important;



  padding: 0.25rem 0 !important;



}







.category-sidebar .cat-item {



  border-bottom: 1px solid #f1f5f9;



  list-style: none !important;



  margin: 0 !important;



}







.category-sidebar .cat-item:last-child {



  border-bottom: none;



}







.category-sidebar .cat-link {



  display: flex;



  align-items: center;



  justify-content: space-between;



  padding: 0.625rem 0.875rem;



  color: #334155;



  text-decoration: none;



  font-weight: 500;



  transition: all 0.2s ease;



}







.category-sidebar .cat-link:hover {



  background-color: #f0fdf4;



  color: #047857;



  padding-left: 1.125rem;



}







/* Service Promo Cards */



.service-promo-card {



  min-height: 180px;



  border-radius: 1rem;



  overflow: hidden;



  position: relative;



  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);



}







.service-promo-card .service-bg-img {



  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);



}







.service-promo-card:hover .service-bg-img {



  transform: scale(1.08);



}







.service-promo-card .service-overlay {



  background: linear-gradient(180deg, rgba(15, 23, 42, 0.2) 0%, rgba(15, 23, 42, 0.92) 100%);



}







/* Search Form */



.restek-search-form {



  position: relative;



  width: 280px;



}







.restek-search-form input[type="search"] {



  border-radius: 9999px;



  padding-right: 2.5rem;



}



















/* ==========================================================================



   13. COMPONENT STYLING: WOOCOMMERCE, ARCHIVES, POSTS & UI BLOCKS



   ========================================================================== */







/* Buttons & Badges */



.btn-md {



  padding: 0.5rem 1.25rem;



  font-size: 1rem;



}







.button-hero {



  padding: 0.75rem 1.75rem;



  font-weight: 700;



  font-size: 1rem;



  border-radius: var(--radius-lg);



}







.button-primary {



  background-color: var(--color-primary);



  color: #ffffff;



}







.button-secondary {



  background-color: var(--color-secondary);



  color: #ffffff;



}







.badge-genuine {



  position: absolute !important;



  top: 0.5rem !important;



  left: 0.5rem !important;



  background-color: #075723 !important;



  color: #ffffff !important;



  font-size: 0.625rem !important; /* 10px */



  font-weight: 700 !important;



  line-height: 1 !important;



  padding: 0.25rem 0.5rem !important;



  border-radius: 0.25rem !important;



  border: none !important;



  text-transform: uppercase !important;



  letter-spacing: 0.05em !important;



  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15) !important;



  z-index: 10 !important;



  pointer-events: none !important;



}







/* Archives & Headers */



.archive-header,



.page-header,



.search-header,



.entry-header {



  margin-bottom: 2rem;



}







.archive-title,



.page-title,



.search-title,



.entry-title {



  font-size: 1.875rem;



  font-weight: 800;



  color: #0f172a;



  letter-spacing: -0.025em;



  line-height: 1.25;



}







.archive-description {



  margin-top: 0.5rem;



  color: #64748b;



  font-size: 1rem;



}







/* Blog & Search Grid */



.blog-grid,



.search-grid {



  display: grid;



  grid-template-columns: repeat(1, minmax(0, 1fr));



  gap: 1.5rem;



}







@media (min-width: 768px) {



  .blog-grid,



  .search-grid {



    grid-template-columns: repeat(2, minmax(0, 1fr));



  }



}







@media (min-width: 1024px) {



  .blog-grid {



    grid-template-columns: repeat(3, minmax(0, 1fr));



  }



}







/* Post Components */



.post-featured-image,



.post-thumbnail-wrapper {



  overflow: hidden;



  border-radius: 0.75rem;



}







.post-card-title {



  font-size: 1rem;



  font-weight: 700;



  color: #0f172a;



  line-height: 1.4;



  margin-top: 0.75rem;



  margin-bottom: 0.5rem;



}







.post-card-title a {



  color: inherit;



  text-decoration: none;



  transition: color 0.2s ease;



}







.post-card-title a:hover {



  color: var(--color-primary);



}







.post-excerpt {



  color: #64748b;



  font-size: 1rem;



  line-height: 1.6;



}







.post-meta {



  display: flex;



  align-items: center;



  gap: 0.75rem;



  font-size: 1rem;



  color: #475569;



  margin-bottom: 0.5rem;



}







.post-footer {



  margin-top: auto;



  padding-top: 1rem;



  border-top: 1px solid #f1f5f9;



}







.post-navigation {



  display: flex;



  justify-content: space-between;



  gap: 1rem;



  padding: 2rem 0;



  border-top: 1px solid #e2e8f0;



  border-bottom: 1px solid #e2e8f0;



  margin: 3rem 0;



}







.prev-post,



.next-post {



  display: flex;



  flex-direction: column;



  text-decoration: none;



}







.post-share {



  display: flex;



  align-items: center;



  gap: 0.5rem;



}







.post-tags {



  display: flex;



  flex-wrap: wrap;



  gap: 0.5rem;



  margin-top: 1rem;



}







/* ==========================================================================



   WOOCOMMERCE & THEME PAGINATION STYLES



   ========================================================================== */



.woocommerce-pagination,



.shop-pagination-wrapper,



.pagination-wrapper {



  display: flex !important;



  justify-content: center !important;



  align-items: center !important;



  width: 100% !important;



  padding: 2.5rem 0 1.5rem !important;



  clear: both;



}







.woocommerce nav.woocommerce-pagination ul,



.woocommerce-pagination ul.page-numbers,



.shop-pagination-wrapper ul.page-numbers,



.pagination-wrapper .nav-links {



  display: inline-flex !important;



  flex-wrap: wrap !important;



  align-items: center !important;



  justify-content: center !important;



  gap: 0.5rem !important;



  margin: 0 !important;



  padding: 0 !important;



  list-style: none !important;



  border: none !important;



  border-width: 0 !important;



  box-shadow: none !important;



}







.woocommerce nav.woocommerce-pagination ul li,



.woocommerce-pagination ul.page-numbers li,



.shop-pagination-wrapper ul.page-numbers li,



.pagination-wrapper .nav-links li {



  margin: 0 !important;



  padding: 0 !important;



  list-style: none !important;



  display: inline-flex !important;



  border: none !important;



  border-right: none !important;



  border-width: 0 !important;



}







.woocommerce-pagination ul.page-numbers li .page-numbers,



.pagination-wrapper .nav-links .page-numbers {



  display: inline-flex !important;



  align-items: center !important;



  justify-content: center !important;



  min-width: 2.625rem !important; /* 42px */



  height: 2.625rem !important;



  padding: 0 0.875rem !important;



  font-size: 0.9375rem !important;



  font-weight: 600 !important;



  color: #334155 !important;



  background-color: #ffffff !important;



  border: 1px solid #e2e8f0 !important;



  border-radius: 0.625rem !important;



  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;



  text-decoration: none !important;



  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;



  line-height: 1 !important;



}







.woocommerce-pagination ul.page-numbers li a.page-numbers:hover,



.pagination-wrapper .nav-links a.page-numbers:hover {



  color: #075723 !important;



  background-color: #f0fdf4 !important;



  border-color: #075723 !important;



  box-shadow: 0 2px 4px rgba(7, 87, 35, 0.1) !important;



  transform: none !important;



}







.woocommerce-pagination ul.page-numbers li .page-numbers.current,



.pagination-wrapper .nav-links .page-numbers.current {



  color: #ffffff !important;



  background-color: #075723 !important;



  border-color: #075723 !important;



  box-shadow: 0 4px 12px rgba(7, 87, 35, 0.28) !important;



  font-weight: 700 !important;



  cursor: default !important;



  transform: none !important;



}







.woocommerce-pagination ul.page-numbers li .page-numbers.dots,



.pagination-wrapper .nav-links .page-numbers.dots {



  border-color: transparent !important;



  background-color: transparent !important;



  box-shadow: none !important;



  color: #94a3b8 !important;



  font-weight: 700 !important;



  cursor: default !important;



  padding: 0 0.375rem !important;



}







.woocommerce-pagination ul.page-numbers li .page-numbers.prev,



.woocommerce-pagination ul.page-numbers li .page-numbers.next,



.pagination-wrapper .nav-links .page-numbers.prev,



.pagination-wrapper .nav-links .page-numbers.next {



  font-size: 1.125rem !important;



  font-weight: 700 !important;



}







/* Empty / No content state */



.no-content-state,



.no-results {



  text-align: center;



  padding: 4rem 1.5rem;



  background-color: #ffffff;



  border-radius: 1rem;



  border: 1px solid #e2e8f0;



}







/* WooCommerce Components */



.woocommerce-products-header {



  margin-bottom: 2rem;



}







.woocommerce-products-header__title {



  font-size: 1.875rem;



  font-weight: 800;



  color: #0f172a;



}







.shop-toolbar {



  display: flex;



  flex-wrap: wrap;



  align-items: center;



  justify-content: space-between;



  gap: 1rem;



  padding: 1rem 1.25rem;



  background-color: #ffffff;



  border-radius: 0.75rem;



  border: 1px solid #e2e8f0;



  margin-bottom: 1.5rem;



}







.toolbar-result-count {



  font-size: 1rem;



  color: #64748b;



  margin: 0;



}







.toolbar-ordering select {



  font-size: 1rem;



  border: 1px solid #cbd5e1;



  border-radius: 0.5rem;



  padding: 0.5rem 2rem 0.5rem 0.75rem;



  background-color: #ffffff;



  color: #334155;



}







.woocommerce-breadcrumbs-nav {



  display: flex;



  align-items: center;



  gap: 0.5rem;



  font-size: 1rem;



  color: #64748b;



  margin-bottom: 1.5rem;



}







.woocommerce-breadcrumbs-nav a {



  color: #475569;



  text-decoration: none;



}







.woocommerce-breadcrumbs-nav a:hover {



  color: var(--color-primary);



}







/* Single Product Overrides */



.product-summary-wrapper {



  display: flex;



  flex-direction: column;



}







.product-summary-wrapper .product-title {



  font-size: 1.5rem;



  font-weight: 800;



  color: #0f172a;



  line-height: 1.3;



  margin-bottom: 0.75rem;



}







.product-summary-wrapper .product-price {



  font-size: 1.25rem;



  font-weight: 700;



  color: var(--color-accent);



  margin-bottom: 1rem;



}







.product-gallery-wrapper {



  position: relative;



}







.product-tabs-wrapper {



  margin-top: 3rem;



  padding-top: 2rem;



  border-top: 1px solid #e2e8f0;



}







/* Cart & Checkout Overrides */



.woocommerce-cart-wrapper,



.woocommerce-my-account-wrapper {



  background-color: #ffffff;



  border-radius: 1rem;



  border: 1px solid #e2e8f0;



  padding: 1.5rem;



}







@media (min-width: 768px) {



  .woocommerce-cart-wrapper,



  .woocommerce-my-account-wrapper {



    padding: 2.5rem;



  }



}







.cart-totals-inner,



.woocommerce-checkout-review-order {



  background-color: #f8fafc;



  border: 1px solid #e2e8f0;



  border-radius: 0.75rem;



  padding: 1.5rem;



}







.billing-details-wrapper,



.shipping-details-wrapper {



  background-color: #ffffff;



  border: 1px solid #e2e8f0;



  border-radius: 0.75rem;



  padding: 1.5rem;



  margin-bottom: 1.5rem;



}







.thankyou-order-details {



  background-color: #f0fdf4;



  border: 1px solid #bbf7d0;



  border-radius: 0.75rem;



  padding: 1.5rem;



}







/* Mini Cart */



.woocommerce-mini-cart {



  list-style: none;



  margin: 0;



  padding: 0;



}







.woocommerce-mini-cart-item {



  display: flex;



  align-items: center;



  gap: 1rem;



  padding: 0.75rem 0;



  border-bottom: 1px solid #f1f5f9;



}







.woocommerce-mini-cart__total {



  display: flex;



  justify-content: space-between;



  padding: 1rem 0;



  font-weight: 700;



  border-top: 2px solid #e2e8f0;



}







.woocommerce-mini-cart__buttons {



  display: flex;



  gap: 0.5rem;



}







.woocommerce-mini-cart__empty-message {



  padding: 2rem 1rem;



  text-align: center;



  color: #64748b;



}







/* Form Controls */



.woocommerce-form-row {



  margin-bottom: 1rem;



}







.woocommerce-form-row--wide {



  width: 100%;



}







.woocommerce-Input,



.woocommerce-form__input {



  width: 100%;



  border: 1px solid #cbd5e1;



  border-radius: 0.5rem;



  padding: 0.625rem 0.875rem;



  font-size: 1rem;



  transition: border-color 0.2s ease, box-shadow 0.2s ease;



}







.woocommerce-Input:focus,



.woocommerce-form__input:focus {



  outline: none;



  border-color: var(--color-primary);



  box-shadow: 0 0 0 2px rgba(13, 92, 36, 0.15);



}







.woocommerce-Button {



  display: inline-flex;



  align-items: center;



  justify-content: center;



  background-color: var(--color-primary);



  color: #ffffff;



  font-weight: 600;



  padding: 0.625rem 1.25rem;



  border-radius: 0.5rem;



  border: none;



  cursor: pointer;



  transition: background-color 0.2s ease;



}







.woocommerce-Button:hover {



  background-color: var(--color-primary-hover);



}







/* Comments */



.comments-area-wrapper {



  margin-top: 3rem;



  padding-top: 2rem;



  border-top: 1px solid #e2e8f0;



}











/* ==========================================================================



   14. ACCESSIBILITY, PROSE & WOOCOMMERCE SYSTEM TABLES



   ========================================================================== */







/* Screen Reader Text */



.screen-reader-text {



  border: 0;



  clip: rect(1px, 1px, 1px, 1px);



  clip-path: inset(50%);



  height: 1px;



  margin: -1px;



  overflow: hidden;



  padding: 0;



  position: absolute;



  width: 1px;



  word-wrap: normal !important;



}







.screen-reader-text:focus {



  background-color: #047857;



  border-radius: 0.25rem;



  clip: auto !important;



  clip-path: none;



  color: #ffffff;



  display: block;



  font-size: 1rem;



  font-weight: 700;



  height: auto;



  left: 1rem;



  line-height: normal;



  padding: 0.75rem 1.25rem;



  text-decoration: none;



  top: 1rem;



  width: auto;



  z-index: 100000;



}







/* Typography Prose & Entry Content */



.prose,



.entry-content,



.post-content {



  color: #334155;



  line-height: 1.75;



}







.prose p, .entry-content p, .post-content p {



  margin-top: 1.25em;



  margin-bottom: 1.25em;



}







.prose h2, .entry-content h2, .post-content h2 {



  font-size: 1.5em;



  margin-top: 1.75em;



  margin-bottom: 0.75em;



  font-weight: 700;



  color: #0f172a;



}







.prose h3, .entry-content h3, .post-content h3 {



  font-size: 1.25em;



  margin-top: 1.5em;



  margin-bottom: 0.5em;



  font-weight: 600;



  color: #0f172a;



}







.prose ul, .entry-content ul, .post-content ul {



  list-style-type: disc;



  margin-top: 1em;



  margin-bottom: 1em;



  padding-left: 1.5em;



}







.prose ol, .entry-content ol, .post-content ol {



  list-style-type: decimal;



  margin-top: 1em;



  margin-bottom: 1em;



  padding-left: 1.5em;



}







.prose img, .entry-content img, .post-content img {



  border-radius: 0.5rem;



  max-width: 100%;



  height: auto;



  margin: 1.5em 0;



}







.prose a, .entry-content a, .post-content a {



  color: var(--color-primary);



  text-decoration: underline;



}







/* WooCommerce Tables & Checkout Layouts */



.shop_table_responsive,



.woocommerce-cart-form__contents {



  width: 100%;



  border-collapse: collapse;



}







.shop_table_responsive th,



.shop_table_responsive td {



  padding: 0.75rem 1rem;



  border-bottom: 1px solid #e2e8f0;



  text-align: left;



}







.shop_table_responsive th {



  background-color: #f8fafc;



  font-weight: 600;



  color: #475569;



}







.col2-set {



  display: grid;



  grid-template-columns: 1fr;



  gap: 2rem;



}







@media (min-width: 768px) {



  .col2-set {



    grid-template-columns: 1fr 1fr;



  }



}







.cart-actions-row {



  display: flex;



  flex-wrap: wrap;



  align-items: center;



  justify-content: space-between;



  gap: 1rem;



  padding: 1.5rem 0;



}







.cart-empty-wrapper {



  text-align: center;



  padding: 4rem 1.5rem;



}







.return-to-shop .button {



  display: inline-flex;



  align-items: center;



  background-color: var(--color-primary);



  color: #ffffff;



  padding: 0.75rem 1.5rem;



  border-radius: 0.5rem;



  font-weight: 600;



  text-decoration: none;



}











/* ==========================================================================



   HEADER CATEGORY DROPDOWN PANEL



   ========================================================================== */



.category-dropdown-wrapper {



  position: relative;



}







.header-category-dropdown {



  position: absolute;



  top: 100%;



  left: 0;



  width: 100%;



  min-width: 100%;



  max-width: 100%;



  box-sizing: border-box;



  background-color: #ffffff;



  border-radius: 0 0 0.75rem 0.75rem;



  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.1);



  border: 1px solid #e2e8f0;



  border-top: none;



  z-index: 100;



  display: none;



  overflow: visible !important;



}







.header-category-dropdown .category-sidebar {



  width: 100% !important;



  max-width: 100% !important;



  box-sizing: border-box !important;



  border: none !important;



  box-shadow: none !important;



  border-radius: 0 0 0.75rem 0.75rem !important;



  background-color: transparent !important;



  overflow: visible !important;



}







.header-category-dropdown .cat-list-root {



  padding: 0.35rem 0;



}







.header-category-dropdown .cat-item:last-child > .cat-link {



  border-bottom-left-radius: 0.75rem;



  border-bottom-right-radius: 0.75rem;



}







.category-dropdown-wrapper:hover .header-category-dropdown,



.category-dropdown-wrapper.is-open .header-category-dropdown {



  display: block !important;



  animation: restekCatFadeIn 0.2s ease-out;



}







@keyframes restekCatFadeIn {



  from { opacity: 0; transform: translateY(-4px); }



  to { opacity: 1; transform: translateY(0); }



}















/* ==========================================================================



   SERVICES SECTION (5 POSTS B2B INDUSTRIAL LAYOUT)



   Row 1: 2 cards (50% each)



   Row 2: 3 cards (33.3% each)



   ========================================================================== */



.service-card-item {



  aspect-ratio: 16 / 9;



  position: relative;



  border-radius: 0.75rem;



  overflow: hidden;



  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);



  transition: transform 0.3s ease, box-shadow 0.3s ease;



  min-height: unset;



  display: flex;



  align-items: center;



  justify-content: center;



}







.service-card-item:hover {



  transform: translateY(-4px);



  box-shadow: 0 15px 25px -5px rgba(0, 0, 0, 0.2);



}







.service-card-item .service-bg-img {



  position: absolute;



  inset: 0;



  width: 100%;



  height: 100%;



  object-fit: cover;



  transition: transform 0.5s ease;



}







.service-card-item:hover .service-bg-img {



  transform: scale(1.08);



}







.service-card-item .service-card-overlay {



  position: absolute;



  inset: 0;



  background: linear-gradient(180deg, rgba(15, 23, 42, 0.45) 0%, rgba(15, 23, 42, 0.82) 100%);



  transition: background 0.3s ease;



}







.service-card-item:hover .service-card-overlay {



  background: linear-gradient(180deg, rgba(15, 23, 42, 0.3) 0%, rgba(15, 23, 42, 0.88) 100%);



}







.service-card-item .service-card-content {



  position: relative;



  z-index: 10;



  padding: 1.5rem;



  display: flex;



  flex-direction: column;



  align-items: center;



  justify-content: center;



  text-align: center;



  width: 100%;



  height: 100%;



}







.service-card-item .service-card-title {



  color: #ffffff;



  font-weight: 800;



  font-size: 1.125rem;



  line-height: 1.4;



  text-transform: uppercase;



  letter-spacing: 0.025em;



  margin-bottom: 1.25rem;



  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);



}







.service-btn-pill,



.service-card-item .service-btn-pill {



  display: inline-flex !important;



  align-items: center !important;



  gap: 0.375rem !important;



  background-color: #b43c00 !important;



  color: #ffffff !important;



  font-size: 0.875rem !important;



  font-weight: 700 !important;



  padding: 0.625rem 1.5rem !important;



  border-radius: 9999px !important;



  text-transform: uppercase !important;



  letter-spacing: 0.05em !important;



  box-shadow: 0 4px 8px -1px rgba(180, 60, 0, 0.35) !important;



  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;



  text-decoration: none !important;



  border: none !important;



}







.service-btn-pill:hover,



.service-btn-pill:focus-visible,



.service-card-item:hover .service-btn-pill {



  background-color: #9a3412 !important;



  color: #ffffff !important;



  transform: scale(1.04) !important;



  box-shadow: 0 6px 14px -2px rgba(180, 60, 0, 0.5) !important;



}







.service-btn-pill span,



.service-btn-pill svg,



.service-btn-pill * {



  background: none !important;



  background-color: transparent !important;



  box-shadow: none !important;



  padding: 0 !important;



  margin: 0 !important;



  border: none !important;



  border-radius: 0 !important;



  color: inherit !important;



}







/* Khoang cach giua cac hang dich vu tren trang Dich vu */



.service-row-card {



  margin-bottom: 2.5rem !important;



}







.service-row-card:last-child {



  margin-bottom: 0 !important;



}







@media (min-width: 1024px) {



  .service-row-card {



    margin-bottom: 3.5rem !important;



  }



}







/* ==========================================================================



   FOOTER STYLING (PRIMARY BRAND COLOR & PROMINENT SHORT DIVIDER)



   ========================================================================== */



.restek-commitments-section {



  background-color: #075723 !important;



  color: #ffffff;



}







.site-footer {



  background-color: #075723 !important; /* Màu primary chủ đạo RESTEK */



  color: #ffffff;



  position: relative;



}







.site-footer .footer-title-divider {



  width: 46px;



  height: 3.5px;



  background: linear-gradient(90deg, #f59e0b 0%, #ea580c 100%); /* Vàng cam sáng rực rỡ, tương phản cao */



  border-radius: 9999px;



  box-shadow: 0 1px 6px rgba(245, 158, 11, 0.55);



  margin-top: 0.5rem;



  margin-bottom: 1.25rem;



  display: block;



}







.site-footer .footer-contact-card {



  background: rgba(0, 0, 0, 0.22);



  border: 1px solid rgba(255, 255, 255, 0.16);



  border-radius: 0.75rem;



  padding: 0.75rem 0.875rem;



  transition: all 0.25s ease;



}







.site-footer .footer-contact-card:hover {



  background: rgba(0, 0, 0, 0.35);



  border-color: #f59e0b;



  transform: translateY(-2px);



  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);



}







/* ==========================================================================



   SINGLE POST TYPOGRAPHY & COMMENT SYSTEM STYLING



   ========================================================================== */







/* 1. Single Post Content Typography */



.single-post-card .post-content {



  color: #334155;



  line-height: 1.85;



  font-size: 1rem;



}







@media (min-width: 640px) {



  .single-post-card .post-content {



    font-size: 1.0625rem;



  }



}







.single-post-card .post-content > * + * {



  margin-top: 1.5em;



}







.single-post-card .post-content h2 {



  font-size: 1.5rem;



  font-weight: 800;



  color: #0f172a;



  margin-top: 2rem;



  margin-bottom: 0.85rem;



  padding-left: 0.875rem;



  border-left: 4px solid #059669;



  line-height: 1.35;



}







.single-post-card .post-content h3 {



  font-size: 1.25rem;



  font-weight: 700;



  color: #0f172a;



  margin-top: 1.75rem;



  margin-bottom: 0.65rem;



  line-height: 1.4;



}







.single-post-card .post-content h4 {



  font-size: 1.1rem;



  font-weight: 600;



  color: #1e293b;



  margin-top: 1.5rem;



  margin-bottom: 0.5rem;



}







.single-post-card .post-content p {



  margin-top: 1.2em;



  margin-bottom: 1.2em;



  color: #334155;



  line-height: 1.8;



}







.single-post-card .post-content blockquote {



  border-left: 4px solid #059669;



  background-color: #f8fafc;



  padding: 1.25rem 1.5rem;



  border-radius: 0 0.875rem 0.875rem 0;



  font-style: italic;



  color: #475569;



  margin: 1.75em 0;



  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.02);



}







.single-post-card .post-content ul {



  list-style-type: disc;



  margin: 1.25em 0;



  padding-left: 1.5em;



}







.single-post-card .post-content ol {



  list-style-type: decimal;



  margin: 1.25em 0;



  padding-left: 1.5em;



}







.single-post-card .post-content li {



  margin-bottom: 0.5em;



  line-height: 1.7;



}







.single-post-card .post-content img {



  max-width: 100%;



  height: auto;



  border-radius: 0.875rem;



  margin: 1.75rem auto;



  display: block;



  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);



}







.single-post-card .post-content table {



  width: 100%;



  border-collapse: collapse;



  margin: 1.75rem 0;



  border-radius: 0.75rem;



  overflow: hidden;



  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);



}







.single-post-card .post-content th,



.single-post-card .post-content td {



  padding: 0.75rem 1rem;



  border: 1px solid #e2e8f0;



  font-size: 1rem;



}







.single-post-card .post-content th {



  background-color: #f1f5f9;



  font-weight: 700;



  color: #0f172a;



  text-align: left;



}







.single-post-card .post-content tr:nth-child(even) {



  background-color: #f8fafc;



}







/* 2. Comments Area & List Styling */



.comments-area {



  position: relative;



}







.comments-area .comment-list {



  list-style: none !important;



  padding: 0 !important;



  margin: 0 !important;



}







.comments-area .comment-item {



  list-style: none !important;



  margin-bottom: 1.25rem;



}







.comments-area .children {



  list-style: none !important;



  margin-top: 1rem;



  margin-left: 1.25rem;



  padding-left: 1rem;



  border-left: 2px solid #e2e8f0;



}







@media (min-width: 640px) {



  .comments-area .children {



    margin-left: 2.25rem;



    padding-left: 1.25rem;



  }



}







.comments-area .comment-body {



  transition: all 0.2s ease-in-out;



}







.comments-area .comment-body:hover {



  background-color: #ffffff;



  border-color: #a7f3d0;



  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);



}







/* 3. Comment Form Styling */



.comment-form-wrapper .comment-form {



  display: flex;



  flex-direction: column;



  gap: 1rem;



}







.comment-form-wrapper .comment-form label {



  display: block;



  font-size: 1rem;



  font-weight: 700;



  text-transform: uppercase;



  letter-spacing: 0.025em;



  color: #334155;



  margin-bottom: 0.375rem;



}







.comment-form-wrapper .comment-form input[type="text"],



.comment-form-wrapper .comment-form input[type="email"],



.comment-form-wrapper .comment-form textarea {



  width: 100%;



  padding: 0.65rem 0.875rem;



  font-size: 1rem;



  background-color: #f8fafc;



  border: 1px solid #cbd5e1;



  border-radius: 0.75rem;



  color: #1e293b;



  transition: all 0.2s ease;



}







.comment-form-wrapper .comment-form input[type="text"]:focus,



.comment-form-wrapper .comment-form input[type="email"]:focus,



.comment-form-wrapper .comment-form textarea:focus {



  background-color: #ffffff;



  border-color: #059669;



  outline: none;



  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.15);



}







.comment-form-wrapper .comment-form .submit-btn {



  background-color: #b43c00;



  color: #ffffff;



  font-size: 1rem;



  font-weight: 700;



  text-transform: uppercase;



  letter-spacing: 0.025em;



  padding: 0.75rem 1.75rem;



  border-radius: 0.75rem;



  border: none;



  cursor: pointer;



  display: inline-flex;



  align-items: center;



  gap: 0.5rem;



  box-shadow: 0 4px 6px -1px rgba(211, 84, 0, 0.25);



  transition: all 0.2s ease;



}







.comment-form-wrapper .comment-form .submit-btn:hover {



  background-color: #9a3412;



  transform: translateY(-1px);



  box-shadow: 0 6px 12px -2px rgba(211, 84, 0, 0.35);



}







.comment-form-wrapper #cancel-comment-reply-link {



  color: #ef4444;



  font-size: 1rem;



  text-decoration: underline;



  margin-left: 0.5rem;



}







/* ==========================================================================



   PARTNERS & CLIENTS MARQUEE SLIDER



   ========================================================================== */



.partners-swiper {



  width: 100%;



  overflow: hidden;



  padding: 0.75rem 0;



}







.partners-swiper .swiper-wrapper {



  -webkit-transition-timing-function: linear !important;



  transition-timing-function: linear !important;



  display: flex;



  align-items: center;



}







.partners-swiper .swiper-slide {



  display: flex !important;



  align-items: center;



  justify-content: center;



  height: 76px;



  background-color: #ffffff;



  border-radius: 0.75rem;



  border: 1px solid #f1f5f9;



  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);



  padding: 0.75rem 1.25rem;



  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;



  user-select: none;



}







.partners-swiper .swiper-slide:hover {



  transform: translateY(-2px);



  border-color: #cbd5e1;



  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);



}







.partners-swiper .swiper-slide img {



  max-height: 42px;



  max-width: 100%;



  width: auto;



  object-fit: contain;



  filter: none !important;



  opacity: 1 !important;



  pointer-events: none;



}







/* Section 6: Commitments Section Background Primary Color */



.restek-commitments-section {



  background-color: #075723 !important;



  color: #ffffff !important;



}







.restek-commitments-section h3 {



  color: #ffffff !important;



}







.restek-commitments-section p {



  color: rgba(236, 253, 245, 0.9) !important;



}







/* ==========================================================================



   WOOCOMMERCE SINGLE PRODUCT REVIEWS & COMMENT FORM STYLES



   ========================================================================== */



.woocommerce-Reviews {



  display: block !important;



  max-width: 56rem !important;



  margin: 0 auto !important;



}







.woocommerce-Reviews #comments {



  margin-bottom: 2rem !important;



}







.woocommerce-Reviews .woocommerce-Reviews-title {



  font-size: 1.25rem !important;



  font-weight: 800 !important;



  color: #0f172a !important;



  margin-bottom: 1rem !important;



  display: flex !important;



  align-items: center !important;



  gap: 0.5rem !important;



}







.woocommerce-Reviews .woocommerce-noreviews {



  background-color: #f8fafc !important;



  border: 1px solid #e2e8f0 !important;



  border-radius: 0.75rem !important;



  padding: 1.25rem 1.5rem !important;



  color: #64748b !important;



  font-size: 0.9375rem !important;



  margin-bottom: 1.5rem !important;



  line-height: 1.6 !important;



}







/* Danh sách đánh giá / reviews list */



.woocommerce-Reviews .commentlist {



  list-style: none !important;



  padding: 0 !important;



  margin: 0 0 2rem 0 !important;



  display: flex !important;



  flex-direction: column !important;



  gap: 1rem !important;



}







.woocommerce-Reviews .commentlist li.review {



  background-color: #ffffff !important;



  border: 1px solid #e2e8f0 !important;



  border-radius: 0.875rem !important;



  padding: 1.25rem 1.5rem !important;



  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;



}







.woocommerce-Reviews .commentlist li.review .comment_container {



  display: flex !important;



  gap: 1rem !important;



}







.woocommerce-Reviews .commentlist li.review img.avatar {



  width: 44px !important;



  height: 44px !important;



  border-radius: 9999px !important;



  border: 2px solid #e2e8f0 !important;



  object-fit: cover !important;



}







.woocommerce-Reviews .commentlist li.review .comment-text {



  flex: 1 !important;



}







.woocommerce-Reviews .commentlist li.review .meta {



  font-size: 0.875rem !important;



  color: #64748b !important;



  margin-bottom: 0.5rem !important;



}







.woocommerce-Reviews .commentlist li.review .meta strong {



  color: #0f172a !important;



  font-weight: 700 !important;



}







/* Khối Form Viết Đánh Giá B2B */



#review_form_wrapper {



  background-color: #f8fafc !important;



  border: 1px solid #e2e8f0 !important;



  border-radius: 1rem !important;



  padding: 1.75rem !important;



  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;



}







@media (min-width: 640px) {



  #review_form_wrapper {



    padding: 2.25rem !important;



  }



}







#review_form .comment-reply-title {



  display: block !important;



  font-size: 1.125rem !important;



  font-weight: 800 !important;



  color: #075723 !important;



  text-transform: uppercase !important;



  letter-spacing: 0.025em !important;



  margin-bottom: 0.5rem !important;



}







#review_form .comment-notes {



  font-size: 0.8125rem !important;



  color: #64748b !important;



  margin-bottom: 1.25rem !important;



}







#review_form .comment-notes .required,



#review_form label .required {



  color: #ef4444 !important;



  font-weight: 700 !important;



}







/* Đánh giá sao (Stars Rating) */



.comment-form-rating {



  margin-bottom: 1.25rem !important;



  display: flex !important;



  flex-direction: column !important;



  gap: 0.375rem !important;



}







.comment-form-rating label {



  font-size: 0.8125rem !important;



  font-weight: 700 !important;



  color: #334155 !important;



  text-transform: uppercase !important;



  letter-spacing: 0.03em !important;



}







.comment-form-rating .stars {



  margin: 0 !important;



}







.comment-form-rating .stars span {



  display: inline-flex !important;



  align-items: center !important;



  gap: 0.5rem !important;



}







.comment-form-rating .stars a {



  position: relative !important;



  display: inline-flex !important;



  align-items: center !important;



  justify-content: center !important;



  width: 1.5rem !important;



  height: 1.5rem !important;



  font-size: 1.35rem !important;



  color: #f59e0b !important;



  text-decoration: none !important;



  background: transparent !important;



  background-color: transparent !important;



  border: none !important;



  box-shadow: none !important;



  border-radius: 0 !important;



  padding: 0 !important;



  margin: 0 !important;



  transition: transform 0.15s ease, color 0.15s ease !important;



}







.comment-form-rating .stars a::before {



  position: absolute !important;



  inset: 0 !important;



  width: 100% !important;



  height: 100% !important;



  display: flex !important;



  align-items: center !important;



  justify-content: center !important;



  text-align: center !important;



  line-height: 1 !important;



  color: #f59e0b !important;



}







.comment-form-rating .stars a:hover,



.comment-form-rating .stars a.active {



  background: transparent !important;



  background-color: transparent !important;



  border: none !important;



  box-shadow: none !important;



  color: #d97706 !important;



  transform: scale(1.15) !important;



}







.comment-form-rating .stars a:hover::before,



.comment-form-rating .stars a.active::before {



  color: #d97706 !important;



}







/* Các trường form nhập dữ liệu */



#review_form .comment-form-comment,



#review_form .comment-form-author,



#review_form .comment-form-email {



  margin-bottom: 1.25rem !important;



}







#review_form label {



  display: block !important;



  font-size: 0.8125rem !important;



  font-weight: 700 !important;



  color: #334155 !important;



  text-transform: uppercase !important;



  letter-spacing: 0.03em !important;



  margin-bottom: 0.5rem !important;



}







#review_form textarea,



#review_form input[type="text"],



#review_form input[type="email"] {



  display: block !important;



  width: 100% !important;



  padding: 0.75rem 1rem !important;



  font-size: 0.9375rem !important;



  color: #0f172a !important;



  background-color: #ffffff !important;



  border: 1px solid #cbd5e1 !important;



  border-radius: 0.625rem !important;



  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;



  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;



}







#review_form textarea {



  min-height: 120px !important;



  resize: vertical !important;



}







#review_form textarea:focus,



#review_form input[type="text"]:focus,



#review_form input[type="email"]:focus {



  border-color: #075723 !important;



  outline: none !important;



  box-shadow: 0 0 0 3px rgba(7, 87, 35, 0.18) !important;



}







/* Lưới 2 cột cho Tên & Email trên desktop */



@media (min-width: 640px) {



  #review_form .comment-form {



    display: flex !important;



    flex-wrap: wrap !important;



  }



  #review_form .comment-notes,



  #review_form .comment-form-rating,



  #review_form .comment-form-comment,



  #review_form .comment-form-cookies-consent,



  #review_form .form-submit {



    width: 100% !important;



  }



  #review_form .comment-form-author {



    width: calc(50% - 0.5rem) !important;



    margin-right: 1rem !important;



  }



  #review_form .comment-form-email {



    width: calc(50% - 0.5rem) !important;



  }



}







/* Checkbox lưu cookie */



#review_form .comment-form-cookies-consent {



  display: flex !important;



  align-items: flex-start !important;



  gap: 0.625rem !important;



  margin-bottom: 1.5rem !important;



}







#review_form .comment-form-cookies-consent input[type="checkbox"] {



  width: 1.125rem !important;



  height: 1.125rem !important;



  margin-top: 0.125rem !important;



  accent-color: #075723 !important;



  cursor: pointer !important;



  flex-shrink: 0 !important;



}







#review_form .comment-form-cookies-consent label {



  font-size: 0.8125rem !important;



  font-weight: 500 !important;



  color: #64748b !important;



  text-transform: none !important;



  letter-spacing: normal !important;



  line-height: 1.4 !important;



  margin-bottom: 0 !important;



  cursor: pointer !important;



}







/* Nút Submit Gửi Đánh Giá */



#review_form .form-submit {



  margin-bottom: 0 !important;



}







#review_form .form-submit input[type="submit"],



#review_form .submit {



  display: inline-flex !important;



  align-items: center !important;



  justify-content: center !important;



  padding: 0.75rem 2.25rem !important;



  background-color: #075723 !important;



  color: #ffffff !important;



  font-size: 0.9375rem !important;



  font-weight: 700 !important;



  text-transform: uppercase !important;



  letter-spacing: 0.05em !important;



  border: none !important;



  border-radius: 0.625rem !important;



  box-shadow: 0 4px 10px rgba(7, 87, 35, 0.25) !important;



  cursor: pointer !important;



  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;



}







#review_form .form-submit input[type="submit"]:hover,



#review_form .submit:hover {



  background-color: #054019 !important;



  box-shadow: 0 6px 14px rgba(7, 87, 35, 0.35) !important;



  transform: translateY(-2px) !important;



}







/* ==========================================================================



   FOOTER PAYMENT ICONS SPACING



   ========================================================================== */



.footer-payment-title {



  margin-bottom: 0.875rem !important;



  display: block !important;



  color: #ffffff !important;



  font-weight: 600 !important;



}







.footer-payment-list {



  display: flex !important;



  align-items: center !important;



  flex-wrap: wrap !important;



  gap: 0.625rem !important;



  margin-top: 0.875rem !important;



}







/* ==========================================================================



   SINGLE PRODUCT CTA BUTTONS (TRÁNH CHỮ BỊ CHÌM)



   ========================================================================== */



.btn-hotline-cta {



  background-color: #075723 !important;



  color: #ffffff !important;



}







.btn-hotline-cta:hover {



  background-color: #054019 !important;



  color: #ffffff !important;



}







.btn-zalo-cta {



  background-color: #0054cc !important;



  color: #ffffff !important;



}







.btn-zalo-cta:hover {



  background-color: #0054cc !important;



  color: #ffffff !important;



}







/* ==========================================================================



   PAGE ABOUT (GIỚI THIỆU) HERO & BANNER STYLING



   ========================================================================== */



.about-hero-section {



  background: linear-gradient(135deg, #075723 0%, #0d6e2e 50%, #043d18 100%) !important;



  color: #ffffff !important;



}







.about-hero-section h1,



.about-hero-section p,



.about-hero-section span {



  color: #ffffff !important;



}







.about-contact-banner {



  background-color: #075723 !important;



  color: #ffffff !important;



  margin-bottom: 3.5rem !important;



}







/* ==========================================================================



   DESKTOP STICKY SIDEBAR (SINGLE POST & SINGLE SERVICE)



   ========================================================================== */



.sidebar-sticky-desktop {



  position: relative;



}







@media (min-width: 1024px) {



  .sidebar-sticky-desktop {



    position: -webkit-sticky !important;



    position: sticky !important;



    top: 6rem !important;



    align-self: flex-start !important;



  }



}







/* ==========================================================================



   HEADER SEARCH BUTTON (LOGO RED #dc2626)



   ========================================================================== */



.restek-search-bar .search-submit {



  background-color: #dc2626 !important;



  transition: background-color 0.2s ease !important;



}







.restek-search-bar .search-submit:hover {



  background-color: #b91c1c !important;



}







/* ==========================================================================



   13. CONTACT FORM & SECTION (FRONT-PAGE & PAGE-CONTACT)



   ========================================================================== */



.contact-info-list {



  display: flex !important;



  flex-direction: column !important;



  gap: 1.25rem !important; /* 20px khoảng cách giữa các icon box */



}







.contact-info-card {



  display: flex !important;



  align-items: flex-start !important;



  margin-bottom: 0 !important;



}







/* Fallback margin-top so even without flex gap, items never touch each other */



.contact-info-list > .contact-info-card + .contact-info-card {



  margin-top: 1.25rem !important;



}







.btn-contact-submit,



button.btn-contact-submit,



#contact-submit-btn {



  background-color: #dc2626 !important; /* Đỏ thương hiệu logo RESTEK */



  color: #ffffff !important;



  font-weight: 800 !important;



  text-transform: uppercase !important;



  letter-spacing: 0.05em !important;



  padding: 0.875rem 2rem !important;



  border-radius: 0.75rem !important;



  box-shadow: 0 10px 25px -3px rgba(220, 38, 38, 0.4) !important;



  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;



  display: inline-flex !important;



  align-items: center !important;



  justify-content: center !important;



  border: none !important;



  cursor: pointer !important;



}







.btn-contact-submit:hover,



button.btn-contact-submit:hover,



#contact-submit-btn:hover {



  background-color: #b91c1c !important; /* Đỏ đậm khi hover */



  color: #ffffff !important;



  box-shadow: 0 14px 28px -2px rgba(220, 38, 38, 0.55) !important;



  transform: translateY(-2px) !important;



}







.btn-contact-submit svg,



#contact-submit-btn svg {



  color: #ffffff !important;



  stroke: #ffffff !important;



}



















/* ==========================================================================



   SERVICE CARD COMPONENT (.service-card)



   ========================================================================== */



.service-card {



  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;



}







.service-card:hover {



  transform: translateY(-4px);



  border-color: #075723;



  box-shadow: 0 12px 24px -4px rgba(7, 87, 35, 0.12);



}







.service-card .service-thumb img {



  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);



}







.service-card:hover .service-thumb img {



  transform: none !important;



}







.service-card .btn-service-cta {



  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);



}







.service-card:hover .btn-service-cta {



  background-color: #075723;



  color: #ffffff;



  border-color: #075723;



}







.service-card:hover .btn-service-cta svg {



  transform: translateX(4px);



}







/* ==========================================================================



   DOWNLOAD COMPANY PROFILE BUTTON (.btn-profile-download)



   ========================================================================== */



.btn-profile-download {



  background-color: #b43c00 !important;



  color: #ffffff !important;



  transition: background-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;



}







.btn-profile-download:hover {



  background-color: #9a3412 !important;



  color: #ffffff !important;



  box-shadow: 0 6px 16px -2px rgba(180, 60, 0, 0.45);



}















/* ==========================================================================



   CONTACT PAGE GOOGLE MAPS WRAPPER



   ========================================================================== */



.contact-map-wrapper iframe {



  width: 100% !important;



  height: 100% !important;



  min-height: 380px !important;



  border: 0 !important;



  border-radius: 0.75rem !important;



  display: block;



}











/* ==========================================================================



   CONTACT PAGE GOOGLE MAPS WRAPPER



   ========================================================================== */



.contact-map-wrapper iframe {



  width: 100% !important;



  height: 100% !important;



  min-height: 380px !important;



  border: 0 !important;



  border-radius: 0.75rem !important;



  display: block;



}











/* ==========================================================================



   PRODUCT THUMBNAILS SWIPER SLIDER



   ========================================================================== */



.product-thumbs-slider-wrapper {



  user-select: none;



}







.product-thumbs-swiper {



  padding: 4px 2px;



}







.product-thumb-nav-btn {



  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);



  transition: all 0.2s ease;



}







.product-thumb-nav-btn:hover:not(.swiper-button-disabled) {



  background-color: #075723 !important;



  color: #ffffff !important;



  border-color: #075723 !important;



  transform: translateY(-50%) scale(1.1);



}







.product-thumb-nav-btn.swiper-button-disabled {



  opacity: 0.3;



  cursor: not-allowed;



  pointer-events: none;



}











/* ==========================================================================



   QUY CHUAN TY LE ANH CARD: 16/9 & OBJECT-FIT: COVER (NGOAI TRU PRODUCT CARD)



   ========================================================================== */



.service-card-item,



.service-card-item.aspect-\[16\/9\] {



  aspect-ratio: 16 / 9 !important;



  min-height: unset !important;



}







.service-card-item .service-bg-img,



.service-card-item img {



  width: 100% !important;



  height: 100% !important;



  object-fit: cover !important;



}







/* Service row card image in page-dich-vu */



.service-row-card a.aspect-\[16\/9\],



.service-row-card .aspect-\[16\/9\] {



  aspect-ratio: 16 / 9 !important;



  width: 100% !important;



}







.service-row-card a.aspect-\[16\/9\] img,



.service-row-card .aspect-\[16\/9\] img {



  width: 100% !important;



  height: 100% !important;



  object-fit: cover !important;



}







/* Blog / News / Article Cards across all pages */



.blog-card .post-thumbnail-wrapper,



.blog-card .post-thumbnail-wrapper a,



article:not(.restek-product-card):not(.related-product-card):not(.product) .post-thumbnail-wrapper,



article:not(.restek-product-card):not(.related-product-card):not(.product) a.aspect-\[16\/9\],



article:not(.restek-product-card):not(.related-product-card):not(.product) a.aspect-\[16\/10\],



article:not(.restek-product-card):not(.related-product-card):not(.product) a.aspect-video,



article:not(.restek-product-card):not(.related-product-card):not(.product) .aspect-\[16\/9\],



article:not(.restek-product-card):not(.related-product-card):not(.product) .aspect-video {



  aspect-ratio: 16 / 9 !important;



  width: 100% !important;



}







.blog-card .post-thumbnail-wrapper img,



article:not(.restek-product-card):not(.related-product-card):not(.product) .post-thumbnail-wrapper img,



article:not(.restek-product-card):not(.related-product-card):not(.product) a.aspect-\[16\/9\] img,



article:not(.restek-product-card):not(.related-product-card):not(.product) a.aspect-\[16\/10\] img,



article:not(.restek-product-card):not(.related-product-card):not(.product) a.aspect-video img,



article:not(.restek-product-card):not(.related-product-card):not(.product) .aspect-\[16\/9\] img,



article:not(.restek-product-card):not(.related-product-card):not(.product) .aspect-video img {



  width: 100% !important;



  height: 100% !important;



  object-fit: cover !important;



}











/* ==========================================================================



   SERVICE BUTTON DETAIL (NÚT XEM CHI TIẾT DỊCH VỤ - SỬA LỖI HOVER CHỮ TRẮNG)



   ========================================================================== */



.service-btn-detail {



  display: inline-flex !important;



  align-items: center !important;



  gap: 0.5rem !important;



  padding: 0.625rem 1.5rem !important;



  border-radius: 9999px !important;



  background-color: #f1f5f9 !important;



  color: #1e293b !important;



  font-weight: 700 !important;



  font-size: 0.75rem !important;



  text-transform: uppercase !important;



  letter-spacing: 0.05em !important;



  border: 1px solid #cbd5e1 !important;



  text-decoration: none !important;



  transition: all 0.2s ease !important;



  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;



}







.service-btn-detail:hover,



.service-btn-detail:focus-visible {



  background-color: #075723 !important;



  color: #ffffff !important;



  border-color: #075723 !important;



  transform: translateY(-1px) !important;



  box-shadow: 0 4px 10px rgba(7, 87, 35, 0.25) !important;



}







.service-btn-detail:hover span,



.service-btn-detail:hover svg,



.service-btn-detail:hover * {



  color: #ffffff !important;



  stroke: #ffffff !important;



}







/* ==========================================================================



   SWIPER PAGINATION BULLETS ACCESSIBLE TARGET SIZE (WCAG 2.2 AA / AAA >= 44x44px)



   ========================================================================== */



.swiper-pagination-bullet {



  position: relative !important;



  display: inline-block !important;



  margin: 0 6px !important;



  width: 12px !important;



  height: 12px !important;



  transition: all 0.3s ease !important;



}







/* Pseudo-element tạo vùng chạm chuẩn tiếp cận (Touch Target Size >= 44x44px) */



.swiper-pagination-bullet::before {



  content: "" !important;



  position: absolute !important;



  top: 50% !important;



  left: 50% !important;



  transform: translate(-50%, -50%) !important;



  min-width: 44px !important;



  min-height: 44px !important;



  width: 44px !important;



  height: 44px !important;



  cursor: pointer !important;



  z-index: 10 !important;



}







/* ==========================================================================



   GTRANSLATE TOPBAR STYLING



   ========================================================================== */



.header-gtranslate-box {



  min-height: 24px;



}







.header-gtranslate-box .gtranslate_wrapper,



.header-gtranslate-box .gtranslate_wrapper * {



  display: inline-flex;



  align-items: center;



}







.header-gtranslate-box img {



  border-radius: 2px;



  vertical-align: middle;



}







.header-gtranslate-box a {



  margin: 0 3px;



  display: inline-flex;



  align-items: center;



  transition: opacity 0.2s ease;



}







.header-gtranslate-box a:hover {



  opacity: 0.8;



}







/* ==========================================================================



   PRODUCT HIERARCHICAL CATEGORY SIDEBAR STYLING



   ========================================================================== */



.product-cat-tree .cat-item-parent.is-expanded {



  background-color: rgba(7, 87, 35, 0.05);



}







.product-cat-tree .subcat-tree-list {



  transition: max-height 0.3s ease;



}







.cat-toggle-btn.rotate-180 svg {



  transform: rotate(180deg);



}







.cat-toggle-btn svg {



  transition: transform 0.2s ease;



}











/* ==========================================================================



   CONTACT PROFILE CARD & BUTTON (BO TRÒN 4 GÓC 2XL = 16PX)



   ========================================================================== */



.contact-profile-card {



  border-radius: 1rem !important; /* 16px */



  overflow: hidden !important;



  border: 1px solid #e2e8f0 !important;



  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;



  background-color: #ffffff !important;



}







.contact-profile-card .btn-profile-download,



.btn-profile-download.rounded-t-2xl {



  border-top-left-radius: 1rem !important;



  border-top-right-radius: 1rem !important;



  border-bottom-left-radius: 0 !important;



  border-bottom-right-radius: 0 !important;



}











/* ==========================================================================



   WOOCOMMERCE PRODUCT ARCHIVE & GRID OVERRIDES



   ========================================================================== */



.woocommerce ul.products,



.woocommerce-page ul.products,



ul.products {



  display: grid !important;



  float: none !important;



  list-style: none !important;



  margin: 0 !important;



  padding: 0 !important;



  clear: both !important;



}







.woocommerce ul.products::before,



.woocommerce ul.products::after,



.woocommerce-page ul.products::before,



.woocommerce-page ul.products::after,



ul.products::before,



ul.products::after {



  display: none !important;



  content: none !important;



}







.woocommerce ul.products li.product,



.woocommerce-page ul.products li.product,



ul.products li.product,



li.product.restek-product-card,



.restek-product-card {



  float: none !important;



  width: 100% !important;



  max-width: 100% !important;



  margin: 0 !important;



  clear: none !important;



  box-sizing: border-box !important;



  padding: 1rem !important;



  display: flex !important;



  flex-direction: column !important;



  height: 100% !important;



}







ul.products {



  display: grid !important;



  align-items: stretch !important;



}







/* Category Sidebar Accordion Styling */



.product-cat-tree .cat-item-parent.is-expanded {



  background-color: rgba(7, 87, 35, 0.06);



}



.product-cat-tree .cat-toggle-btn.rotate-180 {



  transform: rotate(180deg);



}







/* WooCommerce Result Count & Ordering styling */



.shop-toolbar .woocommerce-result-count {



  margin: 0 !important;



  color: #475569 !important;



  font-size: 0.8125rem !important;



}



.shop-toolbar .woocommerce-ordering {



  margin: 0 !important;



  float: none !important;



}



.shop-toolbar .woocommerce-ordering select {



  padding: 0.5rem 0.875rem !important;



  border-radius: 0.5rem !important;



  border: 1px solid #cbd5e1 !important;



  background-color: #ffffff !important;



  font-size: 0.75rem !important;



  color: #334155 !important;



  outline: none !important;



}



.shop-toolbar .woocommerce-ordering select:focus {



  border-color: #075723 !important;



  box-shadow: 0 0 0 1px #075723 !important;



}











/* ==========================================================================



   SIDEBAR PRODUCT CATEGORY ACCORDION TREE



   ========================================================================== */



.product-cat-tree {



  list-style: none !important;



  margin: 0 !important;



  padding: 0 !important;



}







.product-cat-tree .cat-item-parent {



  margin-bottom: 2px;



}







.product-cat-tree .cat-item-row {



  cursor: pointer;



}







.product-cat-tree .cat-item-row:hover .cat-count-badge {



  background-color: #d1fae5;



  color: #075723;



}







.product-cat-tree .cat-item-parent.is-expanded > .cat-item-row {



  background-color: rgba(7, 87, 35, 0.08);



}







.product-cat-tree .cat-toggle-btn.rotate-180 {



  transform: rotate(180deg);



}







.product-cat-tree .subcat-tree-list {



  list-style: none !important;



}







/* Custom Sleek Scrollbar for Sidebar Category Tree */



.cat-scroll-container::-webkit-scrollbar {



  width: 5px;



}



.cat-scroll-container::-webkit-scrollbar-track {



  background: #f1f5f9;



  border-radius: 4px;



}



.cat-scroll-container::-webkit-scrollbar-thumb {



  background: #cbd5e1;



  border-radius: 4px;



}



.cat-scroll-container::-webkit-scrollbar-thumb:hover {



  background: #94a3b8;



}







/* Product Card Detail Button Hover Animation */



.restek-product-card {



  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;



}



.restek-product-card:hover {



  transform: translateY(-0.5rem) !important;



  box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.1), 0 8px 16px -6px rgba(0, 0, 0, 0.04) !important;



  border-color: #075723 !important;



}











/* ==========================================================================



   HERO CTA BUTTONS (CHIỀU CAO ĐỒNG BỘ 48PX CHO CẢ 2 NÚT BẤM)



   ========================================================================== */



.hero-btn-primary,



.btn-hero-catalog {



  display: inline-flex !important;



  align-items: center !important;



  justify-content: center !important;



  height: 48px !important;



  min-height: 48px !important;



  padding: 0 1.5rem !important;



  font-size: 0.875rem !important;



  font-weight: 700 !important;



  line-height: 1 !important;



  border-radius: 0.5rem !important;



  box-sizing: border-box !important;



  text-decoration: none !important;



  white-space: nowrap !important;



  transition: all 0.25s ease !important;



}







.hero-btn-primary {



  background-color: #047857 !important;



  color: #ffffff !important;



  border: 1.5px solid #047857 !important;



  box-shadow: 0 4px 14px rgba(4, 120, 87, 0.4) !important;



}



.hero-btn-primary:hover {



  background-color: #065f46 !important;



  border-color: #065f46 !important;



  color: #ffffff !important;



  transform: translateY(-2px) !important;



  box-shadow: 0 6px 18px rgba(4, 120, 87, 0.55) !important;



}







.btn-hero-catalog {



  background-color: rgba(255, 255, 255, 0.12) !important;



  border: 1.5px solid rgba(255, 255, 255, 0.85) !important;



  color: #ffffff !important;



  backdrop-filter: blur(6px) !important;



  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;



}



.btn-hero-catalog:hover {



  background-color: #ffffff !important;



  color: #075723 !important;



  border-color: #ffffff !important;



  transform: translateY(-2px) !important;



  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25) !important;



}







/* ==========================================================================



   SERVICE CTA BOX (CHI TIẾT DỊCH VỤ & BÀI VIẾT)



   ========================================================================== */



.service-cta-box {



  background: #f0fdf4 !important;



  border: 1px solid #bbf7d0 !important;



  border-left: 5px solid #075723 !important;



  border-radius: 1rem !important;



  box-shadow: 0 4px 12px -2px rgba(7, 87, 35, 0.08) !important;



  padding: 1.5rem !important;



}



.service-cta-box h3 {



  color: #064e3b !important;



  font-weight: 800 !important;



  font-size: 1.125rem !important;



  line-height: 1.4 !important;



  margin-top: 0 !important;



  margin-bottom: 0.375rem !important;



}



.service-cta-box p {



  color: #334155 !important;



  font-size: 0.875rem !important;



  line-height: 1.5 !important;



  margin-top: 0 !important;



  margin-bottom: 0 !important;



}



.service-cta-box .btn-hotline-cta {



  background-color: #075723 !important;



  color: #ffffff !important;



  font-weight: 700 !important;



  box-shadow: 0 2px 6px rgba(7, 87, 35, 0.3) !important;



}



.service-cta-box .btn-hotline-cta:hover {



  background-color: #054019 !important;



}



.service-cta-box .btn-zalo-cta {



  background-color: #0068ff !important;



  color: #ffffff !important;



  font-weight: 700 !important;



  box-shadow: 0 2px 6px rgba(0, 104, 255, 0.3) !important;



}



.service-cta-box .btn-zalo-cta:hover {



  background-color: #0054cc !important;



}







/* ==========================================================================



   GTRANSLATE RETINA FLAG SIZING (LIGHTHOUSE RESPONSIVE IMAGES)



   ========================================================================== */



.header-gtranslate-box .gtranslate_wrapper img,



.header-gtranslate-box img {



  width: 24px !important;



  height: 24px !important;



  max-width: 24px !important;



  max-height: 24px !important;



  object-fit: contain !important;



  border-radius: 3px !important;



  display: inline-block !important;



  vertical-align: middle !important;



}











/* ==========================================================================



   SLOGAN BANNER & CALL TO ACTION (DỊCH VỤ & TRANG CON)



   ========================================================================== */



.slogan-cta-banner {



  background: linear-gradient(135deg, #075723 0%, #054019 50%, #032b11 100%) !important;



  border-radius: 1.5rem !important;



  padding: 2.5rem 3rem !important;



  box-shadow: 0 20px 35px -10px rgba(7, 87, 35, 0.35) !important;



  border: 1px solid rgba(255, 255, 255, 0.15) !important;



  display: flex !important;



  flex-direction: column !important;



  align-items: flex-start !important;



  gap: 1.75rem !important;



  position: relative !important;



  overflow: hidden !important;



}







@media (min-width: 1024px) {



  .slogan-cta-banner {



    flex-direction: row !important;



    align-items: center !important;



    justify-content: space-between !important;



    gap: 2.5rem !important;



    padding: 3rem 3.5rem !important;



  }



}







.slogan-cta-banner .slogan-cta-content {



  flex: 1 1 auto !important;



  max-width: 48rem !important;



  text-align: left !important;



}







.slogan-cta-banner .slogan-cta-badge {



  display: inline-block !important;



  font-size: 0.75rem !important;



  font-weight: 700 !important;



  color: #fde047 !important;



  letter-spacing: 0.1em !important;



  text-transform: uppercase !important;



  margin-bottom: 0.5rem !important;



}







.slogan-cta-banner .cta-headline {



  font-size: 1.625rem !important;



  font-weight: 800 !important;



  line-height: 1.35 !important;



  color: #ffffff !important;



  text-align: left !important;



  margin: 0 0 0.75rem 0 !important;



  text-transform: uppercase !important;



  letter-spacing: -0.01em !important;



}







@media (min-width: 1280px) {



  .slogan-cta-banner .cta-headline {



    font-size: 1.875rem !important;



  }



}







.slogan-cta-banner .cta-subtext {



  font-size: 0.9375rem !important;



  line-height: 1.6 !important;



  color: #d1fae5 !important;



  text-align: left !important;



  margin: 0 !important;



}







.slogan-cta-banner .slogan-cta-actions {



  display: flex !important;



  flex-direction: row !important;



  flex-wrap: wrap !important;



  align-items: center !important;



  gap: 1rem !important;



  flex-shrink: 0 !important;



}







@media (max-width: 639px) {



  .slogan-cta-banner {



    padding: 1.75rem 1.25rem !important;



    border-radius: 1rem !important;



  }



  .slogan-cta-banner .cta-headline {



    font-size: 1.25rem !important;



    line-height: 1.35 !important;



  }



  .slogan-cta-banner .slogan-cta-actions {



    flex-direction: column !important;



    width: 100% !important;



  }



  .slogan-cta-banner .btn-cta-hotline,



  .slogan-cta-banner .btn-cta-zalo {



    width: 100% !important;



    text-align: center !important;



  }



}







.slogan-cta-banner .btn-cta-hotline {



  display: inline-flex !important;



  align-items: center !important;



  justify-content: center !important;



  gap: 0.625rem !important;



  background-color: #dc2626 !important;



  color: #ffffff !important;



  font-weight: 700 !important;



  font-size: 0.875rem !important;



  text-transform: uppercase !important;



  letter-spacing: 0.04em !important;



  padding: 0.875rem 1.75rem !important;



  border-radius: 9999px !important;



  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.45) !important;



  transition: all 0.2s ease !important;



  white-space: nowrap !important;



  text-decoration: none !important;



}



.slogan-cta-banner .btn-cta-hotline:hover {



  background-color: #b91c1c !important;



  transform: translateY(-2px) !important;



  box-shadow: 0 6px 20px rgba(220, 38, 38, 0.65) !important;



}







.slogan-cta-banner .btn-cta-zalo {



  display: inline-flex !important;



  align-items: center !important;



  justify-content: center !important;



  gap: 0.625rem !important;



  background-color: #0068ff !important;



  color: #ffffff !important;



  font-weight: 700 !important;



  font-size: 0.875rem !important;



  text-transform: uppercase !important;



  letter-spacing: 0.04em !important;



  padding: 0.875rem 1.75rem !important;



  border-radius: 9999px !important;



  box-shadow: 0 4px 14px rgba(0, 104, 255, 0.45) !important;



  transition: all 0.2s ease !important;



  white-space: nowrap !important;



  text-decoration: none !important;



}



.slogan-cta-banner .btn-cta-zalo:hover {



  background-color: #0054cc !important;



  transform: translateY(-2px) !important;



  box-shadow: 0 6px 20px rgba(0, 104, 255, 0.6) !important;



}











/* ==========================================================================



   WOOCOMMERCE MY ACCOUNT STYLING



   ========================================================================== */



.woocommerce-account .woocommerce-MyAccount-navigation {



  float: none !important;



  width: 100% !important;



  margin: 0 !important;



}







.woocommerce-account .woocommerce-MyAccount-content {



  float: none !important;



  width: 100% !important;



  margin: 0 !important;



}







.woocommerce-MyAccount-navigation ul,



.woocommerce-MyAccount-navigation li {



  list-style: none !important;



  list-style-type: none !important;



  padding: 0 !important;



  margin: 0 !important;



}







.woocommerce-MyAccount-navigation li::before {



  display: none !important;



  content: none !important;



}







/* Nav Link Hover & Active */



.myaccount-nav-link {



  text-decoration: none !important;



}







/* Orders Table */



.woocommerce-MyAccount-content .woocommerce-orders-table {



  width: 100% !important;



  border-collapse: separate !important;



  border-spacing: 0 !important;



  border: 1px solid #e2e8f0 !important;



  border-radius: 1rem !important;



  overflow: hidden !important;



  margin-top: 1rem !important;



  margin-bottom: 1.5rem !important;



}







.woocommerce-MyAccount-content .woocommerce-orders-table th {



  background-color: #f8fafc !important;



  color: #334155 !important;



  font-size: 0.75rem !important;



  font-weight: 700 !important;



  text-transform: uppercase !important;



  letter-spacing: 0.05em !important;



  padding: 0.875rem 1rem !important;



  border-bottom: 1px solid #e2e8f0 !important;



}







.woocommerce-MyAccount-content .woocommerce-orders-table td {



  padding: 0.875rem 1rem !important;



  font-size: 0.875rem !important;



  color: #1e293b !important;



  border-bottom: 1px solid #f1f5f9 !important;



  vertical-align: middle !important;



}







.woocommerce-MyAccount-content .woocommerce-orders-table tr:last-child td {



  border-bottom: none !important;



}







/* Order View Button */



.woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions a.button {



  background-color: #075723 !important;



  color: #ffffff !important;



  padding: 0.375rem 0.875rem !important;



  border-radius: 0.5rem !important;



  font-size: 0.75rem !important;



  font-weight: 700 !important;



  text-transform: uppercase !important;



  transition: all 0.2s ease !important;



  display: inline-block !important;



  text-decoration: none !important;



}







.woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions a.button:hover {



  background-color: #054019 !important;



  box-shadow: 0 2px 4px rgba(7, 87, 35, 0.2) !important;



}







/* Order Status Badges */



.woocommerce-orders-table__cell-order-status {



  font-weight: 600 !important;



  font-size: 0.75rem !important;



}







/* Address Cards */



.woocommerce-MyAccount-content .woocommerce-Addresses {



  display: grid !important;



  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;



  gap: 1.5rem !important;



  margin-top: 1.5rem !important;



}







.woocommerce-MyAccount-content .woocommerce-Address {



  background: #f8fafc !important;



  border: 1px solid #e2e8f0 !important;



  border-radius: 1rem !important;



  padding: 1.25rem !important;



  position: relative !important;



}







.woocommerce-MyAccount-content .woocommerce-Address-title {



  display: flex !important;



  align-items: center !important;



  justify-content: space-between !important;



  margin-bottom: 0.75rem !important;



  padding-bottom: 0.5rem !important;



  border-bottom: 1px solid #e2e8f0 !important;



}







.woocommerce-MyAccount-content .woocommerce-Address-title h3 {



  font-size: 0.95rem !important;



  font-weight: 700 !important;



  color: #0f172a !important;



  margin: 0 !important;



}







.woocommerce-MyAccount-content .woocommerce-Address-title a.edit {



  color: #075723 !important;



  font-size: 0.8125rem !important;



  font-weight: 700 !important;



  text-decoration: none !important;



  padding: 0.25rem 0.625rem !important;



  border-radius: 0.5rem !important;



  background-color: #ecfdf5 !important;



  transition: all 0.2s ease !important;



}







.woocommerce-MyAccount-content .woocommerce-Address-title a.edit:hover {



  background-color: #075723 !important;



  color: #ffffff !important;



}







.woocommerce-MyAccount-content .woocommerce-Address address {



  font-style: normal !important;



  color: #475569 !important;



  font-size: 0.875rem !important;



  line-height: 1.6 !important;



}







/* Form Edit Account / Address */



.woocommerce-EditAccountForm fieldset,



.woocommerce-address-fields {



  margin-top: 1.5rem !important;



  padding-top: 1rem !important;



  border-top: 1px solid #e2e8f0 !important;



}







.woocommerce-EditAccountForm fieldset legend {



  font-size: 1rem !important;



  font-weight: 700 !important;



  color: #0f172a !important;



  padding: 0 0.5rem !important;



}







.woocommerce-EditAccountForm input.input-text,



.woocommerce-address-fields input.input-text {



  width: 100% !important;



  border: 1px solid #cbd5e1 !important;



  border-radius: 0.75rem !important;



  padding: 0.625rem 0.875rem !important;



  font-size: 0.875rem !important;



  background-color: #f8fafc !important;



  transition: border-color 0.2s, background-color 0.2s !important;



}







.woocommerce-EditAccountForm input.input-text:focus,



.woocommerce-address-fields input.input-text:focus {



  outline: none !important;



  border-color: #075723 !important;



  background-color: #ffffff !important;



  box-shadow: 0 0 0 3px rgba(7, 87, 35, 0.1) !important;



}







.woocommerce-EditAccountForm button.button,



.woocommerce-address-fields button.button {



  background-color: #075723 !important;



  color: #ffffff !important;



  padding: 0.75rem 1.75rem !important;



  border-radius: 0.75rem !important;



  font-size: 0.875rem !important;



  font-weight: 700 !important;



  text-transform: uppercase !important;



  letter-spacing: 0.05em !important;



  border: none !important;



  cursor: pointer !important;



  transition: background-color 0.2s, box-shadow 0.2s !important;



  margin-top: 1rem !important;



}







.woocommerce-EditAccountForm button.button:hover,



.woocommerce-address-fields button.button:hover {



  background-color: #054019 !important;



  box-shadow: 0 4px 6px -1px rgba(7, 87, 35, 0.2) !important;



}







/* Notices & Messages */



.woocommerce-message,



.woocommerce-error,



.woocommerce-info {



  border-radius: 0.75rem !important;



  padding: 1rem 1.25rem 1rem 3rem !important;



  font-size: 0.875rem !important;



  border-top: none !important;



  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;



  margin-bottom: 1.5rem !important;



  position: relative !important;



}







.woocommerce-message {



  background-color: #f0fdf4 !important;



  color: #166534 !important;



  border-left: 4px solid #16a34a !important;



}







.woocommerce-error {



  background-color: #fef2f2 !important;



  color: #991b1b !important;



  border-left: 4px solid #dc2626 !important;



  list-style: none !important;



}







.woocommerce-info {



  background-color: #eff6ff !important;



  color: #1e40af !important;



  border-left: 4px solid #2563eb !important;



}







.woocommerce-message .button,



.woocommerce-info .button {



  background-color: #075723 !important;



  color: #ffffff !important;



  padding: 0.375rem 0.875rem !important;



  border-radius: 0.5rem !important;



  font-size: 0.75rem !important;



  font-weight: 700 !important;



  text-transform: uppercase !important;



  float: right !important;



  text-decoration: none !important;



}







/* ==========================================================================



   LOGO HEADER & FOOTER SIZING (CHỐNG BỊ WOOCOMMERCE GHI ĐÈ HEIGHT AUTO)



   ========================================================================== */



.site-branding img,



.header-logo,



.custom-logo {



  max-height: 76px !important;



  height: 76px !important;



  width: auto !important;



  object-fit: contain !important;



}







.footer-logo {



  max-height: 72px !important;



  height: 72px !important;



  width: auto !important;



  object-fit: contain !important;



}











/* Mobile Drawer Header Logo & Mobile Header Logo */



.drawer-header img,



.mobile-drawer-logo {



  max-height: 36px !important;



  height: 36px !important;



  width: auto !important;



  object-fit: contain !important;



  display: block !important;



}







@media (max-width: 639px) {



  .site-branding img,



  .header-logo,



  .custom-logo {



    max-height: 52px !important;



    height: 52px !important;



  }



}







/* ==========================================================================

   DANH MỤC SẢN PHẨM MÀN HÌNH ĐIỆN THOẠI (< 1024PX):

   CÁC SUB MENU CÓ POSITION RELATIVE ĐỂ KHÔNG HIỂN THỊ VƯỢT RA NGOÀI MÀN HÌNH

   ========================================================================== */

@media (max-width: 1023px) {

  .header-category-dropdown {

    max-height: 80vh !important;

    overflow-y: auto !important;

    overflow-x: hidden !important;

    -webkit-overflow-scrolling: touch;

    width: 100% !important;

    min-width: 280px !important;

  }



  .category-sidebar .cat-item.has-children {

    position: relative !important;

  }



  .category-sidebar .cat-item.has-children > .cat-link {

    cursor: pointer !important;

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    width: 100% !important;

    box-sizing: border-box !important;

  }



  .category-sidebar .cat-item.has-children.is-active > .cat-link {

    background-color: #f1f5f9 !important;

    color: #075723 !important;

    font-weight: 700 !important;

  }



  .category-sidebar .cat-item.has-children > .cat-link svg {

    transition: transform 0.25s ease !important;

  }



  .category-sidebar .cat-item.has-children.is-active > .cat-link svg {

    transform: rotate(90deg) !important;

    color: #075723 !important;

  }



  /* Sub menu dạng Accordion Relative ngay dưới menu cha */

  .category-sidebar .cat-flyout-menu {

    position: relative !important;

    display: none !important;

    top: auto !important;

    left: auto !important;

    right: auto !important;

    bottom: auto !important;

    width: 100% !important;

    max-width: 100% !important;

    opacity: 1 !important;

    visibility: visible !important;

    box-shadow: none !important;

    border: none !important;

    border-top: 1px solid #e2e8f0 !important;

    border-bottom: 1px solid #e2e8f0 !important;

    border-radius: 0 !important;

    background-color: #f8fafc !important;

    transform: none !important;

    margin: 0 !important;

    padding: 0 !important;

    box-sizing: border-box !important;

    pointer-events: auto !important;

    z-index: 10 !important;

  }



  .category-sidebar .cat-flyout-menu::before {

    display: none !important;

  }



  .category-sidebar .cat-flyout-inner {

    border-radius: 0 !important;

    overflow: visible !important;

    box-shadow: none !important;

    background: transparent !important;

    padding: 0.25rem 0.5rem 0.5rem 0.5rem !important;

  }



  .category-sidebar .cat-flyout-header {

    padding: 0.45rem 0.75rem !important;

    background-color: #ecfdf5 !important;

    border-bottom: 1px solid #d1fae5 !important;

    border-radius: 0.375rem !important;

    margin-bottom: 0.35rem !important;

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

  }



  .category-sidebar .cat-flyout-header h4 {

    font-size: 0.8125rem !important;

    font-weight: 700 !important;

    color: #065f46 !important;

    margin: 0 !important;

  }



  .category-sidebar .cat-flyout-header a {

    font-size: 0.75rem !important;

    font-weight: 700 !important;

    color: #047857 !important;

    text-decoration: underline !important;

  }



  .category-sidebar .subcat-list {

    display: flex !important;

    flex-direction: column !important;

    gap: 0.125rem !important;

    padding: 0 !important;

    margin: 0 !important;

  }



  .category-sidebar .subcat-item a {

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    padding: 0.45rem 0.65rem !important;

    font-size: 0.8125rem !important;

    color: #334155 !important;

    border-radius: 0.375rem !important;

    text-decoration: none !important;

    transition: background-color 0.15s ease !important;

  }



  .category-sidebar .subcat-item a:hover,

  .category-sidebar .subcat-item a:active {

    background-color: #e2e8f0 !important;

    color: #075723 !important;

  }



  /* Khi menu cha có class .is-active thì mở ra dạng Accordion */

  .category-sidebar .cat-item.has-children.is-active > .cat-flyout-menu {

    display: block !important;

  }



  /* Tắt hiệu ứng hover tự bay ra trên mobile để tránh rác layout */

  .category-sidebar .cat-item.has-children:not(.is-active):hover > .cat-flyout-menu {

    display: none !important;

  }

}





/* ==========================================================================

   FOOTER NAVIGATION MENU STYLING (GIỚI THIỆU & ĐIỀU HƯỚNG)

   ========================================================================== */

.footer-nav-menu {

  list-style: none !important;

  padding: 0 !important;

  margin: 0 !important;

}



.footer-nav-menu li {

  margin-bottom: 0.625rem !important;

  list-style: none !important;

}



.footer-nav-menu li:last-child {

  margin-bottom: 0 !important;

}



.footer-nav-menu a {

  display: flex !important;

  align-items: center !important;

  gap: 0.5rem !important;

  color: rgba(255, 255, 255, 0.9) !important;

  font-size: 1rem !important; /* 16px */

  line-height: 1.6 !important;

  transition: color 0.2s ease !important;

  text-decoration: none !important;

}



.footer-nav-menu a:hover {

  color: #fcd34d !important;

}



.footer-nav-menu .footer-menu-chevron {

  color: #fbbf24 !important;

  font-size: 1.125rem !important; /* 18px */

  line-height: 1 !important;

  flex-shrink: 0 !important;

}