/*
Theme Name: GP Solar by RU Media
Theme URI: https://rumedia.vn/
Author: rumedia
Author URI: https://rumedia.vn/
Version: 3.1.2
Description: GP Solar theme — Material Design 3 + Bento Grid by RU Media.
*/

/*
 * Material Design 3 — Design Tokens for GP Solar
 * Seed color: #00A451 (GP Solar Green)
 * Generated tonal palette following M3 spec
 */

:root {
  /* ============================================
     PRIMARY — Tonal palette from #00A451
     ============================================ */
  --md-sys-color-primary: #006D35;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #5CFC8E;
  --md-sys-color-on-primary-container: #00210C;

  /* ============================================
     SECONDARY — Muted green complement
     ============================================ */
  --md-sys-color-secondary: #4F6353;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #D1E8D3;
  --md-sys-color-on-secondary-container: #0C1F13;

  /* ============================================
     TERTIARY — Warm teal accent
     ============================================ */
  --md-sys-color-tertiary: #3A656F;
  --md-sys-color-on-tertiary: #FFFFFF;
  --md-sys-color-tertiary-container: #BEEAF6;
  --md-sys-color-on-tertiary-container: #001F26;

  /* ============================================
     ERROR
     ============================================ */
  --md-sys-color-error: #BA1A1A;
  --md-sys-color-on-error: #FFFFFF;
  --md-sys-color-error-container: #FFDAD6;
  --md-sys-color-on-error-container: #410002;

  /* ============================================
     SURFACE & BACKGROUND
     ============================================ */
  --md-sys-color-background: #FBFDF7;
  --md-sys-color-on-background: #191C19;
  --md-sys-color-surface: #FBFDF7;
  --md-sys-color-on-surface: #191C19;

  /* Surface variants for elevation */
  --md-sys-color-surface-dim: #D9DBD5;
  --md-sys-color-surface-bright: #FBFDF7;
  --md-sys-color-surface-container-lowest: #FFFFFF;
  --md-sys-color-surface-container-low: #F3F5EF;
  --md-sys-color-surface-container: #EDEEE9;
  --md-sys-color-surface-container-high: #E7E9E3;
  --md-sys-color-surface-container-highest: #E1E3DE;

  --md-sys-color-surface-variant: #DDE5DA;
  --md-sys-color-on-surface-variant: #414941;
  --md-sys-color-outline: #717970;
  --md-sys-color-outline-variant: #C1C9BF;
  --md-sys-color-inverse-surface: #2E312E;
  --md-sys-color-inverse-on-surface: #F0F1EC;
  --md-sys-color-inverse-primary: #2EDF74;
  --md-sys-color-scrim: #000000;
  --md-sys-color-shadow: #000000;

  /* ============================================
     TYPOGRAPHY — M3 Type Scale using Inter
     ============================================ */
  --md-sys-typescale-font-family: 'Inter', system-ui, -apple-system, sans-serif;

  /* Display */
  --md-sys-typescale-display-large: 700 3.5625rem/4rem var(--md-sys-typescale-font-family);     /* 57/64 */
  --md-sys-typescale-display-medium: 600 2.8125rem/3.25rem var(--md-sys-typescale-font-family);  /* 45/52 */
  --md-sys-typescale-display-small: 500 2.25rem/2.75rem var(--md-sys-typescale-font-family);     /* 36/44 */

  /* Headline */
  --md-sys-typescale-headline-large: 600 2rem/2.5rem var(--md-sys-typescale-font-family);        /* 32/40 */
  --md-sys-typescale-headline-medium: 500 1.75rem/2.25rem var(--md-sys-typescale-font-family);   /* 28/36 */
  --md-sys-typescale-headline-small: 500 1.5rem/2rem var(--md-sys-typescale-font-family);        /* 24/32 */

  /* Title */
  --md-sys-typescale-title-large: 500 1.375rem/1.75rem var(--md-sys-typescale-font-family);      /* 22/28 */
  --md-sys-typescale-title-medium: 600 1rem/1.5rem var(--md-sys-typescale-font-family);          /* 16/24 */
  --md-sys-typescale-title-small: 600 0.875rem/1.25rem var(--md-sys-typescale-font-family);      /* 14/20 */

  /* Body */
  --md-sys-typescale-body-large: 400 1rem/1.5rem var(--md-sys-typescale-font-family);            /* 16/24 */
  --md-sys-typescale-body-medium: 400 0.875rem/1.25rem var(--md-sys-typescale-font-family);      /* 14/20 */
  --md-sys-typescale-body-small: 400 0.75rem/1rem var(--md-sys-typescale-font-family);           /* 12/16 */

  /* Label */
  --md-sys-typescale-label-large: 600 0.875rem/1.25rem var(--md-sys-typescale-font-family);      /* 14/20 */
  --md-sys-typescale-label-medium: 600 0.75rem/1rem var(--md-sys-typescale-font-family);         /* 12/16 */
  --md-sys-typescale-label-small: 600 0.6875rem/1rem var(--md-sys-typescale-font-family);        /* 11/16 */

  /* ============================================
     SHAPE — M3 Shape Scale
     ============================================ */
  --md-sys-shape-none: 0;
  --md-sys-shape-extra-small: 4px;
  --md-sys-shape-small: 8px;
  --md-sys-shape-medium: 12px;
  --md-sys-shape-large: 16px;
  --md-sys-shape-extra-large: 28px;
  --md-sys-shape-full: 9999px;

  /* ============================================
     ELEVATION — Tonal surface elevation
     ============================================ */
  --md-sys-elevation-0: none;
  --md-sys-elevation-1: 0 1px 3px 1px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.3);
  --md-sys-elevation-2: 0 2px 6px 2px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.3);
  --md-sys-elevation-3: 0 4px 8px 3px rgba(0,0,0,0.15), 0 1px 3px rgba(0,0,0,0.3);
  --md-sys-elevation-4: 0 6px 10px 4px rgba(0,0,0,0.15), 0 2px 3px rgba(0,0,0,0.3);
  --md-sys-elevation-5: 0 8px 12px 6px rgba(0,0,0,0.15), 0 4px 4px rgba(0,0,0,0.3);

  /* ============================================
     MOTION — M3 Easing and Duration
     ============================================ */
  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
  --md-sys-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
  --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);

  --md-sys-motion-duration-short1: 50ms;
  --md-sys-motion-duration-short2: 100ms;
  --md-sys-motion-duration-short3: 150ms;
  --md-sys-motion-duration-short4: 200ms;
  --md-sys-motion-duration-medium1: 250ms;
  --md-sys-motion-duration-medium2: 300ms;
  --md-sys-motion-duration-medium3: 350ms;
  --md-sys-motion-duration-medium4: 400ms;
  --md-sys-motion-duration-long1: 450ms;
  --md-sys-motion-duration-long2: 500ms;
  --md-sys-motion-duration-long3: 550ms;
  --md-sys-motion-duration-long4: 600ms;

  /* ============================================
     SPACING — Consistent spacing scale
     ============================================ */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* ============================================
     BENTO GRID
     ============================================ */
  --bento-gap: 16px;
  --bento-radius: var(--md-sys-shape-extra-large);
  --bento-padding: var(--space-lg);
}
/*
Theme Name: GP Solar by RU Media
Theme URI: https://rumedia.vn/
Author: rumedia
Author URI: https://rumedia.vn/
Version: 3.0.0
Description: GP Solar theme — Material Design 3 + Bento Grid.
*/

/* === RESET === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font:var(--md-sys-typescale-body-large);color:var(--md-sys-color-on-background);background:var(--md-sys-color-background);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block;border:none}
a{text-decoration:none;color:var(--md-sys-color-primary);transition:all var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard)}
a:hover{color:var(--md-sys-color-primary);opacity:.85}
ul,ol{list-style:none;padding:0;margin:0}
h1,h2,h3,h4,h5,h6{margin:0 0 var(--space-sm);color:var(--md-sys-color-on-surface)}
p{margin:0 0 var(--space-md)}
button{cursor:pointer;border:none;background:none;font:inherit;color:inherit}
input,textarea,select{font:inherit;color:inherit}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* === CONTAINER === */
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--space-md)}
@media(min-width:768px){.container{padding:0 var(--space-lg)}}

/* === M3 BUTTONS === */
.m3-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);height:40px;padding:0 24px;border-radius:var(--md-sys-shape-full);font:var(--md-sys-typescale-label-large);letter-spacing:.1px;transition:all var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);position:relative;overflow:hidden;white-space:nowrap}
.m3-btn::after{content:'';position:absolute;inset:0;background:currentColor;opacity:0;transition:opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard)}
.m3-btn:hover::after{opacity:.08}
.m3-btn:active::after{opacity:.12}
.m3-btn--filled{background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary);box-shadow:var(--md-sys-elevation-0)}
.m3-btn--filled:hover{box-shadow:var(--md-sys-elevation-1)}
.m3-btn--tonal{background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container)}
.m3-btn--outlined{border:1px solid var(--md-sys-color-outline);color:var(--md-sys-color-primary);background:transparent}
.m3-btn--text{color:var(--md-sys-color-primary);background:transparent;padding:0 12px}
.m3-btn--icon{width:40px;height:40px;padding:0;border-radius:var(--md-sys-shape-full)}

/* === M3 FAB === */
.m3-fab{width:56px;height:56px;border-radius:var(--md-sys-shape-large);background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container);display:flex;align-items:center;justify-content:center;box-shadow:var(--md-sys-elevation-3);transition:box-shadow var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);border:none;cursor:pointer}
.m3-fab:hover{box-shadow:var(--md-sys-elevation-4)}
.m3-fab--small{width:40px;height:40px;border-radius:var(--md-sys-shape-medium)}

/* === M3 CARD === */
.m3-card{background:var(--md-sys-color-surface-container-low);border-radius:var(--md-sys-shape-medium);overflow:hidden;transition:box-shadow var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard)}
.m3-card--elevated{box-shadow:var(--md-sys-elevation-1);background:var(--md-sys-color-surface)}
.m3-card--elevated:hover{box-shadow:var(--md-sys-elevation-2)}
.m3-card--filled{background:var(--md-sys-color-surface-container-highest)}
.m3-card--outlined{background:var(--md-sys-color-surface);border:1px solid var(--md-sys-color-outline-variant)}
.m3-card .card-media{width:100%;aspect-ratio:16/10;object-fit:cover}
.m3-card .card-media--square{aspect-ratio:1}
.m3-card .card-media--tall{aspect-ratio:3/4}
.m3-card .card-body{padding:var(--space-md)}
.m3-card .card-title{font:var(--md-sys-typescale-title-medium);color:var(--md-sys-color-on-surface);margin-bottom:var(--space-xs)}
.m3-card .card-subtitle{font:var(--md-sys-typescale-body-medium);color:var(--md-sys-color-on-surface-variant)}
.m3-card .card-text{font:var(--md-sys-typescale-body-medium);color:var(--md-sys-color-on-surface-variant)}
.m3-card .card-actions{padding:var(--space-sm) var(--space-md) var(--space-md);display:flex;gap:var(--space-sm)}

/* === M3 CHIPS === */
.m3-chip{display:inline-flex;align-items:center;gap:var(--space-sm);height:32px;padding:0 16px;border-radius:var(--md-sys-shape-small);font:var(--md-sys-typescale-label-large);border:1px solid var(--md-sys-color-outline);color:var(--md-sys-color-on-surface-variant);transition:all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard)}
.m3-chip:hover{background:color-mix(in srgb,var(--md-sys-color-on-surface-variant) 8%,transparent)}
.m3-chip--filled{background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container);border:none}

/* === M3 TABS === */
.m3-tabs{display:flex;border-bottom:1px solid var(--md-sys-color-surface-variant);overflow-x:auto;scrollbar-width:none}
.m3-tabs::-webkit-scrollbar{display:none}
.m3-tab{flex:1;min-width:90px;height:48px;display:flex;align-items:center;justify-content:center;font:var(--md-sys-typescale-title-small);color:var(--md-sys-color-on-surface-variant);position:relative;padding:0 var(--space-md);transition:color var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);white-space:nowrap}
.m3-tab::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:0;height:3px;border-radius:3px 3px 0 0;background:var(--md-sys-color-primary);transition:width var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard)}
.m3-tab.active,.m3-tab:hover{color:var(--md-sys-color-primary)}
.m3-tab.active::after{width:100%}

/* === M3 TEXT FIELDS === */
.m3-field{position:relative;width:100%}
.m3-field input,.m3-field textarea,.m3-field select{width:100%;padding:16px;border:1px solid var(--md-sys-color-outline);border-radius:var(--md-sys-shape-extra-small);background:transparent;font:var(--md-sys-typescale-body-large);color:var(--md-sys-color-on-surface);outline:none;transition:border-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard)}
.m3-field input:focus,.m3-field textarea:focus{border-color:var(--md-sys-color-primary);border-width:2px;padding:15px}
.m3-field--filled input,.m3-field--filled textarea{background:var(--md-sys-color-surface-container-highest);border:none;border-bottom:1px solid var(--md-sys-color-on-surface-variant);border-radius:var(--md-sys-shape-extra-small) var(--md-sys-shape-extra-small) 0 0}
.m3-field--pill input{border-radius:var(--md-sys-shape-full);padding:12px 20px;background:var(--md-sys-color-surface-container-high)}

/* Submit */
input[type="submit"],.wpcf7-submit{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 24px;border-radius:var(--md-sys-shape-full);background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary);font:var(--md-sys-typescale-label-large);border:none;cursor:pointer;transition:all var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard)}
input[type="submit"]:hover,.wpcf7-submit:hover{box-shadow:var(--md-sys-elevation-1)}

/* === BENTO GRID === */
.bento-grid{display:grid;gap:var(--bento-gap);grid-template-columns:repeat(4,1fr)}
.bento-item{background:var(--md-sys-color-surface-container-low);border-radius:var(--bento-radius);padding:var(--bento-padding);overflow:hidden;transition:transform var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard)}
.bento-item:hover{transform:translateY(-2px)}
.bento-item--primary{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}
.bento-item--secondary{background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container)}
.bento-item--tertiary{background:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container)}
.bento-item--surface{background:var(--md-sys-color-surface-container)}
.bento-item--img{padding:0}
.bento-item--img img{width:100%;height:100%;object-fit:cover}
.bento-span-2{grid-column:span 2}
.bento-span-3{grid-column:span 3}
.bento-span-4{grid-column:span 4}
.bento-row-2{grid-row:span 2}
@media(max-width:991px){
  .bento-grid{grid-template-columns:repeat(2,1fr)}
  .bento-span-3,.bento-span-4{grid-column:span 2}
}
@media(max-width:575px){
  .bento-grid{grid-template-columns:1fr;gap:var(--space-sm)}
  .bento-span-2,.bento-span-3,.bento-span-4{grid-column:span 1}
  .bento-row-2{grid-row:span 1}
}

/* === SECTION SPACING === */
.section{padding:var(--space-3xl) 0}
.section--compact{padding:var(--space-2xl) 0}
.section-title{font:var(--md-sys-typescale-headline-medium);color:var(--md-sys-color-on-surface);margin-bottom:var(--space-lg)}
.section-subtitle{font:var(--md-sys-typescale-body-large);color:var(--md-sys-color-on-surface-variant);margin-bottom:var(--space-xl)}

/* === UTILITIES === */
.flex{display:flex;flex-wrap:wrap}
.align-center{align-items:center}
.align-end{align-items:flex-end}
.justify-between{justify-content:space-between}
.justify-center{justify-content:center}
.justify-end{justify-content:flex-end}
.text-center{text-align:center}
.text-start{text-align:left}
.relative{position:relative}
.gap-sm{gap:var(--space-sm)}
.gap-md{gap:var(--space-md)}
.gap-lg{gap:var(--space-lg)}
/* === HEADER — Floating Island === */
#ru_menu_mobile{display:none}
.ru_header_pc{position:relative;z-index:998;padding:var(--space-sm) var(--space-md)}
.ru_header_main{background:rgba(255,255,255,.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:var(--md-sys-shape-full);box-shadow:0 2px 12px rgba(0,0,0,.08),0 1px 4px rgba(0,0,0,.05);position:relative;z-index:998;max-width:1260px;margin:0 auto;padding:0 var(--space-sm)}
.ru_header_main .ru_block{height:60px;display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm)}
.ru_header_logo{width:120px;flex-shrink:0}
.ru_header_logo img{max-height:38px;object-fit:contain}
.ru_header_menu{flex:1;padding:0}
.ru_header_menu ul{list-style:none;margin:0;padding:0}
.ru_header_menu .menu{display:flex;align-items:center;justify-content:center;gap:2px}
.ru_header_menu .menu>li{position:relative}
.ru_header_menu .menu>li>a{display:flex;align-items:center;height:40px;padding:0 14px;font:var(--md-sys-typescale-label-large);color:var(--md-sys-color-on-surface);border-radius:var(--md-sys-shape-full);transition:all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard)}
.ru_header_menu .menu>li>a:hover,.ru_header_menu .menu>li.current-menu-item>a{background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-primary)}
.ru_header_menu .menu>li>a.have_icon{display:flex;white-space:nowrap;align-items:center;gap:6px}
.ru_header_menu .menu>li>a img,.ru_header_menu .menu>li>a picture{
  height:22px;width:22px;object-fit:contain;
  display:flex;align-items:center;justify-content:center;
  padding:3px;
  border-radius:var(--md-sys-shape-full);
  transition:all var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);
  flex-shrink:0
}
/* Colorful icon backgrounds per menu item */
.ru_header_menu .menu>li:nth-child(1)>a picture,
.ru_header_menu .menu>li:nth-child(1)>a>img{background:linear-gradient(135deg, #E8F5E9, #C8E6C9);box-shadow:0 1px 4px rgba(0,150,60,.15)}
.ru_header_menu .menu>li:nth-child(2)>a picture,
.ru_header_menu .menu>li:nth-child(2)>a>img{background:linear-gradient(135deg, #E3F2FD, #BBDEFB);box-shadow:0 1px 4px rgba(33,150,243,.15)}
.ru_header_menu .menu>li:nth-child(3)>a picture,
.ru_header_menu .menu>li:nth-child(3)>a>img{background:linear-gradient(135deg, #FFF8E1, #FFECB3);box-shadow:0 1px 4px rgba(255,160,0,.15)}
.ru_header_menu .menu>li:nth-child(4)>a picture,
.ru_header_menu .menu>li:nth-child(4)>a>img{background:linear-gradient(135deg, #F3E5F5, #E1BEE7);box-shadow:0 1px 4px rgba(156,39,176,.15)}
.ru_header_menu .menu>li:nth-child(5)>a picture,
.ru_header_menu .menu>li:nth-child(5)>a>img{background:linear-gradient(135deg, #E0F7FA, #B2EBF2);box-shadow:0 1px 4px rgba(0,150,136,.15)}
.ru_header_menu .menu>li:nth-child(6)>a picture,
.ru_header_menu .menu>li:nth-child(6)>a>img{background:linear-gradient(135deg, #FBE9E7, #FFCCBC);box-shadow:0 1px 4px rgba(244,67,54,.15)}
/* Hover — pop icons */
.ru_header_menu .menu>li>a:hover img,
.ru_header_menu .menu>li>a:hover picture{
  transform:scale(1.15);
  box-shadow:0 2px 8px rgba(0,0,0,.12)
}
.ru_header_menu .menu>li>a picture img{
  height:100%;width:100%;object-fit:contain;border-radius:0;background:none;box-shadow:none;padding:0
}
/* Dropdown indicator — chevron down for top-level */
.ru_header_menu .menu>li.menu-item-has-children>a::after{content:'';display:inline-block;width:14px;height:14px;margin-left:auto;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);flex-shrink:0;opacity:.5}
.ru_header_menu .menu>li.menu-item-has-children:hover>a::after{transform:rotate(180deg);opacity:1}
/* Dropdown indicator — chevron right for sub-items */
.ru_header_menu .menu li li.menu-item-has-children>a{display:flex;align-items:center;gap:var(--space-md)}
.ru_header_menu .menu li li.menu-item-has-children>a::after{content:'';display:inline-block;width:12px;height:12px;margin-left:auto;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6z'/%3E%3C/svg%3E") center/contain no-repeat;flex-shrink:0;opacity:.4}
/* Dropdown — Level 1 */
.ru_header_menu .menu>li>.sub-menu,.ru_header_menu .menu>li>ul{width:260px;padding:var(--space-sm);position:absolute;top:calc(100% + 16px);left:0;background:rgba(255,255,255,.96);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:var(--md-sys-shape-large);box-shadow:0 4px 20px rgba(0,0,0,.12),0 1px 4px rgba(0,0,0,.06);opacity:0;visibility:hidden;transform:translateY(10px);transition:all var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized-decelerate);pointer-events:none;z-index:1000}
.ru_header_menu .menu>li>.sub-menu::before,.ru_header_menu .menu>li>ul::before{content:'';position:absolute;top:-28px;left:0;width:100%;height:28px}
.ru_header_menu .menu>li:hover>.sub-menu,.ru_header_menu .menu>li:hover>ul{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.ru_header_menu .menu>li>ul li,.ru_header_menu .menu>li>.sub-menu li{list-style:none}
.ru_header_menu .menu>li>ul li>a,.ru_header_menu .menu>li>.sub-menu li>a{display:flex;align-items:center;width:100%;padding:10px 16px;border-radius:var(--md-sys-shape-small);font:var(--md-sys-typescale-body-medium);color:var(--md-sys-color-on-surface);transition:all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard)}
.ru_header_menu .menu>li>ul li>a:hover,.ru_header_menu .menu>li>.sub-menu li>a:hover{background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-primary)}
/* Dropdown — Level 2+ (sub-sub menus) */
.ru_header_menu .menu li ul li{position:relative}
.ru_header_menu .menu li li>.sub-menu,.ru_header_menu .menu li li>ul{position:absolute;left:calc(100% + 16px);top:0;width:240px;padding:var(--space-sm);background:rgba(255,255,255,.96);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:var(--md-sys-shape-large);box-shadow:0 4px 20px rgba(0,0,0,.12),0 1px 4px rgba(0,0,0,.06);opacity:0;visibility:hidden;transform:translateX(10px);transition:all var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized-decelerate);pointer-events:none;z-index:1001}
.ru_header_menu .menu li li>.sub-menu::before,.ru_header_menu .menu li li>ul::before{content:'';position:absolute;left:-28px;top:0;width:28px;height:100%}
.ru_header_menu .menu li li:hover>.sub-menu,.ru_header_menu .menu li li:hover>ul{opacity:1;visibility:visible;transform:translateX(0);pointer-events:auto}
.ru_header_menu .menu li li ul li{list-style:none}
.ru_header_menu .menu li li ul li a{display:block;padding:8px 16px;border-radius:var(--md-sys-shape-small);font:var(--md-sys-typescale-body-medium);color:var(--md-sys-color-on-surface);transition:all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard)}
.ru_header_menu .menu li li ul li a:hover{background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-primary)}
/* Header Nav (search + cart) — Enhanced Icons */
.ru_header_nav_wrap{display:flex;align-items:center;gap:var(--space-sm);flex-shrink:0}
.ru_header_nav{display:flex;align-items:center;gap:6px}
.ru_header_nav .icon{
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:var(--md-sys-shape-full);
  position:relative;text-decoration:none;
  background:linear-gradient(135deg, var(--md-sys-color-primary-container), color-mix(in srgb, var(--md-sys-color-primary) 15%, var(--md-sys-color-surface-container)));
  border:1.5px solid color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent);
  transition:all var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);
  box-shadow:0 1px 4px color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
  opacity:1!important
}
.ru_header_nav .icon:hover{
  background:linear-gradient(135deg, color-mix(in srgb, var(--md-sys-color-primary) 30%, var(--md-sys-color-primary-container)), color-mix(in srgb, var(--md-sys-color-primary) 40%, var(--md-sys-color-surface)));
  border-color:color-mix(in srgb, var(--md-sys-color-primary) 50%, transparent);
  box-shadow:0 3px 12px color-mix(in srgb, var(--md-sys-color-primary) 30%, transparent), 0 0 0 4px color-mix(in srgb, var(--md-sys-color-primary) 10%, transparent);
  transform:translateY(-1px);
  opacity:1!important
}
.ru_header_nav .icon:active{transform:scale(.95)}
.ru_header_nav .icon svg{width:18px;height:18px;color:var(--md-sys-color-on-surface-variant);transition:color var(--md-sys-motion-duration-short4)}
.ru_header_nav .icon:hover svg{color:var(--md-sys-color-primary)}

/* Cart badge */
.ru_header_nav .cart .cout{
  position:absolute;right:-4px;top:-4px;min-width:18px;height:18px;
  border-radius:var(--md-sys-shape-full);
  background:linear-gradient(135deg, #E53935, #D32F2F);
  color:#fff;font-size:10px;font-weight:700;
  display:flex;align-items:center;justify-content:center;padding:0 4px;
  box-shadow:0 2px 6px rgba(229,57,53,.4);
  animation:cartBadgePulse 2s ease-in-out infinite;
  border:2px solid #fff;line-height:1
}
@keyframes cartBadgePulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.1)}
}

/* ─── Search Dropdown ─── */
.ru_search_dropdown{
  position:absolute;top:calc(100% + 12px);right:0;
  width:340px;
  background:rgba(255,255,255,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-radius:var(--md-sys-shape-large);
  box-shadow:0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
  border:1px solid var(--md-sys-color-outline-variant);
  padding:var(--space-sm);
  opacity:0;visibility:hidden;
  transform:translateY(8px) scale(.97);
  transition:all var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized-decelerate);
  pointer-events:none;z-index:1001
}
.ru_search_dropdown::before{
  content:'';position:absolute;top:-12px;right:8px;
  width:20px;height:12px
}
.ru_search_dropdown.active{
  opacity:1;visibility:visible;transform:translateY(0) scale(1);pointer-events:auto
}
.header-search-form{
  display:flex;align-items:center;gap:0;
  background:var(--md-sys-color-surface-container-high);
  border-radius:var(--md-sys-shape-full);
  overflow:hidden;
  border:1.5px solid transparent;
  transition:border-color var(--md-sys-motion-duration-short4)
}
.header-search-form:focus-within{
  border-color:var(--md-sys-color-primary);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
}
.header-search-input{
  flex:1;border:none;outline:none;background:transparent;
  padding:10px 0 10px 16px;
  font:var(--md-sys-typescale-body-medium);
  color:var(--md-sys-color-on-surface);
  min-width:0
}
.header-search-input::placeholder{color:var(--md-sys-color-on-surface-variant);opacity:.7}
.header-search-btn{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;flex-shrink:0;
  background:var(--md-sys-color-primary);
  border:none;border-radius:var(--md-sys-shape-full);
  color:var(--md-sys-color-on-primary);cursor:pointer;
  margin:2px;
  transition:all var(--md-sys-motion-duration-short4)
}
.header-search-btn:hover{background:color-mix(in srgb, var(--md-sys-color-primary) 85%, #000);box-shadow:var(--md-sys-elevation-1)}
.header-search-btn svg{color:inherit}

/* ─── Mini-Cart Dropdown ─── */
.ru_header_nav .cart{
  padding-bottom:12px;margin-bottom:-12px
}
.header-mini-cart{
  position:absolute;top:calc(100% + 8px);right:-10px;
  width:360px;
  background:rgba(255,255,255,.97);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-radius:var(--md-sys-shape-extra-large);
  box-shadow:0 8px 32px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.06);
  border:1px solid var(--md-sys-color-outline-variant);
  opacity:0;visibility:hidden;
  transform:translateY(10px);
  transition:all var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized-decelerate);
  pointer-events:none;z-index:1001;
  overflow:visible
}
.header-mini-cart::before{
  content:'';position:absolute;top:-20px;right:0;width:100%;height:20px
}
.ru_header_nav .cart:hover .header-mini-cart{
  opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto
}
.header-mini-cart__inner{padding:var(--space-lg)}
.header-mini-cart__title{
  font:var(--md-sys-typescale-title-medium);
  color:var(--md-sys-color-on-surface);
  margin:0 0 var(--space-md);
  padding-bottom:var(--space-sm);
  border-bottom:2px solid var(--md-sys-color-primary-container);
  display:flex;align-items:center;gap:var(--space-sm)
}
.header-mini-cart__title svg{color:var(--md-sys-color-primary)}

/* Mini-cart list */
.header-mini-cart .woocommerce-mini-cart{
  list-style:none;padding:0;margin:0;
  max-height:280px;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--md-sys-color-outline-variant) transparent
}
.header-mini-cart .woocommerce-mini-cart::-webkit-scrollbar{width:4px}
.header-mini-cart .woocommerce-mini-cart::-webkit-scrollbar-thumb{background:var(--md-sys-color-outline-variant);border-radius:4px}
.header-mini-cart .woocommerce-mini-cart-item{
  display:flex;align-items:center;gap:var(--space-sm);
  padding:var(--space-sm) 0;
  border-bottom:1px solid var(--md-sys-color-surface-variant);
  position:relative
}
.header-mini-cart .woocommerce-mini-cart-item:last-child{border-bottom:none}
.header-mini-cart .woocommerce-mini-cart-item a:not(.remove){
  display:flex;align-items:center;gap:var(--space-sm);
  color:var(--md-sys-color-on-surface);font:var(--md-sys-typescale-body-medium);
  flex:1;min-width:0
}
.header-mini-cart .woocommerce-mini-cart-item a img{
  width:52px!important;height:52px!important;
  object-fit:cover;border-radius:var(--md-sys-shape-medium);
  flex-shrink:0;border:1px solid var(--md-sys-color-surface-variant)
}
.header-mini-cart .woocommerce-mini-cart-item .quantity{
  display:block;font:var(--md-sys-typescale-body-small);
  color:var(--md-sys-color-primary);font-weight:600;margin-top:2px
}
.header-mini-cart .woocommerce-mini-cart-item .remove{
  position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:28px;height:28px;display:flex!important;align-items:center;justify-content:center;
  border-radius:var(--md-sys-shape-full);font-size:16px;
  color:var(--md-sys-color-on-surface-variant)!important;
  transition:all var(--md-sys-motion-duration-short4)
}
.header-mini-cart .woocommerce-mini-cart-item .remove:hover{
  background:var(--md-sys-color-error-container);
  color:var(--md-sys-color-error)!important
}

/* Mini-cart total */
.header-mini-cart .woocommerce-mini-cart__total{
  display:flex;justify-content:space-between;align-items:center;
  padding:var(--space-sm) 0;
  margin:var(--space-sm) 0 0;
  border-top:1.5px solid var(--md-sys-color-outline-variant);
  font:var(--md-sys-typescale-title-small);
  color:var(--md-sys-color-on-surface)
}
.header-mini-cart .woocommerce-mini-cart__total .woocommerce-Price-amount{
  color:var(--md-sys-color-primary);font-weight:700
}

/* Mini-cart buttons */
.header-mini-cart .woocommerce-mini-cart__buttons{
  display:flex;gap:var(--space-sm);margin-top:var(--space-md);padding:0
}
.header-mini-cart .woocommerce-mini-cart__buttons a{
  flex:1;display:flex;align-items:center;justify-content:center;
  height:40px;border-radius:var(--md-sys-shape-full);
  font:var(--md-sys-typescale-label-large);
  text-decoration:none;
  transition:all var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard)
}
.header-mini-cart .woocommerce-mini-cart__buttons a:first-child{
  background:var(--md-sys-color-surface-container-highest);
  color:var(--md-sys-color-on-surface)
}
.header-mini-cart .woocommerce-mini-cart__buttons a:first-child:hover{
  box-shadow:var(--md-sys-elevation-1)
}
.header-mini-cart .woocommerce-mini-cart__buttons a:last-child{
  background:var(--md-sys-color-primary);
  color:var(--md-sys-color-on-primary)
}
.header-mini-cart .woocommerce-mini-cart__buttons a:last-child:hover{
  box-shadow:var(--md-sys-elevation-2);
  background:color-mix(in srgb, var(--md-sys-color-primary) 85%, #000)
}

/* Mini-cart empty */
.header-mini-cart .woocommerce-mini-cart__empty-message{
  text-align:center;padding:var(--space-xl) var(--space-md);
  font:var(--md-sys-typescale-body-medium);
  color:var(--md-sys-color-on-surface-variant)
}
/* Hotline */
.ru_header_link a,.btn-hotline{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 18px;border-radius:var(--md-sys-shape-full);background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary);font:var(--md-sys-typescale-label-large);white-space:nowrap;transition:all var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);font-size:13px}
.ru_header_link a:hover,.btn-hotline:hover{box-shadow:var(--md-sys-elevation-1);color:var(--md-sys-color-on-primary)}
.btn-hotline .hotline-text{font-size:9px;text-transform:uppercase;opacity:.85}
.btn-hotline .hotline-number{font-weight:700}
/* Sticky header — full-width with rounded bottom */
.head.navbar-fixed-top{position:fixed!important;top:0;left:0;width:100%;z-index:999;animation:stuckSlide .35s var(--md-sys-motion-easing-emphasized-decelerate)}
.head.navbar-fixed-top .ru_header_pc{padding-top:0}
.head.navbar-fixed-top .ru_header_main{border-radius:0 0 var(--md-sys-shape-extra-large) var(--md-sys-shape-extra-large);max-width:100%;background:rgba(255,255,255,.92);backdrop-filter:blur(24px);box-shadow:0 2px 16px rgba(0,0,0,.1)}
@keyframes stuckSlide{0%{transform:translateY(-100%)}100%{transform:translateY(0)}}

/* Mobile header */
.ru_header_mb{display:none}
@media(max-width:991px){
  .ru_header_pc .ru_header_main .ru_block{flex-wrap:nowrap}
  .ru_header_menu{display:none}
  .ru_header_mb{display:block;background:rgba(255,255,255,.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:var(--md-sys-shape-extra-large);margin:var(--space-sm) var(--space-md) var(--space-sm);box-shadow:0 2px 12px rgba(0,0,0,.08);padding:var(--space-sm) var(--space-md)}
  .ru_header_mb .row{display:flex;align-items:center;flex-wrap:nowrap}
  .ru_header_mb .col-2{width:16.67%;flex:0 0 16.67%}
  .ru_header_mb .col-8{width:66.66%;flex:0 0 66.66%;text-align:center}
  .ru_header_logo_mb img{max-height:34px;object-fit:contain;margin:0 auto}
  .ru_touch_menu{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:var(--md-sys-shape-full);cursor:pointer;transition:background var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard)}
  .ru_touch_menu:hover{background:var(--md-sys-color-surface-container-high)}
  .ru_touch_menu .line,.ru_touch_menu .line::before,.ru_touch_menu .line::after{display:block;width:20px;height:2px;background:var(--md-sys-color-on-surface);border-radius:2px;position:relative;transition:all .3s}
  .ru_touch_menu .line::before{content:'';position:absolute;top:-6px}
  .ru_touch_menu .line::after{content:'';position:absolute;bottom:-6px}
  .ru_cart_mb a{display:flex;align-items:center;justify-content:flex-end;position:relative}
  .ru_cart_mb .icon{display:flex;align-items:center;justify-content:center}
  .ru_cart_mb .icon svg{width:22px;height:22px;color:var(--md-sys-color-on-surface)}
  .ru_cart_mb .icon img{width:24px;height:24px;object-fit:contain}
  .ru_cart_mb .cout{position:absolute;right:-8px;top:-8px;min-width:16px;height:16px;border-radius:var(--md-sys-shape-full);background:var(--md-sys-color-error);color:var(--md-sys-color-on-error);font-size:10px;font-weight:600;display:flex;align-items:center;justify-content:center;padding:0 3px}
  /* Mobile menu drawer */
  #ru_menu_mobile{display:none;position:fixed;top:0;left:0;width:85%;max-width:360px;height:100vh;background:var(--md-sys-color-surface-container-low);z-index:1000;padding:var(--space-lg);overflow-y:auto;transform:translateX(-100%);transition:transform var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-emphasized)}
  #ru_menu_mobile.active{display:block;transform:translateX(0)}
  #ru_menu_mobile .search{margin-bottom:var(--space-lg)}
  #ru_menu_mobile .search input{width:100%;background:var(--md-sys-color-surface-container-high);border:none;border-radius:var(--md-sys-shape-full);padding:12px 20px;font:var(--md-sys-typescale-body-medium)}
  #ru_menu_mobile .menu{display:flex;flex-direction:column;gap:var(--space-xs);list-style:none;padding:0;margin:0}
  #ru_menu_mobile .menu li{list-style:none}
  #ru_menu_mobile .menu li a{display:flex;align-items:center;gap:var(--space-sm);padding:12px var(--space-md);border-radius:var(--md-sys-shape-full);font:var(--md-sys-typescale-label-large);color:var(--md-sys-color-on-surface);text-decoration:none}
  #ru_menu_mobile .menu li a:hover{background:var(--md-sys-color-surface-container-high)}
  #ru_menu_mobile .menu li .sub-menu{padding-left:var(--space-md);list-style:none}
  /* Mobile menu icons — constrain images & pictures */
  #ru_menu_mobile .menu li a img,
  #ru_menu_mobile .menu li a picture{width:24px;height:24px;object-fit:contain;flex-shrink:0;border-radius:var(--md-sys-shape-small)}
  #ru_menu_mobile .menu li a picture img{width:100%;height:100%;object-fit:contain}
  /* Hide oversized images injected as menu descriptions (category images) */
  #ru_menu_mobile .menu li a img[width],
  #ru_menu_mobile .menu li a img[src*="uploads"]{display:none}
  #ru_menu_mobile .menu li a img[src*="icon"]{display:inline-block}
  /* Location section */
  #ru_menu_mobile .local{font:var(--md-sys-typescale-body-small);color:var(--md-sys-color-on-surface-variant);margin-bottom:var(--space-lg);display:flex;align-items:flex-start;gap:var(--space-sm)}
  #ru_menu_mobile .local span{display:flex;align-items:flex-start;gap:var(--space-sm)}
  #ru_menu_mobile .local img{width:16px;height:16px;flex-shrink:0;margin-top:2px}
  .ru_header_pc{display:none}
}

/* === FOOTER === */
/* ============================================================
   FOOTER — Material Design 3 + Bento Grid
   ============================================================ */

/* ── Footer container ── */
#footer{
  background:var(--md-sys-color-surface-container);
  padding:var(--space-3xl) 0 var(--space-xl);
  font:var(--md-sys-typescale-body-medium);
  color:var(--md-sys-color-on-surface-variant)
}
#footer p{margin-bottom:var(--space-xs)}
#footer ul,#footer ol{list-style:none;padding:0;margin:0}
#footer li{margin-bottom:var(--space-sm)}
#footer li a{
  display:inline-flex;align-items:center;gap:var(--space-xs);
  transition:color .2s,transform .15s
}
#footer li a:hover{transform:translateX(3px)}
#footer a{color:var(--md-sys-color-on-surface-variant);transition:color .2s}
#footer a:hover{color:var(--md-sys-color-primary)}
#footer .ru_widget_title{
  font:var(--md-sys-typescale-title-medium);
  color:var(--md-sys-color-on-surface);
  margin-bottom:var(--space-md);
  letter-spacing:.04em;
  padding-bottom:var(--space-xs);
  border-bottom:1.5px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 50%,transparent)
}
#footer iframe{
  width:100%;height:200px;
  border-radius:var(--md-sys-shape-medium);
  border:none
}

/* ── Main footer grid — 3-tier reordering ── */
.ru_footer_main .f-widget{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--space-lg);
  row-gap:var(--space-2xl)
}
.ru_footer_main .widget{padding:0}

/* ─── Tier 1: Brand — Logo + Company Info + Social ─── */
/* Logo (widget-3) */
.ru_footer_main .widget_media_image{
  order:1;
  grid-column:1;
  display:flex;align-items:flex-start;justify-content:center
}
.ru_footer_main .widget_media_image img{
  max-width:180px;height:auto
}
/* Company Info (widget-4) */
.ru_footer_main #black-studio-tinymce-13{
  order:2;
  grid-column:2 / 4
}
.ru_footer_main #black-studio-tinymce-13 .ru_widget_title::before{
  background:var(--md-sys-color-primary)
}
/* Social icons (widget-9, last) */
.ru_footer_main .widget-9{
  order:3;
  grid-column:4;
  display:flex;flex-direction:column;
  align-items:flex-start;justify-content:center
}
.ru_footer_main .social{
  display:flex;gap:var(--space-sm);
  padding:0;margin:0
}
.ru_footer_main .social li{margin:0}
.ru_footer_main .social li a{
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  background:var(--md-sys-color-surface-container-highest);
  border-radius:var(--md-sys-shape-large);
  transition:all .2s
}
.ru_footer_main .social li a:hover{
  background:var(--md-sys-color-primary);
  transform:translateY(-2px);
  box-shadow:var(--md-sys-elevation-2)
}
.ru_footer_main .social li a:hover img{filter:brightness(10)}
.ru_footer_main .social li img{
  width:22px;height:22px;object-fit:contain;
  border-radius:0
}

/* ── Separator between Brand and Links tiers ── */
.ru_footer_main .widget-4::after{
  content:'';display:block;
  grid-column:1 / -1;order:4;
  height:1px;
  background:linear-gradient(to right,transparent,var(--md-sys-color-outline-variant),transparent);
  margin:0
}

/* ─── Tier 2: Navigation Links ─── */
/* CHÍNH SÁCH (widget-5) */
.ru_footer_main #black-studio-tinymce-22{order:5;grid-column:auto}
/* HỖ TRỢ (widget-6) */
.ru_footer_main #black-studio-tinymce-23{order:6;grid-column:auto}
/* TUYỂN DỤNG (widget-7) */
.ru_footer_main #black-studio-tinymce-24{order:7;grid-column:auto}
/* App download (widget-8) */
.ru_footer_main #black-studio-tinymce-25{order:8;grid-column:auto}

/* ─── Tier 3: Media — Map + Video ─── */
/* Map (widget-1) */
.ru_footer_main #custom_html-6{
  order:10;
  grid-column:1 / 3
}
.ru_footer_main #custom_html-6 .ru_widget_title{
  margin-bottom:var(--space-sm)
}
.ru_footer_main #custom_html-6 iframe{
  height:220px;
  border-radius:var(--md-sys-shape-large);
  box-shadow:var(--md-sys-elevation-1)
}
/* Video (widget-2) */
.ru_footer_main #custom_html-7{
  order:11;
  grid-column:3 / 5
}
.ru_footer_main #custom_html-7 .ru_widget_title{
  margin-bottom:var(--space-sm)
}
.ru_footer_main #custom_html-7 iframe{
  height:220px;
  border-radius:var(--md-sys-shape-large);
  box-shadow:var(--md-sys-elevation-1)
}

/* ── Footer Bottom bar ── */
.ru_footer_bot{
  padding-top:var(--space-lg);margin-top:var(--space-xl);
  border-top:1px solid var(--md-sys-color-outline-variant)
}
.ru_footer_bot .f-widget{
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:var(--space-md)
}
.ru_footer_bot p{
  font:var(--md-sys-typescale-body-small);
  color:var(--md-sys-color-on-surface-variant);
  opacity:.8;margin:0
}
.ru_footer_bot img{height:28px;width:auto}

/* ── Responsive ── */
@media(max-width:991px){
  .ru_footer_main .f-widget{
    grid-template-columns:repeat(2,1fr);
    row-gap:var(--space-xl)
  }
  .ru_footer_main .widget_media_image{grid-column:1}
  .ru_footer_main #black-studio-tinymce-13{grid-column:2}
  .ru_footer_main .widget-9{grid-column:1 / -1;align-items:center}
  .ru_footer_main #custom_html-6{grid-column:1}
  .ru_footer_main #custom_html-7{grid-column:2}
}
@media(max-width:575px){
  .ru_footer_main .f-widget{
    grid-template-columns:1fr;
    row-gap:var(--space-lg)
  }
  .ru_footer_main .widget_media_image{
    grid-column:1;justify-content:flex-start
  }
  .ru_footer_main #black-studio-tinymce-13{grid-column:1}
  .ru_footer_main .widget-9{grid-column:1;align-items:flex-start}
  .ru_footer_main #custom_html-6,
  .ru_footer_main #custom_html-7{grid-column:1}
  .ru_footer_bot .f-widget{
    flex-direction:column;align-items:center;text-align:center
  }
}

/* ============================================================
   FOOTER ESTIMATION FORM — Material Design 3 + Bento Grid
   ============================================================ */

/* ── Section wrapper ── */
.ru_home_form{
  padding:var(--space-2xl) 0;
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--md-sys-color-primary) 18%, var(--md-sys-color-surface)) 0%,
    var(--md-sys-color-primary-container) 50%,
    color-mix(in srgb, var(--md-sys-color-tertiary) 12%, var(--md-sys-color-primary-container)) 100%);
  position:relative;overflow:hidden
}
.ru_home_form::before{
  content:'';position:absolute;top:-40%;right:-15%;width:500px;height:500px;
  border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--md-sys-color-primary) 10%,transparent),transparent 70%);
  pointer-events:none
}
.ru_home_form::after{
  content:'';position:absolute;bottom:-30%;left:-10%;width:400px;height:400px;
  border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--md-sys-color-tertiary) 8%,transparent),transparent 70%);
  pointer-events:none
}
.ru_home_form .line{display:none}

/* ── Card container ── */
.ru_home_form .wpcf7{
  background:var(--md-sys-color-surface-container-lowest);
  border-radius:var(--bento-radius);
  padding:var(--space-2xl);
  box-shadow:var(--md-sys-elevation-3);
  position:relative;z-index:1
}

/* ── Bento two-column grid (.row from CF7 template) ── */
.ru_home_form .row{
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:var(--space-2xl);
  align-items:start
}
.ru_home_form .col-md-7,
.ru_home_form .col-md-5{
  width:100%;padding:0;float:none
}

/* ── Section titles ── */
.ru_home_form .form-title h3{
  font:var(--md-sys-typescale-title-large);
  color:var(--md-sys-color-on-surface);
  margin:0 0 var(--space-xs);
  display:flex;align-items:center;gap:var(--space-sm)
}
.ru_home_form .form-title h3::before{
  content:'';display:inline-block;width:4px;height:24px;
  border-radius:var(--md-sys-shape-full);
  background:var(--md-sys-color-primary);flex-shrink:0
}
.ru_home_form .form-title p{
  font:var(--md-sys-typescale-body-medium);
  color:var(--md-sys-color-on-surface-variant);
  margin:0 0 var(--space-lg)
}

/* ── Estimation card (left column) ── */
.ru_home_form .form-cost-estimate{
  background:var(--md-sys-color-surface-container-low);
  border-radius:var(--md-sys-shape-large);
  padding:var(--space-lg)
}
.ru_home_form .form-quotation{
  display:flex;flex-direction:column;gap:var(--space-lg)
}

/* ── Form groups ── */
.ru_home_form .form-group{
  display:flex;flex-direction:column;gap:var(--space-xs)
}

/* ── Labels ── */
.ru_home_form label{
  display:block;
  font:var(--md-sys-typescale-label-large);
  color:var(--md-sys-color-on-surface);
  letter-spacing:.02em;margin:0
}
.ru_home_form label strong{font-weight:600}
.ru_home_form label small{
  display:block;
  font:var(--md-sys-typescale-body-small);
  color:var(--md-sys-color-on-surface-variant);
  margin-top:2px;font-weight:400
}

/* ── jQuery UI Sliders ── */
.ru_home_form .slider-wrapper{
  padding:var(--space-sm) 0
}
.ru_home_form .ui-slider{
  height:6px!important;
  background:var(--md-sys-color-surface-container-highest)!important;
  border:none!important;
  border-radius:var(--md-sys-shape-full)!important
}
.ru_home_form .ui-slider .ui-slider-range{
  background:var(--md-sys-color-primary)!important;
  border-radius:var(--md-sys-shape-full)!important
}
.ru_home_form .ui-slider .ui-slider-handle{
  width:24px!important;height:24px!important;
  top:-9px!important;
  border-radius:50%!important;
  background:var(--md-sys-color-primary)!important;
  border:3px solid var(--md-sys-color-surface-container-lowest)!important;
  box-shadow:var(--md-sys-elevation-1)!important;
  cursor:grab;
  transition:box-shadow .2s,transform .2s
}
.ru_home_form .ui-slider .ui-slider-handle:hover{
  box-shadow:var(--md-sys-elevation-2)!important;transform:scale(1.15)
}
.ru_home_form .ui-slider .ui-slider-handle:active{
  cursor:grabbing;transform:scale(1.1)
}

/* ── Slider unit display (e.g., "16 m2") ── */
.ru_home_form .slider-unit{
  display:flex;align-items:center;gap:var(--space-xs);
  font:var(--md-sys-typescale-body-medium);
  color:var(--md-sys-color-on-surface-variant)
}
.ru_home_form .slider-unit strong{
  font:var(--md-sys-typescale-body-large);
  color:var(--md-sys-color-on-surface)
}
.ru_home_form .slider-unit.input-unit{gap:var(--space-sm)}
.ru_home_form .slider-unit input[type="text"]{
  width:120px;
  padding:10px 14px;
  border:1px solid var(--md-sys-color-outline-variant);
  border-radius:var(--md-sys-shape-small);
  font:var(--md-sys-typescale-body-large);
  color:var(--md-sys-color-on-surface);
  background:var(--md-sys-color-surface-container-lowest);
  outline:none;
  transition:border-color .2s,box-shadow .2s
}
.ru_home_form .slider-unit input[type="text"]:focus{
  border-color:var(--md-sys-color-primary);
  border-width:2px;padding:9px 13px;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--md-sys-color-primary) 12%,transparent)
}
.ru_home_form .slider-unit span{
  font:var(--md-sys-typescale-label-large);
  color:var(--md-sys-color-on-surface-variant)
}

/* ── Number input (visible, like #number_input) ── */
.ru_home_form input.shows,
.ru_home_form input[type="number"]{
  width:100%;
  padding:12px 16px;
  border:1px solid var(--md-sys-color-outline-variant);
  border-radius:var(--md-sys-shape-small);
  font:var(--md-sys-typescale-body-large);
  color:var(--md-sys-color-on-surface);
  background:var(--md-sys-color-surface-container-lowest);
  outline:none;
  transition:border-color .2s,box-shadow .2s
}
.ru_home_form input.shows:focus,
.ru_home_form input[type="number"]:focus{
  border-color:var(--md-sys-color-primary);
  border-width:2px;padding:11px 15px;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--md-sys-color-primary) 12%,transparent)
}

/* ── Select dropdown ── */
.ru_home_form select{
  width:100%;
  padding:12px 16px;
  border:1px solid var(--md-sys-color-outline-variant);
  border-radius:var(--md-sys-shape-small);
  font:var(--md-sys-typescale-body-large);
  color:var(--md-sys-color-on-surface);
  background:var(--md-sys-color-surface-container-lowest);
  outline:none;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath fill='%23717970' d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  padding-right:40px;
  cursor:pointer;
  transition:border-color .2s,box-shadow .2s
}
.ru_home_form select:focus{
  border-color:var(--md-sys-color-primary);
  border-width:2px;padding:11px 15px;padding-right:39px;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--md-sys-color-primary) 12%,transparent)
}

/* ── Contact section (right column) ── */
.ru_home_form .form-receive-quotation .wrap-form{
  display:flex;flex-direction:column;gap:var(--space-md)
}
.ru_home_form .form-receive-quotation .form-group{
  position:relative
}
.ru_home_form .form-receive-quotation .form-group label{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  color:var(--md-sys-color-on-surface-variant);
  font-size:1.1rem;pointer-events:none;z-index:1
}
.ru_home_form .form-receive-quotation .form-group .fa{
  color:var(--md-sys-color-on-surface-variant)
}

/* ── Contact text inputs ── */
.ru_home_form .wrap-form input[type="text"],
.ru_home_form .wrap-form input[type="email"],
.ru_home_form .wrap-form input[type="tel"]{
  width:100%;
  padding:14px 16px 14px 42px;
  border:1px solid var(--md-sys-color-outline-variant);
  border-radius:var(--md-sys-shape-small);
  font:var(--md-sys-typescale-body-large);
  color:var(--md-sys-color-on-surface);
  background:var(--md-sys-color-surface-container-lowest);
  outline:none;
  transition:border-color .2s,box-shadow .2s
}
.ru_home_form .wrap-form input:focus{
  border-color:var(--md-sys-color-primary);
  border-width:2px;padding:13px 15px 13px 41px;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--md-sys-color-primary) 12%,transparent)
}
.ru_home_form .wrap-form input::placeholder{
  color:var(--md-sys-color-on-surface-variant);opacity:.7
}

/* ── Submit button ── */
.ru_home_form .form-btn{margin-top:var(--space-sm)}
.ru_home_form .form-btn .wpcf7-submit,
.ru_home_form input[type="submit"]{
  display:flex;align-items:center;justify-content:center;
  width:100%;
  height:52px;
  padding:0 32px;
  border-radius:var(--md-sys-shape-full);
  background:var(--md-sys-color-primary);
  color:var(--md-sys-color-on-primary);
  font:var(--md-sys-typescale-label-large);
  font-size:1rem;letter-spacing:.04em;
  border:none;cursor:pointer;
  box-shadow:var(--md-sys-elevation-0);
  transition:all .25s ease;
  position:relative;overflow:hidden
}
.ru_home_form .form-btn .wpcf7-submit:hover,
.ru_home_form input[type="submit"]:hover{
  box-shadow:var(--md-sys-elevation-2);
  transform:translateY(-1px)
}
.ru_home_form .form-btn .wpcf7-submit:active,
.ru_home_form input[type="submit"]:active{
  box-shadow:var(--md-sys-elevation-0);
  transform:translateY(0)
}

/* ── Validation messages ── */
.ru_home_form .wpcf7-not-valid-tip{
  font:var(--md-sys-typescale-body-small);
  color:var(--md-sys-color-error);
  margin-top:var(--space-xs)
}
.ru_home_form .wpcf7-response-output{
  border:1px solid var(--md-sys-color-outline-variant)!important;
  border-radius:var(--md-sys-shape-medium);
  padding:var(--space-md)!important;
  margin:var(--space-md) 0 0!important;
  font:var(--md-sys-typescale-body-medium)
}

/* ── Spinner (CF7 loading) ── */
.ru_home_form .wpcf7-spinner{
  margin:var(--space-sm) auto 0;display:block
}

/* ── Responsive ── */
@media(max-width:767px){
  .ru_home_form{padding:var(--space-2xl) 0}
  .ru_home_form .wpcf7{padding:var(--space-lg)}
  .ru_home_form .row{
    grid-template-columns:1fr;
    gap:var(--space-xl)
  }
  .ru_home_form .form-title h3{
    font:var(--md-sys-typescale-title-medium)
  }
}

/* ============================================================
   FIXED CTA ISLAND — Floating Action Button Menu
   ============================================================ */
.ru_cta_island{
  position:fixed;z-index:999;bottom:28px;right:20px;
  display:flex;flex-direction:column;gap:10px;
  align-items:flex-end
}

/* ── Individual CTA Button ── */
.ru_cta_btn{
  position:relative;
  display:flex;align-items:center;
  height:52px;
  border-radius:var(--md-sys-shape-full);
  box-shadow:var(--md-sys-elevation-2);
  text-decoration:none!important;
  overflow:hidden;
  transition:
    max-width var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-emphasized),
    box-shadow var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard),
    transform var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);
  max-width:52px;
  cursor:pointer;
  animation:ctaSlideIn var(--md-sys-motion-duration-long4) var(--md-sys-motion-easing-emphasized-decelerate) both
}
.ru_cta_btn:nth-child(1){animation-delay:0s}
.ru_cta_btn:nth-child(2){animation-delay:.08s}
.ru_cta_btn:nth-child(3){animation-delay:.16s}
.ru_cta_btn:nth-child(4){animation-delay:.24s}

.ru_cta_btn:hover{
  max-width:200px;
  box-shadow:var(--md-sys-elevation-4);
  transform:scale(1.04)
}
.ru_cta_btn:active{
  transform:scale(.97);
  box-shadow:var(--md-sys-elevation-1)
}

/* ── Icon circle ── */
.ru_cta_icon{
  width:52px;height:52px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  position:relative;z-index:1
}
.ru_cta_icon .material-symbols-rounded{
  font-size:24px;color:inherit;
  font-variation-settings:'FILL' 1,'wght' 500
}
.ru_cta_icon svg{display:block}

/* ── Label text ── */
.ru_cta_label{
  white-space:nowrap;
  padding:0 18px 0 0;
  font:var(--md-sys-typescale-label-large);
  opacity:0;
  transform:translateX(-8px);
  transition:
    opacity var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard),
    transform var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);
  pointer-events:none
}
.ru_cta_btn:hover .ru_cta_label{
  opacity:1;
  transform:translateX(0)
}

/* ── Phone — Primary green ── */
.ru_cta_phone{
  background:var(--md-sys-color-primary);
  color:var(--md-sys-color-on-primary)
}
.ru_cta_phone .ru_cta_label{color:var(--md-sys-color-on-primary)}

/* Pulse ring */
.ru_cta_pulse{
  position:absolute;
  left:0;top:0;width:52px;height:52px;
  border-radius:50%;
  border:2.5px solid var(--md-sys-color-primary);
  animation:ctaPulse 2s var(--md-sys-motion-easing-standard) infinite;
  pointer-events:none
}
@keyframes ctaPulse{
  0%{transform:scale(1);opacity:.6}
  70%{transform:scale(1.6);opacity:0}
  100%{transform:scale(1.6);opacity:0}
}

/* ── Zalo — Brand blue ── */
.ru_cta_zalo{background:#0068FF;color:#fff}
.ru_cta_zalo .ru_cta_label{color:#fff}

/* ── Messenger — Brand gradient ── */
.ru_cta_messenger{
  background:linear-gradient(135deg,#0695FF 0%,#A334FA 50%,#FF6968 100%);
  color:#fff
}
.ru_cta_messenger .ru_cta_label{color:#fff}

/* ── Back to top — Tertiary container ── */
.ru_cta_top{
  background:var(--md-sys-color-surface-container-highest);
  color:var(--md-sys-color-on-surface);
  opacity:0;visibility:hidden;
  transform:translateY(20px) scale(.8);
  transition:
    max-width var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-emphasized),
    box-shadow var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard),
    opacity var(--md-sys-motion-duration-medium3) var(--md-sys-motion-easing-standard),
    visibility var(--md-sys-motion-duration-medium3),
    transform var(--md-sys-motion-duration-medium3) var(--md-sys-motion-easing-emphasized-decelerate)
}
.ru_cta_top .ru_cta_label{color:var(--md-sys-color-on-surface)}
.ru_cta_top.ru_cta_visible{
  opacity:1;visibility:visible;
  transform:translateY(0) scale(1)
}

/* ── Entrance animation ── */
@keyframes ctaSlideIn{
  0%{opacity:0;transform:translateX(40px) scale(.6)}
  100%{opacity:1;transform:translateX(0) scale(1)}
}

/* ── Mobile tweaks ── */
@media(max-width:575px){
  .ru_cta_island{bottom:16px;right:12px;gap:8px}
  .ru_cta_btn{height:46px;max-width:46px}
  .ru_cta_icon{width:46px;height:46px}
  .ru_cta_icon .material-symbols-rounded{font-size:22px}
  .ru_cta_pulse{width:46px;height:46px}
}

/* === HOMEPAGE === */
/* Banner */
.ru_home_banner{border-radius:0;overflow:hidden;margin-bottom:var(--space-xl)}
.ru_home_banner .swiper-slide .img img{width:100%;height:auto;display:block}
.ru_home_banner .swiper-slide .img a{display:block}
.ru_home_banner .swiper-pagination-bullet{width:10px;height:10px;background:var(--md-sys-color-on-primary);opacity:.5;border-radius:var(--md-sys-shape-full)}
.ru_home_banner .swiper-pagination-bullet-active{opacity:1;width:28px;border-radius:var(--md-sys-shape-full);background:var(--md-sys-color-primary-container)}

/* ============================================================
   ABOUT SECTION — Material Design 3 + Bento Grid
   ============================================================ */
.ru_home_about{
  padding:var(--space-2xl) 0;
  position:relative;overflow:hidden
}
.ru_home_about .line1,.ru_home_about .line2,.ru_home_about .line3{display:none}

/* ── Main Bento grid ── */
.ru_home_about .ru_block{
  display:grid;
  grid-template-columns:5fr 4fr;
  gap:var(--space-2xl);
  align-items:stretch
}

/* ── Left column: hero image ── */
.ru_home_about .col-left{
  position:relative;
  border-radius:var(--bento-radius);
  overflow:hidden
}
.ru_home_about .col-left .logo_small{
  position:absolute;top:var(--space-md);left:var(--space-md);z-index:2;
  background:color-mix(in srgb,var(--md-sys-color-surface-container-lowest) 85%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-radius:var(--md-sys-shape-large);
  padding:var(--space-xs) var(--space-sm);
  box-shadow:var(--md-sys-elevation-1)
}
.ru_home_about .col-left .logo_small img{
  width:56px;height:auto;display:block
}
.ru_home_about .col-left .img1{
  height:100%;min-height:420px
}
.ru_home_about .col-left .img1 img{
  width:100%;height:100%;
  object-fit:cover;display:block;
  border-radius:var(--bento-radius)
}

/* ── Right column: title + image + text ── */
.ru_home_about .col-right{
  display:flex;flex-direction:column;gap:var(--space-lg)
}
.ru_home_about .col-right .bigtitle{
  font:var(--md-sys-typescale-headline-large);
  color:var(--md-sys-color-on-surface);
  margin:0;
  line-height:1.25
}
.ru_home_about .col-right .bigtitle::first-line{
  color:var(--md-sys-color-primary)
}

/* ── Inner flex → stacked layout ── */
.ru_home_about .col-right .flex{
  display:flex;flex-direction:column;gap:var(--space-lg);
  flex:1
}
.ru_home_about .col-right .img2{
  border-radius:var(--md-sys-shape-large);
  overflow:hidden;
  max-height:220px
}
.ru_home_about .col-right .img2 img{
  width:100%;height:100%;
  object-fit:cover;display:block
}

/* ── Text content ── */
.ru_home_about .col-right .content{
  font:var(--md-sys-typescale-body-large);
  color:var(--md-sys-color-on-surface-variant);
  line-height:1.7;
  flex:1
}
.ru_home_about .col-right .content p{
  margin-bottom:var(--space-md)
}
.ru_home_about .col-right .content p:last-child{
  margin-bottom:0
}
.ru_home_about .col-right .content strong{
  color:var(--md-sys-color-on-surface)
}

/* ── Responsive ── */
@media(max-width:991px){
  .ru_home_about .ru_block{
    grid-template-columns:1fr;gap:var(--space-xl)
  }
  .ru_home_about .col-left .img1{min-height:300px}
}
@media(max-width:575px){
  .ru_home_about{padding:var(--space-xl) 0}
  .ru_home_about .col-right .bigtitle{
    font:var(--md-sys-typescale-headline-medium)
  }
  .ru_home_about .col-left .img1{min-height:220px}
}

/* ============================================================
   WHY CHOOSE US — Material Design 3 + Bento Grid
   ============================================================ */
.ru_home_why{
  padding:var(--space-2xl) 0;
  background:var(--md-sys-color-surface-container-low);
  position:relative;overflow:hidden
}
.ru_home_why .line{display:none}

/* ── Creative Title ── */
.ru_home_why .ru_title{
  font:var(--md-sys-typescale-headline-large);
  text-align:center;
  margin-bottom:var(--space-2xl);
  color:var(--md-sys-color-on-surface)
}
.ru_home_why .ru_title span{
  color:var(--md-sys-color-primary);
  position:relative
}
.ru_home_why .ru_title span::after{
  content:'';position:absolute;
  left:0;right:0;bottom:-2px;height:3px;
  background:var(--md-sys-color-primary);
  border-radius:var(--md-sys-shape-full);
  opacity:.3
}

/* ── Grid ── */
.ru_home_why .ru_block{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-2xl);
  align-items:center
}

/* ── List items with icons ── */
.ru_home_why .list{
  display:flex;flex-direction:column;
  gap:var(--space-md)
}
.ru_home_why .list li{
  display:flex;gap:var(--space-md);
  padding:var(--space-lg);
  background:var(--md-sys-color-surface-container-lowest);
  border-radius:var(--bento-radius);
  align-items:center;
  transition:all .3s var(--md-sys-motion-easing-standard);
  position:relative;overflow:hidden
}
.ru_home_why .list li::before{
  content:'';position:absolute;
  left:0;top:0;bottom:0;width:0;
  background:linear-gradient(135deg,var(--md-sys-color-primary-container),transparent);
  transition:width .4s var(--md-sys-motion-easing-standard);
  z-index:0
}
.ru_home_why .list li:hover{
  box-shadow:var(--md-sys-elevation-2);
  transform:translateX(6px)
}
.ru_home_why .list li:hover::before{
  width:100%
}
.ru_home_why .list li>*{position:relative;z-index:1}

/* Icon */
.ru_home_why .list li .icon{
  flex-shrink:0;
  width:52px;height:52px;
  display:flex;align-items:center;justify-content:center;
  background:var(--md-sys-color-primary);
  color:var(--md-sys-color-on-primary);
  border-radius:var(--md-sys-shape-large);
  font-size:0;
  transition:all .3s
}
.ru_home_why .list li .icon .material-symbols-rounded{
  font-size:26px
}
.ru_home_why .list li:hover .icon{
  transform:scale(1.1) rotate(-5deg);
  box-shadow:var(--md-sys-elevation-2)
}

/* Number */
.ru_home_why .list li .number{
  font:var(--md-sys-typescale-headline-small);
  color:var(--md-sys-color-primary);
  flex-shrink:0;min-width:40px;
  opacity:.5
}

/* Value */
.ru_home_why .list li .value{
  font:var(--md-sys-typescale-title-medium);
  color:var(--md-sys-color-on-surface);
  flex:1
}

/* ── Image ── */
.ru_home_why .col-img .img2{
  border-radius:var(--bento-radius);
  overflow:hidden;
  box-shadow:var(--md-sys-elevation-2)
}
.ru_home_why .col-img .img2 img{
  width:100%;height:100%;
  object-fit:cover;display:block;
  transition:transform .6s var(--md-sys-motion-easing-standard)
}
.ru_home_why .col-img:hover .img2 img{
  transform:scale(1.03)
}

/* ── Responsive ── */
@media(max-width:767px){
  .ru_home_why .ru_block{grid-template-columns:1fr}
  .ru_home_why .ru_title{font:var(--md-sys-typescale-headline-medium)}
  .ru_home_why .list li{padding:var(--space-md)}
}

/* ============================================================
   DATA/STATS — Material Design 3 + Dark Gradient Banner
   ============================================================ */
.ru_home_data{
  padding:var(--space-2xl) 0;
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,#1a3a2a 0%,#0d2818 40%,#162d20 100%)
}
.ru_home_data .line{display:none}

/* ── Title on dark bg ── */
.ru_home_data .ru_title{
  font:var(--md-sys-typescale-headline-large);
  text-align:center;
  margin-bottom:var(--space-2xl);
  color:#fff;
  text-transform:capitalize
}
.ru_home_data .ru_title span{
  color:var(--md-sys-color-primary);
  position:relative
}

/* ── Grid ── */
.ru_home_data .ru_block{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--space-lg)
}

/* ── Glassmorphism Stat Cards ── */
.ru_home_data .item{
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--bento-radius);
  padding:var(--space-xl) var(--space-lg);
  text-align:center;
  transition:all .4s var(--md-sys-motion-easing-standard);
  position:relative;overflow:hidden
}
.ru_home_data .item::before{
  content:'';position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(76,175,80,.15),transparent 60%);
  opacity:0;
  transition:opacity .4s
}
.ru_home_data .item:hover{
  transform:translateY(-6px);
  box-shadow:0 12px 40px rgba(0,0,0,.3),
             0 0 30px rgba(76,175,80,.15);
  border-color:rgba(76,175,80,.3)
}
.ru_home_data .item:hover::before{opacity:1}
.ru_home_data .item>*{position:relative;z-index:1}

/* Icon */
.ru_home_data .item .icon{
  margin-bottom:var(--space-md);
  display:flex;justify-content:center
}
.ru_home_data .item .icon img{
  width:52px;height:52px;
  object-fit:contain;
  padding:10px;
  background:rgba(76,175,80,.2);
  border-radius:var(--md-sys-shape-large);
  transition:transform .3s
}
.ru_home_data .item:hover .icon img{
  transform:scale(1.12)
}

/* Number + suffix */
.ru_home_data .item .number{
  display:flex;align-items:baseline;
  justify-content:center;gap:2px;
  margin-bottom:var(--space-xs)
}
.ru_home_data .item .value{
  font-size:clamp(2.5rem,5vw,3.5rem);
  font-weight:700;
  color:#fff;
  line-height:1
}
.ru_home_data .item .sub{
  font:var(--md-sys-typescale-headline-medium);
  color:var(--md-sys-color-primary);
  font-weight:600
}

/* Label */
.ru_home_data .item .name{
  font:var(--md-sys-typescale-title-small);
  color:rgba(255,255,255,.65);
  letter-spacing:.04em;
  text-transform:uppercase
}

/* ── Responsive ── */
@media(max-width:991px){
  .ru_home_data .ru_block{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:575px){
  .ru_home_data .ru_block{grid-template-columns:1fr}
  .ru_home_data{padding:var(--space-xl) 0}
}

/* ============================================================
   PRODUCT SECTION
   ============================================================ */
.ru_home_product{
  padding:var(--space-2xl) 0;
  background:var(--md-sys-color-surface);
  position:relative
}
.ru_home_product .ru_block{margin-bottom:var(--space-2xl)}

/* ── Section Title Bar ── */
.ru_home_product .ru_block_title{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:var(--space-xl);flex-wrap:wrap;gap:var(--space-md)
}
.ru_home_product .ru_block_title .title{
  font:var(--md-sys-typescale-headline-medium);margin:0;
  display:flex;align-items:center;gap:var(--space-sm)
}
.ru_home_product .ru_block_title .title::before{
  content:'';display:inline-block;width:4px;height:28px;
  background:var(--md-sys-color-primary);border-radius:var(--md-sys-shape-full)
}
.ru_home_product .ru_block_title .title a{color:var(--md-sys-color-on-surface)}
.ru_home_product .ru_block_title .link{
  font:var(--md-sys-typescale-label-large);
  color:var(--md-sys-color-primary);
  display:flex;align-items:center;gap:6px;
  padding:8px 20px;
  border:1.5px solid var(--md-sys-color-primary);
  border-radius:var(--md-sys-shape-full);
  transition:all var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);
  text-decoration:none
}
.ru_home_product .ru_block_title .link:hover{
  background:var(--md-sys-color-primary);
  color:var(--md-sys-color-on-primary);
  transform:translateY(-1px);
  box-shadow:var(--md-sys-elevation-1)
}

/* ── Product Section Header — Gradient Strip ── */
.ru_product_header{
  display:flex;align-items:center;gap:var(--space-lg);
  padding:var(--space-lg) var(--space-xl);
  margin-bottom:var(--space-xl);
  border-radius:var(--bento-radius);
  background:linear-gradient(135deg, #006D35 0%, #00A451 40%, #2EDF74 100%);
  position:relative;overflow:hidden;
  min-height:72px
}
.ru_product_header__icon{
  flex-shrink:0;
  width:48px;height:48px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.2);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-radius:var(--md-sys-shape-large);
  border:1px solid rgba(255,255,255,.25);
  transition:transform .3s var(--md-sys-motion-easing-standard)
}
.ru_product_header:hover .ru_product_header__icon{
  transform:scale(1.1) rotate(-5deg)
}
.ru_product_header__icon .material-symbols-rounded{
  font-size:26px;color:#fff
}
.ru_product_header__info{
  flex:1;min-width:0;position:relative;z-index:1
}
.ru_product_header__desc{
  font:var(--md-sys-typescale-body-medium);
  color:rgba(255,255,255,.9);
  margin:0;
  display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden
}
/* Decorative circles */
.ru_product_header__deco{
  position:absolute;right:-20px;top:-20px;
  width:120px;height:120px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  pointer-events:none
}
.ru_product_header__deco::before{
  content:'';position:absolute;
  right:40px;bottom:-30px;
  width:80px;height:80px;
  border-radius:50%;
  background:rgba(255,255,255,.06)
}
.ru_product_header__deco::after{
  content:'';position:absolute;
  left:-60px;top:10px;
  width:50px;height:50px;
  border-radius:50%;
  background:rgba(255,255,255,.04)
}
@media(max-width:575px){
  .ru_product_header{
    padding:var(--space-md) var(--space-lg);
    gap:var(--space-md);min-height:60px
  }
  .ru_product_header__icon{width:40px;height:40px}
  .ru_product_header__icon .material-symbols-rounded{font-size:22px}
}

/* ── Swiper navigation (shared) ── */
.ru_slider{position:relative}
.ru_slider .swiper-button-prev,
.ru_slider .swiper-button-next{
  width:44px;height:44px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-radius:var(--md-sys-shape-full);
  box-shadow:0 2px 8px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.06);
  border:1px solid rgba(0,0,0,.06);
  transition:all var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);
  top:50%;transform:translateY(-50%);
  z-index:10;cursor:pointer;
  display:flex;align-items:center;justify-content:center
}
.ru_slider .swiper-button-prev{left:8px}
.ru_slider .swiper-button-next{right:8px}
.ru_slider .swiper-button-prev:hover,
.ru_slider .swiper-button-next:hover{
  background:var(--md-sys-color-primary);
  box-shadow:0 4px 16px color-mix(in srgb, var(--md-sys-color-primary) 40%, transparent), var(--md-sys-elevation-2);
  border-color:var(--md-sys-color-primary);
  transform:translateY(-50%) scale(1.08)
}
.ru_slider .swiper-button-prev:active,
.ru_slider .swiper-button-next:active{
  transform:translateY(-50%) scale(.95)
}
.ru_slider .swiper-button-prev::after,
.ru_slider .swiper-button-next::after{
  content:''!important;
  width:18px;height:18px;
  display:block;
  background:var(--md-sys-color-on-surface);
  transition:background var(--md-sys-motion-duration-short4)
}
.ru_slider .swiper-button-prev::after{
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z'/%3E%3C/svg%3E") center/contain no-repeat
}
.ru_slider .swiper-button-next::after{
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z'/%3E%3C/svg%3E") center/contain no-repeat
}
.ru_slider .swiper-button-prev:hover::after,
.ru_slider .swiper-button-next:hover::after{
  background:#fff
}
.ru_slider .swiper-button-disabled{
  opacity:.3!important;cursor:default;pointer-events:none
}
@media(max-width:767px){
  .ru_slider .swiper-button-prev,
  .ru_slider .swiper-button-next{width:36px;height:36px}
  .ru_slider .swiper-button-prev{left:-4px}
  .ru_slider .swiper-button-next{right:-4px}
  .ru_slider .swiper-button-prev::after,
  .ru_slider .swiper-button-next::after{width:14px;height:14px}
}

/* ── Product card (WooCommerce item) ── */
.ru_home_product .swiper-slide,.ru_home_category .swiper-slide{height:auto!important}
.ru_item_pro{
  background:var(--md-sys-color-surface-container-lowest);
  border-radius:var(--bento-radius);
  overflow:hidden;
  border:1px solid var(--md-sys-color-outline-variant);
  transition:all var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);
  display:flex;flex-direction:column;height:100%
}
.ru_item_pro:hover{
  box-shadow:var(--md-sys-elevation-2);
  transform:translateY(-4px);
  border-color:var(--md-sys-color-primary)
}
.ru_item_pro .img{overflow:hidden;position:relative;flex-shrink:0;aspect-ratio:1}
.ru_item_pro .img img{
  width:100%!important;height:100%!important;aspect-ratio:1!important;object-fit:cover!important;display:block;
  transition:transform var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-standard)
}
.ru_item_pro:hover .img img{transform:scale(1.06)}
.ru_item_pro .info{padding:var(--space-md) var(--space-lg);flex:1;display:flex;flex-direction:column;justify-content:center}
.ru_item_pro .name{
  font:var(--md-sys-typescale-title-small);
  margin-bottom:var(--space-xs);
  display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden
}
.ru_item_pro .name a{color:var(--md-sys-color-on-surface);text-decoration:none}
.ru_item_pro .name a:hover{color:var(--md-sys-color-primary)}
.ru_item_pro .price{
  font:var(--md-sys-typescale-title-small);
  color:var(--md-sys-color-primary);font-weight:700
}
.ru_item_pro .price del{color:var(--md-sys-color-on-surface-variant);font-weight:400;font-size:.85em}
.ru_item_pro .price ins{text-decoration:none}
.ru_item_pro .star-rating{color:var(--md-sys-color-tertiary);font-size:13px;margin-top:var(--space-xs)}

/* ============================================================
   PROJECTS SECTION — Bento Gallery ("Công trình thực hiện")
   ============================================================ */
.ru_home_project,.ru_news_sec4{
  padding:var(--space-2xl) 0;
  background:linear-gradient(180deg,
    var(--md-sys-color-surface) 0%,
    var(--md-sys-color-surface-container-low) 100%);
  position:relative;overflow:hidden
}

/* ── Section header ── */
.ru_home_project .ru_block.flex,
.ru_news_sec4 .ru_block.flex{
  display:flex;align-items:flex-end;justify-content:space-between;
  flex-wrap:wrap;gap:var(--space-md);
  margin-bottom:var(--space-xl)
}
.ru_home_title{margin-bottom:0}
.ru_home_title .sub{
  font:var(--md-sys-typescale-label-large);
  color:var(--md-sys-color-primary);
  text-transform:uppercase;letter-spacing:2px;
  margin-bottom:var(--space-xs);
  display:flex;align-items:center;gap:var(--space-sm)
}
.ru_home_title .sub::before{
  content:'';display:inline-block;width:24px;height:2px;
  background:var(--md-sys-color-primary);border-radius:var(--md-sys-shape-full)
}
.ru_home_title .title{
  font:var(--md-sys-typescale-headline-large);
  color:var(--md-sys-color-on-surface);margin:0
}

/* ── Tab pills ── */
.ru_tab_title{
  display:flex;gap:var(--space-sm);
  list-style:none;flex-wrap:wrap;
  padding:0;margin:0
}
.ru_tab_title button{
  padding:10px 24px;
  border-radius:var(--md-sys-shape-full);
  font:var(--md-sys-typescale-label-large);
  color:var(--md-sys-color-on-surface-variant);
  border:1.5px solid var(--md-sys-color-outline-variant);
  background:transparent;
  cursor:pointer;
  transition:all var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard)
}
.ru_tab_title button:hover{
  background:var(--md-sys-color-surface-container-high);
  border-color:var(--md-sys-color-outline);
  transform:translateY(-1px)
}
.ru_tab_title button.active{
  background:var(--md-sys-color-primary);
  color:var(--md-sys-color-on-primary);
  border-color:var(--md-sys-color-primary);
  box-shadow:var(--md-sys-elevation-1)
}

/* ── Bento Grid — Masonry layout ── */
.ru_home_project .bento-grid,
.ru_news_sec4 .bento-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:180px;
  gap:var(--bento-gap)
}
/* Hero cards: 1st and 2nd items span 2 rows */
.ru_home_project .bento-grid .bento-item:nth-child(1),
.ru_news_sec4 .bento-grid .bento-item:nth-child(1){
  grid-row:span 2
}
.ru_home_project .bento-grid .bento-item:nth-child(2),
.ru_news_sec4 .bento-grid .bento-item:nth-child(2){
  grid-row:span 2
}
/* 5th item takes 2 columns for variety */
.ru_home_project .bento-grid .bento-item:nth-child(5),
.ru_news_sec4 .bento-grid .bento-item:nth-child(5){
  grid-column:span 2
}

/* ── Project card ── */
.ru_home_project .bento-item,
.ru_news_sec4 .bento-item{
  padding:0;
  border-radius:var(--bento-radius);
  overflow:hidden;
  position:relative;
  cursor:pointer
}

/* ── Inner item wrapper ── */
.slider_news3 .item,.ru_news_sec4 .item{
  background:var(--md-sys-color-surface-container-low);
  border-radius:var(--bento-radius);
  overflow:hidden;
  position:relative;
  width:100%;height:100%
}

/* ── Image ── */
.slider_news3 .item .img,.ru_news_sec4 .item .img{
  width:100%;height:100%;overflow:hidden
}
.slider_news3 .item .img img,.ru_news_sec4 .item .img img{
  width:100%;height:100%;
  object-fit:cover;display:block;
  transition:transform var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-standard)
}
.ru_news_sec4 .item:hover .img img,
.slider_news3 .item:hover .img img{
  transform:scale(1.08)
}

/* ── Overlay gradient ── */
.slider_news3 .item .overlay,.ru_news_sec4 .item .overlay{
  position:absolute;inset:0;z-index:2;
  background:linear-gradient(
    to top,
    rgba(0,0,0,.75) 0%,
    rgba(0,0,0,.25) 35%,
    transparent 65%
  );
  opacity:.85;
  transition:opacity var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard)
}
.ru_news_sec4 .item:hover .overlay,
.slider_news3 .item:hover .overlay{
  opacity:1
}

/* ── Info overlay ── */
.slider_news3 .item .info,.ru_news_sec4 .item .info{
  position:absolute;bottom:0;left:0;right:0;
  padding:var(--space-lg);
  z-index:3;
  transform:translateY(4px);
  transition:transform var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard)
}
.ru_news_sec4 .item:hover .info,
.slider_news3 .item:hover .info{
  transform:translateY(0)
}

/* ── Title ── */
.slider_news3 .item .name,.ru_news_sec4 .item .name{
  font:var(--md-sys-typescale-title-small);
  color:#fff;margin:0;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-shadow:0 1px 3px rgba(0,0,0,.4)
}
/* Hero cards get bigger titles */
.ru_news_sec4 .bento-grid .bento-item:nth-child(1) .name,
.ru_news_sec4 .bento-grid .bento-item:nth-child(2) .name{
  font:var(--md-sys-typescale-title-large);
  -webkit-line-clamp:3
}

.slider_news3 .item .date{
  font:var(--md-sys-typescale-body-small);
  color:rgba(255,255,255,.8);
  margin-top:var(--space-xs)
}

/* ── Link overlay ── */
.slider_news3 .item .linkfull,.ru_news_sec4 .item .linkfull{
  position:absolute;inset:0;z-index:5
}

/* ── Tab content ── */
.tab-content>.tab-pane{display:none}
.tab-content>.tab-pane.active{display:block}

/* ── Responsive ── */
@media(max-width:991px){
  .ru_home_project .bento-grid,
  .ru_news_sec4 .bento-grid{
    grid-template-columns:repeat(3,1fr);
    grid-auto-rows:160px
  }
  .ru_home_project .bento-grid .bento-item:nth-child(5),
  .ru_news_sec4 .bento-grid .bento-item:nth-child(5){
    grid-column:span 1
  }
}
@media(max-width:767px){
  .ru_home_project,.ru_news_sec4{padding:var(--space-xl) 0}
  .ru_home_project .ru_block.flex,
  .ru_news_sec4 .ru_block.flex{
    flex-direction:column;align-items:flex-start
  }
  .ru_home_title .title{font:var(--md-sys-typescale-headline-small)}
  .ru_home_project .bento-grid,
  .ru_news_sec4 .bento-grid{
    grid-template-columns:repeat(2,1fr);
    grid-auto-rows:150px
  }
  .ru_home_project .bento-grid .bento-item:nth-child(1),
  .ru_news_sec4 .bento-grid .bento-item:nth-child(1),
  .ru_home_project .bento-grid .bento-item:nth-child(2),
  .ru_news_sec4 .bento-grid .bento-item:nth-child(2){
    grid-row:span 2
  }
  .ru_home_project .bento-grid .bento-item:nth-child(5),
  .ru_news_sec4 .bento-grid .bento-item:nth-child(5){
    grid-column:span 2
  }
}
@media(max-width:479px){
  .ru_home_project .bento-grid,
  .ru_news_sec4 .bento-grid{
    grid-template-columns:1fr 1fr;
    grid-auto-rows:140px
  }
  .ru_home_project .bento-grid .bento-item:nth-child(1),
  .ru_news_sec4 .bento-grid .bento-item:nth-child(1){
    grid-column:span 2;grid-row:span 1
  }
  .ru_home_project .bento-grid .bento-item:nth-child(2),
  .ru_news_sec4 .bento-grid .bento-item:nth-child(2){
    grid-row:span 1
  }
  .ru_home_project .bento-grid .bento-item:nth-child(5),
  .ru_news_sec4 .bento-grid .bento-item:nth-child(5){
    grid-column:span 1
  }
}

/* ============================================================
   NEWS SECTION
   ============================================================ */
.ru_home_news{
  padding:var(--space-2xl) 0;
  background:linear-gradient(180deg,
    var(--md-sys-color-surface-container-low) 0%,
    var(--md-sys-color-surface) 100%)
}

/* ── Title Bar ── */
.ru_home_news .ru_block_title{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:var(--space-xl);flex-wrap:wrap;gap:var(--space-md)
}
.ru_home_news .ru_block_title .title{
  font:var(--md-sys-typescale-headline-medium);margin:0;
  display:flex;align-items:center;gap:var(--space-sm)
}
.ru_home_news .ru_block_title .title::before{
  content:'';display:inline-block;width:4px;height:28px;
  background:var(--md-sys-color-primary);border-radius:var(--md-sys-shape-full)
}
.ru_home_news .ru_block_title .title a{color:var(--md-sys-color-on-surface);text-decoration:none}
.ru_home_news .ru_block_title .link{
  font:var(--md-sys-typescale-label-large);
  color:var(--md-sys-color-primary);
  display:flex;align-items:center;gap:6px;
  padding:8px 20px;
  border:1.5px solid var(--md-sys-color-primary);
  border-radius:var(--md-sys-shape-full);
  transition:all var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);
  text-decoration:none
}
.ru_home_news .ru_block_title .link:hover{
  background:var(--md-sys-color-primary);
  color:var(--md-sys-color-on-primary);
  transform:translateY(-1px)
}

/* ── News Card Grid ── */
.ru_home_news .ru_news_grid{
  display:grid;
  grid-template-columns:1.2fr 0.8fr;
  grid-template-rows:repeat(3, 1fr);
  gap:var(--bento-gap);
  align-items:stretch
}

/* ── Hero card (first item) ── */
.ru_news_card--hero{
  grid-row:1 / -1;
  display:flex;flex-direction:column
}
.ru_news_card--hero .ru_news_card__img{
  flex:1;min-height:0
}
.ru_news_card--hero .ru_news_card__img img{
  height:100%;aspect-ratio:auto
}
.ru_news_card--hero .ru_news_card__title{
  font:var(--md-sys-typescale-title-large);
  -webkit-line-clamp:3
}

/* ── Card base ── */
.ru_news_card{
  display:flex;flex-direction:column;
  background:var(--md-sys-color-surface-container-lowest);
  border-radius:var(--bento-radius);
  overflow:hidden;
  border:1px solid var(--md-sys-color-outline-variant);
  text-decoration:none;color:inherit;
  transition:all var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard)
}
.ru_news_card:hover{
  box-shadow:var(--md-sys-elevation-2);
  transform:translateY(-4px);
  border-color:var(--md-sys-color-primary)
}

/* ── Small cards (non-hero) — horizontal layout ── */
.ru_news_card:not(.ru_news_card--hero){
  flex-direction:row;
  align-items:stretch
}
.ru_news_card:not(.ru_news_card--hero) .ru_news_card__img{
  width:180px;flex-shrink:0
}
.ru_news_card:not(.ru_news_card--hero) .ru_news_card__img img{
  height:100%;aspect-ratio:auto
}
.ru_news_card:not(.ru_news_card--hero) .ru_news_card__info{
  display:flex;flex-direction:column;justify-content:center
}

/* ── Image ── */
.ru_news_card__img{
  overflow:hidden;position:relative
}
.ru_news_card__img img{
  width:100%;aspect-ratio:16/10;object-fit:cover;display:block;
  transition:transform var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-standard)
}
.ru_news_card:hover .ru_news_card__img img{transform:scale(1.06)}

/* ── Info ── */
.ru_news_card__info{
  padding:var(--space-md) var(--space-lg)
}

/* ── Category chip ── */
.ru_news_card__cat{
  display:inline-flex;align-items:center;
  padding:3px 12px;
  border-radius:var(--md-sys-shape-full);
  background:var(--md-sys-color-primary-container);
  color:var(--md-sys-color-on-primary-container);
  font:var(--md-sys-typescale-label-small);
  margin-bottom:var(--space-sm);
  letter-spacing:.3px
}

/* ── Title ── */
.ru_news_card__title{
  font:var(--md-sys-typescale-title-small);
  color:var(--md-sys-color-on-surface);
  margin:0 0 var(--space-sm);
  display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;
  transition:color var(--md-sys-motion-duration-short4)
}
.ru_news_card:hover .ru_news_card__title{
  color:var(--md-sys-color-primary)
}

/* ── Meta (date) ── */
.ru_news_card__meta{
  display:flex;align-items:center;gap:var(--space-xs);
  font:var(--md-sys-typescale-body-small);
  color:var(--md-sys-color-on-surface-variant)
}

/* ── Responsive ── */
@media(max-width:991px){
  .ru_news_card:not(.ru_news_card--hero) .ru_news_card__img{
    width:140px
  }
}
@media(max-width:767px){
  .ru_home_news .ru_news_grid{
    grid-template-columns:1fr;
    grid-template-rows:auto
  }
  .ru_news_card--hero{grid-row:auto}
  .ru_news_card:not(.ru_news_card--hero){
    flex-direction:column
  }
  .ru_news_card:not(.ru_news_card--hero) .ru_news_card__img{
    width:100%
  }
  .ru_news_card:not(.ru_news_card--hero) .ru_news_card__img img{
    aspect-ratio:16/10
  }
  .ru_news_card:hover{transform:none}
}

/* ============================================================
   CATEGORY SECTION (Services, Dealers, etc.)
   ============================================================ */
.ru_home_category{
  padding:var(--space-2xl) 0;position:relative
}
.ru_home_category .ru_block{margin-bottom:var(--space-2xl)}

/* ── Title Bar ── */
.ru_home_category .ru_block_title{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:var(--space-xl);flex-wrap:wrap;gap:var(--space-md)
}
.ru_home_category .ru_block_title .title{
  font:var(--md-sys-typescale-headline-medium);margin:0;
  display:flex;align-items:center;gap:var(--space-sm)
}
.ru_home_category .ru_block_title .title::before{
  content:'';display:inline-block;width:4px;height:28px;
  background:var(--md-sys-color-primary);border-radius:var(--md-sys-shape-full)
}
.ru_home_category .ru_block_title .title a{color:var(--md-sys-color-on-surface);text-decoration:none}
.ru_home_category .ru_block_title .link{
  font:var(--md-sys-typescale-label-large);
  color:var(--md-sys-color-primary);
  display:flex;align-items:center;gap:6px;
  padding:8px 20px;
  border:1.5px solid var(--md-sys-color-primary);
  border-radius:var(--md-sys-shape-full);
  transition:all var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);
  text-decoration:none
}
.ru_home_category .ru_block_title .link:hover{
  background:var(--md-sys-color-primary);
  color:var(--md-sys-color-on-primary);
  transform:translateY(-1px);
  box-shadow:var(--md-sys-elevation-1)
}

/* ── Category card ── */
.ru_home_category .item{
  background:var(--md-sys-color-surface-container-lowest);
  border-radius:var(--bento-radius);
  overflow:hidden;
  border:1px solid var(--md-sys-color-outline-variant);
  transition:all var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard)
}
.ru_home_category .item:hover{
  box-shadow:var(--md-sys-elevation-2);
  transform:translateY(-4px);
  border-color:var(--md-sys-color-primary)
}

/* Image */
.ru_home_category .item .img{
  overflow:hidden;position:relative
}
.ru_home_category .item .img img{
  width:100%;aspect-ratio:16/10;object-fit:cover;display:block;
  transition:transform var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-standard)
}
.ru_home_category .item:hover .img img{transform:scale(1.06)}

/* Info */
.ru_home_category .item .info{padding:var(--space-md) var(--space-lg)}
.ru_home_category .item .date{
  font:var(--md-sys-typescale-body-small);
  color:var(--md-sys-color-on-surface-variant);
  margin-bottom:6px;
  display:flex;align-items:center;gap:var(--space-xs)
}
.ru_home_category .item .date::before{
  content:'';width:6px;height:6px;
  border-radius:var(--md-sys-shape-full);
  background:var(--md-sys-color-primary);display:inline-block
}
.ru_home_category .item .name{
  font:var(--md-sys-typescale-title-small);margin:0;
  display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden
}
.ru_home_category .item .name a{
  color:var(--md-sys-color-on-surface);text-decoration:none;
  transition:color var(--md-sys-motion-duration-short4)
}
.ru_home_category .item .name a:hover{color:var(--md-sys-color-primary)}

/* Alternating background */
.ru_home_category2{background:var(--md-sys-color-surface-container-low)}

/* Swiper grid rows spacing */
.ru_home_category .swiper-wrapper{
  row-gap:var(--space-xl)
}
.ru_home_category .swiper-slide{
  margin-bottom:0 !important
}

/* Bootstrap row grid spacing (footer "Nổi bật" section) */
.ru_home_category .ru_sliders .row{
  row-gap:var(--space-xl)
}
/* === INNER PAGES === */

/* Page banner */
.ru_page_banner,.ru_news_banner{min-height:360px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;border-radius:0 0 var(--bento-radius) var(--bento-radius)}
.ru_page_banner .background,.ru_news_banner .background{position:absolute;inset:0;background-size:cover;background-position:center}
.ru_page_banner .overlay,.ru_news_banner .overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.3) 0%,rgba(0,0,0,.6) 100%);z-index:1}
.ru_page_banner .inner,.ru_news_banner .inner{position:relative;z-index:2;text-align:center;padding:var(--space-xl)}
.ru_page_banner .title,.ru_news_banner .title{font:var(--md-sys-typescale-display-small);color:#fff;margin:0}
.ru_news_banner .form{margin-top:var(--space-lg);max-width:500px;margin-left:auto;margin-right:auto}
.ru_news_banner .form .ru_searchform{display:flex;gap:var(--space-sm)}
.ru_news_banner .form input[type="text"],.ru_news_banner .form input[type="search"]{flex:1;border:none;border-radius:var(--md-sys-shape-full);padding:12px 24px;background:rgba(255,255,255,.95);color:var(--md-sys-color-on-surface);font:var(--md-sys-typescale-body-large)}
.ru_news_banner .form .search-submit{border-radius:var(--md-sys-shape-full);background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary);border:none;padding:12px 24px;font:var(--md-sys-typescale-label-large);cursor:pointer}

/* News page sections */
.ru_news_body{padding:var(--space-2xl) 0}
.ru_news_body .section{margin-bottom:var(--space-2xl)}
.ru_block_title{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-lg)}
.ru_block_title .title{font:var(--md-sys-typescale-headline-small);margin:0;color:var(--md-sys-color-on-surface)}
.ru_block_title .link{font:var(--md-sys-typescale-label-large);color:var(--md-sys-color-primary);display:flex;align-items:center;gap:4px}

/* News sec1 (featured slider) */
.ru_news_sec1 .item{position:relative;border-radius:var(--bento-radius);overflow:hidden}
.ru_news_sec1 .item .img img{width:100%;aspect-ratio:21/9;object-fit:cover}
.ru_news_sec1 .item .info{position:absolute;bottom:0;left:0;right:0;padding:var(--space-xl);background:linear-gradient(to top,rgba(0,0,0,.8),transparent);z-index:2}
.ru_news_sec1 .item .info .box{max-width:600px}
.ru_news_sec1 .item .status{display:inline-block;padding:4px 12px;border-radius:var(--md-sys-shape-full);background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary);font:var(--md-sys-typescale-label-medium);margin-bottom:var(--space-sm)}
.ru_news_sec1 .item .name{font:var(--md-sys-typescale-headline-small);color:#fff;margin-bottom:var(--space-sm)}
.ru_news_sec1 .item .name a{color:#fff}
.ru_news_sec1 .item .desc{font:var(--md-sys-typescale-body-medium);color:rgba(255,255,255,.85);margin-bottom:var(--space-sm)}
.ru_news_sec1 .item .date{font:var(--md-sys-typescale-body-small);color:rgba(255,255,255,.7)}

/* News sec2 (featured cards) */
.ru_news_sec2 .item{position:relative;border-radius:var(--bento-radius);overflow:hidden;aspect-ratio:16/10}
.ru_news_sec2 .item .img img{width:100%;height:100%;object-fit:cover}
.ru_news_sec2 .item .overlay{background:linear-gradient(to top,rgba(0,0,0,.7),transparent 60%)}
.ru_news_sec2 .item .status{position:absolute;top:var(--space-md);left:var(--space-md);padding:4px 12px;border-radius:var(--md-sys-shape-full);background:var(--md-sys-color-tertiary);color:var(--md-sys-color-on-tertiary);font:var(--md-sys-typescale-label-medium);z-index:3}
.ru_news_sec2 .item .info{position:absolute;bottom:0;left:0;right:0;padding:var(--space-lg);z-index:3}
.ru_news_sec2 .item .name{font:var(--md-sys-typescale-title-medium);color:#fff;margin-bottom:var(--space-xs)}
.ru_news_sec2 .item .desc{font:var(--md-sys-typescale-body-small);color:rgba(255,255,255,.8);margin-bottom:var(--space-xs)}
.ru_news_sec2 .item .date{font:var(--md-sys-typescale-body-small);color:rgba(255,255,255,.6)}
.ru_news_sec2 .item .linkfull{position:absolute;inset:0;z-index:5}

/* News sec3 */
.ru_news_sec3 .item{position:relative;border-radius:var(--md-sys-shape-large);overflow:hidden;aspect-ratio:16/10}
.ru_news_sec3 .item .img img{width:100%;height:100%;object-fit:cover}
.ru_news_sec3 .item .overlay{background:linear-gradient(to top,rgba(0,0,0,.7),transparent 60%)}
.ru_news_sec3 .item .info{position:absolute;bottom:0;left:0;right:0;padding:var(--space-md);z-index:3}
.ru_news_sec3 .item .name{font:var(--md-sys-typescale-title-small);color:#fff;margin:0}
.ru_news_sec3 .item .desc{font:var(--md-sys-typescale-body-small);color:rgba(255,255,255,.8)}
.ru_news_sec3 .item .date{font:var(--md-sys-typescale-body-small);color:rgba(255,255,255,.6)}
.ru_news_sec3 .item .linkfull{position:absolute;inset:0;z-index:5}

/* News sec5 list */
.ru_list_news .row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--bento-gap)}
.ru_list_news .col-item{min-width:0}
.linkend{margin-top:var(--space-xl);text-align:center}
.linkend .link{display:inline-flex;align-items:center;gap:var(--space-sm);padding:10px 24px;border-radius:var(--md-sys-shape-full);background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary);font:var(--md-sys-typescale-label-large)}
@media(max-width:767px){.ru_list_news .row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:575px){.ru_list_news .row{grid-template-columns:1fr}}

/* Loop item (news card) */
.loop-item,.ru_item_news{background:var(--md-sys-color-surface-container-lowest);border-radius:var(--md-sys-shape-large);overflow:hidden;transition:all var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);height:100%}
.loop-item:hover,.ru_item_news:hover{box-shadow:var(--md-sys-elevation-2);transform:translateY(-2px)}
.loop-item .img img,.ru_item_news .img img{width:100%;aspect-ratio:16/10;object-fit:cover}
.loop-item .info,.ru_item_news .info{padding:var(--space-md)}
.loop-item .date,.ru_item_news .date{font:var(--md-sys-typescale-body-small);color:var(--md-sys-color-on-surface-variant);margin-bottom:4px}
.loop-item .name,.ru_item_news .name{font:var(--md-sys-typescale-title-small);margin:0 0 var(--space-sm)}
.loop-item .name a,.ru_item_news .name a{color:var(--md-sys-color-on-surface)}
.loop-item .desc,.ru_item_news .desc{font:var(--md-sys-typescale-body-medium);color:var(--md-sys-color-on-surface-variant);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ============================================================
   SINGLE POST — Material Design 3 + Bento Grid
   ============================================================ */

/* ── Reading Progress Bar ── */
.single-progress-bar{
  position:fixed;top:0;left:0;width:0;height:3px;z-index:9999;
  background:linear-gradient(90deg,var(--md-sys-color-primary),var(--md-sys-color-tertiary));
  border-radius:0 var(--md-sys-shape-full) var(--md-sys-shape-full) 0;
  transition:width 80ms linear;
  box-shadow:0 0 8px color-mix(in srgb,var(--md-sys-color-primary) 40%,transparent)
}

/* ── Body wrapper ── */
.ru_single_body{padding:0 0 var(--space-3xl)}

/* ── Hero Section ── */
.single-hero{
  position:relative;overflow:hidden;
  margin-top:calc(-1 * var(--space-xl));
  margin-bottom:calc(-1 * var(--space-xl));
  border-radius:0 0 var(--bento-radius) var(--bento-radius)
}
.single-hero__image{position:relative;min-height:360px;max-height:520px;overflow:hidden}
.single-hero__image img{width:100%;height:100%;min-height:360px;max-height:520px;object-fit:cover;display:block}
.single-hero__image .single-hero__placeholder{
  width:100%;min-height:360px;max-height:520px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--md-sys-color-primary-container),var(--md-sys-color-tertiary-container))
}
.single-hero__placeholder .material-symbols-rounded{font-size:96px;color:var(--md-sys-color-on-primary-container);opacity:.3}
.single-hero__overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,
    rgba(0,0,0,.75) 0%,
    rgba(0,0,0,.35) 40%,
    rgba(0,0,0,.1) 70%,
    transparent 100%);
  z-index:1
}
.single-hero__content{
  position:absolute;bottom:0;left:0;right:0;z-index:2;
  padding-bottom:var(--space-2xl)
}
.single-hero__breadcrumbs{margin-bottom:var(--space-md)}
.single-hero__breadcrumbs .ru_breadcrumbs{color:rgba(255,255,255,.7);margin-bottom:0}
.single-hero__breadcrumbs .ru_breadcrumbs a{color:rgba(255,255,255,.7)}
.single-hero__breadcrumbs .ru_breadcrumbs a:hover{color:#fff}
.single-hero__chips{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-bottom:var(--space-md)}
.single-chip{
  display:inline-flex;align-items:center;height:28px;padding:0 14px;
  border-radius:var(--md-sys-shape-full);
  background:rgba(255,255,255,.18);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.2);
  color:#fff;font:var(--md-sys-typescale-label-medium);
  transition:all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard)
}
.single-chip:hover{background:rgba(255,255,255,.3);color:#fff}
.single-hero__title{
  font:var(--md-sys-typescale-display-small);color:#fff;
  margin:0;max-width:800px;
  text-shadow:0 2px 12px rgba(0,0,0,.3)
}

/* ── Meta Bento Grid ── */
.single-meta-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:var(--bento-gap);
  margin:var(--space-2xl) 0 var(--space-xl);
  position:relative;z-index:3
}
.single-meta-tile{
  display:flex;align-items:center;gap:var(--space-sm);
  background:var(--md-sys-color-surface-container-low);
  border-radius:var(--md-sys-shape-large);
  padding:var(--space-md) var(--space-lg);
  border:1px solid var(--md-sys-color-outline-variant);
  transition:all var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard)
}
.single-meta-tile:hover{
  background:var(--md-sys-color-surface-container);
  border-color:var(--md-sys-color-primary);
  transform:translateY(-2px);
  box-shadow:var(--md-sys-elevation-1)
}
.single-meta-tile__icon{
  font-size:28px;
  color:var(--md-sys-color-primary);
  background:var(--md-sys-color-primary-container);
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--md-sys-shape-medium);
  flex-shrink:0
}
.single-meta-tile__body{display:flex;flex-direction:column;min-width:0}
.single-meta-tile__label{
  font:var(--md-sys-typescale-label-small);
  color:var(--md-sys-color-on-surface-variant);
  text-transform:uppercase;letter-spacing:.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.single-meta-tile__value{
  font:var(--md-sys-typescale-body-medium);font-weight:600;
  color:var(--md-sys-color-on-surface);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.single-meta-tile__value a{color:var(--md-sys-color-primary)}
.single-meta-tile__value a:hover{text-decoration:underline}

/* ── Content + Sidebar Layout ── */
.single-layout{
  display:grid;
  grid-template-columns:1fr 320px;
  gap:var(--space-xl);
  margin-bottom:var(--space-2xl);
  align-items:start
}

/* ── Article Card ── */
.single-article{
  background:var(--md-sys-color-surface-container-lowest);
  border-radius:var(--bento-radius);
  padding:var(--space-md) var(--space-xl);
  border:1px solid var(--md-sys-color-outline-variant);
  margin-bottom:var(--space-xl)
}
.single-article__content{
  font:var(--md-sys-typescale-body-large);line-height:1.85;
  color:var(--md-sys-color-on-surface)
}

/* ── CTA Bottom ── */
.single-cta{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,
    var(--md-sys-color-primary-container) 0%,
    color-mix(in srgb,var(--md-sys-color-tertiary-container) 60%,var(--md-sys-color-primary-container)) 100%);
  border-radius:var(--bento-radius);
  padding:var(--space-2xl);
  text-align:center;
  margin-bottom:var(--space-xl)
}
.single-cta__glow{
  position:absolute;top:-40%;right:-20%;width:300px;height:300px;
  border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--md-sys-color-primary) 20%,transparent),transparent 70%);
  pointer-events:none;animation:ctaPulse 4s ease-in-out infinite
}
@keyframes ctaPulse{
  0%,100%{transform:scale(1);opacity:.6}
  50%{transform:scale(1.2);opacity:1}
}
.single-cta__icon{
  font-size:48px;color:var(--md-sys-color-primary);
  margin-bottom:var(--space-md);display:block
}
.single-cta__title{
  font:var(--md-sys-typescale-title-large);
  color:var(--md-sys-color-on-primary-container);
  margin-bottom:var(--space-lg)
}
.single-cta__btn{
  height:48px;padding:0 32px;font-size:15px;
  position:relative;z-index:1;
  box-shadow:var(--md-sys-elevation-2);
  transition:all var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard)
}
.single-cta__btn:hover{
  box-shadow:var(--md-sys-elevation-3);
  transform:translateY(-1px);
  background:color-mix(in srgb,var(--md-sys-color-primary),black 15%)!important;
  color:var(--md-sys-color-on-primary)!important
}

/* ── Sidebar ── */
.single-aside__inner{position:sticky;top:80px}

/* Share Card */
.single-share-card{
  background:var(--md-sys-color-surface-container-low);
  border-radius:var(--md-sys-shape-large);
  padding:var(--space-lg);
  margin-bottom:var(--space-md);
  border:1px solid var(--md-sys-color-outline-variant)
}
.single-share-card__title{
  display:flex;align-items:center;gap:var(--space-sm);
  font:var(--md-sys-typescale-title-small);
  color:var(--md-sys-color-on-surface);
  margin-bottom:var(--space-md)
}
.single-share-card__title .material-symbols-rounded{
  font-size:20px;color:var(--md-sys-color-primary)
}
.single-share-card__buttons{display:flex;gap:var(--space-sm)}
.single-share-btn{
  flex:1;display:flex;align-items:center;justify-content:center;
  height:40px;border-radius:var(--md-sys-shape-full);
  border:1px solid var(--md-sys-color-outline-variant);
  background:var(--md-sys-color-surface-container-lowest);
  color:var(--md-sys-color-on-surface-variant);
  cursor:pointer;
  transition:all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard)
}
.single-share-btn:hover{
  background:var(--md-sys-color-surface-container-high);
  border-color:var(--md-sys-color-primary);
  color:var(--md-sys-color-primary)
}
.single-share-btn--fb{background:#1877F2;color:#fff;border-color:#1877F2}
.single-share-btn--fb:hover{opacity:.9;color:#fff;border-color:#1877F2;background:#1877F2}

/* Sidebar Widgets */
.single-aside .ru_sidebar{
  background:var(--md-sys-color-surface-container-low);
  border-radius:var(--md-sys-shape-large);
  padding:var(--space-lg);
  border:1px solid var(--md-sys-color-outline-variant)
}

/* Widget title — M3 styled */
.ru_widget_title{
  font:var(--md-sys-typescale-title-medium);color:var(--md-sys-color-on-surface);
  margin-bottom:var(--space-md);padding-bottom:var(--space-sm);
  border-bottom:2px solid var(--md-sys-color-primary);
  display:flex;align-items:center;gap:var(--space-sm)
}

/* Category / Archive list — M3 list styling */
.single-aside .widget ul,.single-aside .widget ol{
  list-style:none;padding:0;margin:0
}
.single-aside .widget ul li{
  margin:0;border-bottom:1px solid var(--md-sys-color-surface-variant)
}
.single-aside .widget ul li:last-child{border-bottom:none}
.single-aside .widget ul li a{
  display:flex;align-items:center;gap:var(--space-sm);
  padding:10px var(--space-sm);
  font:var(--md-sys-typescale-body-medium);
  color:var(--md-sys-color-on-surface);
  border-radius:var(--md-sys-shape-small);
  transition:all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
  text-decoration:none
}
.single-aside .widget ul li a::before{
  content:'\203A';font-size:18px;font-weight:700;
  color:var(--md-sys-color-primary);flex-shrink:0;
  width:20px;text-align:center;
  transition:transform var(--md-sys-motion-duration-short4)
}
.single-aside .widget ul li a:hover{
  background:var(--md-sys-color-surface-container-high);
  color:var(--md-sys-color-primary);padding-left:var(--space-md)
}
.single-aside .widget ul li a:hover::before{
  transform:translateX(2px)
}

/* Recent / Popular post widget */
.ru_widget_post .item{
  display:flex;gap:var(--space-sm);
  margin-bottom:var(--space-md);padding-bottom:var(--space-md);
  border-bottom:1px solid var(--md-sys-color-surface-variant);
  transition:all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
  border-radius:var(--md-sys-shape-small);padding:var(--space-sm)
}
.ru_widget_post .item:last-child{border-bottom:none;margin-bottom:0}
.ru_widget_post .item:hover{
  background:var(--md-sys-color-surface-container-high);
  transform:translateX(2px)
}
.ru_widget_post .item .img{width:80px;flex-shrink:0}
.ru_widget_post .item .img img{
  width:80px;height:60px;object-fit:cover;
  border-radius:var(--md-sys-shape-medium);
  transition:transform var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard)
}
.ru_widget_post .item:hover .img img{transform:scale(1.05)}
.ru_widget_post .item .info .name{
  font:var(--md-sys-typescale-body-medium);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
.ru_widget_post .item .info .name a{
  color:var(--md-sys-color-on-surface);
  transition:color var(--md-sys-motion-duration-short4)
}
.ru_widget_post .item:hover .info .name a{color:var(--md-sys-color-primary)}

/* ── Fixed TOC Plugin Override (Material 3) ── */
.single-aside #ftwp-container-outer,
#ftwp-container-outer{
  background:var(--md-sys-color-surface-container-low)!important;
  border:1px solid var(--md-sys-color-outline-variant)!important;
  border-radius:var(--md-sys-shape-large)!important;
  box-shadow:none!important;
  margin-bottom:var(--space-md)!important;
  padding:0!important;
  font-family:inherit!important
}
#ftwp-container-outer *{font-family:inherit!important}
#ftwp-header{
  background:var(--md-sys-color-primary-container)!important;
  border-bottom:1px solid var(--md-sys-color-outline-variant)!important;
  border-radius:var(--md-sys-shape-large) var(--md-sys-shape-large) 0 0!important;
  padding:var(--space-sm) var(--space-md)!important;
  color:var(--md-sys-color-on-primary-container)!important;
  display:flex!important;align-items:center!important;justify-content:space-between!important
}
#ftwp-header .ftwp-header-title,
#ftwp-header span{
  font:var(--md-sys-typescale-title-small)!important;
  color:var(--md-sys-color-on-primary-container)!important
}
#ftwp-header-icon,
#ftwp-header .ftwp-header-icon{
  color:var(--md-sys-color-on-primary-container)!important
}
#ftwp-container{
  padding:var(--space-sm) 0!important;
  background:transparent!important
}
#ftwp-container ol,
#ftwp-container ul{
  list-style:none!important;padding:0!important;margin:0!important
}
#ftwp-container li{
  margin:0!important;border-bottom:none!important
}
#ftwp-container li a{
  display:block!important;
  padding:8px var(--space-md)!important;
  font:var(--md-sys-typescale-body-medium)!important;
  color:var(--md-sys-color-on-surface)!important;
  border-radius:var(--md-sys-shape-small)!important;
  border-left:3px solid transparent!important;
  transition:all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard)!important;
  text-decoration:none!important;background:transparent!important
}
#ftwp-container li a:hover{
  background:var(--md-sys-color-surface-container-high)!important;
  color:var(--md-sys-color-primary)!important;
  border-left-color:var(--md-sys-color-primary)!important
}
#ftwp-container li.ftwp-active a,
#ftwp-container li a.active{
  background:color-mix(in srgb,var(--md-sys-color-primary) 12%,transparent)!important;
  color:var(--md-sys-color-primary)!important;
  border-left-color:var(--md-sys-color-primary)!important;
  font-weight:600!important
}
/* TOC sub-lists */
#ftwp-container ol ol,
#ftwp-container ul ul{
  padding-left:var(--space-md)!important
}
#ftwp-container ol ol li a,
#ftwp-container ul ul li a{
  font:var(--md-sys-typescale-body-small)!important;
  padding:6px var(--space-md)!important
}

/* ── Comments Section ── */
.single-comments{
  background:var(--md-sys-color-surface-container-lowest);
  border-radius:var(--bento-radius);
  padding:var(--space-xl) var(--space-2xl);
  border:1px solid var(--md-sys-color-outline-variant)
}
.single-comments__header{
  display:flex;align-items:center;gap:var(--space-sm);
  font:var(--md-sys-typescale-title-large);
  color:var(--md-sys-color-on-surface);
  margin-bottom:var(--space-lg);
  padding-bottom:var(--space-md);
  border-bottom:2px solid var(--md-sys-color-primary)
}
.single-comments__header .material-symbols-rounded{
  font-size:28px;color:var(--md-sys-color-primary)
}

/* ── Related Posts Section ── */
.single-related{margin-top:var(--space-2xl)}
.single-related__header{
  display:flex;align-items:center;gap:var(--space-sm);
  font:var(--md-sys-typescale-headline-small);
  color:var(--md-sys-color-on-surface);
  margin-bottom:var(--space-lg)
}
.single-related__header .material-symbols-rounded{
  font-size:28px;color:var(--md-sys-color-primary);
  background:var(--md-sys-color-primary-container);
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--md-sys-shape-medium)
}
.single-related__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--bento-gap)
}
.single-related__card{
  background:var(--md-sys-color-surface-container-lowest);
  border-radius:var(--bento-radius);
  overflow:hidden;
  border:1px solid var(--md-sys-color-outline-variant);
  transition:all var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard)
}
.single-related__card:hover{
  transform:translateY(-4px);
  box-shadow:var(--md-sys-elevation-2);
  border-color:var(--md-sys-color-primary)
}
.single-related__img{display:block;overflow:hidden}
.single-related__img img{
  width:100%;aspect-ratio:16/10;object-fit:cover;display:block;
  transition:transform var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-standard)
}
.single-related__card:hover .single-related__img img{transform:scale(1.06)}
.single-related__info{padding:var(--space-md) var(--space-lg)}
.single-related__name{
  font:var(--md-sys-typescale-title-small);margin:0 0 var(--space-sm);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
.single-related__name a{color:var(--md-sys-color-on-surface);transition:color var(--md-sys-motion-duration-short4)}
.single-related__name a:hover{color:var(--md-sys-color-primary)}
.single-related__desc{
  font:var(--md-sys-typescale-body-medium);color:var(--md-sys-color-on-surface-variant);margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}

/* ── Suggested Reading ── */
.single-suggested{margin-top:var(--space-xl)}

/* ── RESPONSIVE ── */
@media(max-width:991px){
  .single-hero__title{font:var(--md-sys-typescale-headline-large)}
  .single-meta-grid{grid-template-columns:repeat(3,1fr)}
  .single-layout{grid-template-columns:1fr}
  .single-aside__inner{position:static}
  .single-related__grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:767px){
  .single-hero__image,.single-hero__image img,.single-hero__image .single-hero__placeholder{min-height:280px;max-height:400px}
  .single-hero__title{font:var(--md-sys-typescale-headline-medium)}
  .single-meta-grid{grid-template-columns:repeat(2,1fr)}
  .single-article{padding:var(--space-lg);border-radius:var(--md-sys-shape-large)}
  .single-comments{padding:var(--space-lg);border-radius:var(--md-sys-shape-large)}
  .single-cta{padding:var(--space-xl)}
  .single-related__grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:575px){
  .single-hero__image,.single-hero__image img,.single-hero__image .single-hero__placeholder{min-height:220px;max-height:320px}
  .single-hero__title{font:var(--md-sys-typescale-headline-small)}
  .single-hero__content{padding-bottom:var(--space-lg)}
  .single-meta-grid{grid-template-columns:1fr}
  .single-article{padding:var(--space-md) var(--space-lg);border-radius:var(--md-sys-shape-medium)}
  .single-comments{padding:var(--space-md) var(--space-lg);border-radius:var(--md-sys-shape-medium)}
  .single-related__grid{grid-template-columns:1fr}
}

/* ============================================================
   ABOUT PAGE — Material Design 3 + Bento Grid
   ============================================================ */

/* ── Scroll Reveal Keyframes ── */
@keyframes aboutFadeUp{
  from{opacity:0;transform:translateY(32px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes aboutFadeIn{
  from{opacity:0;transform:scale(.96)}
  to{opacity:1;transform:scale(1)}
}
@keyframes aboutBounceArrow{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(8px)}
}
@keyframes aboutGlow{
  0%,100%{opacity:.5;transform:scale(1)}
  50%{opacity:.8;transform:scale(1.15)}
}
@keyframes aboutFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}

/* Reveal base — hidden until in view */
[data-reveal]{
  opacity:0;transform:translateY(32px);
  transition:opacity var(--md-sys-motion-duration-long4) var(--md-sys-motion-easing-emphasized-decelerate),
             transform var(--md-sys-motion-duration-long4) var(--md-sys-motion-easing-emphasized-decelerate)
}
[data-reveal].is-visible{opacity:1;transform:translateY(0)}
[data-reveal="delay-1"]{transition-delay:120ms}
[data-reveal="delay-2"]{transition-delay:240ms}
[data-reveal="delay-3"]{transition-delay:360ms}
[data-reveal="delay-4"]{transition-delay:480ms}

/* ── HERO BANNER ── */
.about-hero{
  position:relative;min-height:520px;display:flex;align-items:flex-end;
  overflow:hidden;border-radius:0 0 var(--bento-radius) var(--bento-radius)
}
.about-hero__bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  transform:scale(1.1);will-change:transform;
  transition:transform 0s linear
}
.about-hero__mesh{
  position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(ellipse at 20% 80%,color-mix(in srgb,var(--md-sys-color-primary) 30%,transparent) 0%,transparent 50%),
    radial-gradient(ellipse at 80% 20%,color-mix(in srgb,var(--md-sys-color-tertiary) 25%,transparent) 0%,transparent 50%);
  mix-blend-mode:multiply
}
.about-hero__overlay{
  position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.55) 60%,rgba(0,0,0,.75) 100%)
}
.about-hero__content{
  position:relative;z-index:3;width:100%;
  padding:var(--space-3xl) 0 var(--space-2xl)
}
.about-hero__pill{
  display:inline-flex;align-items:center;gap:var(--space-sm);
  padding:8px 20px;border-radius:var(--md-sys-shape-full);
  background:rgba(255,255,255,.12);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.2);
  color:rgba(255,255,255,.9);font:var(--md-sys-typescale-label-large);
  margin-bottom:var(--space-lg)
}
.about-hero__pill .material-symbols-rounded{font-size:18px;color:var(--md-sys-color-primary-container)}
.about-hero__title{
  font:var(--md-sys-typescale-display-medium);color:#fff;margin:0 0 var(--space-md);
  max-width:700px;text-shadow:0 2px 16px rgba(0,0,0,.3)
}
.about-hero__sub{
  font:var(--md-sys-typescale-title-large);color:rgba(255,255,255,.8);margin:0;max-width:600px
}
.about-hero__scroll-indicator{
  position:absolute;bottom:var(--space-lg);left:50%;transform:translateX(-50%);z-index:4;
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--md-sys-shape-full);
  background:rgba(255,255,255,.1);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.15);
  color:#fff;animation:aboutBounceArrow 2s ease-in-out infinite;
  transition:opacity .3s
}
.about-hero__scroll-indicator .material-symbols-rounded{font-size:24px}

/* ── BODY WRAPPER ── */
.ru_about_body{padding:0}

/* ── COMMON SECTION ── */
.about-sec{padding:var(--space-3xl) 0;position:relative;overflow:hidden}
.about-sec__header{display:flex;align-items:center;gap:var(--space-md);margin-bottom:var(--space-xl)}
.about-sec__header--center{flex-direction:column;text-align:center;align-items:center}
.about-sec__icon-pill{
  width:48px;height:48px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--md-sys-shape-medium);
  background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)
}
.about-sec__icon-pill .material-symbols-rounded{font-size:24px}
.about-sec__title{font:var(--md-sys-typescale-headline-large);color:var(--md-sys-color-on-surface);margin:0}
.about-sec__sub{font:var(--md-sys-typescale-label-large);color:var(--md-sys-color-primary);text-transform:uppercase;letter-spacing:1px}

/* ── COMMON TILE STYLES ── */
.about-tile{
  background:var(--md-sys-color-surface-container-lowest);
  border-radius:var(--bento-radius);
  border:1px solid var(--md-sys-color-outline-variant);
  overflow:hidden;position:relative;
  transition:all var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard)
}
.about-tile:hover{
  border-color:var(--md-sys-color-primary);
  box-shadow:var(--md-sys-elevation-2);transform:translateY(-3px)
}
.about-tile img{width:100%;height:100%;object-fit:cover;display:block}
.about-tile__headline{
  font:var(--md-sys-typescale-headline-small);color:var(--md-sys-color-on-surface);
  margin:0 0 var(--space-md)
}
.about-tile__body{font:var(--md-sys-typescale-body-large);line-height:1.8;color:var(--md-sys-color-on-surface-variant)}
.about-tile__body p{margin-bottom:var(--space-sm)}
.about-tile__body p:last-child{margin-bottom:0}

/* ══════════════════════════════════════════
   SEC 1 — Company Intro Bento Grid
   ══════════════════════════════════════════ */
.about-sec--intro{padding-top:var(--space-2xl)}
.about-bento--intro{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-template-rows:auto auto auto;
  gap:var(--bento-gap)
}
/* Main image: cols 1-7, row 1-2 */
.about-tile--img-main{
  grid-column:1/8;grid-row:1/3;
  min-height:400px
}
.about-tile--img-main .about-tile__badge{
  position:absolute;top:var(--space-lg);left:var(--space-lg);
  width:72px;height:72px;padding:12px;
  background:rgba(255,255,255,.85);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-radius:var(--md-sys-shape-large);
  box-shadow:var(--md-sys-elevation-2)
}
.about-tile--img-main .about-tile__badge img{width:100%;height:100%;object-fit:contain}
/* Text tile: cols 8-12, row 1 */
.about-tile--text{
  grid-column:8/13;grid-row:1/2;
  padding:var(--space-xl)
}
/* Secondary image: cols 8-12, row 2 */
.about-tile--img-secondary{
  grid-column:8/13;grid-row:2/3;
  min-height:220px
}
/* Stat tiles: row 3, 3 tiles spanning 4 cols each */
.about-tile--stat{
  grid-column:span 4;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:var(--space-xl) var(--space-md);text-align:center;
  background:var(--md-sys-color-surface-container-low);
  border-color:transparent
}
.about-tile--stat:hover{border-color:var(--md-sys-color-primary)}
.about-tile--stat-accent{
  background:linear-gradient(135deg,var(--md-sys-color-primary-container),color-mix(in srgb,var(--md-sys-color-tertiary-container) 50%,var(--md-sys-color-primary-container)))
}
.about-stat{display:flex;align-items:baseline;gap:4px}
.about-stat__number{
  font:var(--md-sys-typescale-display-medium);color:var(--md-sys-color-primary);
  font-variant-numeric:tabular-nums
}
.about-stat__suffix{font:var(--md-sys-typescale-headline-small);color:var(--md-sys-color-primary)}
.about-stat__label{font:var(--md-sys-typescale-label-large);color:var(--md-sys-color-on-surface-variant);margin-top:var(--space-xs)}

/* ══════════════════════════════════════════
   SEC 2 — Our Story
   ══════════════════════════════════════════ */
.about-sec--story{background:var(--md-sys-color-surface-container-low)}
.about-bento--story{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--bento-gap);align-items:center
}
.about-tile--story-text{padding:var(--space-xl);background:var(--md-sys-color-surface-container-lowest)}
.about-tile--story-img{min-height:380px}
.about-tile__icon-circle{
  width:56px;height:56px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--md-sys-shape-full);
  background:var(--md-sys-color-primary-container);
  margin-bottom:var(--space-lg);
  animation:aboutFloat 3s ease-in-out infinite
}
.about-tile__icon-circle .material-symbols-rounded{font-size:28px;color:var(--md-sys-color-on-primary-container)}

/* ══════════════════════════════════════════
   SEC 3 — Mission & Vision
   ══════════════════════════════════════════ */
.about-bento--mission{display:flex;flex-direction:column;gap:var(--bento-gap)}
.about-tile--mission{
  display:grid;grid-template-columns:1.2fr 1fr;gap:0;
  border-radius:var(--bento-radius);overflow:hidden
}
.about-tile--mission-alt{direction:rtl}
.about-tile--mission-alt>*{direction:ltr}
.about-tile--mission .about-tile__content{padding:var(--space-xl)}
.about-tile--mission .about-tile__media{min-height:300px}
.about-tile--mission .about-tile__media img{width:100%;height:100%;object-fit:cover}

/* ══════════════════════════════════════════
   SEC 4 — Core Values
   ══════════════════════════════════════════ */
.about-sec--values{background:var(--md-sys-color-surface-container-low)}
.about-bento--values{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--bento-gap);align-items:start
}
.about-values-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--bento-gap)}
.about-value-card{
  background:var(--md-sys-color-surface-container-lowest);
  border-radius:var(--md-sys-shape-extra-large);
  padding:var(--space-xl);
  border:1px solid var(--md-sys-color-outline-variant);
  transition:all var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard)
}
.about-value-card:hover{
  transform:translateY(-4px);box-shadow:var(--md-sys-elevation-2);
  border-color:var(--md-sys-color-primary)
}
.about-value-card__icon{
  width:52px;height:52px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--md-sys-shape-large);margin-bottom:var(--space-md)
}
.about-value-card--primary .about-value-card__icon{
  background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)
}
.about-value-card--secondary .about-value-card__icon{
  background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container)
}
.about-value-card--tertiary .about-value-card__icon{
  background:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container)
}
.about-value-card__icon .material-symbols-rounded{font-size:26px}
.about-value-card__name{
  font:var(--md-sys-typescale-title-medium);color:var(--md-sys-color-on-surface);
  margin:0 0 var(--space-sm)
}
.about-value-card__text{
  font:var(--md-sys-typescale-body-medium);color:var(--md-sys-color-on-surface-variant);margin:0
}
.about-values-img{border-radius:var(--bento-radius);overflow:hidden}
.about-values-img img{width:100%;height:100%;object-fit:cover;display:block;border-radius:var(--bento-radius)}

/* ══════════════════════════════════════════
   SEC 5 — Achievement Parallax Banner
   ══════════════════════════════════════════ */
.about-sec--achievement{
  min-height:420px;display:flex;align-items:center;justify-content:center;
  text-align:center;overflow:hidden;padding:var(--space-3xl) 0
}
.about-achievement__bg{
  position:absolute;inset:-20%;
  background-size:cover;background-position:center;
  will-change:transform;transform:scale(1.1)
}
.about-achievement__overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(135deg,
    color-mix(in srgb,var(--md-sys-color-primary) 70%,black) 0%,
    color-mix(in srgb,var(--md-sys-color-tertiary) 60%,black) 100%);
  opacity:.82
}
.about-achievement__content{position:relative;z-index:2}
.about-achievement__icon{font-size:56px;color:rgba(255,255,255,.9);margin-bottom:var(--space-md);display:block}
.about-achievement__counter{display:flex;align-items:baseline;justify-content:center;gap:var(--space-sm);margin-bottom:var(--space-md)}
.about-achievement__counter .about-stat__number{
  font:var(--md-sys-typescale-display-large);color:#fff
}
.about-achievement__unit{font:var(--md-sys-typescale-display-small);color:rgba(255,255,255,.8)}
.about-achievement__text{font:var(--md-sys-typescale-headline-small);color:rgba(255,255,255,.85);margin:0;max-width:500px}

/* ══════════════════════════════════════════
   SEC 6 — Product Showcase Tabs
   ══════════════════════════════════════════ */
.about-sec--products{background:var(--md-sys-color-surface-container-low)}
.about-product-tabs .ru_scroll{overflow-x:auto;margin-bottom:var(--space-lg)}
.about-product-tabs .tab-title{display:flex;gap:var(--space-sm);list-style:none;justify-content:center}
.about-product-tabs .tab-title button{
  display:flex;flex-direction:column;align-items:center;gap:var(--space-sm);
  padding:var(--space-md) var(--space-lg);border-radius:var(--md-sys-shape-large);
  border:1px solid var(--md-sys-color-outline-variant);background:transparent;
  transition:all var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);min-width:100px
}
.about-product-tabs .tab-title button:hover{
  background:var(--md-sys-color-surface-container-high);border-color:var(--md-sys-color-outline)
}
.about-product-tabs .tab-title button.active{
  background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary);border-color:transparent
}
.about-product-tabs .tab-title button .icon{width:32px;height:32px}
.about-product-tabs .tab-title button .icon img{width:100%;height:100%;object-fit:contain}
.about-product-tabs .tab-title button .icon .icon_active{display:none}
.about-product-tabs .tab-title button.active .icon img{display:none}
.about-product-tabs .tab-title button.active .icon .icon_active{display:block}
.about-product-tabs .ru_links{margin-top:var(--space-lg)}
.about-product-tabs .ru_links a{
  display:inline-flex;align-items:center;gap:var(--space-sm);
  padding:10px 24px;border-radius:var(--md-sys-shape-full);
  background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary);
  font:var(--md-sys-typescale-label-large);
  transition:all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard)
}
.about-product-tabs .ru_links a:hover{box-shadow:var(--md-sys-elevation-2);transform:translateY(-1px)}

/* SEC 7 & 8 — News / Blog */
.about-sec--news,.about-sec--blog{padding:var(--space-2xl) 0}

/* ── RESPONSIVE ── */
@media(max-width:991px){
  .about-hero{min-height:420px}
  .about-hero__title{font:var(--md-sys-typescale-display-small)}
  .about-bento--intro{grid-template-columns:repeat(6,1fr)}
  .about-tile--img-main{grid-column:1/7;grid-row:1/2;min-height:300px}
  .about-tile--text{grid-column:1/7;grid-row:2/3}
  .about-tile--img-secondary{grid-column:1/7;grid-row:3/4;min-height:200px}
  .about-tile--stat{grid-column:span 2}
  .about-bento--values{grid-template-columns:1fr}
  .about-values-img{max-height:350px}
}
@media(max-width:767px){
  .about-hero{min-height:360px}
  .about-hero__title{font:var(--md-sys-typescale-headline-large)}
  .about-hero__sub{font:var(--md-sys-typescale-body-large)}
  .about-sec{padding:var(--space-2xl) 0}
  .about-bento--story{grid-template-columns:1fr}
  .about-tile--story-img{min-height:260px}
  .about-tile--mission{grid-template-columns:1fr}
  .about-tile--mission-alt{direction:ltr}
  .about-tile--mission .about-tile__media{min-height:220px}
  .about-values-grid{grid-template-columns:1fr}
  .about-sec--achievement{min-height:320px}
  .about-achievement__counter .about-stat__number{font:var(--md-sys-typescale-display-medium);color:#fff}
  .about-product-tabs .tab-title{flex-wrap:nowrap;justify-content:flex-start;padding-bottom:var(--space-sm)}
}
@media(max-width:575px){
  .about-hero{min-height:300px}
  .about-hero__title{font:var(--md-sys-typescale-headline-medium)}
  .about-hero__pill{font:var(--md-sys-typescale-label-medium);padding:6px 14px}
  .about-bento--intro{grid-template-columns:1fr}
  .about-tile--img-main{grid-column:1/-1;min-height:220px}
  .about-tile--text{grid-column:1/-1;padding:var(--space-lg)}
  .about-tile--img-secondary{grid-column:1/-1;min-height:180px}
  .about-tile--stat{grid-column:1/-1}
  .about-tile--text .about-tile__headline{font:var(--md-sys-typescale-title-large)}
  .about-value-card{padding:var(--space-lg)}
  .about-sec--achievement{min-height:260px;padding:var(--space-2xl) 0}
  .about-achievement__counter .about-stat__number{font:var(--md-sys-typescale-display-small);color:#fff}
  .about-achievement__text{font:var(--md-sys-typescale-title-large)}
}

/* === CONTACT PAGE === */
.ru_page_body{padding:var(--space-2xl) 0}
.ru_page_title{font:var(--md-sys-typescale-headline-large);margin-bottom:var(--space-xl)}

/* === 404 PAGE === */
.ru_404{min-height:60vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:var(--space-3xl) var(--space-md)}
.ru_404 .code{font:var(--md-sys-typescale-display-large);color:var(--md-sys-color-primary);margin-bottom:var(--space-md)}
.ru_404 .message{font:var(--md-sys-typescale-headline-small);color:var(--md-sys-color-on-surface);margin-bottom:var(--space-lg)}

/* === BREADCRUMBS === */
.ru_breadcrumbs{margin-bottom:var(--space-lg);font:var(--md-sys-typescale-body-small);color:var(--md-sys-color-on-surface-variant)}
.ru_breadcrumbs *{margin:0}
.ru_breadcrumbs a{color:var(--md-sys-color-on-surface-variant)}
.ru_breadcrumbs a:hover{color:var(--md-sys-color-primary)}
.ru_breadcrumbs .separator{margin:0 4px;opacity:.5}

/* === CONTENT POST === */
.content-post ul,.content-post ol{padding-left:24px;margin-bottom:var(--space-md)}
.content-post li{margin-bottom:var(--space-sm);position:relative}
.content-post h1{font:var(--md-sys-typescale-headline-large)}
.content-post h2{font:var(--md-sys-typescale-headline-medium)}
.content-post h3{font:var(--md-sys-typescale-headline-small)}
.content-post h4{font:var(--md-sys-typescale-title-large)}
.content-post h5,.content-post h6{font:var(--md-sys-typescale-title-medium)}
.content-post blockquote{padding:var(--space-md) var(--space-md) var(--space-md) var(--space-lg);border-left:4px solid var(--md-sys-color-primary);background:var(--md-sys-color-surface-container-low);border-radius:0 var(--md-sys-shape-small) var(--md-sys-shape-small) 0;margin-bottom:var(--space-md)}
.content-post a{color:var(--md-sys-color-primary)}
.content-post a:hover{text-decoration:underline}
.content-post .wp-caption{max-width:100%;border:none;padding:0}
.content-post .wp-caption img{border-radius:var(--md-sys-shape-medium)}
.content-post p.wp-caption-text{font:var(--md-sys-typescale-body-small);color:var(--md-sys-color-on-surface-variant);text-align:center;padding:var(--space-sm) 0 0}
.content-post .aligncenter{display:block;margin:0 auto var(--space-md)}
.content-post .alignleft{float:left;margin:0 var(--space-md) var(--space-md) 0}
.content-post .alignright{float:right;margin:0 0 var(--space-md) var(--space-md)}
.content-post .gallery{display:grid;gap:var(--space-md)!important;margin:0!important}
.content-post .gallery br{display:none}
.content-post .gallery.gallery-columns-2{grid-template-columns:repeat(2,1fr)}
.content-post .gallery.gallery-columns-3{grid-template-columns:repeat(3,1fr)}
.content-post .gallery.gallery-columns-4{grid-template-columns:repeat(4,1fr)}
.content-post .gallery .gallery-item{margin:0!important;width:100%!important}
.content-post .gallery .gallery-item img{width:100%;border-radius:var(--md-sys-shape-small);border:0!important}
.content-post .table,.content-post table{width:100%;border-collapse:collapse;margin-bottom:var(--space-md);border-radius:var(--md-sys-shape-small);overflow:hidden}
.content-post th,.content-post td{padding:var(--space-sm) var(--space-md);border:1px solid var(--md-sys-color-outline-variant);text-align:left}
.content-post th{background:var(--md-sys-color-surface-container-high);font:var(--md-sys-typescale-label-large)}

/* === COMMENTS — Material Design 3 === */

/* Comment Form */
.single-comment-form{margin-bottom:var(--space-xl)}
.single-comment-as{
  display:flex;align-items:center;gap:var(--space-sm);
  font:var(--md-sys-typescale-body-medium);
  color:var(--md-sys-color-on-surface-variant);
  margin-bottom:var(--space-md)
}
.single-comment-as .material-symbols-rounded{font-size:24px;color:var(--md-sys-color-primary)}
.single-comment-as a{color:var(--md-sys-color-primary);font-weight:600}

.single-comment-field{margin-bottom:var(--space-md)}
.single-comment-field textarea,
.single-comment-field input[type="text"],
.single-comment-field input[type="email"]{
  width:100%;
  padding:14px 16px;
  border:1px solid var(--md-sys-color-outline-variant);
  border-radius:var(--md-sys-shape-medium);
  font:var(--md-sys-typescale-body-large);
  color:var(--md-sys-color-on-surface);
  background:var(--md-sys-color-surface-container-lowest);
  outline:none;
  transition:border-color var(--md-sys-motion-duration-short4),box-shadow var(--md-sys-motion-duration-short4);
  resize:vertical
}
.single-comment-field textarea:focus,
.single-comment-field input:focus{
  border-color:var(--md-sys-color-primary);
  border-width:2px;padding:13px 15px;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--md-sys-color-primary) 12%,transparent)
}
.single-comment-field textarea{min-height:120px}

.single-comment-inputs{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md)
}
@media(max-width:575px){.single-comment-inputs{grid-template-columns:1fr}}

/* Comment List */
.single-comment-list{
  list-style:none;padding:0;margin:var(--space-lg) 0 0
}
.single-comment-list>li{
  padding:var(--space-lg);
  margin-bottom:var(--space-md);
  background:var(--md-sys-color-surface-container-low);
  border-radius:var(--md-sys-shape-large);
  border:1px solid var(--md-sys-color-outline-variant);
  position:relative
}
.single-comment-list>li:last-child{margin-bottom:0}
.single-comment-list .comment-author{
  display:flex;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-sm)
}
.single-comment-list .comment-author img{
  width:40px;height:40px;border-radius:var(--md-sys-shape-full);object-fit:cover;
  border:2px solid var(--md-sys-color-primary-container)
}
.single-comment-list .fn{
  font:var(--md-sys-typescale-title-small);
  color:var(--md-sys-color-on-surface);font-style:normal
}
.single-comment-list .text_cmt{
  padding-left:52px;font:var(--md-sys-typescale-body-medium);
  color:var(--md-sys-color-on-surface-variant)
}
.single-comment-list .text_cmt p{margin-bottom:var(--space-xs)}
.single-comment-list .ngaythang{
  font:var(--md-sys-typescale-body-small);
  color:var(--md-sys-color-on-surface-variant);padding:var(--space-xs) 0
}
.single-comment-list .reply a{
  font:var(--md-sys-typescale-label-medium);
  color:var(--md-sys-color-primary);
  padding:4px 12px;border-radius:var(--md-sys-shape-full);
  border:1px solid var(--md-sys-color-primary);
  display:inline-flex;align-items:center;gap:4px;
  transition:all var(--md-sys-motion-duration-short4)
}
.single-comment-list .reply a:hover{
  background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary)
}
.single-comment-list .qtv{
  display:none;padding:2px 8px;
  background:var(--md-sys-color-tertiary-container);
  color:var(--md-sys-color-on-tertiary-container);
  border-radius:var(--md-sys-shape-full);
  font:var(--md-sys-typescale-label-small);
  margin-left:var(--space-sm)
}
.comment-author-admin .qtv{display:inline-flex}

/* Nested comments */
.single-comment-list ul.children{
  list-style:none;padding:0;
  margin:var(--space-md) 0 0 var(--space-xl);
  border-left:2px solid var(--md-sys-color-primary-container)
}
.single-comment-list ul.children>li{
  padding:var(--space-md);margin-bottom:var(--space-sm);
  background:var(--md-sys-color-surface-container);
  border-radius:var(--md-sys-shape-medium);border:none
}

/* Cancel comment reply */
.cancel-comment-reply{margin-bottom:var(--space-md)}
.cancel-comment-reply a{
  font:var(--md-sys-typescale-label-medium);color:var(--md-sys-color-error);
  display:inline-flex;align-items:center;gap:4px
}

/* Legacy compat */
.ru_comments{margin-top:0}

/* === TAXONOMY / CATEGORY PAGE === */
.ru_taxonomy_body{padding:var(--space-2xl) 0}
.ru_taxonomy_body .ru_page_title{font:var(--md-sys-typescale-headline-large);color:var(--md-sys-color-on-surface);margin-bottom:var(--space-lg)}
.ru_taxonomy_banner{border-radius:var(--bento-radius);overflow:hidden;margin-bottom:var(--space-xl)}
.ru_taxonomy_banner img{width:100%;display:block}
.ru_taxonomy_group_ct{margin-bottom:var(--space-xl)}
.ru_taxonomy_group_ct .ru_block{margin-bottom:var(--space-2xl)}
.ru_taxonomy_group_ct .title{font:var(--md-sys-typescale-headline-small);color:var(--md-sys-color-on-surface);margin-bottom:var(--space-lg)}
/* Product grid — 4 columns */
.slider_news4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--bento-gap)}
@media(max-width:991px){.slider_news4{grid-template-columns:repeat(3,1fr)}}
@media(max-width:767px){.slider_news4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.slider_news4{grid-template-columns:1fr}}
.slider_news4.swiper{display:block;grid-template-columns:none}
/* Image gallery grid */
.ru_taxonomy_group_ct .images .list{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--bento-gap)}
.ru_taxonomy_group_ct .images .item .img img{width:100%;border-radius:var(--md-sys-shape-large);object-fit:cover}
@media(max-width:767px){.ru_taxonomy_group_ct .images .list{grid-template-columns:repeat(2,1fr)}}
/* Video grid */
.ru_taxonomy_group_ct .videos .flex{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--bento-gap)}
.ru_taxonomy_group_ct .videos .item{border-radius:var(--md-sys-shape-large);overflow:hidden;min-height:200px}
/* Fix ytdefer — global img{height:auto} breaks position:absolute thumbnails */
.ytdefer{position:relative}
.ytdefer div{position:relative}
.ytdefer img{position:absolute!important;width:100%!important;height:100%!important;object-fit:cover!important;top:0;left:0}
.ytdefer button{z-index:2}
@media(max-width:767px){.ru_taxonomy_group_ct .videos .flex{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.ru_taxonomy_group_ct .videos .flex{grid-template-columns:1fr}}
/* Taxonomy parent — subcategory sections */
.ru_taxonomy_father{margin-bottom:var(--space-xl)}
.ru_taxonomy_father .ru_block{margin-bottom:var(--space-2xl)}
.ru_taxonomy_father .ru_block_title{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-lg)}
.ru_taxonomy_father .ru_block_title .title{font:var(--md-sys-typescale-headline-small);margin:0}
.ru_taxonomy_father .ru_block_title .title a{color:var(--md-sys-color-on-surface)}
.ru_taxonomy_father .ru_block_title .link{font:var(--md-sys-typescale-label-large);color:var(--md-sys-color-primary);display:flex;align-items:center;gap:4px}
.ru_taxonomy_father .banner{margin-bottom:var(--space-lg);border-radius:var(--md-sys-shape-large);overflow:hidden}
.ru_taxonomy_father .banner img{width:100%;display:block}
/* Taxonomy child — product loop */
.ru_taxonomy_child{margin-bottom:var(--space-xl)}
.ru_taxonomy_child .products,.ru_taxonomy_child .ru_list_product{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--bento-gap);list-style:none;padding:0}
@media(max-width:991px){.ru_taxonomy_child .products,.ru_taxonomy_child .ru_list_product{grid-template-columns:repeat(3,1fr)}}
@media(max-width:767px){.ru_taxonomy_child .products,.ru_taxonomy_child .ru_list_product{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.ru_taxonomy_child .products,.ru_taxonomy_child .ru_list_product{grid-template-columns:1fr}}
/* Product card images */
.ru_taxonomy_child .ru_item_pro .img img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
/* Shop toolbar (result count + ordering) */
.ru_shop_toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-md);margin-bottom:var(--space-lg)}
.ru_shop_toolbar .woocommerce-result-count{font:var(--md-sys-typescale-body-medium);color:var(--md-sys-color-on-surface-variant);margin:0}
.ru_shop_toolbar .woocommerce-ordering{margin:0}
.ru_shop_toolbar .woocommerce-ordering select{padding:8px 12px;border-radius:var(--md-sys-shape-small);border:1px solid var(--md-sys-color-outline-variant);font:var(--md-sys-typescale-body-medium);background:var(--md-sys-color-surface-container-lowest)}
/* Filter sidebar — slides in from right */
.ru_taxonomy_filter{position:fixed;top:0;right:0;width:320px;height:100vh;background:var(--md-sys-color-surface-container-lowest);z-index:1001;padding:var(--space-xl);padding-top:60px;overflow-y:auto;transform:translateX(100%);transition:transform .3s var(--md-sys-motion-easing-standard);box-shadow:var(--md-sys-elevation-3);flex-direction:column;display:flex;gap:var(--space-md)}
.ru_taxonomy_filter.active{transform:translateX(0)}
.ru_taxonomy_filter .icon_close{position:absolute;top:16px;right:16px;width:40px;height:40px;cursor:pointer;border-radius:var(--md-sys-shape-full);display:flex;align-items:center;justify-content:center;transition:background .2s}
.ru_taxonomy_filter .icon_close:hover{background:var(--md-sys-color-surface-container-high)}
.ru_taxonomy_filter .icon_close::before,.ru_taxonomy_filter .icon_close::after{content:'';position:absolute;width:20px;height:2px;background:var(--md-sys-color-on-surface);border-radius:1px}
.ru_taxonomy_filter .icon_close::before{transform:rotate(45deg)}
.ru_taxonomy_filter .icon_close::after{transform:rotate(-45deg)}
.ru_taxonomy_filter .widget{margin-bottom:var(--space-lg)}
.ru_taxonomy_filter .widget-title,.ru_taxonomy_filter h2{font:var(--md-sys-typescale-title-medium);color:var(--md-sys-color-on-surface);margin-bottom:var(--space-md);padding-bottom:var(--space-sm);border-bottom:2px solid var(--md-sys-color-primary)}
.ru_taxonomy_filter .widget ul{list-style:none;padding:0;margin:0}
.ru_taxonomy_filter .widget li{margin-bottom:var(--space-xs)}
.ru_taxonomy_filter .widget li a{display:block;padding:8px 12px;border-radius:var(--md-sys-shape-small);color:var(--md-sys-color-on-surface);font:var(--md-sys-typescale-body-medium);transition:background .2s}
.ru_taxonomy_filter .widget li a:hover{background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-primary)}
/* Filter overlay */
.ru_filter_overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1000;opacity:0;visibility:hidden;transition:all .3s}
.ru_filter_overlay.active{opacity:1;visibility:visible}
/* Filter toggle button */
.ru_filter_icon{display:inline-flex;align-items:center;gap:var(--space-sm);padding:8px 16px;border-radius:var(--md-sys-shape-full);border:1px solid var(--md-sys-color-outline-variant);font:var(--md-sys-typescale-label-large);cursor:pointer;margin-bottom:var(--space-lg);transition:all var(--md-sys-motion-duration-short4)}
.ru_filter_icon:hover{background:var(--md-sys-color-surface-container-high)}
.ru_filter_icon img{width:16px;height:16px}
/* WC ordering/result-count on category child */
.ru_taxonomy_child .woocommerce-result-count{font:var(--md-sys-typescale-body-medium);color:var(--md-sys-color-on-surface-variant);margin-bottom:var(--space-md)}
.ru_taxonomy_child .woocommerce-ordering{margin-bottom:var(--space-lg)}
.ru_taxonomy_child .woocommerce-ordering select{padding:8px 12px;border-radius:var(--md-sys-shape-small);border:1px solid var(--md-sys-color-outline-variant);font:var(--md-sys-typescale-body-medium);background:var(--md-sys-color-surface-container-lowest)}
/* Bottom content */
.bottom_content{margin-top:var(--space-xl)}

/* ============================================================
   PRODUCT DETAIL — Material Design 3 + Bento Grid
   ============================================================ */

.ru_detail_body{padding:var(--space-2xl) 0}

/* ── Product Head — 3-column Bento Grid ── */
.pd-head{
  display:grid;
  grid-template-columns:1fr 1fr 300px;
  gap:var(--bento-gap);
  margin-bottom:var(--space-xl);
  align-items:stretch
}
.pd-head > div {
  min-width: 0;
  min-height: 0;
}
.pd-head__gallery,
.pd-head__info{
  display:flex;flex-direction:column
}
.pd-gallery-card,
.pd-info-card{
  flex:1;display:flex;flex-direction:column
}

/* Gallery Card */
.pd-gallery-card{
  background:var(--md-sys-color-surface-container-lowest);
  border-radius:var(--bento-radius);
  padding:var(--space-md);
  border:1px solid var(--md-sys-color-outline-variant);
  overflow:hidden;
  position:relative
}
/* Force gallery column to fill grid cell */
.pd-head__gallery{
  min-width:0;
  overflow:hidden
}
/* Override WC layout: .woocommerce div.product div.images {width:48%;float:left} */
.woocommerce div.product .pd-gallery-card div.images,
.woocommerce-page div.product .pd-gallery-card div.images,
.pd-gallery-card div.images{
  width:100%!important;float:none!important;margin:0!important;max-width:100%!important
}
/* Also override WC summary float */
.woocommerce div.product .pd-info-card div.summary,
.woocommerce-page div.product .pd-info-card div.summary,
.pd-info-card div.summary{
  width:100%!important;float:none!important
}
/* Force gallery container full-width */
.pd-gallery-card .woocommerce-product-gallery,
.pd-gallery-card .woo-variation-product-gallery{
  margin:0!important;opacity:1!important;width:100%!important;
  min-width:0!important;max-width:100%!important
}
/* Woo Variation Gallery wrapper — plugin sets inline min-width/min-height based on image natural size */
.pd-gallery-card .woo-variation-gallery-wrapper{
  width:100%!important;min-width:0!important;min-height:0!important;max-width:100%!important
}
.pd-gallery-card .woocommerce-product-gallery__wrapper{
  width:100%!important;max-width:100%!important
}
.pd-gallery-card .woocommerce-product-gallery__image{
  width:100%!important;overflow:hidden;border-radius:var(--md-sys-shape-large);
  aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  background:var(--md-sys-color-surface-container-low)
}
.pd-gallery-card .woocommerce-product-gallery__image a{
  display:flex;width:100%;height:100%;align-items:center;justify-content:center
}
.pd-gallery-card .woocommerce-product-gallery__image img,
.pd-gallery-card .woocommerce-product-gallery__image .wp-post-image{
  width:100%!important;height:100%!important;display:block;
  border-radius:var(--md-sys-shape-large);object-fit:contain;
  max-width:100%!important
}
.pd-gallery-card .woocommerce-product-gallery__image--placeholder img{width:100%!important;height:100%!important;object-fit:contain}
/* Slick slider (woo-variation-gallery) — override all inline widths from JS */
.pd-gallery-card .woo-variation-gallery-slider{
  width:100%!important;max-width:100%!important
}
/* Lock slider height with aspect-ratio to prevent layout jumping between slides */
.pd-gallery-card .woo-variation-gallery-slider .slick-list{
  width:100%!important;max-width:100%!important;
  border-radius:var(--md-sys-shape-large);overflow:hidden;
  aspect-ratio:1/1
}
.pd-gallery-card .woo-variation-gallery-slider .slick-track{
  display:flex!important;height:100%!important
}
.pd-gallery-card .woo-variation-gallery-slider .slick-slide{
  width:100%!important;min-width:100%!important;float:none!important;flex-shrink:0;
  display:flex!important;align-items:center;justify-content:center;
  height:100%!important
}
.pd-gallery-card .woo-variation-gallery-slider .slick-slide > div,
.pd-gallery-card .woo-variation-gallery-slider .wvg-gallery-image{
  width:100%;height:100%;display:flex!important;align-items:center;justify-content:center
}
.pd-gallery-card .woo-variation-gallery-slider .slick-slide img,
.pd-gallery-card .slick-slide img{
  width:100%!important;height:100%!important;max-width:100%!important;
  display:block;object-fit:contain
}
/* Slick thumbnails */
.pd-gallery-card .woo-variation-gallery-thumbnail-slider{
  display:flex;gap:var(--space-sm);margin-top:var(--space-sm);
  overflow-x:auto
}
.pd-gallery-card .woo-variation-gallery-thumbnail-slider .slick-slide{
  width:72px!important;min-width:72px!important;flex-shrink:0
}
.pd-gallery-card .woo-variation-gallery-thumbnail-slider .slick-slide img{
  width:100%;height:56px;object-fit:cover;
  border-radius:var(--md-sys-shape-small);cursor:pointer;
  opacity:.5;border:2px solid transparent;
  transition:all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard)
}
.pd-gallery-card .woo-variation-gallery-thumbnail-slider .slick-slide.slick-current img,
.pd-gallery-card .woo-variation-gallery-thumbnail-slider .slick-slide img:hover{
  opacity:1;border-color:var(--md-sys-color-primary)
}
/* Fallback: Flexslider (core WC) */
/* Fallback: Flexslider (core WC) — also lock aspect ratio */
.pd-gallery-card .flex-viewport{
  width:100%!important;border-radius:var(--md-sys-shape-large);overflow:hidden;
  aspect-ratio:1/1
}
.pd-gallery-card ul.slides{list-style:none;margin:0;padding:0;height:100%}
.pd-gallery-card ul.slides li{
  width:100%!important;height:100%!important;
  display:flex!important;align-items:center;justify-content:center
}
.pd-gallery-card ul.slides li img{
  width:100%!important;height:100%!important;max-width:100%!important;
  display:block;object-fit:contain
}
.pd-gallery-card .onsale{
  position:absolute;top:var(--space-md);left:var(--space-md);z-index:5;
  padding:4px 14px;border-radius:var(--md-sys-shape-full);
  background:var(--md-sys-color-error);color:var(--md-sys-color-on-error);
  font:var(--md-sys-typescale-label-medium)
}
/* WC Zoom icon / Variation Gallery trigger */
.pd-gallery-card .woocommerce-product-gallery__trigger,
.pd-gallery-card .woo-variation-gallery-trigger{
  position:absolute;top:var(--space-md);right:var(--space-md);z-index:5;
  width:36px;height:36px;border-radius:var(--md-sys-shape-full);
  background:var(--md-sys-color-surface-container-lowest);
  box-shadow:var(--md-sys-elevation-1);display:flex;align-items:center;justify-content:center
}

/* Info Card */
.pd-info-card{
  background:var(--md-sys-color-surface-container-lowest);
  border-radius:var(--bento-radius);
  padding:var(--space-xl);
  border:1px solid var(--md-sys-color-outline-variant)
}
.pd-info-card .product_title{
  font:var(--md-sys-typescale-headline-small);
  color:var(--md-sys-color-on-surface);margin-bottom:var(--space-md)
}
.pd-info-card .price{
  font:var(--md-sys-typescale-headline-medium);font-weight:700;
  color:var(--md-sys-color-primary);margin-bottom:var(--space-lg)
}
.pd-info-card .price del{
  color:var(--md-sys-color-on-surface-variant);font-size:.65em;font-weight:400;
  text-decoration:line-through
}
.pd-info-card .price ins{text-decoration:none}
.pd-info-card .woocommerce-product-details__short-description{
  font:var(--md-sys-typescale-body-large);
  color:var(--md-sys-color-on-surface-variant);margin-bottom:var(--space-lg)
}
/* WC Add to cart */
.pd-info-card form.cart{
  display:flex;flex-direction:column;gap:var(--space-md);margin-bottom:var(--space-lg)
}
/* Meta (SKU, Category) */
.pd-info-card .cart .meta{
  list-style:none;padding:0;margin:0;
  display:flex;flex-wrap:wrap;gap:var(--space-sm) var(--space-lg);
  font:var(--md-sys-typescale-body-medium);color:var(--md-sys-color-on-surface-variant)
}
.pd-info-card .cart .meta .value{color:var(--md-sys-color-on-surface)}
.pd-info-card .cart .meta a{color:var(--md-sys-color-primary)}
/* Cart row: quantity + buy button */
.pd-cart-row{
  display:flex;gap:var(--space-sm);align-items:center
}
/* Quantity with +/- buttons */
.pd-info-card .cart .quantity{
  display:flex;align-items:center;
  border:1px solid var(--md-sys-color-outline-variant);
  border-radius:var(--md-sys-shape-full);overflow:hidden;
  height:48px;flex-shrink:0;background:var(--md-sys-color-surface-container-low)
}
.pd-info-card .cart .quantity .pd-qty-btn{
  width:36px;height:100%;display:flex;align-items:center;justify-content:center;
  background:transparent;border:none;cursor:pointer;
  color:var(--md-sys-color-on-surface);font-size:20px;font-weight:600;
  transition:background var(--md-sys-motion-duration-short4);user-select:none;
  padding:0;line-height:1
}
.pd-info-card .cart .quantity .pd-qty-btn:hover{
  background:var(--md-sys-color-surface-container-high)
}
.pd-info-card .cart .quantity .pd-qty-btn:active{
  background:var(--md-sys-color-surface-container-highest)
}
.pd-info-card .cart .quantity input[type="number"]{
  width:44px;text-align:center;border:none;border-left:1px solid var(--md-sys-color-outline-variant);border-right:1px solid var(--md-sys-color-outline-variant);
  font:var(--md-sys-typescale-body-large);padding:10px 0;background:transparent;
  -moz-appearance:textfield;appearance:textfield
}
.pd-info-card .cart .quantity input::-webkit-outer-spin-button,
.pd-info-card .cart .quantity input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* Buy button */
.pd-info-card .cart .single_add_to_cart_button{
  flex:1;height:48px;padding:0 28px;border-radius:var(--md-sys-shape-full);
  background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary);
  font:var(--md-sys-typescale-label-large);font-weight:600;border:none;cursor:pointer;
  transition:all var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:var(--md-sys-elevation-1);white-space:nowrap
}
.pd-info-card .cart .single_add_to_cart_button .material-symbols-rounded{font-size:20px}
.pd-info-card .cart .single_add_to_cart_button:hover{
  box-shadow:var(--md-sys-elevation-3);transform:translateY(-2px);
  background:color-mix(in srgb, var(--md-sys-color-primary), white 10%)
}
/* Delivery info line */
.pd-delivery-info{
  display:flex;align-items:center;gap:var(--space-sm);
  font:var(--md-sys-typescale-body-small);color:var(--md-sys-color-on-surface-variant);
  padding:var(--space-sm) var(--space-md);
  background:var(--md-sys-color-surface-container-low);
  border-radius:var(--md-sys-shape-full)
}
.pd-delivery-info .material-symbols-rounded{
  font-size:18px;color:var(--md-sys-color-primary)
}

/* Material 3 Variation Select */
.pd-info-card table.variations { width: 100%; margin-bottom: var(--space-md); }
.pd-info-card table.variations td.label {
  padding: 0 0 8px 0;
  color: var(--md-sys-color-on-surface);
  font: var(--md-sys-typescale-title-small);
}
.pd-info-card table.variations select {
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--md-sys-shape-medium);
  border: 1px solid var(--md-sys-color-outline);
  background: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-on-surface);
  font: var(--md-sys-typescale-body-large);
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M7%2010L12%2015L17%2010%22%20stroke%3D%22%2349454E%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}
.pd-info-card table.variations select:focus {
  border-color: var(--md-sys-color-primary);
  outline: none;
}
.pd-info-card .reset_variations {
  color: var(--md-sys-color-error);
  font: var(--md-sys-typescale-label-medium);
  text-decoration: none;
  display: inline-block;
  margin-top: 8px;
}
/* WC product meta (SKU, Category, Tags) */
.pd-info-card .product_meta{
  font:var(--md-sys-typescale-body-small);
  color:var(--md-sys-color-on-surface-variant);
  padding-top:var(--space-md);
  border-top:1px solid var(--md-sys-color-outline-variant);
  margin-top:var(--space-md);margin-bottom:var(--space-lg)
}
.pd-info-card .product_meta>span{
  display:block;padding:var(--space-xs) 0;
  border-bottom:1px solid var(--md-sys-color-surface-variant)
}
.pd-info-card .product_meta>span:last-child{border-bottom:none}
.pd-info-card .product_meta a{color:var(--md-sys-color-primary)}
/* WC Star Rating */
.pd-info-card .star-rating{margin-bottom:var(--space-sm)}
/* WC stock */
.pd-info-card .stock{font:var(--md-sys-typescale-label-medium);margin-bottom:var(--space-sm)}

/* CTA Buttons */
.pd-cta-buttons{
  display:flex;gap:var(--space-sm);margin-bottom:var(--space-lg)
}
.pd-cta-btn{
  flex:1;display:inline-flex;align-items:center;justify-content:center;
  gap:var(--space-sm);height:48px;padding:0 20px;
  border-radius:var(--md-sys-shape-full);
  font:var(--md-sys-typescale-label-large);
  transition:all var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);
  white-space:nowrap
}
.pd-cta-btn .material-symbols-rounded{font-size:20px}
.pd-cta-btn--primary{
  background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary)
}
.pd-cta-btn--primary:hover{
  box-shadow:var(--md-sys-elevation-2);color:var(--md-sys-color-on-primary);
  transform:translateY(-1px)
}
.pd-cta-btn--tonal{
  background:var(--md-sys-color-secondary-container);
  color:var(--md-sys-color-on-secondary-container)
}
.pd-cta-btn--tonal:hover{
  box-shadow:var(--md-sys-elevation-1);
  transform:translateY(-1px)
}

/* Promo Card */
.pd-promo-card{
  background:linear-gradient(135deg,
    var(--md-sys-color-primary-container) 0%,
    color-mix(in srgb,var(--md-sys-color-tertiary-container) 40%,var(--md-sys-color-primary-container)) 100%);
  border-radius:var(--md-sys-shape-large);
  padding:var(--space-lg);overflow:hidden;
  position:relative
}
.pd-promo-card::before{
  content:'';position:absolute;top:-30%;right:-15%;width:200px;height:200px;
  border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--md-sys-color-primary) 15%,transparent),transparent 70%);
  pointer-events:none
}
.pd-promo-card__header{
  display:flex;align-items:center;gap:var(--space-sm);
  font:var(--md-sys-typescale-title-small);font-weight:700;
  color:var(--md-sys-color-on-primary-container);
  margin-bottom:var(--space-md);position:relative;z-index:1
}
.pd-promo-card__header .material-symbols-rounded{
  font-size:22px;color:var(--md-sys-color-primary)
}
.pd-promo-card__list{
  list-style:none;padding:0;margin:0;position:relative;z-index:1
}
.pd-promo-card__list li{
  display:flex;align-items:flex-start;gap:var(--space-sm);
  font:var(--md-sys-typescale-body-medium);
  color:var(--md-sys-color-on-primary-container);
  margin-bottom:var(--space-sm);padding:var(--space-xs) 0
}
.pd-promo-card__list li:last-child{margin-bottom:0}
.pd-promo-card__list li .material-symbols-rounded{
  font-size:18px;color:var(--md-sys-color-primary);flex-shrink:0;margin-top:2px
}

/* ── Sidebar Cards ── */

/* Hotline Card */
.pd-hotline-card{
  background:var(--md-sys-color-primary-container);
  border-radius:var(--md-sys-shape-large);
  padding:var(--space-lg);margin-bottom:var(--space-md);
  text-align:center;position:relative;overflow:hidden
}
.pd-hotline-card::after{
  content:'';position:absolute;bottom:-20%;right:-20%;width:120px;height:120px;
  border-radius:50%;background:color-mix(in srgb,var(--md-sys-color-primary) 15%,transparent);
  pointer-events:none
}
.pd-hotline-card__icon{margin-bottom:var(--space-sm)}
.pd-hotline-card__icon .material-symbols-rounded{
  font-size:32px;color:var(--md-sys-color-primary);
  background:var(--md-sys-color-surface-container-lowest);
  width:52px;height:52px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--md-sys-shape-medium)
}
.pd-hotline-card__title{
  font:var(--md-sys-typescale-title-small);
  color:var(--md-sys-color-on-primary-container);margin-bottom:var(--space-sm)
}
.pd-hotline-card__number{
  display:inline-flex;align-items:center;gap:var(--space-xs);
  font:var(--md-sys-typescale-headline-small);font-weight:700;
  color:var(--md-sys-color-primary);position:relative;z-index:1
}
.pd-hotline-card__number .material-symbols-rounded{font-size:22px}
.pd-hotline-card__number:hover{color:var(--md-sys-color-primary)}
.pd-hotline-card__sub{
  font:var(--md-sys-typescale-body-small);
  color:var(--md-sys-color-on-primary-container);margin-top:var(--space-xs)
}

/* Policy Card */
.pd-policy-card{
  background:var(--md-sys-color-surface-container-low);
  border-radius:var(--md-sys-shape-large);
  padding:var(--space-lg);margin-bottom:var(--space-md);
  border:1px solid var(--md-sys-color-outline-variant)
}
.pd-policy-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--space-md)}
.pd-policy-item{display:flex;gap:var(--space-sm);align-items:flex-start}
.pd-policy-item__icon{
  width:36px;height:36px;flex-shrink:0;
  background:var(--md-sys-color-primary-container);
  border-radius:var(--md-sys-shape-small);
  display:flex;align-items:center;justify-content:center;
  padding:6px
}
.pd-policy-item__icon img{width:100%;height:100%;object-fit:contain}
.pd-policy-item__name{
  font:var(--md-sys-typescale-title-small);
  color:var(--md-sys-color-on-surface);margin-bottom:2px
}
.pd-policy-item__text{
  font:var(--md-sys-typescale-body-small);
  color:var(--md-sys-color-on-surface-variant)
}

/* ── Content — Full-width stacked layout ── */
.woocommerce-tabs.wc-tabs-wrapper {
  display:flex;flex-direction:column;
  gap:var(--bento-gap);margin-bottom:var(--space-xl)
}
.woocommerce-Tabs-panel.wc-tab { 
  display: block !important; 
  margin: 0; 
  padding: var(--space-xl) !important; 
  background: var(--md-sys-color-surface) !important;
  border-radius: var(--md-sys-shape-large);
  box-shadow: var(--md-sys-elevation-1);
}

/* Fix double comment sections by hiding default woo title inside reviews tab */
#reviews .woocommerce-Reviews-title {
  display: none !important;
}

.woocommerce-tabs.wc-tabs-wrapper > ul.tabs {
  display: none; /* Hidden — tabs no longer needed since all sections are visible */
}

/* Detail Card */
.pd-detail-card,.pd-comments-card,.pd-specs-card,.woocommerce-Tabs-panel.pd-detail-card{
  background:var(--md-sys-color-surface-container-lowest);
  border-radius:var(--bento-radius);
  padding:var(--space-xl) var(--space-2xl);
  border:1px solid var(--md-sys-color-outline-variant);
  margin-bottom:0;
}
.pd-detail-card__header{
  display:flex;align-items:center;gap:var(--space-sm);
  font:var(--md-sys-typescale-title-large);
  color:var(--md-sys-color-on-surface);
  margin-bottom:var(--space-lg);
  padding-bottom:var(--space-md);
  border-bottom:2px solid var(--md-sys-color-primary)
}
.pd-detail-card__header .material-symbols-rounded{
  font-size:28px;color:var(--md-sys-color-primary)
}

/* Parameter rows */
.pd-params{list-style:none;padding:0;margin:var(--space-md) 0 0}
.pd-param-row{
  display:flex;padding:var(--space-sm) var(--space-md);
  border-radius:var(--md-sys-shape-small);
  transition:background var(--md-sys-motion-duration-short4)
}
.pd-param-row:nth-child(odd){background:var(--md-sys-color-surface-container-low)}
.pd-param-row:hover{background:var(--md-sys-color-surface-container-high)}
.pd-param-label{
  font:var(--md-sys-typescale-label-large);
  color:var(--md-sys-color-on-surface);min-width:180px;flex-shrink:0
}
.pd-param-value{
  font:var(--md-sys-typescale-body-medium);
  color:var(--md-sys-color-on-surface-variant)
}
.pd-param-value a{color:var(--md-sys-color-primary)}

/* ── Related Posts ── */
.pd-related{margin-top:var(--space-2xl)}
.pd-related__header{
  display:flex;align-items:center;gap:var(--space-sm);
  font:var(--md-sys-typescale-headline-small);
  color:var(--md-sys-color-on-surface);margin-bottom:var(--space-lg)
}
.pd-related__header .material-symbols-rounded{
  font-size:28px;color:var(--md-sys-color-primary);
  background:var(--md-sys-color-primary-container);
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--md-sys-shape-medium)
}
.pd-related__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--bento-gap)
}
/* Related products grid — 4 columns for product cards */
.ru_detail_related .pd-related__grid{
  grid-template-columns:repeat(4,1fr)
}
.ru_detail_related .ru_item_pro .img img{
  aspect-ratio:4/3;object-fit:cover
}

/* ── WC Related/Upsell Products — Bento Grid ── */
.ru_detail_related,.related.products,.up-sells.upsells{
  margin-top:var(--space-2xl)
}
.ru_detail_related>h2,.related.products>h2,.up-sells.upsells>h2{
  font:var(--md-sys-typescale-headline-small);
  color:var(--md-sys-color-on-surface);margin-bottom:var(--space-lg)
}
.ru_detail_related .products,
.ru_detail_related ul.products,
.related.products ul.products,
.up-sells.upsells ul.products{
  display:grid!important;grid-template-columns:repeat(4,1fr)!important;
  gap:var(--bento-gap)!important;list-style:none!important;padding:0!important;margin:0!important
}
/* Override WooCommerce default float/width on li.product — must match WC specificity */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.ru_detail_related .products>li,
.ru_detail_related .products>.product{
  float:none!important;width:auto!important;margin:0!important;
  padding:0!important;clear:none!important;list-style:none!important
}
/* Picture element inside product cards */
.ru_item_pro .img picture{display:block}
.ru_item_pro .img picture img{width:100%;height:auto;display:block;object-fit:cover}
/* Override WC gallery float/width on product detail page */
.woocommerce div.product div.images,
.woocommerce #content div.product div.images,
.woocommerce-page div.product div.images{
  float:none!important;width:100%!important
}
.woocommerce div.product div.summary,
.woocommerce #content div.product div.summary,
.woocommerce-page div.product div.summary{
  float:none!important;width:100%!important;clear:none!important
}

/* ── RESPONSIVE ── */
@media(max-width:991px){
  .pd-head{grid-template-columns:1fr 1fr}
  .pd-head__sidebar{grid-column:1 / -1;display:grid;grid-template-columns:repeat(2,1fr);gap:var(--bento-gap)}
  .pd-content{grid-template-columns:1fr}
  .pd-related__grid{grid-template-columns:repeat(2,1fr)}
  .ru_detail_related .products,
  .related.products ul.products,
  .up-sells.upsells ul.products{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:767px){
  .pd-head{grid-template-columns:1fr}
  .pd-head__sidebar{grid-template-columns:1fr}
  .pd-info-card{padding:var(--space-lg)}
  .pd-cta-buttons{flex-direction:column}
  .pd-detail-card,.pd-comments-card,.pd-specs-card{padding:var(--space-lg);border-radius:var(--md-sys-shape-large)}
  .pd-related__grid{grid-template-columns:repeat(2,1fr)}
  .pd-param-row{flex-direction:column;gap:var(--space-xs)}
  .pd-param-label{min-width:0}
  .ru_detail_related .products,
  .related.products ul.products,
  .up-sells.upsells ul.products{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:575px){
  .pd-related__grid{grid-template-columns:1fr}
  .pd-detail-card,.pd-comments-card,.pd-specs-card{padding:var(--space-md) var(--space-lg);border-radius:var(--md-sys-shape-medium)}
  .ru_detail_related .products,
  .related.products ul.products,
  .up-sells.upsells ul.products{grid-template-columns:1fr}
}

/* === CART PAGE — Material Design 3 + Bento Grid === */

/* Bento layout: cart form (left) + totals card (right) */
.woocommerce-cart .woocommerce{display:grid;grid-template-columns:1fr minmax(340px,420px);gap:var(--bento-gap);align-items:start}

/* Cart form card */
.woocommerce-cart-form{background:var(--md-sys-color-surface-container-lowest);border-radius:var(--bento-radius);border:1px solid var(--md-sys-color-outline-variant);overflow:hidden}

/* Cart table */
.woocommerce-cart .shop_table.cart{width:100%;border-collapse:collapse;border:none}
.woocommerce-cart .shop_table.cart thead{background:var(--md-sys-color-surface-container-low)}
.woocommerce-cart .shop_table.cart thead th{font:var(--md-sys-typescale-label-large);color:var(--md-sys-color-on-surface-variant);padding:14px 16px;border:none;text-align:left;white-space:nowrap}
.woocommerce-cart .shop_table.cart thead .product-remove,.woocommerce-cart .shop_table.cart thead .product-thumbnail{width:0;padding:0;font-size:0}

/* Cart item rows */
.woocommerce-cart .shop_table.cart tbody tr.cart_item{border-bottom:1px solid var(--md-sys-color-outline-variant);transition:background var(--md-sys-motion-duration-short4)}
.woocommerce-cart .shop_table.cart tbody tr.cart_item:last-of-type{border-bottom:none}
.woocommerce-cart .shop_table.cart tbody tr.cart_item:hover{background:var(--md-sys-color-surface-container-low)}
.woocommerce-cart .shop_table.cart td{padding:16px;border:none;vertical-align:middle;font:var(--md-sys-typescale-body-medium);color:var(--md-sys-color-on-surface)}

/* Remove button */
.woocommerce-cart .shop_table.cart td.product-remove{width:48px;padding:16px 8px 16px 16px;text-align:center}

/* Thumbnail */
.woocommerce-cart .shop_table.cart td.product-thumbnail{width:88px;padding:16px 8px}
.woocommerce-cart .shop_table.cart td.product-thumbnail a{display:block}
.woocommerce-cart .shop_table.cart td.product-thumbnail img{width:72px!important;height:72px!important;max-width:none!important;object-fit:cover;border-radius:var(--md-sys-shape-medium);display:block;border:1px solid var(--md-sys-color-outline-variant)}

/* Product name */
.woocommerce-cart .shop_table.cart td.product-name{font:var(--md-sys-typescale-title-small)}
.woocommerce-cart .shop_table.cart td.product-name a{color:var(--md-sys-color-on-surface);transition:color var(--md-sys-motion-duration-short4)}
.woocommerce-cart .shop_table.cart td.product-name a:hover{color:var(--md-sys-color-primary)}

/* Price */
.woocommerce-cart .shop_table.cart td.product-price,.woocommerce-cart .shop_table.cart td.product-subtotal{font:var(--md-sys-typescale-body-medium);font-weight:600;color:var(--md-sys-color-primary);white-space:nowrap}
.woocommerce-cart .shop_table.cart td.product-price del,.woocommerce-cart .shop_table.cart td.product-subtotal del{color:var(--md-sys-color-on-surface-variant);font-weight:400}
.woocommerce-cart .shop_table.cart td.product-price ins,.woocommerce-cart .shop_table.cart td.product-subtotal ins{text-decoration:none}

/* Quantity input */
.woocommerce-cart .shop_table.cart td.product-quantity .quantity{display:inline-flex;align-items:center;border:1px solid var(--md-sys-color-outline-variant);border-radius:var(--md-sys-shape-full);overflow:hidden;background:var(--md-sys-color-surface-container-low)}
.woocommerce-cart .shop_table.cart td.product-quantity .quantity input[type="number"]{width:48px;text-align:center;border:none;font:var(--md-sys-typescale-body-medium);padding:8px 4px;background:transparent;-moz-appearance:textfield;appearance:textfield}
.woocommerce-cart .shop_table.cart td.product-quantity .quantity input::-webkit-outer-spin-button,
.woocommerce-cart .shop_table.cart td.product-quantity .quantity input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* Actions row (coupon + update) */
.woocommerce-cart .shop_table.cart td.actions{padding:16px;background:var(--md-sys-color-surface-container-low);border-top:1px solid var(--md-sys-color-outline-variant)}
.woocommerce-cart .shop_table.cart td.actions .coupon{display:inline-flex;gap:var(--space-sm);align-items:center;flex-wrap:wrap;margin-bottom:var(--space-sm)}
.woocommerce-cart .shop_table.cart .coupon input.input-text{padding:10px 16px;border:1px solid var(--md-sys-color-outline-variant);border-radius:var(--md-sys-shape-full);font:var(--md-sys-typescale-body-medium);background:var(--md-sys-color-surface-container-lowest);min-width:180px;outline:none;transition:border-color var(--md-sys-motion-duration-short4)}
.woocommerce-cart .shop_table.cart .coupon input.input-text:focus{border-color:var(--md-sys-color-primary)}
.woocommerce-cart .shop_table.cart .coupon .button{padding:10px 20px;border-radius:var(--md-sys-shape-full);background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container);font:var(--md-sys-typescale-label-large);border:none;cursor:pointer;transition:all var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);white-space:nowrap}
.woocommerce-cart .shop_table.cart .coupon .button:hover{box-shadow:var(--md-sys-elevation-1)}
.woocommerce-cart .shop_table.cart td.actions>button[name="update_cart"]{display:block;width:100%;padding:12px 24px;border-radius:var(--md-sys-shape-full);background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface);font:var(--md-sys-typescale-label-large);border:1px solid var(--md-sys-color-outline-variant);cursor:pointer;transition:all var(--md-sys-motion-duration-medium2);white-space:nowrap;margin-top:var(--space-sm)}
.woocommerce-cart .shop_table.cart td.actions>button[name="update_cart"]:hover{background:var(--md-sys-color-surface-container-highest);box-shadow:var(--md-sys-elevation-1)}
.woocommerce-cart .shop_table.cart td.actions>button[name="update_cart"]:disabled{opacity:.5;cursor:default;box-shadow:none}

/* Cart collaterals — totals card */
.woocommerce-cart .cart-collaterals{position:sticky;top:80px;width:100%!important;float:none!important}
.woocommerce-cart .cart_totals{background:var(--md-sys-color-surface-container-lowest);border-radius:var(--bento-radius);border:1px solid var(--md-sys-color-outline-variant);padding:24px;width:100%!important;float:none!important}
.woocommerce-cart .cart_totals h2{font:var(--md-sys-typescale-title-large);color:var(--md-sys-color-on-surface);margin:0 0 16px;padding-bottom:8px;border-bottom:2px solid var(--md-sys-color-primary)}
.woocommerce-cart .cart_totals .shop_table{width:100%;border:none;border-collapse:collapse}
.woocommerce-cart .cart_totals .shop_table th{font:var(--md-sys-typescale-label-large);color:var(--md-sys-color-on-surface-variant);text-align:left;padding:12px 12px 12px 0;border:none;border-bottom:1px solid var(--md-sys-color-surface-variant);white-space:nowrap}
.woocommerce-cart .cart_totals .shop_table td{font:var(--md-sys-typescale-body-medium);color:var(--md-sys-color-on-surface);text-align:right;padding:12px 0;border:none;border-bottom:1px solid var(--md-sys-color-surface-variant)}
.woocommerce-cart .cart_totals .shop_table tr.order-total th{font:var(--md-sys-typescale-title-small);color:var(--md-sys-color-on-surface);border-bottom:none;padding-top:16px}
.woocommerce-cart .cart_totals .shop_table tr.order-total td{font:var(--md-sys-typescale-title-medium);font-weight:700;color:var(--md-sys-color-primary);border-bottom:none;padding-top:16px}

/* Proceed to checkout button */
.woocommerce-cart .wc-proceed-to-checkout{margin-top:var(--space-lg)}
.woocommerce-cart .wc-proceed-to-checkout .checkout-button,.woocommerce-cart .wc-proceed-to-checkout a.checkout-button.button.alt{display:flex!important;align-items:center;justify-content:center;width:100%;min-height:52px;padding:14px 24px;border-radius:var(--md-sys-shape-full)!important;background:var(--md-sys-color-primary)!important;color:var(--md-sys-color-on-primary)!important;font:var(--md-sys-typescale-label-large)!important;font-weight:600!important;border:none!important;cursor:pointer;transition:all var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);box-shadow:var(--md-sys-elevation-1);text-decoration:none!important;text-align:center;line-height:1.4}
.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover,.woocommerce-cart .wc-proceed-to-checkout a.checkout-button.button.alt:hover{box-shadow:var(--md-sys-elevation-3)!important;transform:translateY(-2px);background:color-mix(in srgb,var(--md-sys-color-primary),white 10%)!important;color:var(--md-sys-color-on-primary)!important}

/* Empty cart */
.woocommerce-cart .cart-empty{text-align:center;padding:var(--space-3xl) var(--space-xl);font:var(--md-sys-typescale-body-large);color:var(--md-sys-color-on-surface-variant)}
.woocommerce-cart .return-to-shop{text-align:center;padding:0 0 var(--space-xl)}
.woocommerce-cart .return-to-shop .button{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 28px;border-radius:var(--md-sys-shape-full);background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary);font:var(--md-sys-typescale-label-large);text-decoration:none;transition:all var(--md-sys-motion-duration-medium2)}
.woocommerce-cart .return-to-shop .button:hover{box-shadow:var(--md-sys-elevation-2);color:var(--md-sys-color-on-primary)}

/* WC notices */
.woocommerce-cart .woocommerce-notices-wrapper{grid-column:1/-1}
.woocommerce-cart .woocommerce-message,.woocommerce-cart .woocommerce-info,.woocommerce-cart .woocommerce-error{padding:14px 20px;border-radius:var(--md-sys-shape-large);font:var(--md-sys-typescale-body-medium);margin-bottom:var(--space-md);border:none;display:flex;align-items:center;gap:var(--space-sm)}
.woocommerce-cart .woocommerce-message{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}
.woocommerce-cart .woocommerce-info{background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container)}
.woocommerce-cart .woocommerce-error{background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container)}
.woocommerce-cart .woocommerce-message::before,.woocommerce-cart .woocommerce-info::before,.woocommerce-cart .woocommerce-error::before{display:none}

/* Cross-sells */
.woocommerce-cart .cross-sells{grid-column:1/-1;margin-top:var(--space-xl)}
.woocommerce-cart .cross-sells h2{font:var(--md-sys-typescale-title-large);color:var(--md-sys-color-on-surface);margin-bottom:var(--space-lg)}
.woocommerce-cart .cross-sells .products{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--bento-gap);list-style:none;padding:0}

/* Responsive */
@media(max-width:991px){
  .woocommerce-cart .woocommerce{grid-template-columns:1fr}
  .woocommerce-cart .cart-collaterals{position:static}
  .woocommerce-cart .cross-sells .products{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:767px){
  .woocommerce-cart .shop_table.cart thead{display:none}
  .woocommerce-cart .shop_table.cart tbody tr.cart_item{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:0 var(--space-md);padding:var(--space-md);position:relative}
  .woocommerce-cart .shop_table.cart td{padding:4px 0}
  .woocommerce-cart .shop_table.cart td.product-remove{position:absolute;top:var(--space-md);right:var(--space-md);width:auto;padding:0;z-index:1}
  .woocommerce-cart .shop_table.cart td.product-thumbnail{grid-row:1/3;width:auto;padding:0}
  .woocommerce-cart .shop_table.cart td.product-thumbnail img{width:80px;height:80px}
  .woocommerce-cart .shop_table.cart td.product-name{grid-column:2;padding-right:40px}
  .woocommerce-cart .shop_table.cart td.product-price,.woocommerce-cart .shop_table.cart td.product-quantity,.woocommerce-cart .shop_table.cart td.product-subtotal{grid-column:2}
  .woocommerce-cart .shop_table.cart td.product-price::before,.woocommerce-cart .shop_table.cart td.product-quantity::before,.woocommerce-cart .shop_table.cart td.product-subtotal::before{content:attr(data-title) ": ";font:var(--md-sys-typescale-label-medium);color:var(--md-sys-color-on-surface-variant);margin-right:var(--space-sm)}
  .woocommerce-cart .shop_table.cart td.actions{grid-column:1/-1;flex-direction:column;align-items:stretch}
  .woocommerce-cart .shop_table.cart .coupon{width:100%}
  .woocommerce-cart .shop_table.cart .coupon input.input-text{flex:1;min-width:0}
  .woocommerce-cart .shop_table.cart .actions>button[name="update_cart"]{margin-left:0;width:100%}
  .woocommerce-cart .cross-sells .products{grid-template-columns:repeat(2,1fr)}
}

/* === WOOCOMMERCE OVERRIDES === */
.woocommerce a.remove{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--md-sys-shape-full);background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container);text-indent:0;font-size:16px;transition:all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard)}
.woocommerce a.remove::before,.woocommerce a.remove::after{display:none}
.woocommerce a.remove:hover{background:var(--md-sys-color-error);color:var(--md-sys-color-on-error)}

/* Widget */
.widget ul,.widget ol{list-style:none}
.widget iframe{width:100%;height:auto;object-fit:cover;border-radius:var(--md-sys-shape-medium)}
.widget .gallery{display:grid;gap:var(--space-sm)}
.widget .gallery br{display:none}
.widget .gallery.gallery-columns-2{grid-template-columns:repeat(2,1fr)}
.widget .gallery.gallery-columns-3{grid-template-columns:repeat(3,1fr)}
.widget .gallery.gallery-columns-4{grid-template-columns:repeat(4,1fr)}
.widget .gallery-item{margin:0!important;width:100%!important}
.widget .gallery-item img{border:none!important;border-radius:var(--md-sys-shape-small)}

/* Pagination */
.pagination{display:flex;justify-content:center;margin-top:var(--space-xl)}
.page-numbers{display:flex;gap:var(--space-xs);list-style:none}
.page-numbers li a,.page-numbers li span{display:flex;align-items:center;justify-content:center;min-width:40px;height:40px;border-radius:var(--md-sys-shape-full);font:var(--md-sys-typescale-label-large);color:var(--md-sys-color-on-surface);transition:all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);padding:0 var(--space-sm)}
.page-numbers li a:hover{background:var(--md-sys-color-surface-container-high)}
.page-numbers li span.current,.page-numbers li .current{background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary)}

/* CF7 overrides */
.wpcf7-spinner{position:absolute}
.wpcf7-form-control-wrap{position:initial}
.wpcf7 .wpcf7-not-valid-tip{font:var(--md-sys-typescale-body-small);color:var(--md-sys-color-error);padding:var(--space-xs);position:relative}
.wpcf7 .wpcf7-not-valid-tip::after{display:none}
.wpcf7 .wpcf7-validation-errors{display:none!important}

/* Popup */
.ru_popup .form_popup{background:var(--md-sys-color-surface-container-lowest);border-radius:var(--bento-radius);padding:var(--space-xl)}

/* Row/column helpers kept for backward compat */
.row{display:flex;flex-wrap:wrap;--bs-gutter-x:30px}
.row>*{flex-shrink:0;width:100%;padding-right:calc(var(--bs-gutter-x) * .5);padding-left:calc(var(--bs-gutter-x) * .5)}
.row-margin{--bs-gutter-y:var(--bs-gutter-x);margin-top:calc(-.5 * var(--bs-gutter-y));margin-bottom:calc(-.5 * var(--bs-gutter-y))}
.row-margin>*{margin-top:0;padding-top:calc(var(--bs-gutter-x) * .5);padding-bottom:calc(var(--bs-gutter-x) * .5)}

/* Warranty page */
.ru_baohanh{padding:var(--space-2xl) 0}

/* Swiper overrides */
.swiper{overflow:hidden}
.swiper-wrapper{display:flex}
.swiper-slide{flex-shrink:0}
.swiper-pagination{text-align:center;margin-top:var(--space-md)}
.swiper-button-next,.swiper-button-prev{
  width:44px;height:44px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-radius:var(--md-sys-shape-full);
  box-shadow:0 2px 8px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.06);
  border:1px solid rgba(0,0,0,.06);
  color:var(--md-sys-color-on-surface);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;position:absolute;top:50%;transform:translateY(-50%);
  z-index:10;
  transition:all var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard)
}
.swiper-button-next:hover,.swiper-button-prev:hover{
  background:var(--md-sys-color-primary);
  border-color:var(--md-sys-color-primary);
  box-shadow:0 4px 16px color-mix(in srgb, var(--md-sys-color-primary) 40%, transparent);
  transform:translateY(-50%) scale(1.08)
}
.swiper-button-next::after,.swiper-button-prev::after{
  content:''!important;
  width:18px;height:18px;display:block;
  background:var(--md-sys-color-on-surface);
  transition:background var(--md-sys-motion-duration-short4)
}
.swiper-button-prev::after{
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z'/%3E%3C/svg%3E") center/contain no-repeat
}
.swiper-button-next::after{
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z'/%3E%3C/svg%3E") center/contain no-repeat
}
.swiper-button-next:hover::after,.swiper-button-prev:hover::after{background:#fff}
.swiper-button-disabled{opacity:.3!important;cursor:default;pointer-events:none}

/* Columns grid (backward compat) */
.columns-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--bento-gap)}
.columns-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--bento-gap)}
.columns-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--bento-gap)}

/* Bootstrap column backward compat */
.col-1{width:8.33%;flex:0 0 8.33%}.col-2{width:16.67%;flex:0 0 16.67%}.col-3{width:25%;flex:0 0 25%}.col-4{width:33.33%;flex:0 0 33.33%}.col-5{width:41.67%;flex:0 0 41.67%}.col-6{width:50%;flex:0 0 50%}.col-7{width:58.33%;flex:0 0 58.33%}.col-8{width:66.67%;flex:0 0 66.67%}.col-9{width:75%;flex:0 0 75%}.col-10{width:83.33%;flex:0 0 83.33%}.col-11{width:91.67%;flex:0 0 91.67%}.col-12{width:100%;flex:0 0 100%}
@media(min-width:576px){.col-sm-6{width:50%;flex:0 0 50%}.col-sm-4{width:33.33%;flex:0 0 33.33%}.col-sm-3{width:25%;flex:0 0 25%}}
@media(min-width:768px){.col-md-3{width:25%;flex:0 0 25%}.col-md-4{width:33.33%;flex:0 0 33.33%}.col-md-6{width:50%;flex:0 0 50%}.col-md-12{width:100%;flex:0 0 100%}}
@media(min-width:992px){.col-lg-3{width:25%;flex:0 0 25%}.col-lg-4{width:33.33%;flex:0 0 33.33%}.col-lg-6{width:50%;flex:0 0 50%}.col-lg-9{width:75%;flex:0 0 75%}.col-lg-12{width:100%;flex:0 0 100%}}
@media(min-width:1200px){.col-xl-3{width:25%;flex:0 0 25%}.col-xl-4{width:33.33%;flex:0 0 33.33%}.col-xl-5{width:41.67%;flex:0 0 41.67%}.col-xl-6{width:50%;flex:0 0 50%}.col-xl-7{width:58.33%;flex:0 0 58.33%}.col-xl-9{width:75%;flex:0 0 75%}.col-xl-12{width:100%;flex:0 0 100%}}

/* Sticky */
.sticky{position:sticky;top:80px;z-index:99}

/* Search page */
.ru_search_body{padding:var(--space-2xl) 0}

/* Author page */
.ru_author{padding:var(--space-2xl) 0}

/* Dark line (legacy, hide) */
.ru_line_dark{display:none}

/* Searchform */
.ru_searchform{display:flex;gap:var(--space-sm)}
.ru_searchform .search-input{flex:1;border:1px solid var(--md-sys-color-outline-variant);border-radius:var(--md-sys-shape-full);padding:10px 20px;background:var(--md-sys-color-surface-container-low);font:var(--md-sys-typescale-body-medium)}
.ru_searchform .search-submit{border-radius:var(--md-sys-shape-full);padding:10px 20px;background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary);border:none;font:var(--md-sys-typescale-label-large);cursor:pointer}

/* Force show product gallery even if JS hangs or Slick sets height 0 */
.woo-variation-gallery-wrapper, .loading-gallery {
    background: none !important;
}
.woo-variation-gallery-slider,
.woo-variation-gallery-slider .slick-list,
.woo-variation-gallery-slider .slick-track {
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    width: 100% !important;
    transform: none !important;
}
.woo-variation-gallery-slider .wvg-gallery-image.slick-current,
.woo-variation-gallery-slider .wvg-gallery-image.slick-active {
    opacity: 1 !important;
    display: block !important;
    width: 100% !important;
    position: relative !important;
}
.woo-variation-gallery-slider .wvg-gallery-image img {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: var(--md-sys-shape-large);
}
.woo-variation-gallery-slider .wvg-gallery-image:not(.slick-active) {
    display: none !important;
}
.loading-gallery::before {
    display: none !important;
}
.woo-variation-gallery-wrapper .wvg-gallery-image {
    opacity: 1 !important;
}

/* Fix missing lazy loaded images causing narrow figcaption text wrapper */
.content-post figure.aligncenter,
.content-post .aligncenter,
.content-post .alignleft,
.content-post .alignright,
.content-post figure,
.content-post img {
    display: block !important;
    width: 100%; /* Default width can be overridden by max-width */
    max-width: 100% !important;
    float: none !important;
    clear: both !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: var(--space-md);
    margin-bottom: var(--space-md);
}
.content-post figure img {
    margin: 0 auto;
}
/* Fix figcaption vertical text — override WP table-caption display */
.content-post figcaption,
.content-post .wp-element-caption {
    display: block !important;
    caption-side: unset !important;
    width: 100% !important;
    font: var(--md-sys-typescale-body-small);
    color: var(--md-sys-color-on-surface-variant);
    text-align: center;
    padding-top: var(--space-sm);
    margin: 0;
}
.content-post p {
    clear: both !important;
}
.content-post .wp-caption {
    max-width: 100% !important;
    border: none;
    padding: 0;
    margin-bottom: var(--space-lg);
    background: transparent;
}
.content-post .wp-caption img {
    border-radius: var(--md-sys-shape-medium);
}
.content-post .wp-caption-text {
    font: var(--md-sys-typescale-body-small);
    color: var(--md-sys-color-on-surface-variant);
    text-align: center;
    padding-top: var(--space-sm);
    margin: 0;
}

/* Print */
@media print{body{background:#fff;color:#000}.ru_cta_island,#header,.ru_header_mb{display:none}}