/* 
 Theme Name:   qdtheme-child
 Theme URI:    
 Description:  qdtheme
 Author:       adminsilverlife
 Author URI:   
 Template:     qdtheme
 Version:      1.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html

 /* == Add your own styles below this line ==
--------------------------------------------*/

/* =========================================================
   LOCAL FONTS (Fraunces, Manrope, Work Sans)
   Loaded locally to ensure UX Builder & offline compatibility
   ========================================================= */

/* vietnamese */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/local-font-1-6NU58FyLNQOQZAnv9ZwNjucMHVn85Ni7emAe9lKqZTnbB-gzTK0K1ChjdfeQ_5Y.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/local-font-2-6NU58FyLNQOQZAnv9ZwNjucMHVn85Ni7emAe9lKqZTnbB-gzTK0K1ChjdPeQ_5Y.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/local-font-3-6NU58FyLNQOQZAnv9ZwNjucMHVn85Ni7emAe9lKqZTnbB-gzTK0K1ChjeveQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/local-font-1-6NU58FyLNQOQZAnv9ZwNjucMHVn85Ni7emAe9lKqZTnbB-gzTK0K1ChjdfeQ_5Y.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/local-font-2-6NU58FyLNQOQZAnv9ZwNjucMHVn85Ni7emAe9lKqZTnbB-gzTK0K1ChjdPeQ_5Y.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/local-font-3-6NU58FyLNQOQZAnv9ZwNjucMHVn85Ni7emAe9lKqZTnbB-gzTK0K1ChjeveQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/local-font-4-6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxCBTeO-U.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/local-font-5-6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxCFTeO-U.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/local-font-6-6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxC9TeA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/local-font-4-6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxCBTeO-U.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/local-font-5-6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxCFTeO-U.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/local-font-6-6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxC9TeA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/local-font-4-6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxCBTeO-U.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/local-font-5-6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxCFTeO-U.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/local-font-6-6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxC9TeA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/local-font-7-xn7gYHE41ni1AdIRggqxSuXd.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/local-font-8-xn7gYHE41ni1AdIRggOxSuXd.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/local-font-9-xn7gYHE41ni1AdIRggSxSuXd.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/local-font-10-xn7gYHE41ni1AdIRggixSuXd.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/local-font-11-xn7gYHE41ni1AdIRggmxSuXd.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/local-font-12-xn7gYHE41ni1AdIRggexSg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/local-font-7-xn7gYHE41ni1AdIRggqxSuXd.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/local-font-8-xn7gYHE41ni1AdIRggOxSuXd.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/local-font-9-xn7gYHE41ni1AdIRggSxSuXd.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/local-font-10-xn7gYHE41ni1AdIRggixSuXd.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/local-font-11-xn7gYHE41ni1AdIRggmxSuXd.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/local-font-12-xn7gYHE41ni1AdIRggexSg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/local-font-7-xn7gYHE41ni1AdIRggqxSuXd.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/local-font-8-xn7gYHE41ni1AdIRggOxSuXd.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/local-font-9-xn7gYHE41ni1AdIRggSxSuXd.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/local-font-10-xn7gYHE41ni1AdIRggixSuXd.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/local-font-11-xn7gYHE41ni1AdIRggmxSuXd.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/local-font-12-xn7gYHE41ni1AdIRggexSg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/local-font-7-xn7gYHE41ni1AdIRggqxSuXd.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/local-font-8-xn7gYHE41ni1AdIRggOxSuXd.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/local-font-9-xn7gYHE41ni1AdIRggSxSuXd.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/local-font-10-xn7gYHE41ni1AdIRggixSuXd.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/local-font-11-xn7gYHE41ni1AdIRggmxSuXd.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/local-font-12-xn7gYHE41ni1AdIRggexSg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/local-font-7-xn7gYHE41ni1AdIRggqxSuXd.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/local-font-8-xn7gYHE41ni1AdIRggOxSuXd.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/local-font-9-xn7gYHE41ni1AdIRggSxSuXd.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/local-font-10-xn7gYHE41ni1AdIRggixSuXd.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/local-font-11-xn7gYHE41ni1AdIRggmxSuXd.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/local-font-12-xn7gYHE41ni1AdIRggexSg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/local-font-13-QGYsz_wNahGAdqQ43Rh_c6Dpp_k.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/local-font-14-QGYsz_wNahGAdqQ43Rh_cqDpp_k.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/local-font-15-QGYsz_wNahGAdqQ43Rh_fKDp.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/local-font-13-QGYsz_wNahGAdqQ43Rh_c6Dpp_k.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/local-font-14-QGYsz_wNahGAdqQ43Rh_cqDpp_k.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/local-font-15-QGYsz_wNahGAdqQ43Rh_fKDp.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/local-font-13-QGYsz_wNahGAdqQ43Rh_c6Dpp_k.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/local-font-14-QGYsz_wNahGAdqQ43Rh_cqDpp_k.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/local-font-15-QGYsz_wNahGAdqQ43Rh_fKDp.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================================================
   HIỆU CHỈNH FONT CHÍNH (Quicksand & Nunito) — TẢI LOCAL
   Variable font: 1 file/subset phủ toàn dải weight 400–700
   ========================================================= */
/* vietnamese */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/quicksand-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/quicksand-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/quicksand-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/nunito-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/nunito-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/nunito-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}





/* =========================================================
   1. BẢNG MÀU CHỦ ĐẠO & FONT SYSTEM TỪ PREVIEW-DEMO.HTML
   ========================================================= */
:root {
  --green-main: #164627;        /* Màu xanh lá rêu tươi sáng & nổi bật */
  --green-accent: #1e5a33;      /* Màu xanh nhấn phụ */
  --emerald-dark: #091D16;      /* Deep Moss Emerald Solid */
  --emerald-bg: #102615;        /* Deep Moss Emerald Dark */
  --gold-primary: #D4AF37;      /* Metallic Warm Gold mạ vàng hoàng gia */
  --gold-light: #F7DF9B;        /* Màu vàng sáng highlight */
  --gold-foil: #F3E5AB;         /* Màu vàng mạ */
  --gold-glow: rgba(212, 175, 55, 0.18); /* Vòng sáng mờ mạ vàng */
  --red-accent: #7A1C1C;        /* Primary Burgundy Red */
  --cream-bg: #F8F4EA;          /* Silk Cream nền kem */
  --ivory-bg: #FFFEFB;         /* Pure Ivory nền ngà */
  --text-dark: #0D2F23;         /* Text Dark Body */
  --text-muted: #575249;        /* Text Muted Body */
  --text-white: #ffffff;        /* Màu chữ trắng */
  
  --font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serif: 'Quicksand', 'Nunito', var(--font-system);
  --font-heading: 'Quicksand', 'Nunito', var(--font-system);
  --font-accent: 'Quicksand', 'Nunito', var(--font-system);
  --font-body: 'Quicksand', 'Nunito', var(--font-system);
}

/* =========================================================
   FIX 1 — GHI ĐÈ PRIMARY COLOR ĐỎ (#ed1c24) CỦA FLATSOME CUSTOM CSS
   -> Đồng bộ toàn site về xanh lá thương hiệu (loại bỏ các hack chặn đỏ)
   ========================================================= */
html:root {
  --primary-color: #164627;
  --fs-color-primary: #164627;
  --fs-color-secondary: #164627;
  --fs-color-success: #164627;
  --fs-color-alert: #164627;
  --fs-experimental-link-color: #164627;
  --fs-experimental-link-color-hover: #1e5a33;
}

/* ĐỒNG NHẤT FONT CHỮ TOÀN TRANG — QUICKSAND / NUNITO */
body,
p,
a,
span,
div,
li, dt, dd, td, th,
h1, h2, h3, h4, h5, h6,
input, button, select, textarea,
.nav, .menu, .header, .footer,
.post-item, .box, .button, .btn,
.sec-main-heading-styled,
.category-main-title,
.single-post-main-title,
.articles-main-title,
.entry-title, .entry-content, .entry-summary,
.widget-title, .author-title, .related-title,
.recent-post-title, .single-post-body,
.tag-pill, .pill-tag-burgundy, .story-tag-pill,
.category-breadcrumbs-tag-pill, .single-post-tag-pill, .articles-tag-pill,
.card-category-badge, .read-more, .entry-meta, .single-post-meta-bar, .sec-subheading-styled {
  font-family: 'Quicksand', 'Nunito', var(--font-system) !important;
}

/* =========================================================
   FIX 2 — TRIỆT ĐỂ KHẮC PHỤC "TIMES NEW ROMAN" TỪ FLATSOME CUSTOM CSS (DB)

   Flatsome in rule inline sau child stylesheet:
     body, h1-h6, .heading-font, .nav > li > a { font-family:'times new roman' !important }
   -> prefix "html " để tăng specificity (2 elements > 1), thắng dù load sau.
   ========================================================= */
html body,
html .heading-font,
html .off-canvas-center .nav-sidebar.nav-vertical > li > a,
html .header .nav > li > a,
html .header-nav > li > a,
html .header-bottom-nav > li > a {
  font-family: 'Quicksand', 'Nunito', var(--font-system) !important;
}
html h1, html h2, html h3, html h4, html h5, html h6 {
  font-family: 'Quicksand', 'Nunito', var(--font-system) !important;
}
html input, html button, html select, html textarea {
  font-family: 'Quicksand', 'Nunito', var(--font-system) !important;
}

/* =========================================================
   2. HÀNG CHÍNH DÒNG 1 — NỀN TRẮNG (LOGO + HOTLINE VÀNG + TOOLS)
   ========================================================= */
/* Vạch vàng kim mảnh trên cùng + bóng đổ nhẹ */
#header {
  border-top: 3px solid var(--gold-primary);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.header-main {
  background-color: #ffffff;
}

/* Vô hiệu hóa max-width: 100% !important của Flatsome .header-full-width .container */
.header-full-width .container,
.header-full-width .header-main .header-inner,
.header-main .header-inner {
  max-width: 1340px !important;
  width: 100%;
  padding-left: 25px;
  padding-right: 30px;
  margin-left: auto !important;
  margin-right: auto !important;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  min-height: 82px;
}

/* Logo bên trái */
#logo {
  flex: 0 0 auto;

  margin-right: 20px;
  display: flex;
  align-items: center;
}
.header-main .logo img {
  max-height: 48px;
  display: block;
  width: auto;
}

/* --- Hotline cao cấp (vàng kim) --- */
.sl-header-hotline {
  margin-left: auto;
  margin-right: 20px; /* Giữ nguyên vị trí thanh tìm kiếm ở vị trí chuẩn */
  padding-right: 36px; /* Khoảng đệm bên phải trước đường kẻ phân cách */
  border-right: 1px solid #e8ebef;
}
.sl-hotline-link {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
}
.sl-hotline-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gold-light);
  border: 1px solid rgba(212, 175, 55, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-primary);
  font-size: 15px;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.sl-hotline-link:hover .sl-hotline-icon {
  transform: scale(1.08);
  background: var(--gold-primary);
  color: #ffffff;
}
.sl-hotline-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.sl-hotline-text small {
  font-family: 'Quicksand', 'Nunito', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #9aa0a8;
}
.sl-hotline-text strong {
  font-family: 'Quicksand', 'Nunito', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: #1a1a1a;
  letter-spacing: 0.3px;
  transition: color 0.25s ease;
}
.sl-hotline-link:hover .sl-hotline-text strong {
  color: var(--gold-primary);
}

/* --- Đổi ngôn ngữ — Design System SilverLife (TranslatePress & Fallback) --- */
.sl-header-language {
  display: none !important;
}

.sl-header-language .trp_language_switcher_shortcode {
  display: inline-block;
  margin: 0;
  padding: 0;
}

/* Cầu nối tàng hình bao quanh vùng container mẹ -> Chống mất hover khi di chuyển chuột xuống dropdown */
.sl-header-language::after,
.sl-header-language .trp-language-switcher::after,
.sl-lang-switcher-custom::after {
  content: "" !important;
  position: absolute !important;
  top: 100% !important;
  left: -20px !important;
  right: -20px !important;
  height: 24px !important;
  background: transparent !important;
  display: block !important;
  z-index: 9997 !important;
}

/* Container dạng Capsule Pill 38px chuẩn Design System */
.sl-header-language .trp-language-switcher {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: 38px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 99px !important;
  background: #ffffff !important;
  padding: 0 14px !important;
  margin: 0 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer;
  box-sizing: border-box !important;
  float: none !important;
}

.sl-header-language:hover .trp-language-switcher,
.sl-header-language.sl-is-open .trp-language-switcher,
.sl-header-language .trp-language-switcher:hover,
.sl-header-language .trp-language-switcher:focus-within {
  border-color: var(--gold-primary, #D4AF37) !important;
  box-shadow: 0 0 0 3px var(--gold-glow, rgba(212, 175, 55, 0.18)), 0 4px 12px rgba(0, 0, 0, 0.05) !important;
  background: #ffffff !important;
}

/* Reset TRP default wrappers */
.sl-header-language .trp-language-switcher > div {
  border: none !important;
  background: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  float: none !important;
}

/* Language link inside pill - Ghi đè triệt để visibility:hidden mặc định của TRP khi hover */
.sl-header-language .trp-ls-shortcode-current-language,
.sl-header-language .trp-language-switcher:focus .trp-ls-shortcode-current-language,
.sl-header-language .trp-language-switcher:hover .trp-ls-shortcode-current-language,
.sl-header-language .trp-language-switcher:focus-within .trp-ls-shortcode-current-language,
.sl-header-language.sl-is-open .trp-ls-shortcode-current-language {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Ép màu chữ tối rêu đậm nhã nhặn (#0D2F23), tuyệt đối không bị ẩn/trắng text khi bình thường hay hover */
.sl-header-language .trp-ls-shortcode-current-language a,
.sl-header-language .trp-ls-shortcode-current-language a:link,
.sl-header-language .trp-ls-shortcode-current-language a:visited,
.sl-header-language .trp-ls-shortcode-disabled {
  font-family: var(--font-heading, 'Quicksand', 'Nunito', sans-serif) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #0D2F23 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  background: transparent !important;
  visibility: visible !important;
  opacity: 1 !important;
  transition: color 0.2s ease !important;
}

/* Khi hover / focus / mở dropdown: đổi sang màu xanh rêu tươi nổi bật (#164627), tuyệt đối hiển thị đầy đủ */
.sl-header-language:hover .trp-ls-shortcode-current-language a,
.sl-header-language.sl-is-open .trp-ls-shortcode-current-language a,
.sl-header-language .trp-language-switcher:hover .trp-ls-shortcode-current-language a,
.sl-header-language .trp-ls-shortcode-current-language a:hover,
.sl-header-language .trp-ls-shortcode-current-language a:focus,
.sl-header-language .trp-ls-shortcode-disabled:hover,
.sl-header-language .trp-language-switcher a:hover {
  color: #164627 !important;
  background: transparent !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* FontAwesome Chevron Down indicator cho TRP */
.sl-header-language .trp-ls-shortcode-current-language a::after,
.sl-header-language .trp-ls-shortcode-disabled::after {
  content: "\f078";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 10px;
  color: var(--gold-primary, #D4AF37) !important;
  margin-left: 4px;
  transition: transform 0.25s ease;
  display: inline-block;
  visibility: visible !important;
  opacity: 1 !important;
}

.sl-header-language:hover .trp-ls-shortcode-current-language a::after,
.sl-header-language.sl-is-open .trp-ls-shortcode-current-language a::after,
.sl-header-language .trp-language-switcher:hover .trp-ls-shortcode-current-language a::after,
.sl-header-language .trp-language-switcher:hover .trp-ls-shortcode-disabled::after {
  transform: rotate(180deg);
}

/* Flags styling */
.sl-header-language .trp-flag-image,
.sl-header-language img.trp-flag-image {
  width: 20px !important;
  height: 14px !important;
  object-fit: cover !important;
  border-radius: 3px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
  display: inline-block !important;
  vertical-align: middle !important;
  margin: 0 !important;
}

/* Dropdown Panel - vị trí và hiển thị khi hover / class sl-is-open */
.sl-header-language .trp-language-switcher > div.trp-ls-shortcode-language {
  position: absolute !important;
  top: calc(100% + 2px) !important;
  right: 0 !important;
  left: auto !important;
  min-width: 145px !important;
  box-shadow: 0 12px 32px rgba(16, 38, 21, 0.14), 0 4px 12px rgba(0, 0, 0, 0.06) !important;
  border: 1px solid rgba(212, 175, 55, 0.3) !important;
  border-radius: 14px !important;
  padding: 6px !important;
  background: #ffffff !important;
  z-index: 9999 !important;
  transition: opacity 0.2s ease, visibility 0.2s ease !important;
}

/* Cầu nối tàng hình phía trên dropdown */
.sl-header-language .trp-language-switcher > div.trp-ls-shortcode-language::before,
.sl-lang-dropdown::before {
  content: "" !important;
  position: absolute !important;
  top: -16px !important;
  left: -15px !important;
  right: -15px !important;
  height: 18px !important;
  background: transparent !important;
  display: block !important;
}

/* Giữ dropdown LUÔN HIỂN THỊ khi hover vào container mẹ hoặc khi có class sl-is-open */
.sl-header-language:hover .trp-ls-shortcode-language,
.sl-header-language.sl-is-open .trp-ls-shortcode-language,
.sl-header-language .trp-language-switcher:hover > div.trp-ls-shortcode-language,
.sl-header-language .trp-language-switcher:focus-within > div.trp-ls-shortcode-language,
.sl-header-language .trp-ls-shortcode-language:hover,
.sl-lang-switcher-custom:hover .sl-lang-dropdown,
.sl-header-language.sl-is-open .sl-lang-dropdown,
.sl-lang-dropdown:hover {
  display: block !important;
  height: auto !important;
  overflow: visible !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.sl-header-language .trp-ls-shortcode-language a,
.sl-header-language .trp-ls-shortcode-language a:link,
.sl-header-language .trp-ls-shortcode-language a:visited {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-family: var(--font-heading, 'Quicksand', 'Nunito', sans-serif) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #0D2F23 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  background: transparent !important;
}

.sl-header-language .trp-ls-shortcode-language a:hover,
.sl-header-language .trp-ls-shortcode-language a:focus {
  background: var(--emerald-bg, #102615) !important;
  color: var(--gold-light, #F7DF9B) !important;
}

/* --- Fallback Custom Language Switcher UI --- */
.sl-lang-switcher-custom {
  position: relative;
  display: inline-block;
}

.sl-lang-current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 38px;
  padding: 0 14px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 99px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

.sl-lang-switcher-custom:hover .sl-lang-current,
.sl-header-language.sl-is-open .sl-lang-current {
  border-color: var(--gold-primary, #D4AF37);
  box-shadow: 0 0 0 3px var(--gold-glow, rgba(212, 175, 55, 0.18)), 0 4px 12px rgba(0, 0, 0, 0.05);
  background: #ffffff;
}

.sl-lang-label {
  font-family: var(--font-heading, 'Quicksand', 'Nunito', sans-serif);
  font-size: 13px;
  font-weight: 700;
  color: #0D2F23 !important;
  letter-spacing: 0.3px;
}

.sl-lang-switcher-custom:hover .sl-lang-label,
.sl-header-language.sl-is-open .sl-lang-label {
  color: #164627 !important;
}

.sl-lang-arrow {
  font-size: 10px;
  color: var(--gold-primary, #D4AF37) !important;
  transition: transform 0.25s ease;
}

.sl-lang-switcher-custom:hover .sl-lang-arrow,
.sl-header-language.sl-is-open .sl-lang-arrow {
  transform: rotate(180deg);
}

.sl-lang-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  right: 0;
  min-width: 145px;
  background: #ffffff;
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 12px 32px rgba(16, 38, 21, 0.14), 0 4px 12px rgba(0, 0, 0, 0.06);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
  z-index: 9999;
}

.sl-lang-switcher-custom:hover .sl-lang-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.sl-lang-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  border-radius: 8px;
  text-decoration: none;
  font-family: var(--font-heading, 'Quicksand', 'Nunito', sans-serif);
  font-size: 13px;
  font-weight: 600;
  color: #0D2F23 !important;
  transition: all 0.2s ease;
}

.sl-lang-item:hover,
.sl-lang-item.active {
  background: var(--emerald-bg, #102615) !important;
  color: var(--gold-light, #F7DF9B) !important;
}

.sl-lang-item.active {
  font-weight: 700;
}

.sl-flag {
  display: inline-block;
  width: 20px;
  height: 14px;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}

.sl-flag-vi {
  background-color: #da251d;
  position: relative;
}

.sl-flag-vi::after {
  content: "★" !important;
  color: #ff0 !important;
  font-size: 9px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 1;
}

.sl-flag-en {
  background: linear-gradient(90deg, #00247d 40%, #cf142b 40%, #cf142b 60%, #00247d 60%);
  position: relative;
}

/* Tools đẩy sát phải (hotline đã lấy margin-left:auto) */
.header-main .flex-right {
  margin-left: 12px; /* Tăng khoảng cách bên trái nhóm công cụ (Search, Account, Cart) */
}

/* =========================================================
   3. HÀNG NAV DÒNG 2 — NỀN XANH RÊU ĐẬM, CHỮ TRẮNG, HOVER VÀNG KIM
   ========================================================= */
.sl-nav-row {
  height: 52px;
  background-color: var(--emerald-bg, #102615) !important; /* beat inline .header-bottom red */
  border-top: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}
.sl-nav-row .flex-row {
  height: 100%;
  max-height: 52px;
  max-width: 1340px;
  margin: 0 auto;
  padding: 0 25px;
  overflow: visible !important;
}
.sl-nav-row .header-nav,
.sl-nav-row .nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sl-nav-row .header-nav > li,
.sl-nav-row .nav > li {
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  margin: 0 5px !important;
}

/* Link menu — chữ trắng, uppercase, khoảng chữ rộng sang trọng */
.sl-nav-row .header-nav > li > a,
.sl-nav-row .nav > li > a {
  font-family: 'Quicksand', 'Nunito', system-ui, -apple-system, sans-serif;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 700;
  font-size: 13.5px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 15px 12px;
  white-space: nowrap;
  position: relative;
  transition: color 0.25s ease;
  text-decoration: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Triệt tiêu đường gạch thứ 2 từ Flatsome theme (border-bottom, text-decoration hoặc ::before) */
.sl-nav-row .header-nav > li,
.sl-nav-row .nav > li,
.sl-nav-row .header-nav > li > a,
.sl-nav-row .nav > li > a {
  text-decoration: none !important;
  border-bottom: none !important;
}

.sl-nav-row .header-nav > li::before,
.sl-nav-row .nav > li::before,
.sl-nav-row .header-nav > li > a::before,
.sl-nav-row .nav > li > a::before {
  display: none !important;
  content: none !important;
  border-bottom: none !important;
}

/* Gạch vàng kim trượt dưới chữ duy nhất khi hover */
.sl-nav-row .header-nav > li > a::after,
.sl-nav-row .nav > li > a::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  left: 12px !important;
  right: 12px !important;
  bottom: 6px !important;
  height: 2px !important;
  background: var(--gold-primary) !important;
  border-radius: 2px !important;
  border-bottom: none !important;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease !important;
}

.sl-nav-row .header-nav > li > a:hover,
.sl-nav-row .nav > li > a:hover,
.sl-nav-row .header-nav > li > a:focus,
.sl-nav-row .nav > li > a:focus {
  color: #ffffff !important;
  text-decoration: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

.sl-nav-row .header-nav > li > a:hover::after,
.sl-nav-row .nav > li > a:hover::after,
.sl-nav-row .header-nav > li > a:focus::after,
.sl-nav-row .nav > li > a:focus::after {
  transform: scaleX(1) !important;
}

/* Menu active — vàng kim + 1 gạch vàng duy nhất */
.sl-nav-row .header-nav > li.active > a,
.sl-nav-row .header-nav > li.current-menu-item > a,
.sl-nav-row .header-nav > li.current_page_item > a {
  color: var(--gold-light) !important;
  text-decoration: none !important;
  border-bottom: none !important;
}

.sl-nav-row .header-nav > li.active > a::after,
.sl-nav-row .header-nav > li.current-menu-item > a::after,
.sl-nav-row .header-nav > li.current_page_item > a::after {
  transform: scaleX(1);
  background: var(--gold-primary);
}

/* Dropdown khi hover — card trắng kem + header mạ vàng emerald (Design System) */
.sl-nav-row .header-nav .nav-dropdown,
.sl-nav-row .header-nav .sub-menu {
  position: absolute !important;
  top: calc(100% + 4px) !important;
  left: 0 !important;
  z-index: 999999 !important;
  min-width: 230px !important;
  max-width: 320px !important;
  width: max-content !important;
  box-shadow: 0 18px 48px rgba(9, 29, 22, 0.22), 0 6px 18px rgba(9, 29, 22, 0.12), 0 0 0 1px rgba(212, 175, 55, 0.08) !important;
  border-radius: 16px !important;
  padding: 0 0 6px !important;
  background: linear-gradient(180deg, #FFFEFB 0%, #F8F4EA 100%) !important;
  border: 1px solid rgba(212, 175, 55, 0.45) !important;
  list-style: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Cầu nối hover chống tự đóng khi di chuyển chuột từ thanh nav xuống dropdown */
.sl-nav-row .header-nav .nav-dropdown::before,
.sl-nav-row .header-nav .sub-menu::before {
  content: "" !important;
  position: absolute !important;
  top: -12px !important;
  left: 0 !important;
  right: 0 !important;
  height: 14px !important;
  background: transparent !important;
}

/* Các hàng li trong dropdown nav */
.sl-nav-row .nav-dropdown > li,
.sl-nav-row .sub-menu > li {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: 1px solid rgba(199, 151, 63, 0.22) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: transparent !important;
  list-style: none !important;
}

/* Header dropdown — gradient xanh emerald + ti├¬u ─æß╗ü mß║í v├áng kim (Design System) */
.sl-nav-row .nav-dropdown > li.sl-nav-dropdown-header,
.sl-nav-row .sub-menu > li.sl-nav-dropdown-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: -1px -1px 6px !important;
  padding: 13px 18px !important;
  background: linear-gradient(135deg, #0E2A20 0%, #1B4334 100%) !important;
  border-bottom: 1px solid rgba(212, 175, 55, 0.55) !important;
  border-radius: 15px 15px 0 0 !important;
  box-shadow: inset 0 1px 0 rgba(212, 175, 55, 0.22), 0 2px 10px rgba(9, 29, 22, 0.25) !important;
  width: auto !important;
}

.sl-nav-dropdown-header .sl-dd-gem {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: linear-gradient(135deg, #FFF0B3 0%, #D4AF37 100%);
  transform: rotate(45deg);
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.6);
  flex-shrink: 0;
}

.sl-nav-dropdown-header .sl-dd-title {
  font-family: 'Quicksand', 'Nunito', sans-serif;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-light, #F7DF9B);
  white-space: nowrap;
}

.sl-nav-row .nav-dropdown > li:last-child,
.sl-nav-row .sub-menu > li:last-child {
  border-bottom: none !important;
}

/* Thẻ a liên kết menu con */
.sl-nav-row .nav-dropdown li > a,
.sl-nav-row .sub-menu li > a,
.sl-nav-row .nav-dropdown a,
.sl-nav-row .sub-menu a,
.header-bottom-nav .nav-dropdown li > a,
.header-bottom-nav .sub-menu li > a,
.nav-dropdown.nav-dropdown-bold li > a,
.nav-dropdown.nav-dropdown-default li > a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-family: 'Quicksand', 'Nunito', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #102615 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 11px 18px !important;
  border-radius: 0 !important;
  transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease !important;
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Dß║Ñu vi├¬n kim cã░ãíng v├íng kim trã░ß╗¢c chß╗» (FontAwesome gem) */
.sl-nav-row .nav-dropdown li > a::before,
.sl-nav-row .sub-menu li > a::before,
.header-bottom-nav .nav-dropdown li > a::before,
.header-bottom-nav .sub-menu li > a::before {
  content: "\f3a5" !important;
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  color: var(--gold-primary, #D4AF37) !important;
  font-size: 11px !important;
  line-height: 1 !important;
  transition: transform 0.2s ease, color 0.2s ease !important;
}

/* Hover effect — Nền xanh emerald đậm + chữ vàng kim (Design System) */
.sl-nav-row .header-nav .nav-dropdown li > a:hover,
.sl-nav-row .header-nav .nav-dropdown li:hover > a,
.sl-nav-row .header-nav .sub-menu li > a:hover,
.sl-nav-row .header-nav .sub-menu li:hover > a,
.sl-nav-row .nav-dropdown li > a:hover,
.sl-nav-row .nav-dropdown li:hover > a,
.sl-nav-row .sub-menu li > a:hover,
.sl-nav-row .sub-menu li:hover > a,
.header-bottom-nav .nav-dropdown li > a:hover,
.header-bottom-nav .nav-dropdown li:hover > a,
.header-bottom-nav .sub-menu li > a:hover,
.header-bottom-nav .sub-menu li:hover > a,
.nav-dropdown.nav-dropdown-bold li > a:hover,
.nav-dropdown.nav-dropdown-bold li:hover > a,
.nav-dropdown.nav-dropdown-default li > a:hover,
.nav-dropdown.nav-dropdown-default li:hover > a,
.sl-nav-row .nav-dropdown li.active > a,
.sl-nav-row .sub-menu li.active > a {
  background-color: #102615 !important;
  color: var(--gold-light, #F7DF9B) !important;
  padding-left: 22px !important;
  border-radius: 0 !important;
}

/* Ngoại lệ — sản phẩm trong mini-cart dropdown (giỏ hàng) KHÔNG áp hiệu ứng
   nền xanh emerald của menu dropdown (chỉ dành cho link menu nav).
   Khi hover sản phẩm chỉ đổi màu text, giữ nền trong suốt. */
.flex-right .nav-dropdown .widget_shopping_cart_content .cart_list li > a:not(.remove):hover,
.flex-right .nav-dropdown .widget_shopping_cart_content .cart_list li:hover > a:not(.remove) {
  background-color: transparent !important;
  color: var(--green-main) !important;
  padding-left: 18px !important;
}
/* Nút xóa (×) sản phẩm trong cart dropdown desktop — style riêng, không bị
   rule menu nav áp đặt (padding 11px 18px, border:none, màu xanh).
   Hover chỉ kích hoạt khi THỰC SỰ trỏ vào nút ×, không phải khi hover cả dòng. */
.flex-right .nav-dropdown .widget_shopping_cart_content .cart_list li > a.remove {
  position: absolute !important;
  right: 4px !important;
  top: 12px !important;
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  line-height: 1 !important;
  border-radius: 50% !important;
  border: 1px solid rgba(122, 28, 28, 0.25) !important;
  background: rgba(122, 28, 28, 0.08) !important;
  color: var(--red-accent) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  z-index: 6 !important;
  transition: all 0.2s ease !important;
  box-shadow: none !important;
}
.flex-right .nav-dropdown .widget_shopping_cart_content .cart_list li > a.remove:hover {
  background: var(--red-accent) !important;
  color: #ffffff !important;
  border-color: var(--red-accent) !important;
}

.sl-nav-row .header-nav .nav-dropdown li > a:hover::before,
.sl-nav-row .header-nav .nav-dropdown li:hover > a::before,
.sl-nav-row .header-nav .sub-menu li > a:hover::before,
.sl-nav-row .header-nav .sub-menu li:hover > a::before,
.sl-nav-row .nav-dropdown li > a:hover::before,
.sl-nav-row .nav-dropdown li:hover > a::before,
.sl-nav-row .sub-menu li > a:hover::before,
.sl-nav-row .sub-menu li:hover > a::before,
.header-bottom-nav .nav-dropdown li > a:hover::before,
.header-bottom-nav .nav-dropdown li:hover > a::before {
  transform: scale(1.4) !important;
  color: var(--gold-primary, #D4AF37) !important;
}

/* Dropdown cấp 2+ (Submenu con) */
.sl-nav-row .nav-dropdown .nav-dropdown,
.sl-nav-row .sub-menu .sub-menu {
  top: -6px !important;
  left: calc(100% + 4px) !important;
}
/* =========================================================
   4. NÚT CÔNG CỤ BÊN PHẢI (SEARCH / ACCOUNT / CART / LANGUAGE)
   Thanh tìm kiếm, icon tài khoản, icon giỏ hàng và nút ngôn ngữ
   được nhóm sát liền kề bên phải, loại bỏ hoàn toàn khoảng trống thừa.
   ========================================================= */
.flex-right {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin-left: 12px !important;
  margin-right: auto !important;
  height: 100% !important;
  width: auto !important;
}
.flex-right .header-nav,
.flex-right .nav,
.flex-right > ul {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  height: 40px !important;
  width: auto !important;
  flex-wrap: nowrap !important; /* chặn cart wrap xuống dòng gây lệch dropdown */
}
.flex-right .header-nav > li,
.flex-right .nav > li {
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 38px !important;
  vertical-align: middle !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
}

/* --- 1. Search Form (Không margin thừa) --- */
.flex-right li.header-search-form,
.flex-right li.header-search-form.search-form {
  flex: 0 0 auto !important;
  margin: 0 !important;
  margin-right: 0 !important;
  width: auto !important;
}
.flex-right .searchform-wrapper,
.flex-right form.searchform {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  width: auto;
  height: 38px;
  border: none;
  background: transparent;
  box-shadow: none;
}

/* --- 2. User Icon (Account) --- */
.flex-right li.account-item {
  flex: 0 0 auto !important;
  margin: 0 !important;
  margin-left: 0 !important;
}
.flex-right .account-item > a {
  font-size: 16px;
  color: #4b5563;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background: transparent;
  border: none;
  margin: 0;
  padding: 0;
}
.flex-right .account-item > a:hover,
.flex-right .account-item > a:focus {
  color: var(--gold-primary);
}

/* Fix dropdown mở lên trên: li là flex align-items:center nên top:auto của
   .nav-dropdown bị căn giữa dọc → mở ngược. Buộc mở xuống dưới (top:100%). */
.flex-right .nav-dropdown {
  top: 100% !important;
}

/* --- 3. Cart Icon --- */
.flex-right li.cart-item {
  flex: 0 0 auto !important;
  margin: 0 !important;
}
.flex-right .cart-item a.header-cart-link,
.flex-right .header-cart-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 16px;
  color: #1a1a1a;
  background: transparent;
  border: none;
  box-shadow: none;
}
.flex-right .cart-item a.header-cart-link:hover,
.flex-right .header-cart-link:hover {
  color: var(--gold-primary);
}

/* --- 4. Vạch phân cách & Nút ngôn ngữ --- */
.flex-right li.header-divider {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 1px !important;
  height: 20px !important;
  background-color: #e2e8f0 !important;
  margin: 0 2px !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
}
.flex-right li.header-language-dropdown,
.flex-right li.has-dropdown.header-language-dropdown,
.flex-right .sl-header-language,
.flex-right .gtranslate_wrapper {
  flex: 0 0 auto !important;
  margin: 0 !important;
}

/* =========================================================
   4b. TOOLS THỐNG NHẤT — 2 NÚT ICON TRÒN ĐỒNG BỘ (ACCOUNT/CART)
   Đồng bộ kích thước 38px + trục dọc + hover vàng kim cho 2 nút icon.
   ========================================================= */
.flex-right .header-nav > li {
  height: 38px;
}
.flex-right .account-item > a,
.flex-right .cart-item a.header-cart-link {
  width: 38px;
  height: 38px;
  min-width: 0; /* beat Flatsome .button.icon min-width:2.5em */
  min-height: 0; /* beat Flatsome .button min-height:2.5em */
  margin: 0;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #e2e8f0;
  background-color: #ffffff;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  color: #4b5563;
  box-shadow: none;
  box-sizing: border-box;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}
.flex-right .account-item > a i,
.flex-right .cart-item a.header-cart-link i {
  font-size: 16px;
  line-height: 1;
}
/* Icon cart static: badge ::after bám vào nút 38px (position:relative)
   thay vì đè lên icon 16px (Flatsome .icon đặt position:relative). */
.flex-right .cart-item a.header-cart-link i {
  position: static;
}
/* Hover: viền + icon vàng kim, nhấc nhẹ */
.flex-right .account-item > a:hover,
.flex-right .cart-item a.header-cart-link:hover {
  border-color: var(--gold-primary);
  color: var(--gold-primary);
  background-color: #ffffff;
  transform: translateY(-1px);
}
/* Badge giỏ hàng — vòng tròn vàng kim cố định, nằm gọn góc trên phải nút 38px.
   Flex-center để số luôn giữa ô dù Flatsome ép line-height/font Arial. */
.flex-right .cart-item [data-icon-label]:after,
.flex-right .cart-item .cart-icon strong,
.flex-right .cart-item .count {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  min-width: 18px;
  background-color: var(--gold-primary);
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  border-radius: 50%;
  padding: 0;
  opacity: 1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  font-family: 'Nunito', sans-serif !important; /* thắng font Arial !important của Flatsome */
  border: 2px solid #ffffff; /* tạo viền trắng tách khỏi nút */
  box-sizing: border-box;
}

/* =========================================================
   4c. SEARCH — THANH TÌM KIẾM FULL TRÊN DESKTOP (KHÔNG THU GỌN)
   Luôn hiển thị ô nhập + nút tìm — bỏ hiệu ứng icon tròn mở rộng.
   ========================================================= */
.flex-right .header-search-form .searchform .flex-row,
.flex-right .header-search-form .searchform:hover .flex-row,
.flex-right .header-search-form .searchform:focus-within .flex-row {
  width: 240px;
  height: 38px;
  border-radius: 99px;
  background-color: #f6f8fa;
  border: 1px solid #e2e8f0;
  padding: 0 6px 0 16px;
  justify-content: space-between;
  box-shadow: none;
}
/* Ô nhập luôn hiển thị (không còn xung đột — rule `.search-field` đã scope về sidebar) */
.flex-right .searchform input.search-field,
.flex-right .searchform input.search-field:hover,
.flex-right .searchform input.search-field:focus {
  width: 100%;
  opacity: 1;
  visibility: visible;
  height: 36px;
  font-family: 'Quicksand', 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #102615;
  background: transparent;
  border: none;
  border-radius: 0;
  outline: none;
  box-shadow: none;
  padding: 0;
}
.flex-right .searchform input.search-field::placeholder {
  color: #9aa0a8;
  opacity: 1;
}
/* Nút tìm — icon vàng kim */
.flex-right .searchform button[type="submit"],
.flex-right .searchform .ux-search-submit,
.flex-right .searchform button {
  color: var(--gold-primary) !important; /* beat .form-flat .button.icon currentcolor */
  min-width: 30px;
  height: 30px;
  font-size: 15px;
}
/* Focus/Hover: viền vàng + nền trắng */
.flex-right .header-search-form .searchform:hover .flex-row,
.flex-right .header-search-form .searchform:focus-within .flex-row {
  border-color: var(--gold-primary);
  background-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.16);
}

/* =========================================================
   4d. LIVE SEARCH DROPDOWN ΓÇö DESIGN SYSTEM SILVERLIFE
   Đảm bảo chuẩn UI & chống vỡ layout khi tên sản phẩm/text dài
   ========================================================= */
.searchform-wrapper,
.header-search-form .searchform {
  position: relative !important;
}

/* Container chứa kết quả tìm kiếm trong HTML Flatsome */
.live-search-results {
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  left: auto !important;
  width: 340px !important;
  max-width: 90vw !important;
  height: auto !important;
  min-height: 0 !important;
  z-index: 999999 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* Khung gợi ý thực tế do JS Autocomplete sinh ra */
.autocomplete-suggestions {
  position: absolute !important;
  top: 8px !important;
  right: 0 !important;
  left: auto !important;
  width: 100% !important;
  max-height: 420px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: #ffffff !important;
  border: 1px solid rgba(212, 175, 55, 0.35) !important;
  border-radius: 14px !important;
  box-shadow: 0 14px 40px rgba(16, 38, 21, 0.16), 0 4px 14px rgba(0, 0, 0, 0.08) !important;
  padding: 6px 0 !important;
  margin: 0 !important;
  list-style: none !important;
  z-index: 999999 !important;
  box-sizing: border-box !important;
  scrollbar-width: thin !important;
  scrollbar-color: #cbd5e1 transparent !important;
}

/* Ẩn khung khi không có gợi ý */
.autocomplete-suggestions:empty {
  display: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Từng item kết quả tìm kiếm */
.autocomplete-suggestion,
.live-search-results .autocomplete-suggestion {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, border-color 0.2s ease !important;
  border-bottom: 1px solid #f1f5f9 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important; /* QUAN TRỌNG: Ngăn flex container bị phồng do text dài */
  background: #ffffff !important;
  margin: 0 !important;
}

.autocomplete-suggestion:last-child {
  border-bottom: none !important;
}

.autocomplete-suggestion:hover,
.autocomplete-suggestion.autocomplete-selected {
  background-color: #f8fafc !important;
}

/* Ảnh đại diện sản phẩm */
.autocomplete-suggestion .search-image,
.autocomplete-suggestion img {
  width: 44px !important;
  height: 44px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  border: 1px solid #e2e8f0 !important;
  flex-shrink: 0 !important;
  background-color: #f8fafc !important;
}

/* Tên sản phẩm — Cắt 2 dòng thông minh khi text dài, không vỡ UI */
.autocomplete-suggestion .search-name {
  flex: 1 1 auto !important;
  min-width: 0 !important; /* QUAN TRỌNG: Ép chữ co trong vùng flex */
  font-family: 'Quicksand', 'Nunito', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #102615 !important;
  line-height: 1.35 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  word-break: break-word !important;
}

/* Highlight cụm từ tìm kiếm */
.autocomplete-suggestion .search-name strong {
  color: #0D2F23 !important;
  background-color: rgba(212, 175, 55, 0.22) !important;
  font-weight: 700 !important;
  padding: 0 3px !important;
  border-radius: 3px !important;
}

/* Giá sản phẩm */
.autocomplete-suggestion .search-price {
  flex-shrink: 0 !important;
  margin-left: auto !important;
  text-align: right !important;
  font-family: 'Quicksand', 'Nunito', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: var(--gold-primary, #D4AF37) !important;
  white-space: nowrap !important;
}

.autocomplete-suggestion .search-price ins {
  text-decoration: none !important;
  color: var(--gold-primary, #D4AF37) !important;
  font-weight: 700 !important;
}

.autocomplete-suggestion .search-price del {
  color: #94a3b8 !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  margin-right: 4px !important;
}

/* Thông báo không tìm thấy kết quả */
.autocomplete-no-suggestion {
  padding: 16px !important;
  text-align: center !important;
  font-family: 'Quicksand', 'Nunito', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #64748b !important;
}

/* =========================================================
   5. DROPDOWN GIỎ HÀNG & MENU CAO CẤP (FLAT SINGLE CARD)
   ========================================================= */
.header-nav .cart-item .nav-dropdown,
.flex-right .cart-item .nav-dropdown,
.cart-popup-inner {
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
  padding: 20px;
  width: 340px;
  box-sizing: border-box;
  font-family: 'Quicksand', 'Nunito', sans-serif;
}

/* Fix dropdown cart tràn khỏi mép phải viewport.
   Flatsome chỉ right-align dropdown khi li là :last-child của nav, nhưng cart
   trong header_elements_right = [search, account, cart, divider, gtranslate]
   nên không phải phần tử cuối → mở thẳng xuống (left:-15px) và bị view che.
   Right-align về mép phải của li để dropdown mở sang trái, không tràn.

   Áp dụng cho MỌI trạng thái (KHÔNG gắn :hover) để vị trí không đổi khi hover.
   Nếu chỉ gắn :hover, khi rê chuột ra phía phải khỏi dropdown, li mất :hover →
   dropdown nhảy về left:-15px (mở sang phải); vì dropdown nằm trong li nên con
   trỏ lại rơi vào dropdown → li hover lại → nhảy về right:0 → lặp lại vô hạn
   (dropdown bị đẩy sang phải và nhấp nháy liên tục). Khi đóng dropdown có
   max-height:0 + visibility:hidden nên vị trí lúc đóng không quan trọng. */
.flex-right .cart-item .nav-dropdown {
  left: auto !important;
  right: 0 !important;
}

/* =========================================================
   5b. USER ACCOUNT DROPDOWN ΓÇö DESIGN SYSTEM SILVERLIFE
   Thiết kế dropdown tài khoản cao cấp, icon rõ ràng & mượt mà
   ========================================================= */
.flex-right .account-item {
  position: relative !important;
}

.flex-right .account-item .nav-dropdown,
.account-item.has-dropdown .nav-dropdown {
  width: 250px !important;
  min-width: 230px !important;
  max-width: 280px !important;
  padding: 6px 0 !important;
  background: #ffffff !important;
  border-radius: 14px !important;
  border: 1px solid rgba(212, 175, 55, 0.35) !important;
  box-shadow: 0 14px 40px rgba(16, 38, 21, 0.16), 0 4px 14px rgba(0, 0, 0, 0.08) !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  left: auto !important;
  z-index: 999999 !important;
  box-sizing: border-box !important;
  list-style: none !important;
  margin: 0 !important;
}

/* Các hàng li trong dropdown tài khoản */
.flex-right .account-item .nav-dropdown > li,
.account-item.has-dropdown .nav-dropdown > li {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: 1px solid #f1f5f9 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: transparent !important;
  list-style: none !important;
}

.flex-right .account-item .nav-dropdown > li:last-child,
.account-item.has-dropdown .nav-dropdown > li:last-child {
  border-bottom: none !important;
}

/* Thẻ a liên kết menu */
.flex-right .account-item .nav-dropdown > li > a,
.account-item.has-dropdown .nav-dropdown > li > a {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 11px 18px !important;
  font-family: 'Quicksand', 'Nunito', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #102615 !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
  transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Hover effect */
.flex-right .account-item .nav-dropdown > li > a:hover,
.account-item.has-dropdown .nav-dropdown > li > a:hover {
  background-color: #f8fafc !important;
  color: var(--gold-primary, #D4AF37) !important;
  padding-left: 22px !important;
}

/* Mục Đăng xuất (Logout) */
.flex-right .account-item .nav-dropdown li.woocommerce-MyAccount-navigation-link--customer-logout > a:hover,
.account-item.has-dropdown .nav-dropdown li.woocommerce-MyAccount-navigation-link--customer-logout > a:hover {
  background-color: #fef2f2 !important;
  color: #dc2626 !important;
}

/* Tiêu đề lời chào user (nếu có) */
.flex-right .account-item .nav-dropdown .account-item-header,
.account-item.has-dropdown .nav-dropdown .account-item-header,
.account-item.has-dropdown .nav-dropdown > li.user-name {
  padding: 12px 18px !important;
  background: linear-gradient(135deg, #102615 0%, #1a3c22 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  margin-top: -6px !important;
  margin-bottom: 4px !important;
  border-top-left-radius: 12px !important;
  border-top-right-radius: 12px !important;
}

.flex-right .account-item .nav-dropdown .account-item-header a,
.account-item.has-dropdown .nav-dropdown > li.user-name a {
  color: var(--gold-light, #F7DF9B) !important;
  font-weight: 700 !important;
}
.cart-popup,
.dropdown-cart,
.widget_shopping_cart,
.widget_shopping_cart_content {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
  border-radius: 0;
  width: 100%;
}
/* li.html của Flatsome có padding 20px riêng → cộng với padding của
   .nav-dropdown làm nội dung chỉ còn 256px. Bỏ padding thừa.
   Specificity cao hơn .nav-dropdown.nav-dropdown-bold li.html của Flatsome. */
.flex-right .nav-dropdown.nav-dropdown-bold > li.html.widget_shopping_cart,
.flex-right .nav-dropdown > li.html.widget_shopping_cart {
  padding: 0;
}
.nav-dropdown-has-arrow li.has-dropdown:hover > a:after,
.nav-dropdown-has-arrow li.has-dropdown.active > a:after {
  border-bottom-color: #ffffff;
}
.sl-nav-row li.has-dropdown:hover > a:after,
.sl-nav-row li.has-dropdown.active > a:after {
  border-bottom-color: #102615;
}
.widget_shopping_cart_content .cart_list,
.cart-popup .cart_list {
  padding: 0;
  margin: 0;
  list-style: none;
}
.widget_shopping_cart_content .cart_list li,
.cart-popup .cart_list li,
.mini_cart_item {
  position: relative;
  /* Flatsome đặt ảnh 60px absolute left:0 — phải chừa padding-left 72px
     cho nội dung, nếu không text đè lên ảnh (vỡ layout). */
  padding: 12px 30px 12px 72px;
  min-height: 76px;
  border-bottom: 1px dashed #e5e7eb;
  font-family: 'Quicksand', 'Nunito', sans-serif;
  font-size: 13.5px;
  box-sizing: border-box;
  background: transparent;
  box-shadow: none;
}
/* Ảnh sản phẩm 60px — bo góc, viền mảnh, khớp padding-left của li */
.widget_shopping_cart_content .cart_list li img,
.cart-popup .cart_list li img,
.mini_cart_item img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  top: 12px;
  left: 0;
}
/* Số lượng + giá: không tràn sang nút xóa */
.widget_shopping_cart_content .ux-mini-cart-qty,
.cart-popup .ux-mini-cart-qty {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
}
.widget_shopping_cart_content .cart_list li a.remove,
.cart-popup .cart_list li a.remove,
.mini_cart_item a.remove {
  position: absolute;
  right: 0;
  top: 12px;
  width: 22px;
  height: 22px;
  line-height: 20px;
  text-align: center;
  border-radius: 50%;
  border: 1px solid #d1d5db;
  color: #4b5563;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  font-family: 'Quicksand', sans-serif;
}
.widget_shopping_cart_content .cart_list li a.remove:hover {
  background-color: #fee2e2;
  color: #ef4444;
  border-color: #fca5a5;
}
.widget_shopping_cart_content .cart_list li a:not(.remove),
.cart-popup .cart_list li a:not(.remove),
.mini_cart_item a:not(.remove) {
  font-weight: 700;
  color: #164627;
  transition: color 0.2s ease;
  padding-right: 10px;
  display: -webkit-box; /* line-clamp 2 dòng: tên dài không vỡ layout */
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
  word-break: break-word;
  font-family: 'Quicksand', sans-serif;
}
.widget_shopping_cart_content .cart_list li a:not(.remove):hover {
  color: var(--green-main);
}
.widget_shopping_cart_content .amount,
.cart-popup .amount {
  color: var(--green-main);
  font-weight: 700;
}
.widget_shopping_cart .total,
.cart-popup .total,
.woocommerce-mini-cart__total {
  border-top: 2px solid #f3f4f6;
  padding-top: 12px;
  margin-top: 10px;
  font-size: 14.5px;
  font-weight: 700;
  color: #164627;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: transparent;
  font-family: 'Quicksand', 'Nunito', sans-serif;
}
.widget_shopping_cart .buttons,
.cart-popup .buttons,
.woocommerce-mini-cart__buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
  position: static;
  background: transparent;
}
.widget_shopping_cart .buttons a.button,
.cart-popup .buttons a.button,
.woocommerce-mini-cart__buttons a.button {
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  border-radius: 8px;
  font-family: 'Quicksand', 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 10px 4px;
  transition: all 0.2s ease;
  text-align: center;
  white-space: nowrap;
  display: block;
}
.widget_shopping_cart .buttons a.button:not(.checkout),
.cart-popup .buttons a.button:not(.checkout),
.woocommerce-mini-cart__buttons a.button:not(.checkout) {
  background-color: #f3f4f6;
  color: #164627;
  border: 1px solid #d1d5db;
  box-shadow: none;
}
.widget_shopping_cart .buttons a.button:not(.checkout):hover,
.cart-popup .buttons a.button:not(.checkout):hover {
  background-color: var(--green-main);
  color: #ffffff;
  border-color: var(--green-main);
}
.widget_shopping_cart .buttons a.checkout,
.cart-popup .buttons a.checkout,
.woocommerce-mini-cart__buttons a.checkout {
  background-color: var(--green-main);
  color: #ffffff;
  border: 1px solid var(--green-main);
  box-shadow: 0 3px 10px rgba(22, 70, 39, 0.25);
}
.widget_shopping_cart .buttons a.checkout:hover,
.cart-popup .buttons a.checkout:hover {
  background-color: #1e5a33;
  transform: translateY(-1px);
}
.cart-popup .return-to-shop a,
.widget_shopping_cart .return-to-shop a,
.cart-popup p.cart-empty + p a.button,
.widget_shopping_cart p.cart-empty + p a.button,
a.button.wc-backward {
  background-color: var(--green-main);
  color: #ffffff;
  border: 1px solid var(--green-main);
  border-radius: 8px;
  font-family: 'Quicksand', 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 11px 20px;
  box-shadow: 0 4px 12px rgba(22, 70, 39, 0.25);
  display: inline-block;
  text-decoration: none;
  transition: all 0.2s ease;
  margin: 0 auto;
}
.cart-popup .return-to-shop a:hover,
.widget_shopping_cart .return-to-shop a:hover,
a.button.wc-backward:hover {
  background-color: #1e5a33;
  color: #ffffff;
  border-color: #1e5a33;
}

/* =========================================================
   6. POPUP GIỎ HÀNG TRỐNG — CĂN GIỮA
   Lưu ý: align-items phải là stretch — center sẽ shrink-wrap
   cart_list/footer theo nội dung và làm lệch layout.
   Trạng thái rỗng tự căn giữa bằng rule riêng bên dưới.
   ========================================================= */
.cart-popup .cart-popup-inner,
.widget_shopping_cart_content,
.cart-popup,
.dropdown-cart {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  width: 100%;
}
.cart-popup p.cart-empty,
.widget_shopping_cart p.cart-empty,
.cart-empty,
.woocommerce-mini-cart__empty-message {
  text-align: center;
  width: 100%;
  margin: 15px auto 18px auto;
  font-family: 'Quicksand', 'Nunito', sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  color: #164627;
  display: block;
}
.cart-popup .return-to-shop,
.widget_shopping_cart .return-to-shop,
p.return-to-shop {
  width: 100%;
  text-align: center;
  margin: 5px auto 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* =========================================================
   7. RESPONSIVE (≤1000px / ≤849px / ≤600px)
   ========================================================= */

/* Menu desktop chỉ hiển thị từ ≥1025px; ≤1024px (tablet + mobile) dùng header gọn
   + menu hamburger (nav row ẩn). */

@media (max-width: 1024px) {
  /* Mobile & tablet: hàng chính thu gọn, nav row ẩn (menu hamburger) */
  .header-main .header-inner {
    min-height: 64px;
    padding: 0 15px;
  }
  #header .header-main .logo img {
    max-height: 38px;
  }
}

/* FIX sticky header: Flatsome core đặt html{overflow-x:hidden} (+ body{overflow-x:clip}).
   Khi html/body có overflow-x:hidden, trình duyệt mobile (đặc biệt iOS Safari) vô hiệu
   hóa position:sticky của #header — header cuộn đi mất.
   - Trình duyệt hiện đại: overflow-x:clip — vẫn chặn tràn ngang nhưng KHÔNG tạo
     scroll container nên sticky hoạt động.
   - Trình duyệt cũ không hỗ trợ clip (iOS <16): dùng visible thay vì hidden. */
@supports (overflow: clip) {
  html, body { overflow-x: clip !important; }
}
@supports not (overflow: clip) {
  html, body { overflow-x: visible !important; }
}

/* Header dính trên cùng khi cuộn — CSS thuần, áp dụng cho MỌI độ rộng
   (trước đây chỉ áp dụng max-width:849px nên ở tablet/desktop ≥850px header trôi đi).
   FIX triệt để: JS sticky của Flatsome đã bị tắt (xóa class has-sticky/sticky-jump
   trong functions.php) vì nó chuyển .header-wrapper sang position:fixed BÊN TRONG
   #header sticky — iOS Safari không giữ fixed trong sticky ancestor nên header
   mất sticky sau vài block. Giờ chỉ còn ĐÚNG cơ chế này: sticky trên #header. */
#header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1005 !important;
}

/* Chiều cao header dính — Flatsome tự đo qua --flatsome--header--sticky-height khi
   có class has-sticky (đã tắt), nên khai báo thủ công theo breakpoint để anchor
   scroll (--flatsome-scroll-padding-top) vẫn nhảy đúng, không khuất dưới header.
   Giá trị = chiều cao thực đo được (masthead + nav + viền vàng 3px). */
:root {
  --flatsome--header--sticky-height: 55px; /* ≤600px */
}
@media (min-width: 601px) and (max-width: 1024px) {
  :root { --flatsome--header--sticky-height: 59px; }
}
@media (min-width: 1025px) {
  :root { --flatsome--header--sticky-height: 135px; }
}

/* Tablet (850–1024px): header giống mobile — đè Flatsome utility classes.
   hide-for-medium/show-for-medium của Flatsome cố định breakpoint 849px nên cần
   override riêng để tablet (850–1024px) cũng dùng header gọn + hamburger. */
@media (min-width: 850px) and (max-width: 1024px) {
  #wide-nav,
  #header .header-inner > .hide-for-medium { display: none !important; }
  #header .sl-mobile-tools-left,
  #header .sl-mobile-tools-right { display: flex !important; }
}

@media (max-width: 600px) {
  .header-main .header-inner {
    min-height: 60px;
  }
}

/* =========================================================
   7B. MOBILE HEADER & OFF-CANVAS MENU — SILVERLIFE DESIGN SYSTEM
   ========================================================= */

/* ---------- Cụm tools mobile (hamburger | logo | cart + user) ---------- */
@media (max-width: 1024px) {
  /* Đè height 70px từ Flatsome custom CSS (DB) -> header gọn theo inner */
  .header-main {
    height: auto !important;
  }
  .header-main .header-inner {
    position: relative;
    min-height: 56px;
    padding: 0 12px;
  }
  /* Logo cân giữa tuyệt đối — bỏ margin rộng của desktop (DB) */
  .header-main .header-inner #logo {
    flex: 0 1 auto;
    margin: 0 auto !important;
  }
  #header .header-main .logo img {
    max-height: 32px;
  }
  /* Hai cụm tools neo sát mép trái/phải, logo luôn nằm chính giữa */
  .header-main .sl-mobile-tools-left,
  .header-main .sl-mobile-tools-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    flex: none;
    margin: 0 !important;
  }
  .header-main .sl-mobile-tools-left {
    left: 12px;
  }
  .header-main .sl-mobile-tools-right {
    right: 12px;
  }
  .header-main .sl-mobile-tools-left .mobile-nav {
    justify-content: flex-start;
  }
  .header-main .sl-mobile-tools-right .mobile-nav {
    justify-content: flex-end;
  }
  .header-main .mobile-nav {
    align-items: center;
    margin: 0;
    gap: 8px;
  }
  .header-main .mobile-nav > li {
    margin: 0;
  }
  .header-main .mobile-nav .header-button {
    margin: 0;
    padding: 0;
    display: inline-flex;
  }
  /* Nút bấm thống nhất giống desktop: tròn trắng, viền xám nhạt, icon xám.
     Hover/active: vàng kim nhẹ. */
  .header-main .mobile-nav .header-button > a,
  .header-main .mobile-nav > li.account-item > a {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #4b5563;
    font-size: 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
  }
  .header-main .mobile-nav .nav-icon a:hover,
  .header-main .mobile-nav .cart-item a:hover,
  .header-main .mobile-nav .account-item a:hover {
    border-color: var(--gold-primary);
    color: var(--gold-primary);
    background-color: rgba(212, 175, 55, 0.06);
  }
  /* Ẩn chữ "Menu" để cụm trái gọn gàng */
  .header-main .mobile-nav .menu-title {
    display: none;
  }
  /* Badge giỏ hàng — vàng kim trên nền xanh rêu */
  .header-main .mobile-nav .cart-item [data-icon-label]:after {
    background-color: var(--gold-primary);
    color: #fff;
  }
}

@media (max-width: 600px) {
  .header-main .header-inner {
    min-height: 52px;
  }
  #header .header-main .logo img {
    max-height: 28px;
  }
  .header-main .mobile-nav {
    gap: 6px;
  }
  .header-main .mobile-nav .header-button > a,
  .header-main .mobile-nav > li.account-item > a {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    font-size: 15px;
  }
}

/* ---------- Panel off-canvas #main-menu (mở bằng hamburger) ---------- */
/* FIX: rule .mfp-content{position:relative;width:92vw} (quick-view) làm hỏng
   drawer off-canvas -> khôi phục fixed positioning cho drawer. */
.off-canvas-left .mfp-content,
.off-canvas-right .mfp-content {
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: auto !important;
  width: var(--drawer-width, 80%) !important;
  max-width: 100% !important;
  margin: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background-color: var(--ivory-bg) !important;
  box-shadow: -12px 0 40px rgba(9, 29, 22, 0.16) !important;
}
.off-canvas-right .mfp-content {
  left: auto !important;
  right: 0 !important;
}

/* FIX: lightbox thường (search, login...) — wrapper off-canvas-undefined bị
   rule .mfp-content{position:relative;width:92vw} đẩy trôi xuống dưới màn hình. */
.mfp-wrap.off-canvas-undefined .mfp-content {
  position: relative !important;
  display: inline-block !important;
  vertical-align: middle !important;
  width: auto !important;
  max-width: 92vw !important;
  min-width: 260px !important;
  margin: 0 !important;
  overflow: visible !important;
}
#main-menu .sidebar-menu {
  padding: 18px 20px 44px;
}

/* Dải thương hiệu đầu menu — nền trắng + logo thật, viền vàng kim */
.sl-mobile-menu-head {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 20px;
  background: #ffffff;
  border-bottom: 2px solid var(--gold-primary);
}
.sl-mobile-menu-brand {
  display: inline-flex;
  align-items: center;
}
.sl-mobile-menu-logo-img {
  height: 34px;
  width: auto;
  max-width: 100%;
  display: block;
}

/* Drawer #main-menu bố trí flex dọc: head + vùng menu cuộn + switcher dính đáy.
   #main-menu lấp đầy .mfp-content (fixed) nên switcher luôn ở đáy màn hình,
   .sidebar-menu cuộn nội bộ khi menu dài (không cần sticky). */
#main-menu {
  display: flex;
  flex-direction: column;
  height: 100%;
}
#main-menu .sidebar-menu {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* Switcher ngôn ngữ — footer dính cố định ở đáy drawer (ngoài vùng cuộn menu) */
.sl-mobile-menu-gtranslate {
  flex: 0 0 auto;
  z-index: 20;
  padding: 12px 20px 14px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  background: #ffffff;
  border-top: 2px solid rgba(212, 175, 55, 0.35);
  box-shadow: 0 -10px 24px rgba(9, 29, 22, 0.10);
}
.sl-mobile-menu-gtranslate .gtranslate_wrapper {
  display: flex;
  justify-content: center;
}

/* Nút đóng menu mobile — ẩn (đóng drawer bằng cách bấm vùng overlay) */
.off-canvas-left .mfp-close,
.off-canvas-right .mfp-close {
  display: none !important;
}

/* Font — đè times new roman từ Flatsome custom CSS (DB) */
#main-menu .nav-sidebar,
#main-menu .nav-sidebar a,
.off-canvas .nav-vertical > li > a,
.off-canvas .nav-vertical li li > a {
  font-family: 'Quicksand', 'Nunito', var(--font-system) !important;
}

/* Search form đầu menu — pill, viền vàng nhạt, nút xanh rêu */
#main-menu .header-search-form {
  margin: 0 0 14px;
  padding: 0 0 16px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.25);
}
#main-menu .searchform input.search-field {
  border-color: rgba(22, 70, 39, 0.22);
  background: #ffffff;
  border-radius: 999px;
  padding-left: 18px;
  box-shadow: 0 2px 10px rgba(9, 29, 22, 0.06);
}
#main-menu .searchform input.search-field:focus {
  border-color: var(--gold-primary);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.18);
}
#main-menu .searchform .ux-search-submit {
  background-color: var(--green-main);
  border-radius: 0 999px 999px 0;
  color: #ffffff;
}
#main-menu .searchform .ux-search-submit:hover {
  background-color: var(--gold-primary);
  color: var(--emerald-bg);
}

/* Item chính — Quicksand semibold, padding rộng, viền chia nhẹ */
#main-menu .nav-sidebar.nav-vertical > li + li {
  border-top: 1px solid rgba(22, 70, 39, 0.08);
}
#main-menu .nav-sidebar > li > a {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dark);
  text-transform: none;
  letter-spacing: 0.3px;
  padding: 15px 6px 15px 4px;
}
#main-menu .nav-sidebar.nav-vertical > li.menu-item:hover,
#main-menu .nav-sidebar.nav-vertical > li.menu-item.active {
  background: none !important;
}
#main-menu .nav-sidebar > li.active > a,
#main-menu .nav-sidebar > li.current-menu-item > a,
#main-menu .nav-sidebar > li.current_page_item > a {
  color: var(--gold-primary);
}

/* Mũi tên mở submenu — vàng kim */
#main-menu .nav-sidebar > li.menu-item-has-children > a .icon-angle-down,
#main-menu .nav-sidebar .toggle {
  color: var(--gold-primary);
}

/* Submenu con — thụt vào, màu muted, chấm vàng */
#main-menu .nav-sidebar .sub-menu.nav-sidebar-ul.children {
  padding: 4px 0 12px;
}
#main-menu .nav-sidebar li li > a {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0.2px;
  padding: 10px 0 10px 18px;
  position: relative;
}
#main-menu .nav-sidebar li li > a::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.6);
}
#main-menu .nav-sidebar li li > a:hover {
  color: var(--gold-primary);
}

/* Header nhóm dropdown (gem + title) — đồng bộ với menu desktop */
#main-menu .nav-sidebar li.sl-nav-dropdown-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 4px 6px;
  margin-top: 4px;
  border-top: 1px solid rgba(212, 175, 55, 0.25);
  background: none !important;
}
#main-menu .nav-sidebar li.sl-nav-dropdown-header .sl-dd-gem {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 2px;
  background: linear-gradient(135deg, var(--gold-primary), var(--gold-light));
  transform: rotate(45deg);
}
#main-menu .nav-sidebar li.sl-nav-dropdown-header .sl-dd-title {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  color: var(--gold-primary);
}

/* Các block cuối menu (hướng dẫn mua hàng, email) */
#main-menu .header-block {
  margin-top: 14px;
  padding: 16px 0 0;
  border-top: 1px solid rgba(22, 70, 39, 0.08);
}
#main-menu .header-block-block-1 .button {
  width: 100%;
  display: inline-block;
  background: linear-gradient(135deg, var(--green-main) 0%, var(--green-accent) 100%) !important;
  border: none !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px;
  padding: 11px 18px !important;
  box-shadow: 0 4px 12px rgba(22, 70, 39, 0.18);
}
#main-menu .header-block-block-1 .button span,
#main-menu .header-block-block-1 .button i {
  color: inherit !important;
}
#main-menu .header-block-block-1 .button:hover {
  background: linear-gradient(135deg, var(--gold-primary) 0%, #b8962e 100%) !important;
  color: var(--emerald-bg) !important;
}
#main-menu .header-block-block-1 .button:hover span,
#main-menu .header-block-block-1 .button:hover i {
  color: var(--emerald-bg) !important;
}
#main-menu .header-block-block-2 {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 13px;
}
#main-menu .header-block-block-2 .icon-envelop {
  color: var(--gold-primary);
}

/* TẠM ẨN: nút "Hướng dẫn mua hàng" trong menu mobile (chỉ drawer sidebar) */
#main-menu .sidebar-menu .header-block-block-1 {
  display: none !important;
}

/* =========================================================
   7C. CART DRAWER (off-canvas right) — SILVERLIFE DESIGN SYSTEM
   ========================================================= */

/* Dải tiêu đề xanh rêu + vàng kim */
.sl-cart-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: linear-gradient(135deg, var(--emerald-bg) 0%, var(--emerald-dark) 100%);
  border-bottom: 2px solid var(--gold-primary);
}
.sl-cart-head-icon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(212, 175, 55, 0.45);
  color: var(--gold-light);
  font-size: 16px;
}
.sl-cart-head-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.sl-cart-head-title {
  font-family: 'Quicksand', 'Nunito', var(--font-system);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ffffff;
}
.sl-cart-head-sub {
  font-family: 'Quicksand', 'Nunito', var(--font-system);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-top: 2px;
}

/* Popup giỏ hàng — head cố định, body cuộn */
.sl-cart-popup {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.sl-cart-popup .cart-popup-inner {
  flex: 1;
  min-height: 0 !important;
  overflow-y: auto;
  overflow-x: hidden !important;
  width: 100% !important;
  background: var(--ivory-bg);
  padding: 24px 20px 0 !important;
}
.sl-cart-popup .cart-popup-title {
  display: none;
}

/* Trạng thái giỏ rỗng */
.sl-cart-popup .ux-mini-cart-empty {
  padding: 40px 10px;
}
.sl-cart-popup .ux-mini-cart-empty-icon svg {
  color: rgba(22, 70, 39, 0.15) !important;
  opacity: 1 !important;
}
.sl-cart-popup .woocommerce-mini-cart__empty-message {
  font-family: 'Quicksand', 'Nunito', var(--font-system);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dark);
}
.sl-cart-popup .return-to-shop .button {
  background: linear-gradient(135deg, var(--green-main) 0%, var(--green-accent) 100%) !important;
  border: none !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 11px 22px !important;
  box-shadow: 0 4px 12px rgba(22, 70, 39, 0.18);
}
.sl-cart-popup .return-to-shop .button:hover {
  background: linear-gradient(135deg, var(--gold-primary) 0%, #b8962e 100%) !important;
  color: var(--emerald-bg) !important;
}

/* Các item trong giỏ */
.sl-cart-popup .woocommerce-mini-cart-item {
  background: #ffffff;
  border: 1px solid rgba(22, 70, 39, 0.1);
  border-radius: 14px;
  padding: 12px 38px 12px 84px !important;
  margin-bottom: 10px;
  box-shadow: 0 2px 8px rgba(9, 29, 22, 0.05);
  position: relative;
  min-height: 84px;
}
.sl-cart-popup .woocommerce-mini-cart-item img {
  position: absolute !important;
  left: 12px !important;
  top: 12px !important;
  width: 60px !important;
  height: 60px !important;
  object-fit: cover;
  border-radius: 8px;
}
.sl-cart-popup .woocommerce-mini-cart-item a {
  font-family: 'Quicksand', 'Nunito', var(--font-system);
  font-weight: 600;
  color: var(--text-dark);
  line-height: 1.35;
}
.sl-cart-popup .woocommerce-mini-cart-item > a:not(.remove) {
  display: block;
  padding-right: 6px;
}
.sl-cart-popup .ux-mini-cart-qty {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
}
.sl-cart-popup .ux-mini-cart-qty .quantity,
.sl-cart-popup .ux-mini-cart-qty .woocommerce-Price-amount {
  color: var(--text-dark);
  font-weight: 700;
}
.sl-cart-popup .ux-mini-cart-qty input.qty {
  width: 44px;
  height: 26px;
  border: 1px solid rgba(22, 70, 39, 0.2);
  border-radius: 8px;
  font-size: 13px;
  text-align: center;
}
.sl-cart-popup .woocommerce-mini-cart-item .remove {
  width: 22px;
  height: 22px;
  line-height: 20px;
  border-radius: 50%;
  background: rgba(122, 28, 28, 0.08) !important;
  color: var(--red-accent) !important;
  font-size: 16px !important;
  right: 12px !important;
  top: 12px !important;
}
.sl-cart-popup .woocommerce-mini-cart-item .remove:hover {
  background: var(--red-accent) !important;
  color: #ffffff !important;
}

/* Footer sticky: tổng tiền + nút thanh toán */
.sl-cart-popup .ux-mini-cart-footer {
  background: #ffffff;
  border-top: 1px solid rgba(212, 175, 55, 0.25);
  padding: 14px 20px;
  bottom: 0;
  position: sticky;
}
.sl-cart-popup .woocommerce-mini-cart__total {
  font-family: 'Quicksand', 'Nunito', var(--font-system);
  font-weight: 700;
  color: var(--text-dark);
}
.sl-cart-popup .woocommerce-mini-cart__total .amount {
  color: var(--gold-primary);
  font-weight: 800;
}
.sl-cart-popup .woocommerce-mini-cart__buttons .button {
  border-radius: 999px !important;
  font-weight: 700 !important;
}
.sl-cart-popup .woocommerce-mini-cart__buttons .button.checkout {
  background: linear-gradient(135deg, var(--gold-primary) 0%, #b8962e 100%) !important;
  border: none !important;
  color: var(--emerald-bg) !important;
}
.sl-cart-popup .woocommerce-mini-cart__buttons .button:not(.checkout) {
  background: linear-gradient(135deg, var(--green-main) 0%, var(--green-accent) 100%) !important;
  border: none !important;
  color: #ffffff !important;
}

/* Icon thanh toán */
.sl-cart-popup .payment-icons {
  opacity: 0.85;
}
.sl-cart-popup .payment-icon svg {
  height: 20px !important;
}

/* =========================================================
   7D. USER MENU MOBILE (nút user + menu thả xuống)
   ========================================================= */

.sl-mobile-user {
  position: relative;
}
.sl-mobile-user-panel {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 99999;
  width: 235px;
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid rgba(22, 70, 39, 0.12);
  box-shadow: 0 18px 48px rgba(9, 29, 22, 0.18), 0 0 0 1px rgba(212, 175, 55, 0.06);
  padding: 10px;
  text-align: left;
  box-sizing: border-box;
}
.sl-mobile-user-panel.is-open {
  display: block;
  animation: slUserMenuIn 0.2s ease;
}
@keyframes slUserMenuIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.sl-mobile-user-panel-arrow {
  position: absolute;
  top: -6px;
  right: 15px;
  width: 12px;
  height: 12px;
  background: #ffffff;
  border-left: 1px solid rgba(22, 70, 39, 0.12);
  border-top: 1px solid rgba(22, 70, 39, 0.12);
  transform: rotate(45deg);
}
.sl-mobile-user-head {
  padding: 10px 12px 9px;
  border-bottom: 1px solid rgba(22, 70, 39, 0.08);
}
.sl-mobile-user-head-title {
  display: block;
  font-family: 'Quicksand', 'Nunito', var(--font-system);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--gold-primary);
}
.sl-mobile-user-head-name {
  display: block;
  margin-top: 2px;
  font-family: 'Quicksand', 'Nunito', var(--font-system);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dark);
}
.sl-mobile-user-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}
.sl-mobile-user-list li {
  margin: 0;
}
.sl-mobile-user-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  font-family: 'Quicksand', 'Nunito', var(--font-system);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
  text-decoration: none !important;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.sl-mobile-user-list a i {
  width: 18px;
  flex-shrink: 0;
  text-align: center;
  color: var(--green-main);
  font-size: 14px;
}
.sl-mobile-user-list a:hover {
  background: rgba(212, 175, 55, 0.1);
  color: var(--gold-primary);
}
.sl-mobile-user-list a:hover i {
  color: var(--gold-primary);
}
.sl-mobile-user-list .sl-mobile-user-logout a,
.sl-mobile-user-list .sl-mobile-user-logout a i {
  color: var(--red-accent);
}
.sl-mobile-user-list .sl-mobile-user-logout a:hover {
  background: rgba(122, 28, 28, 0.08);
}
.sl-mobile-user-list .sl-mobile-user-login a {
  justify-content: center;
  background: linear-gradient(135deg, var(--green-main) 0%, var(--green-accent) 100%);
  color: #ffffff;
  font-weight: 700;
}
.sl-mobile-user-list .sl-mobile-user-login a i {
  color: #ffffff;
}
.sl-mobile-user-list .sl-mobile-user-login a:hover {
  background: linear-gradient(135deg, var(--gold-primary) 0%, #b8962e 100%);
  color: var(--emerald-bg);
}
.sl-mobile-user-list .sl-mobile-user-login a:hover i {
  color: var(--emerald-bg);
}

/* =========================================================
   8. STYLE FOOTER 5 CỘT CAO CẤP ĐỒNG BỘ MÀU XANH HEADER & FONT QUICKSAND/NUNITO
   ========================================================= */
.footer-wrapper {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  background: #0E2A20 !important;
  border-top: none !important;
}

.silverlife-custom-footer {
  background: #0E2A20 !important;
  font-family: 'Quicksand', 'Nunito', system-ui, -apple-system, sans-serif !important;
  color: #F2ECE0 !important;
  padding-top: 48px !important;
  padding-bottom: 0 !important;
  border-top: none !important;
}

#footer {
  border-top: none !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.sl-footer-container {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  box-sizing: border-box !important;
}

.sl-footer-grid {
  display: grid !important;
  grid-template-columns: 1.3fr 1fr 1fr 1fr 1.3fr !important;
  gap: 36px !important;
  align-items: start !important;
  padding-bottom: 48px !important;
}

/* --- Cột 1: Brand Logo & Desc --- */
.sl-footer-logo a {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  text-decoration: none !important;
  margin-bottom: 16px !important;
}

.sl-footer-logo-img {
  max-height: 48px !important;
  width: auto !important;
  display: block !important;
  object-fit: contain !important;
}

.sl-brand-icon {
  width: 44px !important;
  height: 44px !important;
  flex-shrink: 0 !important;
}

.sl-brand-text {
  display: flex !important;
  flex-direction: column !important;
}

.sl-brand-title {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: 1px !important;
  font-family: 'Quicksand', sans-serif !important;
  line-height: 1.1 !important;
}

.sl-brand-tagline {
  font-size: 11px !important;
  color: #D8B878 !important;
  font-weight: 600 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  margin-top: 2px !important;
}

.sl-brand-desc {
  font-size: 13.5px !important;
  line-height: 1.7 !important;
  color: #AFC0B1 !important;
  font-weight: 500 !important;
  margin-bottom: 20px !important;
  font-family: 'Quicksand', 'Nunito', sans-serif !important;
  max-width: 36ch !important;
}

.sl-social-links {
  display: flex !important;
  gap: 10px !important;
}

.sl-social-btn {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: #AFC0B1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
}

.sl-social-btn:hover {
  background: #D8B878 !important;
  color: #0E2A20 !important;
  border-color: #D8B878 !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 4px 12px rgba(216, 184, 120, 0.3) !important;
}

/* --- Headings --- */
.sl-footer-heading {
  font-family: 'Quicksand', 'Nunito', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #D8B878 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  white-space: nowrap !important;
  margin-top: 0 !important;
  margin-bottom: 18px !important;
  padding-bottom: 0 !important;
}

.sl-footer-heading::after {
  display: none !important;
  content: none !important;
}

/* --- Menus --- */
.sl-footer-menu {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.sl-footer-menu li {
  margin-bottom: 10px !important;
}

.sl-footer-menu li a {
  color: #AFC0B1 !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: color 0.2s ease, transform 0.2s ease !important;
  display: inline-block !important;
  font-family: 'Quicksand', 'Nunito', sans-serif !important;
}

.sl-footer-menu li a:hover {
  color: #D8B878 !important;
  transform: translateX(4px) !important;
}

/* --- Contact Info --- */
.sl-contact-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.sl-contact-list li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
  font-size: 13.5px !important;
  color: #AFC0B1 !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
  font-family: 'Quicksand', 'Nunito', sans-serif !important;
}

.sl-contact-list li i {
  color: #D8B878 !important;
  font-size: 15px !important;
  margin-top: 3px !important;
  flex-shrink: 0 !important;
}

.sl-contact-list li a {
  color: #AFC0B1 !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.sl-contact-list li a:hover {
  color: #D8B878 !important;
}

/* Badge xuất xứ Canada */
.sl-ca-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 18px !important;
  padding: 10px 14px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
  color: #AFC0B1 !important;
  font-size: 12.5px !important;
}

.sl-ca-flag {
  font-size: 22px !important;
  line-height: 1 !important;
}

.sl-ca-text {
  line-height: 1.35 !important;
}

.sl-ca-text strong {
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* --- Thông tin pháp lý doanh nghiệp --- */
.sl-company-block {
  margin-top: 20px !important;
  padding-top: 16px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.sl-company-name {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #F2ECE0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  margin: 0 0 6px !important;
  line-height: 1.5 !important;
  font-family: 'Quicksand', 'Nunito', sans-serif !important;
}

.sl-company-line {
  font-size: 12px !important;
  line-height: 1.55 !important;
  color: #AFC0B1 !important;
  font-weight: 500 !important;
  margin: 0 0 4px !important;
  font-family: 'Quicksand', 'Nunito', sans-serif !important;
}

.sl-company-label {
  color: #D8B878 !important;
  font-weight: 700 !important;
}

/* --- Bảng pháp lý toàn bề rộng (riêng 1 dòng, nằm giữa grid & copyright) --- */
.sl-company-block--full {
  margin-top: 0 !important;
  padding: 22px 0 22px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  text-align: center !important;
}

.sl-company-row {
  display: flex !important;
  justify-content: center !important;
  align-items: baseline !important;
  flex-wrap: wrap !important;
  gap: 4px 18px !important;
  margin-bottom: 8px !important;
  line-height: 1.6 !important;
}

.sl-company-row:last-child {
  margin-bottom: 0 !important;
}

.sl-company-row .sl-company-name,
.sl-company-row .sl-company-line {
  margin: 0 !important;
}

/* --- Chứng nhận & Badge (Bộ Công Thương / DMCA) --- */
.sl-footer-badges {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin-top: 18px !important;
}

.sl-footer-badges img {
  display: block !important;
  max-height: 40px !important;
  width: auto !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  padding: 3px !important;
}

/* --- Footer Bottom Bar --- */
.sl-footer-bottom {
  background-color: #081B14 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  padding: 24px 0 !important;
}

.sl-bottom-flex {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 15px !important;
}

.sl-copyright {
  font-size: 13px !important;
  color: #AFC0B1 !important;
  font-weight: 500 !important;
  font-family: 'Quicksand', 'Nunito', sans-serif !important;
}

.sl-footer-slogan {
  font-size: 13px !important;
  color: #D8B878 !important;
  font-weight: 500 !important;
  font-family: 'Quicksand', 'Nunito', sans-serif !important;
}

/* --- Bỏ Payment Badges theo yêu cầu Design System --- */
.sl-payment-badges {
  display: none !important;
}

/* --- Responsive Layout --- */
@media (max-width: 991px) {
  .sl-footer-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 30px !important;
  }
  .sl-col-brand {
    grid-column: span 2 !important;
  }
}

@media (max-width: 600px) {
  .sl-footer-grid {
    grid-template-columns: 1fr !important;
    gap: 25px !important;
  }
  .sl-col-brand {
    grid-column: span 1 !important;
  }
  .sl-bottom-flex {
    flex-direction: column !important;
    text-align: center !important;
    justify-content: center !important;
  }
}

/* =========================================================
   9. THIẾT KẾ PHẦN HỖ TRỢ & KÊNH PHÂN PHỐI (SUPPORT SECTION)
   ========================================================= */
.support-section-home-page {
  background-color: #faf7f2 !important; /* Soft Cream Silk */
  padding-top: 65px !important;
  padding-bottom: 75px !important;
  position: relative !important;
}

.support-section-home-page .section-bg-overlay {
  background-color: rgba(250, 247, 242, 0.95) !important;
}

/* --- Section Header "HỖ TRỢ" Chuẩn 100% Theo Preview-Demo.html --- */
.support-section-home-page .text-title-logo-2 {
  text-align: center !important;
  max-width: 860px !important;
  margin: 0 auto 45px !important;
  padding-top: 45px !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}


/* 1. Tag Pill (.story-tag-pill / .pill-tag-burgundy) chuẩn preview-demo */
.support-section-home-page .text-title-logo-2::before {
  content: "TƯ VẤN & HỖ TRỢ" !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 24px !important;
  border-radius: 9999px !important;
  background: rgba(212, 175, 55, 0.12) !important;
  border: 1px solid rgba(212, 175, 55, 0.35) !important;
  color: #102615 !important;
  font-family: 'Quicksand', 'Nunito', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  margin-bottom: 16px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06) !important;
}

/* 2. Tiêu Đề Chính (.sec-main-heading-styled) chuẩn preview-demo (42px, weight 850, Moss/Burgundy Gradient) */
.support-section-home-page .title-support-home-page,
.support-section-home-page .text-title-logo-2 p:first-child {
  font-family: 'Quicksand', 'Nunito', system-ui, -apple-system, sans-serif !important;
  font-size: 42px !important;
  font-weight: 850 !important;
  line-height: 1.16 !important;
  letter-spacing: -0.035em !important;
  margin: 0 0 12px 0 !important;
  text-transform: uppercase !important;
  background: linear-gradient(135deg, #102615 0%, #1E4623 50%, #7A1C1C 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  display: inline-block !important;
}

/* 3. Đường Hoạ Tiết Mạ Vàng (.story-svg-divider) với hiệu ứng phát quang */
.support-section-home-page .text-title-logo-2 img {
  max-width: 260px !important;
  height: auto !important;
  margin: 8px auto 0 auto !important;
  display: block !important;
  filter: drop-shadow(0 0 8px rgba(247, 223, 155, 0.6)) !important;
  transition: all 0.4s ease !important;
}

.support-section-home-page .text-title-logo-2:hover img {
  transform: scale(1.05) !important;
  filter: drop-shadow(0 0 14px rgba(212, 175, 55, 0.8)) !important;
}

@media (max-width: 768px) {
  .support-section-home-page .title-support-home-page,
  .support-section-home-page .text-title-logo-2 p:first-child {
    font-size: 32px !important;
  }
}




/* --- Responsive Grid Layout --- */
.support-section-home-page #row-1696866715 {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 22px !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
}

@media (max-width: 991px) {
  .support-section-home-page #row-1696866715 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px !important;
  }
}

@media (max-width: 576px) {
  .support-section-home-page #row-1696866715 {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
  }
}

.support-section-home-page #row-1696866715 > .col {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* --- Card Styles (Ghi đè hoàn toàn màu hồng cũ rgb(252, 180, 180)) --- */
.support-section-home-page .col-inner,
.support-section-home-page #row-1696866715 > .col > .col-inner {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border-radius: 16px !important;
  border: 1px solid rgba(22, 70, 39, 0.12) !important;
  padding: 34px 22px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Hiệu ứng Hover Card Premium */
.support-section-home-page .col-hover-focus:hover .col-inner,
.support-section-home-page .col-inner:hover {
  transform: translateY(-6px) !important;
  border-color: #D4AF37 !important;
  box-shadow: 0 12px 30px rgba(22, 70, 39, 0.12), 0 0 0 1px #D4AF37 !important;
  background-color: #ffffff !important;
}

/* Icon Container */
.support-section-home-page .support-icon {
  margin: 0 0 16px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.support-section-home-page .support-icon a {
  width: 76px !important;
  height: 76px !important;
  border-radius: 50% !important;
  background: rgba(22, 70, 39, 0.05) !important;
  border: 1px solid rgba(212, 175, 55, 0.35) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
}

.support-section-home-page .col-inner:hover .support-icon a {
  background: rgba(212, 175, 55, 0.18) !important;
  border-color: #D4AF37 !important;
  transform: scale(1.08) rotate(3deg) !important;
}

.support-section-home-page .support-icon img {
  width: 46px !important;
  height: 46px !important;
  max-width: 46px !important;
  max-height: 46px !important;
  object-fit: contain !important;
  transition: transform 0.3s ease !important;
}

/* Support Title (Hotline/Tên sàn) - ĐÃ TĂNG SIZE CHỮ */
.support-section-home-page .support-title {
  margin: 0 0 6px 0 !important;
  font-family: 'Quicksand', 'Nunito', sans-serif !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
}

.support-section-home-page .support-title a {
  color: #164627 !important;
  text-decoration: none !important;
  transition: color 0.25s ease !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px !important;
}

.support-section-home-page .col-inner:hover .support-title a {
  color: #1e5a33 !important;
}

/* Support Subtitle - ĐÃ TĂNG SIZE CHỮ */
.support-section-home-page .support-subtitle {
  margin: 0 !important;
  font-family: 'Quicksand', 'Nunito', sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  line-height: 1.4 !important;
}

/* =========================================================
   10. THIẾT KẾ HOME POSTS & CẨM NANG BÀI VIẾT Y HỌC (SYSTEM DESIGN 3.4)
   ========================================================= */

/* --- Khối Bài Viết Trang Chủ --- */
#articles,
.articles-section,
.from_the_blog_wrapper,
.home-posts-section,
.section-blog {
  background-color: #F8F4EA !important;
  padding-top: 50px !important;
  padding-bottom: 60px !important;
}

/* --- Section Title "CẨM NANG Y HỌC & BÀI VIẾT" --- */
.articles-header-container,
.from_the_blog_header {
  text-align: center !important;
  max-width: 860px !important;
  margin: 0 auto 40px !important;
  position: relative !important;
}

.articles-tag-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 24px !important;
  border-radius: 99px !important;
  background: linear-gradient(135deg, rgba(122, 28, 28, 0.08) 0%, rgba(212, 175, 55, 0.15) 100%) !important;
  border: 1px solid rgba(199, 151, 63, 0.4) !important;
  color: #7A1C1C !important;
  font-family: 'Quicksand', 'Nunito', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  margin-bottom: 14px !important;
  box-shadow: 0 4px 15px rgba(199, 151, 63, 0.12) !important;
}

/* --- Card Bài Viết (.post-item / .box-blog-post / .article-card-item) --- */
.post-item,
.box-blog-post,
.article-card-item,
.from_the_blog .box,
.from_the_blog .col-inner {
  background: #ffffff !important;
  border: 1px solid rgba(212, 175, 55, 0.3) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  height: 100% !important;
  text-decoration: none !important;
  color: inherit !important;
  cursor: pointer;
}

/* Hiệu ứng Hover Card Bài Viết */
.post-item:hover,
.box-blog-post:hover,
.article-card-item:hover,
.from_the_blog .box:hover,
.from_the_blog .col-inner:hover {
  transform: translateY(-8px) !important;
  border-color: #D4AF37 !important;
  box-shadow: 0 18px 40px rgba(122, 28, 28, 0.12), 0 0 20px rgba(212, 175, 55, 0.2) !important;
  text-decoration: none !important;
  color: inherit !important;
}

/* --- Thumbnail Ảnh Bài Viết & Zoom Hover --- */
.post-item .box-image,
.box-blog-post .box-image,
.article-thumb-wrap,
.from_the_blog .box-image {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
  background-color: #FAF7F2 !important;
  border-bottom: 1px solid rgba(212, 175, 55, 0.15) !important;
}

.post-item .box-image img,
.box-blog-post .box-image img,
.article-thumb-img,
.from_the_blog .box-image img {
  width: 100% !important;
  height: 210px !important;
  object-fit: cover !important;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.post-item:hover .box-image img,
.box-blog-post:hover .box-image img,
.article-card-item:hover .article-thumb-img,
.from_the_blog .box:hover .box-image img,
.from_the_blog .col-inner:hover .box-image img {
  transform: scale(1.08) !important;
}

/* Badge Ngày tháng / Chuyên mục trên ảnh */
.post-item .badge,
.box-blog-post .badge,
.article-category-tag,
.from_the_blog .badge {
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  background: rgba(16, 38, 21, 0.88) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(247, 223, 155, 0.4) !important;
  color: #F7DF9B !important;
  padding: 4px 12px !important;
  border-radius: 99px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  z-index: 2 !important;
}

/* --- Khung Nội Dung Bài Viết (Box Text) --- */
.post-item .box-text,
.box-blog-post .box-text,
.article-card-body,
.from_the_blog .box-text {
  padding: 22px 20px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
}

/* Tiêu đề Bài viết - Chữ Đỏ Rượu Burgundy (#7A1C1C) khi Hover */
.post-item .post-title,
.post-item .entry-title,
.box-blog-post .entry-title,
.article-title,
.from_the_blog .entry-title {
  font-family: 'Quicksand', 'Nunito', sans-serif !important;
  font-size: 16.5px !important;
  font-weight: 800 !important;
  line-height: 1.45 !important;
  color: #102615 !important;
  margin-bottom: 12px !important;
  transition: color 0.3s ease !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.post-item .post-title a,
.post-item .entry-title a,
.box-blog-post .entry-title a,
.from_the_blog .entry-title a {
  color: #102615 !important;
  text-decoration: none !important;
  transition: color 0.3s ease !important;
}

.post-item:hover .entry-title a,
.box-blog-post:hover .entry-title a,
.article-card-item:hover .article-title,
.from_the_blog .box:hover .entry-title a,
.from_the_blog .col-inner:hover .entry-title a {
  color: #7A1C1C !important;
}

/* Đoạn trích 3 dòng (Excerpt) */
.post-item .from_the_blog_excerpt,
.post-item .entry-summary,
.article-excerpt,
.from_the_blog .post-summary,
.from_the_blog p {
  font-family: 'Quicksand', 'Nunito', sans-serif !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  color: #6E685C !important;
  margin-bottom: 18px !important;
  flex-grow: 1 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* --- Nút "ĐỌC THÊM ↗" trong Card --- */
.post-item .read-more,
.box-blog-post .read-more,
.article-btn-link,
.from_the_blog a.button.is-link,
.from_the_blog .read-more-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 10px 22px !important;
  border-radius: 12px !important;
  background: rgba(122, 28, 28, 0.05) !important;
  border: 1px solid rgba(122, 28, 28, 0.22) !important;
  color: #7A1C1C !important;
  font-family: 'Inter', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-decoration: none !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  margin-top: auto !important;
  width: max-content !important;
  box-shadow: 0 2px 8px rgba(122, 28, 28, 0.05) !important;
}

.post-item:hover .read-more,
.box-blog-post:hover .read-more,
.article-card-item:hover .article-btn-link,
.article-btn-link:hover,
.from_the_blog .box:hover a.button.is-link,
.from_the_blog .col-inner:hover a.button.is-link {
  background: linear-gradient(135deg, #7A1C1C 0%, #5E1414 100%) !important;
  color: #ffffff !important;
  border-color: #7A1C1C !important;
  box-shadow: 0 8px 20px rgba(122, 28, 28, 0.3) !important;
  transform: translateY(-2px) !important;
}

/* --- Nút "XEM TẤT CẢ BÀI VIẾT ↗" Chân Khối --- */
.articles-view-all-row,
.from_the_blog_btn_wrapper {
  text-align: center !important;
  margin-top: 20px !important;
}

.articles-view-all-btn,
.from_the_blog_see_all,
a.see-all-posts-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 16px 38px !important;
  border-radius: 99px !important;
  background: linear-gradient(135deg, #7A1C1C 0%, #5E1414 100%) !important;
  border: 1.5px solid #F7DF9B !important;
  color: #ffffff !important;
  font-family: 'Quicksand', 'Nunito', sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-decoration: none !important;
  box-shadow: 0 12px 30px rgba(122, 28, 28, 0.3), 0 0 20px rgba(212, 175, 55, 0.25) !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.articles-view-all-btn:hover,
.from_the_blog_see_all:hover,
a.see-all-posts-btn:hover {
  transform: translateY(-3px) scale(1.03) !important;
  box-shadow: 0 18px 42px rgba(122, 28, 28, 0.4), 0 0 30px rgba(247, 223, 155, 0.4) !important;
  background: linear-gradient(135deg, #9E2424 0%, #7A1C1C 100%) !important;
  color: #F7DF9B !important;
}

/* =========================================================
   11. THIẾT KẾ TRANG TIN TỨC & CHUYÊN MỤC (ARCHIVE & CATEGORY PAGES)
   ========================================================= */

/* --- Thiết lập nền kem chuyển tiếp mượt mà cho toàn bộ trang tin tức & trang tìm kiếm --- */
body.archive,
body.category,
body.blog,
body.search,
body.search-results,
body.archive #wrapper,
body.category #wrapper,
body.blog #wrapper,
body.search #wrapper,
body.search-results #wrapper,
.blog-wrapper {
  background-color: #F8F4EA !important;
}

/* Căn chỉnh bố cục chính: Đổi sang Full Width (tràn màn hình) rộng rãi, hiện đại */
.blog-wrapper {
  max-width: 100% !important;
  padding: 40px 4% 60px !important;
}

/* --- Chuyển đổi Danh sách bài viết một cột lỗi thời thành Lưới Grid 2 Cột Hiện Đại trên Desktop --- */
@media (min-width: 768px) {
  body.archive .large-9 > .row,
  body.category .large-9 > .row,
  body.blog .large-9 > .row,
  body.search .large-9 > .row,
  body.search-results .large-9 > .row,
  .blog-wrapper .large-9 > .row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 30px !important;
    margin: 0 !important;
    width: 100% !important;
  }

  /* Khắc phục các class chia cột mặc định của Flatsome trong lưới mới */
  body.archive .large-9 > .row > div,
  body.category .large-9 > .row > div,
  body.blog .large-9 > .row > div,
  body.search .large-9 > .row > div,
  body.search-results .large-9 > .row > div,
  .blog-wrapper .large-9 > .row > div {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}

/* --- Tái thiết kế tiêu đề chuyên mục / Trang tin tức (Page Title Container) --- */
.category-page-title,
.page-title.blog-page-title,
.page-title.archive-title {
  text-align: center !important;
  background-color: #F8F4EA !important;
  border-bottom: none !important; /* Xóa bỏ đường viền mặc định của Flatsome */
  padding: 55px 20px 35px !important;
  margin-bottom: 35px !important;
  max-width: 860px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  position: relative !important;
}

/* Biến breadcrumb hoặc thẻ tiêu đề phụ thành Tag Pill */
.category-page-title .breadcrumbs,
.page-title.blog-page-title .breadcrumbs,
.page-title .breadcrumbs,
.category-breadcrumbs-tag-pill,
.articles-tag-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 24px !important;
  border-radius: 99px !important;
  background: linear-gradient(135deg, rgba(122, 28, 28, 0.08) 0%, rgba(212, 175, 55, 0.15) 100%) !important;
  border: 1px solid rgba(199, 151, 63, 0.4) !important;
  color: #7A1C1C !important;
  font-family: 'Inter', 'Plus Jakarta Sans', 'Quicksand', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.16em !important;
  margin-bottom: 16px !important;
  box-shadow: 0 4px 15px rgba(199, 151, 63, 0.12) !important;
}

/* Tiêu đề Chuyên mục / Tin tức chính */
.category-page-title h1,
.page-title h1,
.archive-title h1,
.category-main-title,
.articles-main-title {
  font-family: 'Inter', 'Plus Jakarta Sans', 'Quicksand', system-ui, sans-serif !important;
  font-size: 42px !important;
  font-weight: 850 !important;
  line-height: 1.18 !important;
  letter-spacing: -0.025em !important;
  margin: 12px auto 16px !important;
  max-width: 860px !important;
  text-transform: uppercase !important;
  background: none !important;
  border: none !important;
}

/* Triệt tiêu đường gạch giả sau tiêu đề h1 cũ */
.category-page-title .archive-description:before,
.category-page-title h1:after,
.page-title h1:after {
  display: none !important;
  content: none !important;
}

/* Mô tả ngắn của chuyên mục */
.category-page-title .archive-description,
.category-page-title p,
.category-subtitle-tagline,
.search-subtitle-tagline,
.articles-subheading {
  font-family: 'Inter', 'Plus Jakarta Sans', sans-serif !important;
  font-size: 16.5px !important;
  color: #575249 !important;
  font-weight: 500 !important;
  max-width: 720px !important;
  margin: 14px auto 0 !important;
  line-height: 1.6 !important;
  text-align: center !important;
}

/* --- Khắc phục triệt để lỗi Card Bài viết bị co giãn ảnh quá mức --- */
.post-item,
.box-blog-post {
  background: #ffffff !important;
  border: 1px solid rgba(212, 175, 55, 0.25) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  height: 100% !important;
  position: relative !important;
}

.post-item:hover,
.box-blog-post:hover {
  transform: translateY(-6px) !important;
  border-color: #D4AF37 !important;
  box-shadow: 0 16px 36px rgba(122, 28, 28, 0.08), 0 0 20px rgba(212, 175, 55, 0.15) !important;
}

/* Fix chiều cao container ảnh để không bị kéo giãn */
.post-item .box-image,
.box-blog-post .box-image {
  height: 220px !important; /* Cố định chiều cao ảnh tỉ lệ vàng */
  padding-top: 0 !important; /* Loại bỏ padding tỷ lệ mặc định của Flatsome gây lỗi */
  position: relative !important;
  background-color: #FAF7F2 !important;
  overflow: hidden !important;
  border-bottom: 1px solid rgba(212, 175, 55, 0.15) !important;
}

.post-item .box-image a,
.post-item .box-image .image-cover,
.box-blog-post .box-image a,
.box-blog-post .box-image .image-cover {
  height: 100% !important;
  padding-top: 0 !important;
}

.post-item .box-image img,
.box-blog-post .box-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* Đảm bảo ảnh tự fit không bị méo */
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* --- Thiết kế lại Khung Nội Dung (Text Area) trong Card --- */
.post-item .box-text,
.box-blog-post .box-text {
  padding: 24px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
  background: #ffffff !important;
}

/* Meta bài viết (Ngày đăng, Tác giả) */
.post-item .entry-meta,
.post-item .post-meta,
.box-blog-post .entry-meta {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #8c8577 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 10px !important;
}

/* Tiêu đề bài viết - Đổi sang font Playfair Display sang trọng */
.post-item .entry-title,
.box-blog-post .entry-title {
  font-family: 'Playfair Display', serif !important;
  font-size: 18.5px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  margin-bottom: 12px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.post-item .entry-title a,
.box-blog-post .entry-title a {
  color: #102615 !important;
  text-decoration: none !important;
  transition: color 0.3s ease !important;
}

.post-item:hover .entry-title a,
.box-blog-post:hover .entry-title a {
  color: #7A1C1C !important;
}

/* Mô tả tóm tắt (Excerpt) */
.post-item .entry-summary,
.post-item .from_the_blog_excerpt,
.box-blog-post p {
  font-family: 'Inter', sans-serif !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  color: #6E685C !important;
  margin-bottom: 20px !important;
  flex-grow: 1 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Nút đọc thêm "ĐỌC THÊM ↗" */
.post-item .read-more,
.box-blog-post .read-more {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 10px 22px !important;
  border-radius: 8px !important;
  background: rgba(122, 28, 28, 0.04) !important;
  border: 1px solid rgba(122, 28, 28, 0.2) !important;
  color: #7A1C1C !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  width: max-content !important;
  margin-top: auto !important;
}

.post-item:hover .read-more,
.box-blog-post:hover .read-more {
  background: linear-gradient(135deg, #7A1C1C 0%, #5E1414 100%) !important;
  color: #ffffff !important;
  border-color: #7A1C1C !important;
  box-shadow: 0 6px 15px rgba(122, 28, 28, 0.25) !important;
  transform: translateY(-1px) !important;
}

/* --- Thiết kế Sidebar & Sticky Widget (Hộp Tìm Kiếm & Bài Viết Mới Sticky) --- */
/* 1. Đảm bảo toàn bộ khung bọc ngoài không bị cản trở bởi overflow hidden */
body.category #wrapper,
body.archive #wrapper,
body.blog #wrapper,
body.search #wrapper,
body.search-results #wrapper,
.blog-wrapper,
#content.blog-wrapper,
.blog-wrapper > .row-large,
.post-sidebar {
  overflow: visible !important;
}

/* 2. Cột sidebar kéo dài bằng chiều cao hàng để tạo khoảng trượt cho sticky */
.blog-wrapper > .row-large {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
}

.post-sidebar {
  height: auto !important;
}

/* 3. Sticky cố định toàn bộ cột sidebar nguyên vẹn khi cuộn trang */
@media (min-width: 850px) {
  .post-sidebar #secondary,
  .post-sidebar .sidebar-inner,
  .post-sidebar .widget-area,
  #secondary.sidebar-inner {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 25px !important;
    z-index: 99 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

#secondary,
.widget-area,
.blog-sidebar,
.sidebar-inner {
  background: transparent !important;
  padding-top: 10px !important;
  margin-left: 18px !important;
}

#secondary .widget,
.widget-area .widget,
.blog-sidebar .widget,
.sidebar-inner .widget {
  background: #FFFEFB !important; /* Nền ngà */
  border: 1px solid rgba(212, 175, 55, 0.25) !important;
  border-radius: 16px !important;
  padding: 24px 20px !important;
  margin-bottom: 30px !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.3s ease !important;
}

#secondary .widget:hover,
.widget-area .widget:hover,
.blog-sidebar .widget:hover {
  border-color: #D4AF37 !important;
  box-shadow: 0 12px 28px rgba(122, 28, 28, 0.06), 0 0 15px rgba(212, 175, 55, 0.1) !important;
}

/* Tiêu đề Widget Sidebar */
#secondary .widget-title,
.widget-area .widget-title,
.blog-sidebar .widget-title,
#secondary h3.widget-title {
  font-family: var(--font-system) !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #7A1C1C !important; /* Đỏ Burgundy */
  border-bottom: 2px solid #D4AF37 !important;
  padding-bottom: 10px !important;
  margin-bottom: 18px !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
}

/* Search Box Widget */
#secondary .widget_search form,
.widget-area .widget_search form {
  display: flex !important;
  gap: 8px !important;
}

/* Chỉ style ô search trong Sidebar Widget.
   KHÔNG dùng selector chung `.search-field`/`.search-submit` vì sẽ tràn
   vào ô search ở header (header dùng class search-field/ux-search-submit). */
#secondary .widget_search input[type="search"],
.widget-area .widget_search input[type="search"] {
  border: 1px solid rgba(212, 175, 55, 0.4) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  background-color: #ffffff !important;
  font-family: var(--font-system) !important;
  font-size: 13.5px !important;
  width: 100% !important;
  height: auto !important;
  box-shadow: none !important;
  transition: border-color 0.3s ease !important;
}

#secondary .widget_search input[type="search"]:focus,
.widget-area .widget_search input[type="search"]:focus {
  border-color: #7A1C1C !important;
  outline: none !important;
}

#secondary .widget_search button,
.widget-area .widget_search button,
#secondary .widget_search input[type="submit"] {
  background: linear-gradient(135deg, #7A1C1C 0%, #5E1414 100%) !important;
  border: none !important;
  color: #ffffff !important;
  font-family: var(--font-system) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 10px 18px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

#secondary .widget_search button:hover,
.widget-area .widget_search button:hover {
  opacity: 0.9 !important;
  transform: translateY(-1px) !important;
}

/* Danh sách liên kết trong Widget Sidebar */
#secondary .widget ul,
.widget-area .widget ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#secondary .widget ul li,
.widget-area .widget ul li {
  border-bottom: 1px solid rgba(212, 175, 55, 0.12) !important;
  padding: 10px 0 !important;
}

#secondary .widget ul li:last-child,
.widget-area .widget ul li:last-child {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

#secondary .widget ul li a,
.widget-area .widget ul li a {
  font-family: var(--font-system) !important;
  font-size: 13.5px !important;
  color: #102615 !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
  display: inline-block !important;
}

#secondary .widget ul li a:hover,
.widget-area .widget ul li a:hover {
  color: #7A1C1C !important;
  transform: translateX(4px) !important;
}

/* Đảm bảo toàn bộ Sidebar dùng chuẩn --font-system */
#secondary,
#secondary *,
.widget-area,
.widget-area *,
.sidebar-inner,
.sidebar-inner *,
.post-sidebar,
.post-sidebar *,
.widget_search input,
.widget_search button,
.recent-post-title,
.recent-post-title a,
.recent-post-date,
.vip-sidebar-box * {
  font-family: var(--font-system) !important;
}

/* --- Tái thiết kế bộ phân trang (Western Luxury Pagination Design) --- */
.category-pagination-wrapper,
.category-pagination-wrapper nav,
.category-pagination-wrapper .nav-pagination-wrapper,
.pagination-container,
.blog-wrapper nav.navigation.pagination,
nav.pagination,
.nav-pagination,
.nav-pagination.links,
ul.page-numbers,
ul.nav-pagination.links {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

.category-pagination-wrapper {
  margin-top: 45px !important;
  padding-top: 0 !important;
  border-top: none !important;
  text-align: center !important;
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
}

/* Container ul bọc các nút */
.category-pagination-wrapper ul,
.category-pagination-wrapper ul.page-numbers,
.nav-pagination,
.nav-pagination.links,
ul.page-numbers,
ul.nav-pagination {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 auto !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.category-pagination-wrapper ul li,
.nav-pagination li,
ul.page-numbers li {
  display: inline-flex !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  list-style: none !important;
}

/* Các nút bấm trang độc lập dạng hình tròn (Circular Buttons) */
.category-pagination-wrapper .page-number,
.category-pagination-wrapper .page-numbers,
.pagination-container .page-number,
.pagination-container .page-numbers,
nav.pagination .page-number,
nav.pagination .page-numbers,
.nav-pagination li a,
.nav-pagination li span,
ul.page-numbers li a,
ul.page-numbers li span,
a.page-number,
span.page-number {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(212, 175, 55, 0.4) !important;
  background-color: #FFFFFF !important;
  background: #FFFFFF !important;
  color: #102615 !important;
  font-family: 'Inter', 'Plus Jakarta Sans', 'Quicksand', sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  line-height: 42px !important;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  margin: 0 !important;
  outline: none !important;
}

/* Hiệu ứng Hover nút bấm */
.category-pagination-wrapper .page-number:hover,
.category-pagination-wrapper .page-numbers:hover,
.pagination-container .page-number:hover,
nav.pagination .page-number:hover,
.nav-pagination li a:hover,
ul.page-numbers li a:hover {
  border-color: #7A1C1C !important;
  color: #7A1C1C !important;
  background-color: rgba(122, 28, 28, 0.06) !important;
  background: rgba(122, 28, 28, 0.06) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 5px 14px rgba(122, 28, 28, 0.12) !important;
}

/* Nút Trang Hiện Tại (Active / Current State) */
.category-pagination-wrapper .page-number.current,
.category-pagination-wrapper .page-numbers.current,
.pagination-container .page-number.current,
nav.pagination .page-number.current,
.nav-pagination li span.current,
ul.page-numbers li span.current,
span.page-number.current,
span.page-numbers.current {
  background: linear-gradient(135deg, #7A1C1C 0%, #5E1414 100%) !important;
  background-color: #7A1C1C !important;
  color: #FFFFFF !important;
  border: 1.5px solid #7A1C1C !important;
  font-weight: 850 !important;
  box-shadow: 0 4px 14px rgba(122, 28, 28, 0.35) !important;
  transform: translateY(-1px) !important;
}

/* Nút Prev / Next (< và >) */
.category-pagination-wrapper .page-number.prev,
.category-pagination-wrapper .page-number.next,
.pagination-container .page-number.prev,
.pagination-container .page-number.next,
nav.pagination .page-number.prev,
nav.pagination .page-number.next,
.nav-pagination li a.prev,
.nav-pagination li a.next,
ul.page-numbers li a.prev,
ul.page-numbers li a.next {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  padding: 0 !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  border-radius: 50% !important;
}

/* --- Thiết kế Lưới Bài viết Danh mục (Grid 3 Cột tỉ lệ cân đối trên Desktop) --- */
@media (min-width: 980px) {
  .category-posts-grid-container {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 24px !important;
  }
  
  /* Thu nhỏ chiều cao ảnh ở lưới 3 cột để giữ tỷ lệ cân đối */
  .category-posts-grid-container .post-item .box-image,
  .category-posts-grid-container .box-blog-post .box-image {
    height: 180px !important;
  }
}
@media (min-width: 600px) and (max-width: 979px) {
  .category-posts-grid-container {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
  }
}
@media (max-width: 599px) {
  .category-posts-grid-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 25px !important;
  }
}

/* Ép form tìm kiếm Flatsome/WordPress bung hết chiều rộng, tránh bị bóp méo */
.widget_search form.search-form,
form.search-form {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
}


/* --- Thiết kế lại Header & Title Trang Tin Tức (Chuẩn 100% Western Luxury System Design) --- */
.category-breadcrumbs-tag-pill,
.articles-tag-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 24px !important;
  border-radius: 99px !important;
  background: linear-gradient(135deg, rgba(122, 28, 28, 0.08) 0%, rgba(212, 175, 55, 0.15) 100%) !important;
  border: 1px solid rgba(199, 151, 63, 0.4) !important;
  color: #7A1C1C !important;
  font-family: 'Inter', 'Plus Jakarta Sans', 'Quicksand', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  margin-bottom: 16px !important;
  box-shadow: 0 4px 15px rgba(199, 151, 63, 0.12) !important;
}
.category-breadcrumbs-tag-pill a {
  color: #7A1C1C !important;
  text-decoration: none !important;
  transition: color 0.25s ease !important;
}
.category-breadcrumbs-tag-pill a:hover {
  color: #D4AF37 !important;
}

/* Họa tiết Mạ Vàng Phát Quang (Story SVG Divider) */
.story-svg-divider,
.category-title-divider-svg {
  margin: 14px auto 18px auto !important;
  text-align: center !important;
}

.story-svg-divider svg,
.category-title-divider-svg svg {
  max-width: 260px !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 auto !important;
  display: block !important;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
  filter: drop-shadow(0 0 6px rgba(247, 223, 155, 0.4)) !important;
}

.category-page-title:hover .story-svg-divider svg,
.articles-header-container:hover .story-svg-divider svg {
  filter: drop-shadow(0 0 16px rgba(247, 223, 155, 0.95)) drop-shadow(0 0 25px rgba(212, 175, 55, 0.6)) !important;
  transform: scale(1.08) !important;
}

@keyframes goldGlowPulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 4px #F7DF9B);
    fill: #D4AF37;
  }
  50% {
    transform: scale(1.3);
    filter: drop-shadow(0 0 14px #F7DF9B) drop-shadow(0 0 20px #FFFFFF);
    fill: #FFF2C6;
  }
}

.story-svg-divider svg circle,
.category-title-divider-svg svg circle {
  animation: goldGlowPulse 2.4s infinite ease-in-out !important;
  transform-origin: 130px 13px !important;
}

/* Ép font chữ Inter / Plus Jakarta Sans chuẩn Western Luxury & dual color gradient */
body h1.category-main-title,
body.category .category-page-title h1,
body.archive .category-page-title h1,
.category-main-title,
.articles-main-title {
  font-family: 'Inter', 'Plus Jakarta Sans', 'Quicksand', system-ui, sans-serif !important;
  font-size: clamp(30px, 4vw, 44px) !important;
  font-weight: 850 !important;
  line-height: 1.18 !important;
  letter-spacing: -0.025em !important;
  margin: 12px auto 16px !important;
  max-width: 860px !important;
  text-transform: uppercase !important;
  text-align: center !important;
}

.sec-heading-dark,
.articles-title-emerald {
  font-family: 'Inter', 'Plus Jakarta Sans', 'Quicksand', sans-serif !important;
  font-size: clamp(20px, 2.5vw, 24px) !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  background: linear-gradient(135deg, #102615 0%, #1E4623 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  display: inline-block !important;
  margin-bottom: 6px !important;
}

.sec-heading-burgundy,
.articles-title-burgundy {
  font-family: 'Inter', 'Plus Jakarta Sans', 'Quicksand', sans-serif !important;
  font-size: clamp(30px, 4vw, 44px) !important;
  font-weight: 850 !important;
  line-height: 1.18 !important;
  letter-spacing: -0.025em !important;
  text-transform: uppercase !important;
  background: linear-gradient(135deg, #7A1C1C 0%, #A82424 50%, #5E1414 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  display: inline-block !important;
}

.category-subtitle-tagline,
.search-subtitle-tagline,
.articles-subheading {
  font-family: 'Inter', 'Plus Jakarta Sans', sans-serif !important;
  font-size: 15.5px !important;
  color: #575249 !important;
  font-weight: 500 !important;
  max-width: 1200px !important;
  margin: 14px auto 0 !important;
  line-height: 1.6 !important;
  text-align: center !important;
  width: 100% !important;
}

@media (min-width: 768px) {
  .category-subtitle-tagline,
  .search-subtitle-tagline,
  .articles-subheading {
    white-space: nowrap !important; /* Ép buộc hiển thị 100% trên duy nhất 1 dòng nằm ngang */
  }
}

/* Thiết kế làm nổi bật tên thương hiệu SilverLife sang trọng */
.gold-brand-accent,
.brand-highlight,
.silverlife-highlight,
span.gold-brand-accent {
  color: #7A1C1C !important;
  font-weight: 800 !important;
  background: rgba(212, 175, 55, 0.14) !important;
  border: 1px solid rgba(199, 151, 63, 0.4) !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
  display: inline-block !important;
  vertical-align: middle !important;
  margin: 0 3px !important;
  white-space: nowrap !important;
  box-shadow: 0 2px 6px rgba(199, 151, 63, 0.1) !important;
  line-height: 1.3 !important;
  font-family: 'Inter', 'Plus Jakarta Sans', sans-serif !important;
  transition: all 0.25s ease !important;
}

.gold-brand-accent:hover,
.brand-highlight:hover,
.silverlife-highlight:hover {
  background: rgba(212, 175, 55, 0.22) !important;
  border-color: #D4AF37 !important;
  box-shadow: 0 4px 12px rgba(122, 28, 28, 0.15) !important;
}

/* Custom styles for article cards category-grid-card */
.category-grid-card {
  margin-bottom: 0 !important; /* Reset flatsome margin bottom since we use grid gap */
}

.card-category-badge {
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  background: rgba(16, 38, 21, 0.88) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(247, 223, 155, 0.4) !important;
  color: #F7DF9B !important;
  padding: 4px 12px !important;
  border-radius: 99px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  z-index: 2 !important;
}

.no-thumb-fallback {
  width: 100% !important;
  height: 220px !important;
  background-color: #FAF7F2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 40px !important;
  color: rgba(212, 175, 55, 0.3) !important;
  border-bottom: 1px solid rgba(212, 175, 55, 0.15) !important;
}

/* --- Widget Recent Posts Sidebar --- */
.recent-posts-list-wrapper {
  margin-top: 10px !important;
}
.recent-post-list-item {
  display: flex !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
  align-items: center !important;
  border-bottom: 1px dashed rgba(212, 175, 55, 0.18) !important;
  padding-bottom: 12px !important;
}
.recent-post-list-item:last-child {
  margin-bottom: 0 !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}
.recent-post-thumb {
  width: 55px !important;
  height: 55px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  border: 1.5px solid #D4AF37 !important;
  flex-shrink: 0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}
.recent-post-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.recent-post-thumb-fallback {
  width: 100% !important;
  height: 100% !important;
  background-color: #FAF7F2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #D4AF37 !important;
  font-size: 14px !important;
}
.recent-post-info {
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
}
.recent-post-title {
  font-family: 'Playfair Display', serif !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  margin: 0 0 4px 0 !important;
}
.recent-post-title a {
  color: #102615 !important;
  text-decoration: none !important;
  transition: color 0.25s ease !important;
}
.recent-post-title a:hover {
  color: #7A1C1C !important;
}
.recent-post-date {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 10px !important;
  color: #8c8577 !important;
  letter-spacing: 0.02em !important;
}
.recent-post-date i,
.recent-post-date svg {
  color: #D4AF37 !important;
  fill: #D4AF37 !important;
  margin-right: 4px !important;
  font-size: 11px !important;
  vertical-align: middle !important;
}

.category-pagination-wrapper {
  margin-top: 50px !important;
}

/* Animating components */
@keyframes slRotateDash {
  to {
    transform: rotate(360deg);
  }
}
.rotate-ring {
  transform-origin: center;
  animation: slRotateDash 15s linear infinite;
}
@keyframes slGlowBreathe {
  0%, 100% { opacity: 0.6; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.1); }
}
.glow-dot {
  transform-origin: center;
  animation: slGlowBreathe 3s ease-in-out infinite;
}

/* --- Tách rời Hộp tìm kiếm và Nút Icon tìm kiếm riêng biệt (Fix hoàn toàn lỗi border) ---
   KHÔNG dùng selector chung `.search-form` (li search header có class search-form). */
.widget_search form.search-form,
.search-input-wrapper {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important; /* Tách biệt khoảng cách giữa ô nhập liệu và nút icon */
  width: 100% !important;
  max-width: 100% !important;
  border: none !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Ô nhập liệu tìm kiếm (Search Input Bar riêng biệt) */
.search-input-wrapper input,
.search-input-wrapper input[type="search"],
.search-input-wrapper input[type="search"].search-field,
.search-input-wrapper .search-field,
form.search-form input[type="search"] {
  flex: 1 1 auto !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 18px !important;
  border-radius: 99px !important; /* Bo góc dạng viên thuốc mềm mại độc lập */
  border: 1.5px solid rgba(212, 175, 55, 0.4) !important;
  background-color: #FFFFFF !important;
  background: #FFFFFF !important;
  color: #102615 !important;
  font-family: 'Inter', 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13.5px !important;
  outline: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.3s ease !important;
  margin: 0 !important;
}

.search-input-wrapper input:focus,
.search-input-wrapper input[type="search"]:focus,
.search-input-wrapper .search-field:focus {
  border-color: #7A1C1C !important;
  box-shadow: 0 4px 12px rgba(122, 28, 28, 0.12) !important;
  background-color: #FFFFFF !important;
}

/* Nút icon Tìm kiếm (Search Submit Button dạng hình tròn tách rời) */
.search-input-wrapper button,
.search-input-wrapper button.search-submit,
.search-input-wrapper .search-submit,
form.search-form button[type="submit"] {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  flex: 0 0 44px !important;
  border-radius: 50% !important; /* Nút icon hình tròn độc lập */
  background: linear-gradient(135deg, #7A1C1C 0%, #5E1414 100%) !important;
  background-color: #7A1C1C !important;
  border: 1px solid #7A1C1C !important;
  color: #FFFFFF !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(122, 28, 28, 0.25) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  padding: 0 !important;
  margin: 0 !important;
  outline: none !important;
}

.search-input-wrapper button:hover,
.search-input-wrapper button.search-submit:hover,
.search-input-wrapper .search-submit:hover {
  background: linear-gradient(135deg, #9E2424 0%, #7A1C1C 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(122, 28, 28, 0.35) !important;
  border-color: #D4AF37 !important;
}

.search-input-wrapper .search-submit i,
form.search-form button i {
  font-size: 14px !important;
  color: #FFFFFF !important;
  line-height: 1 !important;
  margin: 0 !important;
}

/* --- Tinh chỉnh hiển thị Mô tả Danh mục (Category Description Tagline) --- */
div.category-subtitle-tagline {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 18px auto 0 !important;
  max-width: 720px !important;
}
p.category-subtitle-tagline,
p.search-subtitle-tagline {
  display: block !important;
}
.category-subtitle-tagline * {
  font-family: 'Inter', sans-serif !important;
  margin: 0 !important;
  line-height: 1.6 !important;
}
/* Thu gọn các tiêu đề thô sơ trong description để tinh tế hơn */
.category-subtitle-tagline h2,
.category-subtitle-tagline h3,
.category-subtitle-tagline h4 {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: #7A1C1C !important;
  margin-top: 5px !important;
}
.category-subtitle-tagline p {
  font-size: 14.5px !important;
  color: #575249 !important;
}
.category-subtitle-tagline a {
  color: #7A1C1C !important;
  font-weight: 700 !important;
  border-bottom: 1.5px dashed rgba(122, 28, 28, 0.4) !important;
  padding-bottom: 2px !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
  display: inline-block !important;
}
.category-subtitle-tagline a:hover {
  color: #D4AF37 !important;
  border-bottom-color: #D4AF37 !important;
  transform: translateY(-1px) !important;
}

/* Khắc phục chữ alt lỗi khi bị tràn */
.post-item .box-image img {
  color: transparent !important;
  text-indent: -9999px !important;
}

/* Reset hoàn toàn list-style, margin, padding do theme áp dụng lên widget li */
.recent-posts-list-wrapper {
  padding: 0 !important;
  margin: 10px 0 0 0 !important;
}
.recent-post-list-item {
  margin-left: 0 !important;
  padding-left: 0 !important;
  list-style: none !important;
  list-style-type: none !important;
  text-indent: 0 !important;
  display: flex !important;
  gap: 15px !important;
  align-items: center !important;
  width: 100% !important;
}
.recent-post-list-item:before {
  content: none !important; /* Loại bỏ ký tự bullet của theme */
}
.recent-post-info {
  margin-left: 0 !important;
  padding-left: 0 !important;
  min-width: 0 !important;
  flex: 1 !important;
}
.recent-post-title {
  font-family: var(--font-system) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  margin: 0 0 4px 0 !important;
}
.recent-post-title a {
  font-family: var(--font-system) !important;
  color: #102615 !important;
  text-decoration: none !important;
}
.recent-post-title a:hover {
  color: #7A1C1C !important;
}
.recent-post-date {
  font-family: var(--font-system) !important;
  font-size: 11.5px !important;
  color: #8c8577 !important;
}

/* --- Loại bỏ padding mặc định của Flatsome trên các cột lớn để tối ưu bố cục --- */
@media screen and (min-width: 850px) {
  body.archive .row-large > .col,
  body.category .row-large > .col,
  body.blog .row-large > .col,
  body.search .row-large > .col,
  body.search-results .row-large > .col,
  body.single .row-large > .col,
  body.archive .row-large > .flickity-viewport > .flickity-slider > .col,
  body.category .row-large > .flickity-viewport > .flickity-slider > .col,
  body.blog .row-large > .flickity-viewport > .flickity-slider > .col,
  body.search .row-large > .flickity-viewport > .flickity-slider > .col,
  body.search-results .row-large > .flickity-viewport > .flickity-slider > .col {
    padding: 0 !important;
  }
}

/* =========================================================
   THIẾT KẾ CHI TIẾT BÀI VIẾT (SINGLE POST DESIGN SYSTEM v2.5)
   ========================================================= */

/* ================================================
   SINGLE POST HERO — Full height, image from header
   Title overlaid on image, blur/wave seam at bottom
   ================================================ */

.single-post-hero-full {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    min-height: 560px;
    background-size: cover;
    background-position: center 35%;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* Tăng độ tươi ảnh nhẹ */
    filter: brightness(1.02) saturate(1.05);
}

/* Overlay xanh emerald thương hiệu giúp title nổi bật */
.hero-full-overlay {
    position: absolute;
    inset: 0;
    /* Gradient từ emerald đậm trên → trong suốt giữa → emerald vừa dưới */
    background: linear-gradient(
        to bottom,
        rgba(9, 29, 22, 0.82)   0%,
        rgba(16, 38, 21, 0.65)  28%,
        rgba(22, 70, 39, 0.28)  52%,
        rgba(16, 38, 21, 0.55)  75%,
        rgba(9, 29, 22, 0.88)   100%
    );
    pointer-events: none;
    z-index: 1;
}

/* Tiêu đề nằm trên overlay */
.single-post-hero-full .single-post-header-container {
    position: relative;
    z-index: 2;
    padding: 80px 20px 100px;
}

/* Lớp blur + gradient tan dần: trong suốt → emerald → cream (nền trang) */
.image-blur-seam {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 180px;
    background: linear-gradient(
        to bottom,
        rgba(9, 29, 22, 0)    0%,
        rgba(9, 29, 22, 0.25) 25%,
        rgba(9, 29, 22, 0.45) 45%,
        rgba(248, 244, 234, 0.60) 68%,
        rgba(248, 244, 234, 0.96) 85%,
        rgba(248, 244, 234, 1)    100%
    );
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 35%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 35%);
    pointer-events: none;
    z-index: 3;
}

/* Đường cong SVG vàng kim */
.image-curve-svg {
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 90px;
    display: block !important;
    pointer-events: none !important;
    z-index: 4;
    filter: drop-shadow(0 -2px 8px rgba(212, 175, 55, 0.20));
}

/* Responsive */
@media (max-width: 768px) {
    .single-post-hero-full {
        min-height: 420px;
    }
    .single-post-hero-full .single-post-header-container {
        padding: 60px 16px 80px;
    }
    .image-blur-seam { height: 110px; }
    .image-curve-svg { height: 65px; }
}
@media (max-width: 480px) {
    .single-post-hero-full { min-height: 340px; }
    .image-blur-seam { height: 80px; }
}



.single-post-header-container {
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.single-post-tag-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 24px !important;
  border-radius: 99px !important;
  background: rgba(122, 28, 28, 0.06) !important;
  border: 1px solid rgba(122, 28, 28, 0.25) !important;
  color: #7A1C1C !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  margin-bottom: 18px !important;
}

.single-post-tag-pill a {
  color: #7A1C1C !important;
  text-decoration: none !important;
  transition: color 0.25s ease !important;
}

.single-post-tag-pill a:hover {
  color: #D4AF37 !important;
}

.single-post-tag-pill span {
  color: #091D16 !important;
}

.single-post-main-title {
  margin: 16px auto 20px auto !important;
  text-align: center !important;
  width: 100% !important;
  max-width: 100% !important;
}

.single-post-main-title .articles-title-emerald {
  font-size: clamp(14px, 1.8vw, 16px) !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  background: linear-gradient(135deg, #102615 0%, #1E4623 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  display: inline-block !important;
  margin: 0 auto 8px auto !important;
  text-align: center !important;
}

.single-post-main-title .articles-title-burgundy {
  font-size: clamp(24px, 3.2vw, 38px) !important;
  font-weight: 850 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.015em !important;
  text-transform: none !important;
  background: linear-gradient(135deg, #7A1C1C 0%, #A82424 50%, #5E1414 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  display: inline-block !important;
  margin: 0 auto !important;
  text-align: center !important;
}

/* 2. Meta Bar */
.single-post-meta-bar {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #6E685C !important;
  margin-top: 14px !important;
}

.single-post-meta-bar .meta-item {
  display: inline-flex !important;
  align-items: center !important;
}

.single-post-meta-bar .meta-item i,
.single-post-meta-bar .meta-item svg {
  color: #D4AF37 !important;
  fill: #D4AF37 !important;
  margin-right: 6px !important;
  font-size: 14px !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

.single-post-meta-bar .meta-category a {
  color: #7A1C1C !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

.single-post-meta-bar .meta-category a:hover {
  color: #D4AF37 !important;
}

.single-post-meta-bar .meta-divider {
  color: #D4AF37 !important;
  opacity: 0.6 !important;
}

/* ================================================
   HERO OVERLAY DARK: Override màu chữ cho nền xanh
   ================================================ */

/* Danh mục (eyebrow) — chữ trắng + viền vàng */
.single-post-hero-full .single-post-tag-pill {
  background: rgba(212, 175, 55, 0.15) !important;
  border-color: rgba(212, 175, 55, 0.5) !important;
  color: rgba(255, 255, 255, 0.92) !important;
}
.single-post-hero-full .single-post-tag-pill a {
  color: rgba(255, 255, 255, 0.85) !important;
}
.single-post-hero-full .single-post-tag-pill a:hover {
  color: #F7DF9B !important;
}
.single-post-hero-full .single-post-tag-pill span {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* SVG divider — giữ vàng, thêm glow */
.single-post-hero-full .story-svg-divider svg {
  filter: drop-shadow(0 0 6px rgba(247, 223, 155, 0.5));
}

/* Category label (NEWS) — vàng kim sáng */
.single-post-hero-full .single-post-main-title .articles-title-emerald {
  background: linear-gradient(135deg, #F7DF9B 0%, #D4AF37 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 1px 6px rgba(212, 175, 55, 0.4));
}

/* Tiêu đề bài viết — trắng tinh để nổi bật trên nền tối */
.single-post-hero-full .single-post-main-title .articles-title-burgundy {
  background: linear-gradient(135deg, #FFFFFF 0%, rgba(255,255,255,0.88) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,0.3));
}

/* Meta bar — trắng nhạt */
.single-post-hero-full .single-post-meta-bar {
  color: rgba(255, 255, 255, 0.80) !important;
}
.single-post-hero-full .single-post-meta-bar .meta-category a {
  color: #F7DF9B !important;
}
.single-post-hero-full .single-post-meta-bar .meta-category a:hover {
  color: #ffffff !important;
}


/* Single post wrapper: reset padding & overflow cho full-bleed */
.single-post-wrapper.blog-wrapper {
  padding-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 60px !important;
  background-color: #F8F4EA !important;
  overflow-x: hidden !important;
}

/* Content row kéo lên đè lên hero panoramic */
.single-post-wrapper > .row-large {
  position: relative !important;
  z-index: 10 !important;
  margin-top: -60px !important;
  padding-left: 4% !important;
  padding-right: 4% !important;
}

/* 3. Main Single Post Card */
.single-post-card {
  background: #FFFEFB !important;
  border-radius: 20px !important;
  border: 1px solid rgba(212, 175, 55, 0.28) !important;
  box-shadow:
    0 -4px 20px rgba(0, 0, 0, 0.06),
    0 16px 48px rgba(0, 0, 0, 0.07) !important;
  padding: 36px 40px !important;
  margin-bottom: 30px !important;
}

@media (max-width: 768px) {
  .single-post-wrapper > .row-large {
    margin-top: -100px !important;
  }
  .single-post-card {
    padding: 20px 18px !important;
    border-radius: 14px !important;
  }
}

/* Featured Thumbnail */
.single-post-featured-thumb {
  margin: -10px -10px 25px -10px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1px solid rgba(212, 175, 55, 0.2) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05) !important;
}

.single-post-featured-thumb img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: cover !important;
  max-height: 460px !important;
}

/* 4. Article Content Typography */
.single-post-body {
  font-family: var(--font-system) !important;
  font-size: 16px !important;
  line-height: 1.85 !important;
  color: #0D2F23 !important;
}

.single-post-body p {
  font-family: var(--font-system) !important;
  font-size: 16px !important;
  line-height: 1.85 !important;
  color: #2D3732 !important;
  margin-bottom: 20px !important;
}

.single-post-body h2 {
  font-family: var(--font-system) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #091D16 !important;
  margin: 30px 0 16px 0 !important;
  padding-left: 14px !important;
  border-left: 4px solid #D4AF37 !important;
  line-height: 1.4 !important;
}

.single-post-body h3 {
  font-family: var(--font-system) !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  color: #7A1C1C !important;
  margin: 25px 0 12px 0 !important;
  line-height: 1.4 !important;
}

.single-post-body h4 {
  font-family: var(--font-system) !important;
  font-size: 16.5px !important;
  font-weight: 700 !important;
  color: #102615 !important;
  margin: 20px 0 10px 0 !important;
}

.single-post-body blockquote,
.single-post-body .wp-block-quote {
  background: #F8F4EA !important;
  border-left: 4px solid #D4AF37 !important;
  padding: 16px 20px !important;
  margin: 24px 0 !important;
  border-radius: 0 10px 10px 0 !important;
  font-style: italic !important;
  color: #091D16 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
}

.single-post-body blockquote p,
.single-post-body .wp-block-quote p {
  font-family: var(--font-system) !important;
  font-size: 16.5px !important;
  margin-bottom: 0 !important;
  color: #091D16 !important;
}

.single-post-body ul,
.single-post-body ol {
  margin: 16px 0 22px 20px !important;
  padding-left: 10px !important;
}

.single-post-body li {
  font-family: var(--font-system) !important;
  font-size: 15.5px !important;
  line-height: 1.75 !important;
  color: #2D3732 !important;
  margin-bottom: 6px !important;
}

.single-post-body img {
  border-radius: 10px !important;
  margin: 20px 0 !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06) !important;
  max-width: 100% !important;
  height: auto !important;
}

.single-post-body table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 22px 0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

.single-post-body th {
  background: #091D16 !important;
  color: #ffffff !important;
  font-family: var(--font-system) !important;
  font-weight: 700 !important;
  padding: 10px 14px !important;
  border: 1px solid #102615 !important;
}

.single-post-body td {
  padding: 10px 14px !important;
  border: 1px solid rgba(212, 175, 55, 0.25) !important;
  font-family: var(--font-system) !important;
}

/* 5. Footer Meta (Tags & Share) */
.single-post-footer-meta {
  margin-top: 30px !important;
  padding-top: 20px !important;
  border-top: 1px solid rgba(212, 175, 55, 0.25) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.single-post-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
}

.single-post-tags .tags-label {
  font-family: var(--font-system) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #7A1C1C !important;
  margin-right: 4px !important;
}

.single-post-tags .tag-item a,
.single-post-tags a {
  display: inline-block !important;
  padding: 4px 12px !important;
  border-radius: 99px !important;
  background: #F8F4EA !important;
  border: 1px solid rgba(212, 175, 55, 0.35) !important;
  color: #091D16 !important;
  font-family: var(--font-system) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
}

.single-post-tags a:hover {
  background: #7A1C1C !important;
  color: #ffffff !important;
  border-color: #7A1C1C !important;
}

/* Social Share Bar */
.single-post-share-bar {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
  background: #F8F4EA !important;
  padding: 12px 18px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(212, 175, 55, 0.3) !important;
}

.single-post-share-bar .share-label {
  font-family: var(--font-system) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #091D16 !important;
}

.share-buttons-group {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.share-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: 36px !important;
  padding: 0 15px !important;
  border-radius: 6px !important;
  font-family: var(--font-system) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  border: none !important;
  cursor: pointer !important;
  line-height: 1 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  transition: all 0.25s ease !important;
}

.share-facebook {
  background: #1877F2 !important;
  color: #ffffff !important;
}

.share-facebook:hover {
  background: #1464cc !important;
  transform: translateY(-1px) !important;
}

.share-zalo {
  background: #0068FF !important;
  color: #ffffff !important;
}

.share-zalo:hover {
  background: #0052cc !important;
  transform: translateY(-1px) !important;
}

.share-copy {
  background: #091D16 !important;
  color: #D4AF37 !important;
  border: 1px solid #D4AF37 !important;
}

.share-copy:hover {
  background: #7A1C1C !important;
  color: #ffffff !important;
  border-color: #7A1C1C !important;
  transform: translateY(-1px) !important;
}

/* 6. Author Card */
.single-post-author-card {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  background: #F8F4EA !important;
  border: 1px solid rgba(212, 175, 55, 0.35) !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
  margin-top: 24px !important;
}

@media (max-width: 600px) {
  .single-post-author-card {
    flex-direction: column !important;
    text-align: center !important;
  }
}

.author-avatar-wrap {
  flex: 0 0 60px !important;
  width: 60px !important;
  height: 60px !important;
  flex-shrink: 0 !important;
}

.author-avatar-wrap img,
.comment-author img,
.comment-author .avatar {
  width: 60px !important;
  height: 60px !important;
  min-width: 60px !important;
  min-height: 60px !important;
  max-width: 60px !important;
  max-height: 60px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  aspect-ratio: 1 / 1 !important;
  flex-shrink: 0 !important;
  display: block !important;
  border: 2px solid #D4AF37 !important;
  box-shadow: 0 4px 10px rgba(212, 175, 55, 0.2) !important;
}

.author-title {
  font-family: var(--font-system) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  color: #7A1C1C !important;
  margin: 0 0 4px 0 !important;
}

.author-bio {
  font-family: var(--font-system) !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  color: #575249 !important;
  margin: 0 !important;
}

/* 7. Related Posts Section */
.related-posts-section {
  margin-top: 35px !important;
}

.related-header {
  margin-bottom: 22px !important;
}

.related-title {
  font-family: var(--font-system) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #091D16 !important;
  margin-bottom: 8px !important;
}

.related-grid-3col {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 18px !important;
}

@media (max-width: 850px) {
  .related-grid-3col {
    grid-template-columns: 1fr !important;
  }
}

/* 8. VIP Sidebar Widget */
.widget_vip_consultation {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

.vip-sidebar-box {
  background: linear-gradient(145deg, #091D16 0%, #102615 100%) !important;
  border: 1px solid #D4AF37 !important;
  border-radius: 14px !important;
  padding: 20px 18px !important;
  text-align: center !important;
  box-shadow: 0 8px 20px rgba(9, 29, 22, 0.2) !important;
  margin-bottom: 22px !important;
}

.vip-badge-pill {
  display: inline-block !important;
  padding: 3px 12px !important;
  border-radius: 99px !important;
  background: linear-gradient(135deg, #FFF0B3 0%, #D4AF37 100%) !important;
  color: #091D16 !important;
  font-family: var(--font-system) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  margin-bottom: 10px !important;
  letter-spacing: 0.05em !important;
}

.vip-sidebar-title {
  font-family: var(--font-system) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #F7DF9B !important;
  line-height: 1.4 !important;
  margin-bottom: 8px !important;
}

.vip-sidebar-desc {
  font-family: var(--font-system) !important;
  font-size: 12.5px !important;
  color: #CBD8CE !important;
  line-height: 1.45 !important;
  margin-bottom: 15px !important;
}

.vip-sidebar-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  height: 38px !important;
  padding: 0 16px !important;
  border-radius: 6px !important;
  background: #7A1C1C !important;
  color: #ffffff !important;
  font-family: var(--font-system) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
  border: 1px solid rgba(247, 223, 155, 0.3) !important;
}

.vip-sidebar-btn:hover {
  background: #D4AF37 !important;
  color: #091D16 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3) !important;
}

/* =========================================================
   THIẾT KẾ KHU VỰC BÌNH LUẬN (TINHTẾ, KHÔNG TRỒNG LỚP NỀN)
   ========================================================= */
.single-post-comments-container {
  margin-top: 25px !important;
  padding-top: 20px !important;
  border-top: 1px dashed rgba(212, 175, 55, 0.35) !important;
}

#comments,
.comments-area {
  background: #F8F4EA !important;
  border: 1px solid rgba(212, 175, 55, 0.35) !important;
  border-radius: 14px !important;
  padding: 22px 24px !important;
  margin-top: 15px !important;
}

/* Triệt tiêu khung lồng khung (Card-inside-card) do theme Flatsome sinh ra */
#respond,
.comment-respond,
#commentform,
.comment-form-wrapper {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

@media (max-width: 600px) {
  #comments,
  .comments-area {
    padding: 16px 16px !important;
  }
}

.comments-title,
#reply-title,
.comment-reply-title {
  font-family: var(--font-system) !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #091D16 !important;
  margin-bottom: 16px !important;
  padding-bottom: 10px !important;
  border-bottom: 2px solid rgba(212, 175, 55, 0.4) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  background: transparent !important;
}

.comment-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 24px 0 !important;
}

.comment-list .comment {
  margin-bottom: 16px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px dashed rgba(212, 175, 55, 0.3) !important;
}

.comment-list .comment:last-child {
  border-bottom: none !important;
}

.comment-body {
  display: flex !important;
  gap: 14px !important;
  align-items: flex-start !important;
}

.comment-meta {
  font-family: var(--font-system) !important;
  font-size: 12.5px !important;
  color: #6E685C !important;
  margin-bottom: 4px !important;
}

.comment-author .fn {
  font-weight: 700 !important;
  color: #7A1C1C !important;
  font-style: normal !important;
}

.comment-content p {
  font-family: var(--font-system) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #2D3732 !important;
  margin-bottom: 6px !important;
}

/* Comment Form Styling */
.comment-form {
  display: grid !important;
  gap: 12px !important;
}

.comment-form p {
  margin-bottom: 0 !important;
}

.comment-form label {
  display: block !important;
  font-family: var(--font-system) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #091D16 !important;
  margin-bottom: 4px !important;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100% !important;
  padding: 10px 14px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(212, 175, 55, 0.4) !important;
  background: #ffffff !important;
  font-family: var(--font-system) !important;
  font-size: 13.5px !important;
  color: #0D2F23 !important;
  transition: all 0.25s ease !important;
  box-sizing: border-box !important;
}

.comment-form textarea {
  min-height: 100px !important;
}

.comment-form input:focus,
.comment-form textarea:focus {
  border-color: #D4AF37 !important;
  outline: none !important;
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.25) !important;
}

.comment-form .form-submit {
  margin-top: 8px !important;
}

.comment-form input[type="submit"],
.comment-form .submit,
#submit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 38px !important;
  padding: 0 24px !important;
  border-radius: 6px !important;
  background: #7A1C1C !important;
  color: #ffffff !important;
  font-family: var(--font-system) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border: 1px solid rgba(247, 223, 155, 0.3) !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 4px 12px rgba(122, 28, 28, 0.2) !important;
}


.comment-form input[type="submit"]:hover,
.comment-form .submit:hover,
#submit:hover {
  background: #D4AF37 !important;
  color: #091D16 !important;
  border-color: #D4AF37 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(212, 175, 55, 0.3) !important;
}

/* ============================================================
   SILVERLIFE SYSTEM DESIGN v2.5 - SHARED BLOCK STYLES & UTILITIES
============================================================= */
#wrapper, #main, .page-wrapper, .svc-page, .svc-story, #content {
  overflow: visible !important;
}

:root {
  --font-project-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.svc-page,
.svc-page *,
.svc-page h1, .svc-page h2, .svc-page h3, .svc-page h4, .svc-page h5, .svc-page h6,
.svc-page p, .svc-page li, .svc-page a, .svc-page span, .svc-page div, .svc-page button,
.svc-page .svc-h2, .svc-page .svc-hero h1, .svc-page .svc-hero-welcome,
.svc-page .svc-story-lead, .svc-page .svc-quote-box p, .svc-page .svc-story-copy h3,
.svc-page .svc-t-name, .svc-page .svc-p-body h3,
.sec-heading-dark, .sec-heading-burgundy, .sec-heading-gold {
  font-family: var(--font-project-main), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Metallic Gradient Heading Tokens */
.sec-heading-dark {
  background: linear-gradient(135deg, #102615 0%, #1E4623 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  display: inline-block !important;
}

.sec-heading-burgundy {
  background: linear-gradient(135deg, #7A1C1C 0%, #B82828 50%, #7A1C1C 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  display: inline-block !important;
  filter: drop-shadow(0 2px 8px rgba(122, 28, 28, 0.15)) !important;
}

.sec-heading-gold {
  background: linear-gradient(135deg, #FFF0B3 0%, #D4AF37 50%, #E6C665 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  display: inline-block !important;
  filter: drop-shadow(0 2px 14px rgba(212, 175, 55, 0.45)) !important;
}

/* Shared Centered Header Structure */
.svc-head {
  max-width: 820px !important;
  margin: 0 auto 52px !important;
  text-align: center !important;
}

.svc-h2 {
  font-weight: 850 !important;
  font-size: clamp(32px, 4vw, 46px) !important;
  line-height: 1.2 !important;
  margin: 0 0 14px !important;
  letter-spacing: -.02em !important;
  text-align: center !important;
}

.svc-sub {
  font-size: 16.5px !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  max-width: 680px !important;
  margin: 0 auto !important;
  color: #575249 !important;
  text-align: center !important;
}

/* Pill Badges (Gold & Burgundy Pill Shapes) */
.svc-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 8px 24px !important;
  border-radius: 99px !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  margin: 0 auto 16px !important;
  box-shadow: 0 4px 15px rgba(0,0,0,.06) !important;
  text-align: center !important;
}

.svc-pill.on-dark {
  color: #F7DF9B !important;
  background: rgba(247,223,155,.1) !important;
  border: 1px solid rgba(247,223,155,.35) !important;
}

.svc-pill.on-light {
  color: #7A1C1C !important;
  background: rgba(122,28,28,.07) !important;
  border: 1px solid rgba(122,28,28,.22) !important;
}

/* SVG Divider Alignment */
.story-svg-divider {
  margin: 12px auto 18px !important;
  text-align: center !important;
}

.story-svg-divider svg {
  max-width: 260px !important;
  width: 100% !important;
  height: 26px !important;
  margin: 0 auto !important;
  display: block !important;
}

/* Scroll Animations */
.sl-anim {
  opacity: 1;
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

body:not(.uxbuilder-mode) html.js .sl-anim:not(.sl-animated) {
  opacity: 0;
}

.sl-fade-up { transform: translateY(35px); }
.sl-fade-left { transform: translateX(-35px); }
.sl-fade-right { transform: translateX(35px); }
.sl-zoom-in { transform: scale(0.94); }

.sl-anim.sl-animated,
body.uxbuilder-mode .sl-anim,
.uxbuilder-canvas .sl-anim,
.ux-builder-canvas .sl-anim,
[data-uxbuilder-id] .sl-anim {
  opacity: 1 !important;
  transform: translate(0, 0) scale(1) !important;
  visibility: visible !important;
}

/* ==========================================================================
   STYLE CỬA SỔ XEM NHANH (QUICK VIEW MODAL) & NÚT XEM GIỎ HÀNG (ADDED_TO_CART)
   Chuẩn phong cách Western Luxury SilverLife (Emerald Green & Metallic Gold)
   ========================================================================== */

/* --- 1. NÚT XEM GIỎ HÀNG (a.added_to_cart / .added_to_cart.wc-forward) --- */
a.added_to_cart,
a.added_to_cart.wc-forward,
.cat-card-body a.added_to_cart,
.cat-card-body a.added_to_cart.wc-forward,
.product-small a.added_to_cart,
.product-small .add-to-cart-button a.added_to_cart,
.woocommerce ul.products li.product a.added_to_cart,
.product-lightbox-inner a.added_to_cart,
.product-info a.added_to_cart {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 38px !important;
  margin-top: 0 !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  border: 1.5px solid #D4AF37 !important;
  color: #102615 !important;
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  background: linear-gradient(135deg, #F7DF9B 0%, #D4AF37 50%, #B98A3A 100%) !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  box-shadow: 0 4px 14px rgba(212, 175, 55, 0.35) !important;
  line-height: 1 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

/* --- HIDE ADD TO CART BUTTON WHEN PRODUCT IS ADDED --- */
.cat-card-body a.add_to_cart_button.added,
.product-small a.add_to_cart_button.added,
.product-small .add-to-cart-button a.add_to_cart_button.added,
.woocommerce ul.products li.product a.add_to_cart_button.added,
a.add_to_cart_button.added {
  display: none !important;
}

.cat-card-body a.added_to_cart,
.product-small a.added_to_cart,
.product-small .add-to-cart-button a.added_to_cart,
.woocommerce ul.products li.product a.added_to_cart {
  width: 100% !important;
  max-width: 220px !important;
  margin: 0 auto !important;
}

form.cart a.added_to_cart.wc-forward,
.product-lightbox-inner a.added_to_cart,
.product-info a.added_to_cart {
  height: 44px !important;
  padding: 0 24px !important;
  font-size: 13px !important;
  margin-top: 10px !important;
  width: auto !important;
  max-width: none !important;
  min-width: 180px !important;
}

/* Hiệu ứng Ánh kim Quét nhẹ (Shimmer) khi Hover nút Xem giỏ hàng */
a.added_to_cart::before,
.cat-card-body a.added_to_cart::before,
.product-small a.added_to_cart::before,
.product-small .add-to-cart-button a.added_to_cart::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
  pointer-events: none;
}

a.added_to_cart:hover::before,
.cat-card-body a.added_to_cart:hover::before,
.product-small a.added_to_cart:hover::before,
.product-small .add-to-cart-button a.added_to_cart:hover::before {
  left: 140%;
}

a.added_to_cart:hover,
a.added_to_cart.wc-forward:hover,
.cat-card-body a.added_to_cart:hover,
.product-small a.added_to_cart:hover,
.product-small .add-to-cart-button a.added_to_cart:hover {
  background: linear-gradient(135deg, #164627 0%, #102615 100%) !important;
  color: #F7DF9B !important;
  border-color: #D4AF37 !important;
  box-shadow: 0 8px 22px rgba(16, 38, 21, 0.35) !important;
  transform: translateY(-2px) !important;
}

a.added_to_cart::after,
.cat-card-body a.added_to_cart::after,
.product-small a.added_to_cart::after,
.product-small .add-to-cart-button a.added_to_cart::after {
  content: " \f07a";
  font-family: "Font Awesome 6 Free", "FontAwesome" !important;
  font-weight: 900 !important;
  font-size: 12px !important;
  margin-left: 4px !important;
}

/* Spinner khi bấm Thêm vào giỏ hàng */
.cat-card-body a.add_to_cart_button.loading::after,
a.add_to_cart_button.loading::after {
  content: "" !important;
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  border: 2px solid rgba(16, 38, 21, 0.3) !important;
  border-top-color: #102615 !important;
  border-radius: 50% !important;
  animation: slSpin 0.6s linear infinite !important;
  margin-left: 6px !important;
}

@keyframes slSpin {
  to { transform: rotate(360deg); }
}


/* --- 2. STYLE CỬA SỔ XEM NHANH (QUICK VIEW LIGHTBOX / MAGNIFIC POPUP) --- */

/* Nền mờ phía sau popup (Backdrop Blur) */
.mfp-bg {
  background: rgba(16, 38, 21, 0.78) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  opacity: 0.98 !important;
}

/* Khung mfp-content ngoài cùng: Giữ nguyên chiều rộng 980px chuẩn ban đầu */
.mfp-content {
  max-width: 980px !important;
  width: 92vw !important;
  margin: 0 auto !important;
  position: relative !important;
  overflow: visible !important;
}

/* Khung Cửa Sổ Xem Nhanh (Main Popup Container - Bo tròn 4 góc 20px & Viền Vàng 360°) */
.product-quick-view-container,
.product-quick-view-container.lightbox-content,
.mfp-content .product-quick-view-container,
.sl-quick-view-modal {
  background: #ffffff !important;
  border-radius: 20px !important;
  border: 1.5px solid rgba(212, 175, 55, 0.55) !important;
  box-shadow: 0 25px 65px -15px rgba(16, 38, 21, 0.45), 0 0 35px rgba(212, 175, 55, 0.2) !important;
  overflow: hidden !important;
  max-width: 980px !important;
  width: 100% !important;
  max-height: 88vh !important;
  margin: 0 auto !important;
  position: relative !important;
  box-sizing: border-box !important;
}

/* Grid Layout: Giữ nguyên chiều rộng 980px, GAP 32px & Padding 28px/32px đệm mép */
.product-quick-view-container .sl-qv-grid-wrap,
.product-quick-view-container .row,
.product-quick-view-container .sl-qv-row {
  display: grid !important;
  grid-template-columns: 46% 1fr !important;
  gap: 32px !important; /* Khoảng cách GAP rộng rãi giữa 2 cột */
  padding: 28px 32px !important; /* Padding đệm để nội dung KHÔNG dính vào mép lightbox */
  margin: 0 !important;
  max-height: 88vh !important;
  width: 100% !important;
  box-sizing: border-box !important;
  border-radius: 20px !important;
  overflow: hidden !important;
}



/* Nút Đóng Popup (X) Tròn Ánh Kim Nổi Trên Cùng */
.mfp-close-btn-in .mfp-close,
.mfp-close,
.product-quick-view-container .mfp-close {
  width: 38px !important;
  height: 38px !important;
  line-height: 36px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #164627 0%, #102615 100%) !important;
  color: #F7DF9B !important;
  border: 1.5px solid rgba(212, 175, 55, 0.6) !important;
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  opacity: 1 !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  box-shadow: 0 4px 16px rgba(16, 38, 21, 0.35) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  text-align: center !important;
  z-index: 1001 !important;
}

.mfp-close:hover,
.product-quick-view-container .mfp-close:hover {
  background: linear-gradient(135deg, #F7DF9B 0%, #D4AF37 100%) !important;
  color: #102615 !important;
  border-color: #D4AF37 !important;
  transform: rotate(90deg) scale(1.08) !important;
  box-shadow: 0 6px 18px rgba(212, 175, 55, 0.5) !important;
}

/* CỘT TRÁI: Thư viện Ảnh (Đồng bộ 1 nền duy nhất - Không lồng khung) */
.product-quick-view-container .product-gallery,
.product-quick-view-container .sl-qv-gallery-col {
  width: 100% !important;
  max-width: 100% !important;
  padding: 24px !important;
  background: #FAF7F2 !important;
  border-radius: 16px !important;
  border: 1.5px solid rgba(212, 175, 55, 0.3) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  position: relative !important;
  box-sizing: border-box !important;
}

/* Ẩn triệt để các badge giảm giá mặc định bị trùng lặp của Flatsome/WooCommerce trong Quick View */
.product-quick-view-container .badge-container,
.product-quick-view-container .callout.badge,
.product-quick-view-container .badge,
.product-quick-view-container .badge-circle,
.product-quick-view-container span.onsale:not(.sl-qv-sale-badge),
.product-quick-view-container .out-of-stock-label {
  display: none !important;
}

/* Huy hiệu giảm giá chuẩn duy nhất (Single Premium Sale Badge) */
.product-quick-view-container .sl-qv-sale-badge {
  display: inline-block !important;
  position: absolute !important;
  top: 18px !important;
  left: 18px !important;
  z-index: 99 !important;
  background: linear-gradient(135deg, #7A1C1C 0%, #A82424 100%) !important;
  color: #F7DF9B !important;
  font-family: 'Inter', 'Plus Jakarta Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 5px 14px !important;
  border-radius: 999px !important;
  border: 1.5px solid rgba(247, 223, 155, 0.45) !important;
  box-shadow: 0 4px 14px rgba(122, 28, 28, 0.35) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  pointer-events: none !important;
  margin: 0 !important;
}

/* Khung slider & ảnh sản phẩm: Nền trong suốt, loại bỏ ô trắng lồng bên trong */
.product-quick-view-container .product-gallery-slider,
.product-quick-view-container .slider,
.product-quick-view-container .sl-qv-slider {
  width: 100% !important;
  max-height: 420px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  margin: 0 !important;
}

.product-quick-view-container .product-gallery img,
.product-quick-view-container .slide img,
.product-quick-view-container .sl-qv-slider img {
  width: 100% !important;
  max-height: 380px !important;
  min-height: 260px !important;
  object-fit: contain !important;
  border-radius: 12px !important;
  display: block !important;
  margin: 0 auto !important;
  filter: drop-shadow(0 6px 18px rgba(16, 38, 21, 0.1)) !important;
}

/* Nút chuyển ảnh Slider (Arrows) & Dots chuẩn sang trọng */
.product-quick-view-container .flickity-prev-next-button {
  background: rgba(16, 38, 21, 0.75) !important;
  border: 1px solid rgba(247, 223, 155, 0.4) !important;
  color: #F7DF9B !important;
  border-radius: 50% !important;
  transition: all 0.25s ease !important;
}
.product-quick-view-container .flickity-prev-next-button:hover {
  background: #D4AF37 !important;
  color: #102615 !important;
}
.product-quick-view-container .flickity-page-dots .dot {
  background: #D4AF37 !important;
  opacity: 0.35 !important;
}
.product-quick-view-container .flickity-page-dots .dot.is-selected {
  opacity: 1 !important;
  background: #102615 !important;
}


/* CỘT PHẢI: Thông tin Chi Tiết Sản Phẩm (Nội dung Đã Thêm Padding & Gap) */
.product-quick-view-container .product-info,
.product-quick-view-container .sl-qv-info-col {
  width: 100% !important;
  max-width: 100% !important;
  padding: 4px 8px 4px 0 !important;
  max-height: calc(88vh - 56px) !important;
  overflow-y: auto !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
}

/* Custom Scrollbar cho Cột Thông tin */
.product-quick-view-container .product-info::-webkit-scrollbar {
  width: 6px;
}
.product-quick-view-container .product-info::-webkit-scrollbar-track {
  background: rgba(212, 175, 55, 0.08);
  border-radius: 10px;
}
.product-quick-view-container .product-info::-webkit-scrollbar-thumb {
  background: rgba(212, 175, 55, 0.35);
  border-radius: 10px;
}
.product-quick-view-container .product-info::-webkit-scrollbar-thumb:hover {
  background: #D4AF37;
}

.product-quick-view-container .product-lightbox-inner,
.product-quick-view-container .sl-qv-inner {
  padding: 0 !important;
  margin: 0 !important;
}

/* TIÊU ĐỀ SẢN PHẨM (Style Cao Cấp Xanh Lục Bảo SilverLife) */
.product-quick-view-container h1,
.product-quick-view-container .product-title,
.product-quick-view-container .entry-title,
.product-quick-view-container .sl-qv-title,
.product-quick-view-container .product-info h1,
.product-quick-view-container .entry-summary h1,
.product-quick-view-container .product-lightbox-inner h1,
.product-quick-view-container a.plain h1 {
  font-family: 'Inter', 'Plus Jakarta Sans', 'Quicksand', system-ui, -apple-system, sans-serif !important;
  font-size: 23px !important;
  font-weight: 850 !important;
  line-height: 1.38 !important;
  color: #102615 !important;
  margin: 0 0 12px 0 !important;
  padding-right: 36px !important;
  letter-spacing: -0.018em !important;
  text-transform: none !important;
  display: block !important;
}

.product-quick-view-container h1 a,
.product-quick-view-container .product-title a,
.product-quick-view-container .sl-qv-title a,
.product-quick-view-container a.plain,
.product-quick-view-container .sl-qv-title-link {
  color: #102615 !important;
  text-decoration: none !important;
  transition: color 0.25s ease !important;
}

.product-quick-view-container h1 a:hover,
.product-quick-view-container .product-title a:hover,
.product-quick-view-container .sl-qv-title a:hover,
.product-quick-view-container a.plain:hover,
.product-quick-view-container .sl-qv-title-link:hover {
  color: #7A1C1C !important;
}

/* Đường phân cách Vàng sang trọng */
.product-quick-view-container .is-divider,
.product-quick-view-container .sl-qv-divider {
  height: 2.5px !important;
  width: 54px !important;
  background: linear-gradient(90deg, #D4AF37 0%, rgba(212, 175, 55, 0.2) 100%) !important;
  margin: 12px 0 20px 0 !important;
  border: none !important;
}

/* Giá sản phẩm đỏ Burgundy (Rõ ràng, Tách biệt) */
.product-quick-view-container .price {
  font-family: 'Inter', 'Plus Jakarta Sans', 'Quicksand', sans-serif !important;
  font-size: 24px !important;
  font-weight: 850 !important;
  color: #7A1C1C !important;
  margin: 0 0 22px 0 !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.product-quick-view-container .price .amount,
.product-quick-view-container .price bdi {
  font-family: 'Inter', 'Plus Jakarta Sans', 'Quicksand', sans-serif !important;
  font-size: 24px !important;
  font-weight: 850 !important;
  color: #7A1C1C !important;
}

.product-quick-view-container .price del .amount,
.product-quick-view-container .price del bdi {
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #8C8577 !important;
  text-decoration: line-through !important;
  margin-right: 4px !important;
}

.product-quick-view-container .price ins {
  text-decoration: none !important;
}

.product-quick-view-container .price ins .amount,
.product-quick-view-container .price ins bdi {
  font-size: 26px !important;
  font-weight: 900 !important;
  color: #7A1C1C !important;
}

/* Mô tả ngắn & Danh sách đặc điểm (Bullet Points Thông thoáng) */
.product-quick-view-container .product-short-description,
.product-quick-view-container .entry-summary p {
  font-family: 'Inter', 'Plus Jakarta Sans', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: #4A453C !important;
  margin-bottom: 20px !important;
}

.product-quick-view-container .entry-summary ul {
  margin: 14px 0 22px 0 !important;
  padding-left: 0 !important;
  list-style: none !important;
}

.product-quick-view-container .entry-summary ul li {
  margin-bottom: 10px !important;
  line-height: 1.6 !important;
  font-size: 13.5px !important;
  color: #3A352C !important;
  position: relative !important;
  padding-left: 18px !important;
}

.product-quick-view-container .entry-summary ul li::before {
  content: "•" !important;
  position: absolute !important;
  left: 0 !important;
  top: -1px !important;
  color: #D4AF37 !important;
  font-size: 16px !important;
  font-weight: bold !important;
}

/* Trạng thái Còn hàng (Stock Tag) */
.product-quick-view-container p.stock,
.product-quick-view-container .in-stock {
  font-size: 13px !important;
  font-weight: 750 !important;
  color: #164627 !important;
  background: rgba(22, 70, 39, 0.08) !important;
  padding: 5px 14px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  border: 1px solid rgba(22, 70, 39, 0.2) !important;
  margin-bottom: 22px !important;
}

/* Form Thêm vào Giỏ hàng & Số lượng (Cân đối & Thoáng) */
.product-quick-view-container form.cart {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 22px 0 26px 0 !important;
  flex-wrap: wrap !important;
}

.product-quick-view-container form.cart .quantity {
  display: inline-flex !important;
  align-items: center !important;
  border: 1.5px solid rgba(212, 175, 55, 0.6) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  height: 44px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
  margin: 0 !important;
}

.product-quick-view-container form.cart .quantity .minus,
.product-quick-view-container form.cart .quantity .plus,
.product-quick-view-container form.cart .quantity button {
  width: 40px !important;
  height: 42px !important;
  line-height: 40px !important;
  background: transparent !important;
  border: none !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #102615 !important;
  cursor: pointer !important;
  transition: background 0.2s ease !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.product-quick-view-container form.cart .quantity .minus:hover,
.product-quick-view-container form.cart .quantity .plus:hover,
.product-quick-view-container form.cart .quantity button:hover {
  background: rgba(247, 223, 155, 0.35) !important;
}

.product-quick-view-container form.cart .quantity .qty,
.product-quick-view-container form.cart .quantity input[type="number"] {
  width: 48px !important;
  height: 42px !important;
  line-height: 42px !important;
  text-align: center !important;
  border: none !important;
  border-left: 1px solid rgba(212, 175, 55, 0.3) !important;
  border-right: 1px solid rgba(212, 175, 55, 0.3) !important;
  font-size: 15px !important;
  font-weight: 750 !important;
  font-family: 'Inter', 'Plus Jakarta Sans', sans-serif !important;
  color: #102615 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Nút Thêm vào giỏ hàng chính trong Quick View */
.product-quick-view-container form.cart .single_add_to_cart_button,
.product-quick-view-container form.cart button[name="add-to-cart"] {
  flex: 1 !important;
  min-width: 190px !important;
  height: 44px !important;
  padding: 0 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: linear-gradient(135deg, #164627 0%, #102615 100%) !important;
  color: #ffffff !important;
  font-family: 'Inter', 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border-radius: 999px !important;
  border: 1.5px solid rgba(212, 175, 55, 0.75) !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  box-shadow: 0 4px 16px rgba(16, 38, 21, 0.25) !important;
  line-height: 1 !important;
  margin: 0 !important;
}

.product-quick-view-container form.cart .single_add_to_cart_button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
  pointer-events: none;
}

.product-quick-view-container form.cart .single_add_to_cart_button:hover::before {
  left: 140%;
}

.product-quick-view-container form.cart .single_add_to_cart_button:hover {
  background: linear-gradient(135deg, #F7DF9B 0%, #D4AF37 50%, #B98A3A 100%) !important;
  color: #102615 !important;
  border-color: #D4AF37 !important;
  box-shadow: 0 8px 22px rgba(212, 175, 55, 0.45) !important;
  transform: translateY(-2px) !important;
}

/* Thông tin Meta (Mã SKU & Danh mục) */
.product-quick-view-container .product_meta {
  font-family: 'Inter', 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13px !important;
  color: #787267 !important;
  border-top: 1px dashed rgba(212, 175, 55, 0.35) !important;
  padding-top: 20px !important;
  margin-top: 24px !important;
  line-height: 1.8 !important;
}

.product-quick-view-container .product_meta > span {
  display: block !important;
  margin-bottom: 6px !important;
}

.product-quick-view-container .product_meta a {
  color: #102615 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.product-quick-view-container .product_meta a:hover {
  color: #7A1C1C !important;
}

/* RESPONSIVE MOBILE CHO QUICK VIEW LIGHTBOX */
@media (max-width: 768px) {
  .product-quick-view-container,
  .sl-quick-view-modal {
    max-height: 90vh !important;
    overflow-y: auto !important;
  }
  .product-quick-view-container .sl-qv-grid-wrap,
  .product-quick-view-container .row,
  .product-quick-view-container .sl-qv-row {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 20px 16px !important;
    max-height: none !important;
  }
  .product-quick-view-container .product-gallery,
  .product-quick-view-container .sl-qv-gallery-col,
  .product-quick-view-container .product-info,
  .product-quick-view-container .sl-qv-info-col {
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px !important;
    max-height: none !important;
  }
  .product-quick-view-container .product-gallery {
    border-bottom: 1px solid rgba(212, 175, 55, 0.2) !important;
  }
  .product-quick-view-container h1,
  .product-quick-view-container .product-title,
  .product-quick-view-container .sl-qv-title {
    font-size: 20px !important;
  }
  .product-quick-view-container .price {
    font-size: 20px !important;
  }
  .product-quick-view-container form.cart .single_add_to_cart_button {
    width: 100% !important;
  }
  .mfp-close-btn-in .mfp-close,
  .mfp-close,
  .product-quick-view-container .mfp-close {
    top: 12px !important;
    right: 12px !important;
  }
}
/* ==========================================================================
   SilverLife Ultra-Luxury E-commerce Popup Styling
   ========================================================================== */

/* Hiệu ứng vệt sáng quét qua nút bấm VIP */
@keyframes slGoldShine {
  0% { left: -100%; }
  20% { left: 200%; }
  100% { left: 200%; }
}

/* 1. Nền mờ dải ngân hà sang trọng (Deep Onyx Glassmorphism) */
.pum-overlay {
  background: rgba(10, 14, 23, 0.82) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* 2. Thẻ chứa Popup - Bo 24px, Viền kép dát vàng kim, Hiệu ứng phát sáng Gold Aura */
.pum-container {
  border-radius: 24px !important;
  box-shadow: 0 30px 80px -15px rgba(0, 0, 0, 0.7), 0 0 35px rgba(212, 175, 55, 0.35) !important;
  border: 1px solid rgba(212, 175, 55, 0.5) !important;
  outline: 1px solid rgba(212, 175, 55, 0.2) !important;
  outline-offset: -6px !important;
  background: #ffffff !important;
  padding: 0 !important;
  overflow: hidden !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  max-width: 580px !important;
  width: 92% !important;
}

/* Ẩn tiêu đề chữ đen thô mặc định */
.pum-title {
  display: none !important;
}

/* 3. Khung chứa ảnh banner */
.pum-content {
  padding: 0 !important;
  margin: 0 !important;
}

.pum-content img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;
}

/* 4. Nút Đóng (X) Floating Vàng Kim Luxury - Cố định ĐÚNG YÊN, KHÔNG XOAY KHI HOVER */
.pum-close {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 38px !important;
  height: 38px !important;
  background: rgba(15, 23, 42, 0.85) !important;
  color: #d4af37 !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(212, 175, 55, 0.6) !important;
  font-size: 20px !important;
  line-height: 34px !important;
  text-align: center !important;
  cursor: pointer !important;
  z-index: 99999 !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
  padding: 0 !important;
  transform: none !important;
}

.pum-close:hover {
  background: #d4af37 !important;
  color: #0b0f19 !important;
  transform: none !important; /* Đứng yên cố định, không di chuyển/xoay */
  border-color: #ffffff !important;
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.8) !important;
}

/* 5. Giao diện nội dung Ultra Luxury */
.sl-popup-wrapper {
  background: #ffffff;
  border-radius: 24px;
  overflow: hidden;
  text-align: center;
  position: relative;
}

.sl-popup-banner {
  position: relative;
  overflow: hidden;
  background: transparent !important;
  line-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.sl-popup-banner a {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}

.sl-popup-banner img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: bottom !important;
}

.sl-popup-banner:hover img {
  transform: scale(1.03);
}

.sl-popup-body {
  padding: 24px 28px 32px;
  background: linear-gradient(180deg, #ffffff 0%, #fdfbf7 60%, #f7f2e7 100%);
  position: relative;
}

/* Badge Vàng Dát Kim */
.sl-popup-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #bf953f 0%, #fcf6ba 25%, #b38728 50%, #fbf5b7 75%, #aa771c 100%);
  color: #1a1202;
  font-size: 11px;
  font-weight: 800;
  padding: 6px 18px;
  border-radius: 30px;
  letter-spacing: 1.5px;
  margin-bottom: 14px;
  text-transform: uppercase;
  box-shadow: 0 4px 15px rgba(179, 135, 40, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.6);
}

/* Tiêu đề Chữ Dát Vàng Ánh Kim */
.sl-popup-heading {
  font-size: 23px;
  font-weight: 800;
  letter-spacing: 0.5px;
  margin: 0 0 8px 0;
  line-height: 1.3;
  background: linear-gradient(135deg, #8a6410 0%, #b8860b 40%, #684803 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sl-popup-desc {
  font-size: 14px;
  color: #475569;
  margin: 0 0 24px 0;
  line-height: 1.6;
  font-weight: 500;
}

/* Nút Bấm VIP với hiệu ứng Ánh Kim Quét Ngang (Gold Sweep) */
.sl-popup-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 300px;
  padding: 16px 28px;
  background: linear-gradient(135deg, #111827 0%, #1f2937 100%);
  color: #fcf6ba !important;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 1px;
  border-radius: 35px;
  text-decoration: none !important;
  border: 1px solid rgba(212, 175, 55, 0.6);
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.4), 0 0 15px rgba(212, 175, 55, 0.2);
  transition: all 0.35s ease;
  position: relative;
  overflow: hidden;
}

.sl-popup-btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 245, 200, 0.4), transparent);
  transform: skewX(-25deg);
  animation: slGoldShine 4s infinite;
}

.sl-popup-btn-primary:hover {
  transform: translateY(-3px);
  background: linear-gradient(135deg, #b8860b 0%, #d4af37 100%);
  color: #0b0f19 !important;
  border-color: #ffffff;
  box-shadow: 0 14px 30px rgba(212, 175, 55, 0.5);
}

/* =========================================================
   SILVERLIFE DESIGN SYSTEM ENGINE (.cd-page)
   ========================================================= */

.cd-page {
  background-color: #F8F4EA !important;
  color: #1c2b22 !important;
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Manrope", sans-serif) !important;
  line-height: 1.75 !important;
  font-size: 15.5px !important;
  padding-bottom: 60px !important;
  overflow: visible !important;
}

/* 1. HERO TITLE BAND */
.cd-hero {
  position: relative !important;
  background: linear-gradient(135deg, #091d16 0%, #164627 50%, #091d16 100%) !important;
  color: #FFFFFF !important;
  padding: 56px 20px 48px !important;
  text-align: center !important;
  overflow: hidden !important;
}

.cd-hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(circle at 50% 30%, rgba(212, 175, 55, 0.15) 0%, transparent 70%) !important;
  pointer-events: none !important;
}

.cd-breadcrumb-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(9, 29, 22, 0.75) !important;
  border: 1px solid rgba(247, 223, 155, 0.45) !important;
  padding: 8px 24px !important;
  border-radius: 99px !important;
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Manrope", sans-serif) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #F7DF9B !important;
  backdrop-filter: blur(8px) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3) !important;
  margin-bottom: 8px !important;
  max-width: 100% !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
}

.cd-breadcrumb-pill a {
  color: rgba(247, 223, 155, 0.85) !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.cd-breadcrumb-pill a:hover {
  color: #FFFFFF !important;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.6) !important;
}

.cd-breadcrumb-pill .sep {
  color: rgba(247, 223, 155, 0.5) !important;
  font-size: 11px !important;
}

.cd-breadcrumb-pill .current {
  color: #F7DF9B !important;
  font-weight: 900 !important;
}

.cd-hero h1 {
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Manrope", sans-serif) !important;
  font-size: clamp(26px, 3.5vw, 40px) !important;
  font-weight: 900 !important;
  color: #F7DF9B !important;
  background: linear-gradient(135deg, #FFFFFF 0%, #F7DF9B 50%, #D4AF37 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  margin: 10px auto 16px !important;
  max-width: 900px !important;
  line-height: 1.3 !important;
  letter-spacing: 0.01em !important;
  text-transform: uppercase !important;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3)) !important;
}

.cd-hero-lead {
  font-size: clamp(15px, 1.4vw, 17.5px) !important;
  color: #e2ebe4 !important;
  max-width: 780px !important;
  margin: 0 auto 20px !important;
  line-height: 1.65 !important;
  font-weight: 400 !important;
}

.cd-hero .cd-meta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  color: rgba(247, 223, 155, 0.9) !important;
  background: rgba(9, 29, 22, 0.6) !important;
  padding: 6px 16px !important;
  border-radius: 99px !important;
  border: 1px solid rgba(212, 175, 55, 0.25) !important;
}

.cd-hero .cd-meta svg {
  width: 14px !important;
  height: 14px !important;
  fill: none !important;
  stroke: #F7DF9B !important;
  stroke-width: 2 !important;
}

/* 2. FEATURED IMAGE FIGURE */
.cd-hero-figure {
  max-width: 1120px !important;
  margin: -32px auto 44px !important;
  padding: 0 20px !important;
  position: relative !important;
  z-index: 10 !important;
}

.cd-hero-figure img {
  width: 100% !important;
  max-height: 480px !important;
  object-fit: cover !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 48px rgba(9, 29, 22, 0.16) !important;
  border: 1.5px solid rgba(212, 175, 55, 0.3) !important;
  display: block !important;
}

.cd-hero-figure figcaption {
  font-size: 13px !important;
  color: #556b5e !important;
  text-align: center !important;
  margin-top: 10px !important;
  font-style: italic !important;
}

/* 3. LAYOUT GRID: LEFT SIDEBAR TOC (270px) + RIGHT ARTICLE (980px) */
.cd-layout {
  max-width: 1360px !important;
  margin: 48px auto 0 !important;
  padding: 0 4vw !important;
  display: grid !important;
  grid-template-columns: 270px 1fr !important;
  grid-template-areas: "sidebar article" !important;
  gap: 48px !important;
  align-items: start !important;
}

/* LUXURY GOLD GLASS STICKY TOC CARD WIDGET (CHÍNH XÁC TRANG HỎI ĐÁP) */
.cd-toc {
  grid-area: sidebar !important;
  position: sticky !important;
  top: 165px !important;
  background: #FFFFFF !important;
  border-radius: 20px !important;
  padding: 22px 18px !important;
  border: 1.5px solid rgba(212, 175, 55, 0.35) !important;
  box-shadow: 0 12px 32px rgba(9, 29, 22, 0.08) !important;
  z-index: 90 !important;
}

.cd-toc-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 18px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid rgba(212, 175, 55, 0.25) !important;
}

.cd-toc-header-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #091d16 0%, #164627 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 10px rgba(9, 29, 22, 0.2) !important;
}

.cd-toc-header-icon svg {
  width: 16px !important;
  height: 16px !important;
  fill: none !important;
  stroke: #F7DF9B !important;
  stroke-width: 2.2 !important;
}

.cd-toc-title {
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Manrope", sans-serif) !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  color: #091d16 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

.cd-toc-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  gap: 10px !important;
}

.cd-toc-list li {
  margin: 0 !important;
  padding: 0 !important;
}

.cd-toc-list li::before {
  display: none !important;
}

.cd-toc-list a {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Manrope", sans-serif) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  color: #102615 !important;
  text-decoration: none !important;
  background: rgba(248, 244, 234, 0.7) !important;
  border: 1.5px solid rgba(199, 166, 92, 0.22) !important;
  transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  box-shadow: 0 2px 6px rgba(16, 38, 21, 0.03) !important;
}

.cd-toc-num {
  font-size: 12px !important;
  font-weight: 900 !important;
  color: #102615 !important;
  background: linear-gradient(135deg, #F7DF9B 0%, #D4AF37 100%) !important;
  padding: 3px 9px !important;
  border-radius: 6px !important;
  flex-shrink: 0 !important;
  box-shadow: 0 2px 6px rgba(212, 175, 55, 0.3) !important;
}

.cd-toc-text {
  flex-grow: 1 !important;
  color: inherit !important;
}

.cd-toc-list a:hover,
.cd-toc-list a.active,
.cd-toc-list a.cd-toc-active {
  background: linear-gradient(135deg, #091d16 0%, #164627 100%) !important;
  color: #F7DF9B !important;
  border-color: #D4AF37 !important;
  box-shadow: 0 8px 20px rgba(9, 29, 22, 0.22) !important;
  transform: translateX(4px) !important;
}

.cd-toc-list a:hover .cd-toc-num,
.cd-toc-list a.active .cd-toc-num,
.cd-toc-list a.cd-toc-active .cd-toc-num {
  background: #F7DF9B !important;
  color: #102615 !important;
  box-shadow: 0 3px 10px rgba(247, 223, 155, 0.6) !important;
}

/* 4. ARTICLE CONTENT AREA */
.cd-article {
  grid-area: article !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 980px !important;
  font-size: 15.5px !important;
  line-height: 1.75 !important;
  color: #1c2b22 !important;
}

.cd-article > p {
  margin: 0 0 18px !important;
  color: #1c2b22 !important;
  font-size: 15.5px !important;
  line-height: 1.75 !important;
}

.cd-article p strong {
  color: #091d16 !important;
}

/* TIÊU ĐỀ H2 SECTION CHUẨN TRANG HỎI ĐÁP & ARCHIVE-PRODUCT.PHP */
.cd-h2-block {
  position: relative;
  margin: 48px 0 20px !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
}

.cd-h2-block:first-child {
  margin-top: 0 !important;
}

.cd-h2-block h2,
.cd-article h2 {
  position: relative !important;
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Manrope", sans-serif) !important;
  font-weight: 800 !important;
  font-size: clamp(20px, 2.5vw, 28px) !important;
  color: #102615 !important;
  background: linear-gradient(135deg, #091d16 0%, #164627 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-transform: uppercase !important;
  letter-spacing: 0.01em !important;
  margin: 0 !important;
  line-height: 1.35 !important;
  display: block !important;
  border-bottom: none !important;
  text-decoration: none !important;
}

.cd-h2-block h2 strong,
.cd-h2-block h2 b,
.cd-article h2 strong,
.cd-article h2 b,
.cd-page h2 strong,
.cd-page h2 b {
  font-weight: inherit !important;
}

.cd-h2-block h2 span,
.cd-article h2 span,
.cd-page h2 span,
.cd-page h1 span {
  border-bottom: none !important;
  text-decoration: none !important;
  box-shadow: none !important;
  padding-bottom: 0 !important;
}

.cd-article h3 {
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Manrope", sans-serif) !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  color: #091d16 !important;
  margin: 28px 0 14px !important;
  padding-left: 12px !important;
  border-left: 3px solid #D4AF37 !important;
}

.cd-article h4,
.cd-article h5,
.cd-article h6 {
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Manrope", sans-serif) !important;
  font-weight: 750 !important;
  color: #091d16 !important;
  margin: 22px 0 10px !important;
}

/* BLOCKQUOTES TRÍCH DẪN */
.cd-article blockquote {
  position: relative !important;
  margin: 28px 0 !important;
  padding: 24px 28px 24px 36px !important;
  background: #F8F4EA !important;
  border-left: 4px solid #D4AF37 !important;
  border-radius: 0 16px 16px 0 !important;
  font-style: italic !important;
  color: #7A1C1C !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  box-shadow: 0 4px 16px rgba(9, 29, 22, 0.04) !important;
}

.cd-article blockquote::before {
  content: "“" !important;
  position: absolute !important;
  top: 6px !important;
  left: 12px !important;
  font-size: 42px !important;
  font-family: Georgia, serif !important;
  color: rgba(212, 175, 55, 0.4) !important;
  line-height: 1 !important;
}

/* LISTS */
.cd-check-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 18px 0 !important;
  display: grid !important;
  gap: 12px !important;
}

.cd-check-list li {
  position: relative !important;
  padding-left: 30px !important;
  font-size: 15.5px !important;
  line-height: 1.65 !important;
}

.cd-check-list li svg {
  position: absolute !important;
  left: 0 !important;
  top: 3px !important;
  width: 20px !important;
  height: 20px !important;
  fill: none !important;
  stroke: #D4AF37 !important;
  stroke-width: 2.5 !important;
}

/* BENEFIT BOX */
.cd-benefit {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(212, 175, 55, 0.3) !important;
  border-radius: 16px !important;
  padding: 24px 28px !important;
  margin: 28px 0 !important;
  box-shadow: 0 8px 24px rgba(9, 29, 22, 0.05) !important;
}

.cd-benefit h3 {
  margin-top: 0 !important;
  border-left: none !important;
  padding-left: 0 !important;
  color: #7A1C1C !important;
}

/* NOTE BOX */
.cd-note {
  background: linear-gradient(135deg, rgba(247, 223, 155, 0.15) 0%, rgba(212, 175, 55, 0.08) 100%) !important;
  border: 1px solid rgba(212, 175, 55, 0.4) !important;
  border-radius: 14px !important;
  padding: 20px 24px !important;
  margin: 24px 0 !important;
}

/* RECIPE CARD */
.cd-recipe {
  background: #FFFFFF !important;
  border-radius: 16px !important;
  padding: 24px !important;
  margin: 20px 0 !important;
  border: 1px solid rgba(9, 29, 22, 0.08) !important;
  box-shadow: 0 4px 16px rgba(9, 29, 22, 0.04) !important;
}

.cd-recipe h3 {
  margin-top: 0 !important;
  border-left: 4px solid #7A1C1C !important;
  padding-left: 12px !important;
}

/* =========================================================
   RESPONSIVE MEDIA QUERIES — TRANG ĐẢM BẢO CHẤT LƯỢNG
   ========================================================= */

/* ── TABLET (≤1024px) ── */
@media (max-width: 1024px) {
  .cd-hero {
    padding: 48px 32px 40px !important;
  }

  .cd-layout {
    grid-template-columns: 1fr !important;
    grid-template-areas: "sidebar" "article" !important;
    gap: 32px !important;
    padding: 0 32px !important;
    margin-top: 36px !important;
  }

  .cd-toc {
    position: relative !important;
    top: 0 !important;
    order: 1 !important;
    max-height: none !important;
    margin-bottom: 16px !important;
  }

  .cd-toc-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px 16px !important;
  }

  .cd-toc-list li {
    margin-bottom: 0 !important;
  }

  .cd-article {
    order: 2 !important;
    max-width: 100% !important;
    /* Đảm bảo các phần tử con không tràn ra mép */
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .cd-cta-block {
    padding: 0 24px 40px !important;
  }
}

/* ── IPAD PORTRAIT SPECIFIC (768px - 1024px) ── */
@media (min-width: 768px) and (max-width: 1024px) {
  .cd-article img,
  .cd-article figure,
  .cd-article .wp-block-image,
  .cd-article .aligncenter,
  .cd-article .alignleft,
  .cd-article .alignright,
  .cd-article p img,
  .cd-article .wp-caption {
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    text-align: center !important;
  }
  
  .cd-article .wp-caption-text {
    text-align: center !important;
  }
}

/* ── MOBILE LANDSCAPE / LARGE PHONE (≤768px) ── */
@media (max-width: 768px) {
  /* Hero */
  .cd-hero {
    padding: 40px 24px 36px !important;
  }

  .cd-hero h1 {
    font-size: clamp(20px, 5.5vw, 28px) !important;
    margin: 8px auto 14px !important;
  }

  .cd-hero-lead {
    font-size: 14.5px !important;
    margin: 0 auto 16px !important;
  }

  .cd-breadcrumb-pill {
    font-size: 10.5px !important;
    padding: 6px 16px !important;
    gap: 6px !important;
  }

  .cd-hero .cd-meta {
    font-size: 12px !important;
    padding: 5px 14px !important;
  }

  /* Layout */
  .cd-layout {
    padding: 0 24px !important;
    margin-top: 28px !important;
    gap: 28px !important;
  }

  /* Article — padding riêng để tránh content dính mép màn hình */
  .cd-article {
    padding: 0 !important; /* padding đã nằm ở .cd-layout */
    overflow: hidden !important;
    min-width: 0 !important;
  }

  /* Các phần tử inline-styled bên trong article */
  .cd-article .sl-cert-grid-page,
  .cd-article .cd-benefit,
  .cd-article .cd-note,
  .cd-article .cd-conclusion,
  .cd-article blockquote {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Bảng — đảm bảo không overflow */
  .cd-article table {
    width: 100% !important;
    min-width: unset !important;
    table-layout: auto !important;
  }

  /* Div wrapper overflow-x: auto để bảng cuộn ngang thay vì vỡ layout */
  .cd-article > div {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Article content */
  .cd-article {
    font-size: 15px !important;
  }

  .cd-article > p {
    font-size: 15px !important;
    margin: 0 0 16px !important;
  }

  .cd-h2-block h2,
  .cd-article h2 {
    font-size: clamp(17px, 4.5vw, 22px) !important;
    line-height: 1.4 !important;
  }

  .cd-h2-block {
    margin: 36px 0 16px !important;
  }

  .cd-article h3 {
    font-size: 17px !important;
    margin: 22px 0 12px !important;
  }

  .cd-article blockquote {
    padding: 18px 18px 18px 28px !important;
    font-size: 14.5px !important;
    margin: 22px 0 !important;
  }

  /* Cert grid — 2 columns on tablet */
  .sl-cert-grid-page {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    margin: 24px 0 32px !important;
  }

  /* 5-step process cards */
  .cd-article > div[style*="display: grid"][style*="gap: 16px"] > div {
    padding: 14px 18px !important;
    border-radius: 10px !important;
  }

  /* Table responsive */
  .cd-article > div[style*="overflow-x: auto"] table {
    font-size: 13px !important;
  }

  .cd-article > div[style*="overflow-x: auto"] th,
  .cd-article > div[style*="overflow-x: auto"] td {
    padding: 11px 14px !important;
    font-size: 13px !important;
  }

  /* Benefit & Note boxes */
  .cd-benefit {
    padding: 18px 20px !important;
    border-radius: 12px !important;
  }

  .cd-note {
    padding: 16px 18px !important;
    border-radius: 10px !important;
  }

  /* Conclusion / Cam kết */
  .cd-conclusion {
    padding: 20px 18px !important;
    border-radius: 12px !important;
  }

  /* CTA Section */
  .cd-cta-block {
    padding: 0 16px 36px !important;
    margin-top: 32px !important;
  }

  .sl-cta-card-box {
    padding: 28px 20px !important;
    border-radius: 18px !important;
  }

  .sl-cta-pill-tag {
    font-size: 10px !important;
    padding: 5px 14px !important;
    letter-spacing: 0.08em !important;
    white-space: nowrap !important;
  }

  .sl-cta-title-heading {
    font-size: clamp(16px, 4.8vw, 22px) !important;
    margin: 10px 0 10px !important;
    line-height: 1.35 !important;
  }

  .sl-cta-desc-text {
    font-size: 13.5px !important;
    margin: 0 auto 18px !important;
    line-height: 1.6 !important;
  }

  .sl-cta-actions {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    margin-top: 16px !important;
    justify-content: center !important;
  }

  .sl-cta-btn-hotline,
  .sl-cta-btn-zalo {
    flex: 0 1 auto !important;
    white-space: nowrap !important;
    justify-content: center !important;
    padding: 11px 18px !important;
    font-size: 12px !important;
    letter-spacing: 0.04em !important;
    gap: 6px !important;
  }

  .sl-cta-btn-hotline svg,
  .sl-cta-btn-zalo svg {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
  }

  /* SVG divider nhỏ lại */
  .sl-cta-card-box .story-svg-divider {
    margin: 4px auto 10px !important;
  }
}

/* ── MOBILE SCREENS (≤600px) ── */
@media (max-width: 600px) {
  .cd-toc {
    display: none !important;
  }
  .sl-cert-grid-page {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* ── MOBILE PORTRAIT (≤480px) ── */
@media (max-width: 480px) {
  /* Hero tighter */
  .cd-hero {
    padding: 32px 14px 28px !important;
  }

  .cd-hero h1 {
    font-size: clamp(18px, 6vw, 22px) !important;
    letter-spacing: 0 !important;
  }

  .cd-hero-lead {
    font-size: 14px !important;
  }

  .cd-breadcrumb-pill {
    font-size: 10px !important;
    padding: 5px 12px !important;
    gap: 5px !important;
    letter-spacing: 0.08em !important;
  }

  /* Layout narrower padding */
  .cd-layout {
    padding: 0 14px !important;
    gap: 24px !important;
    margin-top: 24px !important;
  }



  /* H2 blocks */
  .cd-h2-block h2,
  .cd-article h2 {
    font-size: clamp(16px, 5vw, 19px) !important;
  }

  .cd-h2-block {
    margin: 28px 0 14px !important;
  }

  /* Cert cards */
  .sl-cert-card-item {
    border-radius: 10px !important;
  }

  /* Table on very small screens — hide last column to save space */
  .cd-article > div[style*="overflow-x: auto"] table th:nth-child(3),
  .cd-article > div[style*="overflow-x: auto"] table td:nth-child(3) {
    min-width: 120px !important;
  }

  /* Conclusion box */
  .cd-conclusion {
    padding: 18px 14px !important;
  }

  .cd-conclusion h3 {
    font-size: 16px !important;
    flex-wrap: wrap !important;
  }

  .cd-conclusion ul {
    padding-left: 16px !important;
    font-size: 14px !important;
  }

  /* CTA */
  .cd-cta-block {
    padding: 0 12px 28px !important;
  }

  .sl-cta-card-box {
    padding: 24px 16px !important;
    border-radius: 14px !important;
  }

  .sl-cta-title-heading {
    font-size: clamp(16px, 5.5vw, 21px) !important;
  }

  .sl-cta-pill-tag {
    font-size: 9.5px !important;
    padding: 5px 12px !important;
    letter-spacing: 0.07em !important;
    white-space: nowrap !important;
  }

  .sl-cta-title-heading {
    font-size: clamp(14px, 4.5vw, 18px) !important;
    margin: 8px 0 8px !important;
  }

  .sl-cta-desc-text {
    font-size: 12.5px !important;
    margin: 0 auto 14px !important;
  }

  .sl-cta-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin-top: 16px !important;
  }

  .sl-cta-btn-hotline,
  .sl-cta-btn-zalo {
    white-space: nowrap !important;
    width: 100% !important;
    justify-content: center !important;
    padding: 13px 20px !important;
    font-size: 13px !important;
    letter-spacing: 0.05em !important;
    box-sizing: border-box !important;
  }
}

/* ── TINY PHONE (≤375px) ── */
@media (max-width: 375px) {
  .cd-hero h1 {
    font-size: 17px !important;
  }

  .cd-layout {
    padding: 0 10px !important;
  }

  .cd-h2-block h2,
  .cd-article h2 {
    font-size: 15.5px !important;
  }

  .cd-toc-list a {
    font-size: 12px !important;
    padding: 8px 10px !important;
    gap: 8px !important;
  }

  .sl-cta-btn-hotline,
  .sl-cta-btn-zalo {
    white-space: nowrap !important;
    font-size: 11.5px !important;
    padding: 10px 16px !important;
    letter-spacing: 0.04em !important;
  }
}

/* =========================================================
   EXACT CTA BANNER TYPOGRAPHY & CARD STYLING MATCHING USER IMAGE
   ========================================================= */
.sl-cta-card-box {
  position: relative !important;
  background: linear-gradient(165deg, #071912 0%, #0d2a1f 50%, #081d15 100%) !important;
  border-radius: 24px !important;
  padding: 48px 36px !important;
  text-align: center !important;
  color: #FFFFFF !important;
  border: 1.5px solid rgba(247, 223, 155, 0.4) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  overflow: hidden !important;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.sl-cta-pill-tag {
  display: inline-block !important;
  background: rgba(16, 38, 21, 0.85) !important;
  color: #F7DF9B !important;
  border: 1px solid rgba(247, 223, 155, 0.45) !important;
  padding: 8px 24px !important;
  border-radius: 99px !important;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.sl-cta-title-heading {
  font-family: 'Manrope', var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: clamp(18px, 3.4vw, 36px) !important;
  font-weight: 900 !important;
  letter-spacing: 0.01em !important;
  text-transform: uppercase !important;
  color: #F7DF9B !important;
  background: linear-gradient(135deg, #FFF7D6 0%, #F7DF9B 40%, #E5C158 75%, #D4AF37 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 2px 14px rgba(247, 223, 155, 0.4)) !important;
  margin: 12px 0 14px !important;
  line-height: 1.3 !important;
}

.sl-cta-desc-text {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  color: #d2e4d7 !important;
  max-width: 760px !important;
  margin: 0 auto 24px !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  font-weight: 500 !important;
}

.sl-cta-btn-hotline {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: linear-gradient(135deg, #F7DF9B 0%, #D4AF37 100%) !important;
  color: #091d16 !important;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 14px 32px !important;
  border-radius: 99px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-shadow: 0 8px 24px rgba(212, 175, 55, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  transition: all 0.25s ease !important;
}

.sl-cta-btn-zalo {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: rgba(16, 38, 21, 0.6) !important;
  color: #F7DF9B !important;
  border: 1.5px solid rgba(247, 223, 155, 0.5) !important;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 13px 32px !important;
  border-radius: 99px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  backdrop-filter: blur(8px) !important;
  transition: all 0.25s ease !important;
}

.sl-cta-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  margin-top: 24px !important;
}

.sl-cta-btn-hotline:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 30px rgba(212, 175, 55, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  color: #071912 !important;
}

.sl-cta-btn-zalo:hover {
  transform: translateY(-3px) !important;
  background: rgba(247, 223, 155, 0.18) !important;
  color: #FFFFFF !important;
  border-color: #F7DF9B !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3) !important;
}






/* ==========================================================================
   FLATSOME & WOOCOMMERCE PRODUCT-SMALL GRID CARD OVERRIDES (MATCHING ARCHIVE-PRODUCT.PHP)
   ========================================================================== */

/* 1. RESET OUTER WRAPPER CONTAINERS & GRID GAP SPACING (CHUẨN 3 SẢN PHẨM / HÀNG) */
.products.row:not(.slider):not(.flickity-enabled),
.products[class*="row-"]:not(.slider):not(.flickity-enabled),
.woocommerce ul.products:not(.slider):not(.flickity-enabled) {
  display: flex !important;
  flex-wrap: wrap !important;
  margin-left: -10px !important;
  margin-right: -10px !important;
  gap: 0 !important;
}

.products.row > .col,
.products .col {
  padding-left: 10px !important;
  padding-right: 10px !important;
  margin-bottom: 20px !important;
  box-sizing: border-box !important;
}

.products .col-inner,
.product-small .col-inner,
.product-small .add-to-cart-button,
.product-small .badge-container,
.product-small .badge-circle {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
  margin: 0 !important;
  outline: none !important;
}

/* 2. CARD CONTAINER (SINGLE BORDER ONLY) */
.product-small.box,
.woocommerce ul.products li.product,
.cat-card {
  background: #ffffff !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 1px solid rgba(212, 175, 55, 0.32) !important;
  box-shadow: 0 4px 18px rgba(16, 38, 21, 0.05) !important;
  transition: transform 0.35s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.35s cubic-bezier(0.165, 0.84, 0.44, 1), border-color 0.35s ease !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  padding: 0 !important;
}

.product-small.box:hover,
.woocommerce ul.products li.product:hover,
.cat-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 42px -16px rgba(16, 38, 21, 0.22) !important;
  border-color: #D4AF37 !important;
}

/* 3. IMAGE WRAP & HOVER ZOOM */
.product-small .box-image,
.woocommerce ul.products li.product .post-image,
.product-small .box-image .image-none,
.cat-card-media {
  position: relative !important;
  aspect-ratio: 1/1 !important;
  background: #F8F4EA !important;
  overflow: hidden !important;
  border-radius: 12px 12px 0 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  border: none !important;
}

.product-small .box-image img,
.woocommerce ul.products li.product img,
.cat-card-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.45s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.product-small.box:hover .box-image img,
.woocommerce ul.products li.product:hover img,
.cat-card:hover .cat-card-media img {
  transform: scale(1.06) !important;
}

/* 4. SALE BADGE (SLEEK & SINGLE LUXURY BADGE PILL) */
.product-small .badge-container,
.product-small .badge-container *,
.product-small .badge,
.product-small .badge *,
.product-small .badge-circle,
.product-small .badge-circle *,
.product-small .badge-inner,
.product-small .badge-inner * {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  outline: none !important;
  height: auto !important;
  width: auto !important;
  min-height: 0 !important;
  min-width: 0 !important;
  max-height: none !important;
  max-width: none !important;
  position: static !important;
  transform: none !important;
  line-height: 1 !important;
}

.product-small .badge-container,
.badge-container {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 10 !important;
  display: block !important;
  pointer-events: none !important;
}

.product-small .onsale,
.product-small span.onsale,
.product-small .badge-inner,
.cat-card-sale {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(122, 28, 28, 0.94) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(247, 223, 155, 0.45) !important;
  color: #F7DF9B !important;
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 12px rgba(122, 28, 28, 0.3) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* 5. CARD TEXT BODY */
.product-small .box-text,
.woocommerce ul.products li.product .box-text,
.cat-card-body {
  padding: 20px 18px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
  background: #ffffff !important;
  text-align: center !important;
  border-radius: 0 0 14px 14px !important;
  margin: 0 !important;
  border: none !important;
}

/* 6. CATEGORY TAG */
.product-small .category,
.product-small .box-text .category,
.product-small .cat-title,
.cat-card-cat {
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #C7A65C !important;
  margin: 0 0 8px !important;
  text-align: center !important;
  display: block !important;
}

/* 7. PRODUCT TITLE */
.product-small .title-wrapper,
.product-small .name,
.product-small .name a,
.woocommerce ul.products li.product h3,
.woocommerce ul.products li.product .name a,
.cat-card h3,
.cat-card h3 a {
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-weight: 750 !important;
  font-size: 15.5px !important;
  line-height: 1.38 !important;
  color: #153327 !important;
  margin: 0 0 10px !important;
  min-height: 44px !important;
  text-align: center !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.product-small .name a:hover,
.woocommerce ul.products li.product .name a:hover,
.cat-card h3 a:hover {
  color: #7A1C1C !important;
}

/* 8. PRICING ROW */
.product-small .price-wrapper,
.product-small .price,
.woocommerce ul.products li.product .price,
.cat-card-price {
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  margin-bottom: 16px !important;
  flex-wrap: wrap !important;
  margin-top: auto !important;
  justify-content: center !important;
  text-align: center !important;
}

.product-small .price .woocommerce-Price-amount,
.product-small .price span.amount,
.product-small .price bdi,
.product-small .price ins,
.product-small .price ins *,
.woocommerce ul.products li.product .price .amount,
.cat-card-price .woocommerce-Price-amount,
.cat-card-price span.amount,
.cat-card-price bdi {
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-weight: 850 !important;
  font-size: 19px !important;
  color: #7A1C1C !important;
  letter-spacing: -0.01em !important;
  text-decoration: none !important;
}

.product-small .price del,
.product-small .price del *,
.woocommerce ul.products li.product .price del .amount,
.cat-card-price del,
.cat-card-price del * {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #8C8577 !important;
  text-decoration: line-through !important;
  margin-right: 4px !important;
  opacity: 0.75 !important;
}

/* 9. ADD TO CART BUTTON (SINGLE PILL BORDER ONLY) */
.product-small a.add_to_cart_button,
.product-small .button,
.woocommerce ul.products li.product .button,
.product-small .add-to-cart-button a,
.cat-card-body .button,
.cat-card-body a.add_to_cart_button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 220px !important;
  height: 38px !important;
  margin: 0 auto !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  border: 1.5px solid rgba(212, 175, 55, 0.75) !important;
  color: #153327 !important;
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.05) 0%, rgba(247, 223, 155, 0.2) 100%) !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.1) !important;
  line-height: 1 !important;
  text-decoration: none !important;
  outline: none !important;
}

.product-small a.add_to_cart_button::before,
.product-small .button::before,
.product-small .add-to-cart-button a::before,
.cat-card-body .button::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 60% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent) !important;
  transform: skewX(-20deg) !important;
  transition: left 0.6s ease !important;
  pointer-events: none !important;
}

.product-small a.add_to_cart_button:hover::before,
.product-small .button:hover::before,
.product-small .add-to-cart-button a:hover::before,
.cat-card-body .button:hover::before {
  left: 140% !important;
}

.product-small a.add_to_cart_button:hover,
.product-small .button:hover,
.woocommerce ul.products li.product .button:hover,
.product-small .add-to-cart-button a:hover,
.cat-card-body .button:hover {
  background: linear-gradient(135deg, #F7DF9B 0%, #D4AF37 50%, #B98A3A 100%) !important;
  color: #102615 !important;
  border-color: #D4AF37 !important;
  box-shadow: 0 8px 22px rgba(212, 175, 55, 0.45) !important;
  transform: translateY(-2px) !important;
}

/* 10. MOBILE & TABLET RESPONSIVE OVERRIDES FOR PRODUCT CARDS */
@media (max-width: 768px) {
  /* Restore gutters, reset lists and pad spacing */
  .products.row:not(.slider):not(.flickity-enabled),
  .products[class*="row-"]:not(.slider):not(.flickity-enabled),
  .woocommerce ul.products:not(.slider):not(.flickity-enabled) {
    margin-left: -8px !important;
    margin-right: -8px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    list-style: none !important;
  }

  .products.row:not(.slider):not(.flickity-enabled) > .col,
  .products:not(.slider):not(.flickity-enabled) .col,
  .products:not(.slider):not(.flickity-enabled) .col.product-small,
  .col.product-small:not(.slider):not(.flickity-enabled) {
    padding-left: 8px !important;
    padding-right: 8px !important;
    margin-bottom: 16px !important;
  }

  /* Equal width grids - 2 columns for tablet/landscape */
  .products[class*="small-columns-2"]:not(.slider):not(.flickity-enabled) .col,
  .woocommerce ul.products[class*="small-columns-2"]:not(.slider):not(.flickity-enabled) li.product,
  .col.small-6:not(.slider):not(.flickity-enabled) {
    width: 50% !important;
    max-width: 50% !important;
    flex: 0 0 50% !important;
  }

  .products[class*="small-columns-1"]:not(.slider):not(.flickity-enabled) .col,
  .woocommerce ul.products[class*="small-columns-1"]:not(.slider):not(.flickity-enabled) li.product,
  .col.small-12:not(.slider):not(.flickity-enabled) {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  /* Equal height stretching */
  .products.row:not(.slider):not(.flickity-enabled) > .col,
  .products:not(.slider):not(.flickity-enabled) .col,
  .products:not(.slider):not(.flickity-enabled) .col-inner,
  .product-small:not(.slider):not(.flickity-enabled) .col-inner {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    height: auto !important;
  }

  .product-small.box:not(.slider):not(.flickity-enabled),
  .woocommerce ul.products:not(.slider):not(.flickity-enabled) li.product {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    height: 100% !important;
  }

  /* Card content scaling */
  .product-small .box-text {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    padding: 14px 10px 16px !important;
  }

  .product-small .name {
    min-height: auto !important;
    margin-bottom: 8px !important;
    font-size: 13.5px !important;
    line-height: 1.35 !important;
  }

  .product-small .category {
    font-size: 10px !important;
    margin-bottom: 4px !important;
  }

  .product-small .price-wrapper {
    margin-top: auto !important;
    margin-bottom: 12px !important;
  }

  .product-small .price .woocommerce-Price-amount,
  .product-small .price span.amount,
  .product-small .price bdi {
    font-size: 16px !important;
  }

  /* Add to Cart & View Cart button responsive sizing */
  .product-small a.add_to_cart_button,
  .product-small .button,
  .woocommerce ul.products li.product .button,
  .product-small .add-to-cart-button a,
  .cat-card-body a.add_to_cart_button,
  .product-small a.added_to_cart,
  .cat-card-body a.added_to_cart,
  .woocommerce ul.products li.product a.added_to_cart {
    max-width: 100% !important;
    width: 100% !important;
    font-size: 10.5px !important;
    height: 34px !important;
    padding: 0 6px !important;
    letter-spacing: 0.02em !important;
    white-space: nowrap !important;
  }

  /* Badge responsive sizing */
  .product-small .badge-container {
    top: 8px !important;
    left: 8px !important;
  }

  .product-small .onsale,
  .product-small span.onsale,
  .product-small .badge-inner {
    font-size: 9.5px !important;
    padding: 4px 8px !important;
  }
}

/* ── PHONE PORTRAIT (≤480px) ── */
@media (max-width: 480px) {
  /* For 1 column layout on mobile, remove negative row margins and column paddings so the card aligns perfectly with text margins */
  .products.row:not(.slider):not(.flickity-enabled),
  .products[class*="row-"]:not(.slider):not(.flickity-enabled),
  .woocommerce ul.products:not(.slider):not(.flickity-enabled) {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
  }

  /* Force 1 column on phones and remove outer padding */
  .woocommerce ul.products:not(.slider):not(.flickity-enabled) li.product,
  .products.row:not(.slider):not(.flickity-enabled) > .col,
  .products:not(.slider):not(.flickity-enabled) .col,
  .products:not(.slider):not(.flickity-enabled) .col.product-small,
  .col.product-small:not(.slider):not(.flickity-enabled),
  .col.small-6:not(.slider):not(.flickity-enabled) {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Cap the width of Add to Cart & View Cart buttons so they stay centered and elegant, not bloated */
  .product-small a.add_to_cart_button,
  .product-small .button,
  .woocommerce ul.products li.product .button,
  .product-small .add-to-cart-button a,
  .cat-card-body a.add_to_cart_button,
  .product-small a.added_to_cart,
  .cat-card-body a.added_to_cart,
  .woocommerce ul.products li.product a.added_to_cart {
    max-width: 240px !important;
    width: 100% !important;
    margin: 8px auto 0 !important;
  }
}

/* ==========================================================================
   SILVERLIFE DESIGN SYSTEM ΓÇö CART PAGE (/cart)
   Shared .cat-page/.cat-hero/.cat-btn-* components come from render_sl_faq_global_css().
   This block only adds cart-specific overrides on top of the DS tokens.
   ========================================================================== */

/* Page background & wrapper */
.page-id-cart,
.woocommerce-cart {
  background-color: transparent !important;
}

.sl-cart-page .cat-page {
  background: transparent !important;
}

/* Main content row (below hero) */
.sl-cart-main-row {
  max-width: 1240px;
  margin: 0 auto !important;
  align-items: flex-start !important;
}

/* Đồng bộ padding cột với /checkout (bỏ padding 30px của .row-large > .col) */
.sl-cart-main-row {
  margin-left: -10px !important;
  margin-right: -10px !important;
}

.sl-cart-main-row > .col,
.sl-cart-main-row > .flickity-viewport > .flickity-slider > .col {
  padding: 0 10px !important;
}

/* ==========================================================================
   CHECKOUT STEP BREADCRUMB (component Flatsome ΓÇö checkout/header.php)
   Hiện trên cả /cart, /checkout, /order-received (thanks). Restyle theo DS.
   Desktop: pill ngang. Mobile: stepper 3 cột (badge + line nối + label).
   ========================================================================== */
.checkout-page-title {
  background: transparent !important;
  border-bottom: 1px solid rgba(199, 166, 92, 0.3) !important;
}

.checkout-page-title .page-title-inner {
  min-height: 0 !important;
  padding-top: 22px !important;
  padding-bottom: 18px !important;
}

.checkout-breadcrumbs {
  padding: 0 !important;
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
}

.checkout-breadcrumbs a.sl-step-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
  color: var(--sl-ink-600, #575249) !important;
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  padding: 6px 12px !important;
  border-radius: 99px !important;
  transition: all 0.25s ease !important;
}

.checkout-breadcrumbs a.sl-step-link:hover {
  color: var(--sl-maple-600, #7A1C1C) !important;
}

.checkout-breadcrumbs a.sl-step-link.current {
  color: var(--sl-forest-900, #102615) !important;
  font-weight: 800 !important;
  background: var(--sl-ivory-50, #FFFEFB) !important;
  border: 1px solid rgba(212, 175, 55, 0.45) !important;
  box-shadow: 0 6px 18px -10px rgba(16, 38, 21, 0.25) !important;
}

.checkout-breadcrumbs .sl-step-label {
  display: inline-flex !important;
  align-items: center !important;
}

.checkout-breadcrumbs .divider {
  color: var(--sl-gold-500, #D4AF37) !important;
  margin: 0 0.4em !important;
  opacity: 1 !important;
  top: 0 !important;
}

.breadcrumb-step {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  line-height: 1 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  background: var(--sl-cream-200, #EFE6D2) !important;
  color: var(--sl-ink-600, #575249) !important;
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  border: 1px solid rgba(199, 166, 92, 0.35) !important;
}

.checkout-breadcrumbs a.current .breadcrumb-step {
  background: linear-gradient(135deg, #F7DF9B 0%, #D4AF37 100%) !important;
  color: #102615 !important;
  border-color: #F7DF9B !important;
  box-shadow: 0 3px 10px rgba(212, 175, 55, 0.4) !important;
}

/* Left column & product table card */
.sl-cart-table-card {
  background: var(--sl-ivory-50, #FFFEFB) !important;
  border-radius: 16px !important;
  border: 1.5px solid rgba(199, 166, 92, 0.3) !important;
  box-shadow: 0 12px 34px -18px rgba(16, 38, 21, 0.18) !important;
  overflow: hidden !important;
  margin-bottom: 24px !important;
}

.sl-cart-table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  margin-bottom: 0 !important;
}

.sl-cart-table thead tr {
  background: linear-gradient(135deg, var(--sl-forest-900, #102615) 0%, var(--sl-forest-950, #091d16) 100%) !important;
}

.sl-cart-table thead th {
  color: var(--sl-gold-300, #F7DF9B) !important;
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 16px 14px !important;
  border: none !important;
}

.sl-cart-table tbody tr.woocommerce-cart-form__cart-item {
  border-bottom: 1px solid rgba(199, 166, 92, 0.18);
  transition: background-color 0.25s ease;
}

.sl-cart-table tbody tr.woocommerce-cart-form__cart-item:hover {
  background-color: var(--sl-cream-100, #F8F4EA) !important;
}

.sl-cart-table td {
  padding: 18px 14px !important;
  vertical-align: middle !important;
  border-bottom: 1px solid rgba(199, 166, 92, 0.14) !important;
}

.sl-cart-remove-btn {
  width: 28px !important;
  height: 28px !important;
  line-height: 26px !important;
  border-radius: 50% !important;
  background: rgba(122, 28, 28, 0.08) !important;
  border: 1px solid rgba(122, 28, 28, 0.3) !important;
  color: #7A1C1C !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.25s ease !important;
  text-decoration: none !important;
}

.sl-cart-remove-btn:hover {
  background: #7A1C1C !important;
  color: #FFFFFF !important;
  border-color: #7A1C1C !important;
  transform: rotate(90deg) scale(1.1);
}

.sl-cart-thumb-wrap {
  display: block;
  width: 74px;
  height: 74px;
  border-radius: 12px;
  border: 1.5px solid rgba(212, 175, 55, 0.4);
  overflow: hidden;
  background: #FAF7F2;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.sl-cart-thumb-wrap:hover {
  transform: scale(1.04);
  border-color: var(--sl-gold-500, #D4AF37);
}

.sl-cart-thumb-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.sl-cart-item-title {
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--sl-forest-900, #102615) !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
  transition: color 0.2s ease !important;
}

.sl-cart-item-title:hover {
  color: var(--sl-maple-600, #7A1C1C) !important;
}

.sl-cart-price-val {
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--sl-ink-600, #575249);
}

.sl-cart-subtotal-val {
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  font-size: 15.5px;
  font-weight: 800;
  color: var(--sl-maple-600, #7A1C1C);
}

.sl-cart-table .quantity {
  margin: 0;
  display: inline-flex;
}

.sl-cart-table .quantity input.qty {
  width: 54px !important;
  height: 38px !important;
  border-radius: 8px !important;
  border: 1.5px solid rgba(212, 175, 55, 0.5) !important;
  background: #FFFFFF !important;
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--sl-forest-900, #102615) !important;
  text-align: center !important;
}

.sl-cart-table .quantity input.qty:focus {
  border-color: var(--sl-forest-800, #164627) !important;
  box-shadow: 0 0 0 2px rgba(22, 70, 39, 0.15) !important;
}

.sl-cart-actions-row td {
  padding: 18px 20px !important;
  background: var(--sl-cream-100, #F8F4EA) !important;
  border-bottom: none !important;
}

.sl-cart-actions-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.sl-cart-continue-link {
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--sl-forest-900, #102615);
  text-decoration: none;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.sl-cart-continue-link:hover {
  color: var(--sl-maple-600, #7A1C1C);
  transform: translateX(-3px);
}

.sl-cart-actions-flex .continue-shopping {
  display: none !important;
}

.sl-btn-update-cart {
  background: var(--sl-forest-900, #102615) !important;
  color: #FFFFFF !important;
  border: 1.5px solid rgba(212, 175, 55, 0.5) !important;
  border-radius: 99px !important;
  padding: 11px 26px !important;
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  transition: all 0.3s ease !important;
}

.sl-btn-update-cart:hover {
  background: var(--sl-forest-800, #164627) !important;
  color: var(--sl-gold-300, #F7DF9B) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(16, 38, 21, 0.25);
}

/* Right column & cart totals card */
.sl-cart-right-wrapper {
  margin-top: 0;
}

.sl-cart-totals-card {
  background: linear-gradient(165deg, var(--sl-forest-950, #091d16) 0%, var(--sl-forest-900, #102615) 100%) !important;
  border-radius: 18px !important;
  border: 1.5px solid rgba(247, 223, 155, 0.4) !important;
  box-shadow: 0 16px 40px -18px rgba(9, 29, 22, 0.5) !important;
  padding: 26px 24px !important;
  color: var(--sl-ivory-50, #FFFEFB) !important;
}

.sl-totals-card-header {
  margin-bottom: 20px;
}

.sl-totals-title {
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  color: var(--sl-gold-300, #F7DF9B) !important;
  margin: 0 0 12px 0 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  display: flex;
  align-items: center;
  gap: 10px;
}

.sl-totals-divider {
  height: 2px;
  background: linear-gradient(90deg, var(--sl-gold-500, #D4AF37) 0%, rgba(212, 175, 55, 0.1) 100%);
  border-radius: 2px;
}

.sl-totals-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px !important;
}

.sl-totals-table th,
.sl-totals-table td {
  padding: 12px 0 !important;
  border-bottom: 1px solid rgba(212, 175, 55, 0.22) !important;
  color: #E2E8F0 !important;
  font-size: 14.5px !important;
}

.sl-totals-table th {
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-weight: 600 !important;
  text-align: left !important;
}

.sl-totals-table td {
  text-align: right !important;
  font-weight: 700 !important;
}

.sl-totals-table td .amount {
  color: var(--sl-gold-300, #F7DF9B) !important;
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
}

.sl-totals-table tr.cart-subtotal td .amount {
  color: #FFFFFF !important;
}

.sl-totals-table tr.sl-order-total-row th,
.sl-totals-table tr.sl-order-total-row td,
.sl-totals-table tr.order-total th,
.sl-totals-table tr.order-total td {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
  border-bottom: none !important;
}

.sl-totals-table tr.sl-order-total-row th,
.sl-totals-table tr.order-total th {
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  color: var(--sl-gold-300, #F7DF9B) !important;
  letter-spacing: 0.06em !important;
}

.sl-totals-table tr.sl-order-total-row td .amount,
.sl-totals-table tr.order-total td .amount {
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 24px !important;
  font-weight: 900 !important;
  background: linear-gradient(135deg, #FFF0B3 0%, #D4AF37 50%, #E6C665 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Shipping rows inside totals */
.sl-totals-table .woocommerce-shipping-totals td,
.sl-totals-table .shipping__table td {
  font-weight: 600;
}

.sl-totals-table .shipping__table th {
  font-weight: 700;
  color: var(--sl-gold-300, #F7DF9B);
}

.sl-totals-table .shipping__list_label {
  font-size: 14px;
  color: #E2E8F0;
}

/* Coupon box inside sidebar */
.sl-cart-coupon-box {
  background: rgba(255, 255, 255, 0.05);
  border: 1px dashed rgba(212, 175, 55, 0.4);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 20px;
}

.sl-coupon-label {
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  font-size: 11.5px;
  font-weight: 800;
  color: var(--sl-gold-300, #F7DF9B);
  letter-spacing: 0.1em;
  margin-bottom: 8px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sl-coupon-input-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin: 0 !important;
}

.sl-coupon-input {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(212, 175, 55, 0.4) !important;
  border-radius: 8px !important;
  color: #FFFFFF !important;
  font-size: 13px !important;
  padding: 8px 12px !important;
  height: 40px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.sl-coupon-input::placeholder {
  color: #9CA3AF !important;
}

.sl-coupon-input:focus {
  border-color: var(--sl-gold-500, #D4AF37) !important;
  background: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2) !important;
}

.sl-btn-apply-coupon {
  background: linear-gradient(135deg, #F7DF9B 0%, #D4AF37 100%) !important;
  color: #102615 !important;
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 0 16px !important;
  height: 40px !important;
  width: 100% !important;
  line-height: 40px !important;
  cursor: pointer;
  transition: all 0.25s ease !important;
  white-space: nowrap;
}

.sl-btn-apply-coupon:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.35);
}

/* Proceed to checkout CTA button */
.sl-checkout-cta-wrap {
  margin-top: 18px;
  margin-bottom: 20px;
}

.sl-checkout-cta-wrap a.checkout-button,
.sl-checkout-cta-wrap .checkout-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  background: linear-gradient(135deg, #F7DF9B 0%, #D4AF37 50%, #B98A3A 100%) !important;
  color: #102615 !important;
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 13.5px !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  padding: 15px 20px !important;
  border-radius: 99px !important;
  border: 1.5px solid #F7DF9B !important;
  box-shadow: 0 8px 24px rgba(212, 175, 55, 0.4) !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
  position: relative;
  overflow: hidden;
}

.sl-checkout-cta-wrap a.checkout-button::before,
.sl-checkout-cta-wrap .checkout-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
  pointer-events: none;
}

.sl-checkout-cta-wrap a.checkout-button:hover::before,
.sl-checkout-cta-wrap .checkout-button:hover::before {
  left: 140%;
}

.sl-checkout-cta-wrap a.checkout-button:hover,
.sl-checkout-cta-wrap .checkout-button:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 30px rgba(212, 175, 55, 0.55) !important;
  color: #102615 !important;
  border-color: #F7DF9B !important;
}

/* Trust badges */
.sl-cart-trust-badges {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  padding: 14px 16px;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.sl-trust-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12.5px;
  color: #CBD5E1;
  line-height: 1.35;
}

.sl-trust-icon {
  color: var(--sl-gold-500, #D4AF37);
  flex-shrink: 0;
  margin-top: 1px;
}

/* Empty cart styling */
.sl-cart-page-empty {
  padding-bottom: 0;
}

.sl-cart-empty-container {
  max-width: 680px;
  margin: 56px auto 0;
}

.sl-cart-empty-card {
  background: var(--sl-ivory-50, #FFFEFB);
  border-radius: 20px;
  border: 1.5px solid rgba(212, 175, 55, 0.4);
  box-shadow: 0 14px 40px -20px rgba(16, 38, 21, 0.2);
  padding: 50px 30px;
  text-align: center;
}

.sl-cart-empty-icon-wrap {
  margin-bottom: 22px;
}

.sl-cart-empty-icon-inner {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: var(--sl-cream-100, #F8F4EA);
  border: 2px solid rgba(212, 175, 55, 0.4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sl-gold-500, #D4AF37);
  box-shadow: 0 8px 20px rgba(212, 175, 55, 0.15);
}

.sl-cart-empty-title {
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  font-size: 24px;
  font-weight: 900;
  color: var(--sl-forest-900, #102615);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.sl-cart-empty-desc {
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  font-size: 15px;
  color: var(--sl-ink-600, #575249);
  line-height: 1.65;
  max-width: 500px;
  margin: 0 auto 30px auto;
}

.sl-cart-empty-action .cat-btn-solid {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  background: linear-gradient(135deg, #F7DF9B 0%, #D4AF37 50%, #B98A3A 100%) !important;
  color: #102615 !important;
  border: 1.5px solid #F7DF9B !important;
  border-radius: 99px !important;
  padding: 14px 34px !important;
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 13.5px !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  box-shadow: 0 8px 24px rgba(212, 175, 55, 0.35) !important;
  transition: all 0.3s ease !important;
}

.sl-cart-empty-action .cat-btn-solid:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 30px rgba(212, 175, 55, 0.55) !important;
  color: #102615 !important;
}

/* Mobile & tablet adjustments */
@media (max-width: 980px) {
  .sl-cart-right-wrapper {
    margin-top: 30px !important;
  }

  .sl-cart-table-card {
    margin-bottom: 20px !important;
  }
}

@media (max-width: 550px) {
  .sl-cart-table tr.woocommerce-cart-form__cart-item {
    padding-left: 88px !important;
  }

  .sl-cart-table td.product-thumbnail {
    left: 12px !important;
    top: 14px !important;
  }

  .sl-cart-thumb-wrap {
    width: 64px !important;
    height: 64px !important;
    border-radius: 10px !important;
  }

  .sl-cart-item-title {
    font-size: 14px !important;
  }

  .sl-cart-remove-btn {
    width: 26px !important;
    height: 26px !important;
    line-height: 24px !important;
    font-size: 16px !important;
  }
}

@media (max-width: 480px) {
  .checkout-breadcrumbs .divider {
    display: none !important;
  }

  .checkout-breadcrumbs a {
    font-size: 11.5px !important;
    padding: 5px 8px !important;
  }

  .breadcrumb-step {
    width: 20px !important;
    height: 20px !important;
    font-size: 10.5px !important;
  }
}

@media (max-width: 768px) {
  .sl-cart-main-row {
    margin: 0 auto !important;
  }

  .checkout-page-title .page-title-inner {
    padding-top: 18px !important;
    padding-bottom: 14px !important;
  }

  .checkout-breadcrumbs {
    flex-wrap: wrap !important;
    justify-content: center !important;
    row-gap: 8px !important;
  }

  .checkout-breadcrumbs a {
    font-size: 12px !important;
    padding: 5px 9px !important;
    gap: 6px !important;
    white-space: nowrap !important;
  }

  .checkout-breadcrumbs .divider {
    margin: 0 0.2em !important;
  }

  .breadcrumb-step {
    width: 22px !important;
    height: 22px !important;
    font-size: 11px !important;
  }

  .sl-cart-table-card {
    border-radius: 12px !important;
    box-shadow: 0 8px 22px -14px rgba(16, 38, 21, 0.15) !important;
  }

  .sl-cart-table thead {
    display: none !important;
  }

  .sl-cart-table tr.woocommerce-cart-form__cart-item {
    display: block !important;
    position: relative;
    padding: 16px 14px 18px 100px !important;
  }

  .sl-cart-table td {
    display: block !important;
    border-bottom: none !important;
    padding: 3px 0 !important;
    text-align: left !important;
  }

  .sl-cart-table td.product-remove {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    padding: 0 !important;
    width: 28px !important;
    height: 28px !important;
  }

  .sl-cart-table td.product-remove .sl-cart-remove-btn,
  .sl-cart-table td.product-remove .remove {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    margin: 0 !important;
  }

  .sl-cart-table td.product-thumbnail {
    position: absolute !important;
    left: 14px !important;
    top: 16px !important;
    padding: 0 !important;
  }

  .sl-cart-table td.product-price {
    display: none !important;
  }

  .sl-cart-table td.product-name {
    padding-right: 34px !important;
  }

  .sl-cart-item-title {
    font-size: 14.5px !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    hyphens: auto !important;
  }

  /* Giá đơn vị mobile: hiển thị cả 549–768px (vì product-price bị ẩn) */
  .sl-cart-table .mobile-product-price {
    display: block !important;
    margin-top: 6px !important;
    font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--sl-maple-600, #7A1C1C) !important;
  }

  .sl-cart-table .mobile-product-price .mobile-product-price__qty {
    color: var(--sl-ink-600, #575249) !important;
  }

  .sl-cart-table td.product-quantity {
    margin-top: 10px;
    padding-top: 8px !important;
    border-top: 1px solid rgba(199, 166, 92, 0.15) !important;
  }

  .sl-cart-table td.product-subtotal {
    margin-top: 10px;
    padding-top: 8px !important;
    border-top: 1px solid rgba(199, 166, 92, 0.15) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

  .sl-cart-table td.product-subtotal::before {
    content: attr(data-title);
    font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: var(--sl-ink-600, #575249) !important;
  }

  .sl-cart-table td.product-subtotal .sl-cart-subtotal-val {
    font-size: 16px !important;
  }

  .sl-cart-actions-row td {
    padding: 14px 14px !important;
  }

  .sl-cart-actions-flex {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .sl-cart-continue-link {
    text-align: center;
    justify-content: center;
  }

  .sl-btn-update-cart {
    width: 100%;
  }
}

/* ==========================================================================
   SILVERLIFE DESIGN SYSTEM ΓÇö CHECKOUT PAGE (/checkout)
   Wrapper .sl-checkout-page nằm trong .cat-page (DS tokens + font hệ thống).
   ========================================================================== */

/* Phần "Bạn có mã ưu đãi?" nằm NGOÀI form.checkout → wrapper riêng */
.sl-checkout-coupon-toggle {
  max-width: 1240px;
  margin: 0 auto;
}

.sl-checkout-coupon-toggle .cat-page {
  background: transparent !important;
  box-shadow: none !important;
}

.sl-checkout-coupon-toggle .woocommerce-form-coupon-toggle {
  margin-bottom: 0;
}

.sl-checkout-coupon-toggle .woocommerce-info {
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--sl-ink-900, #0D2F23) !important;
}

.sl-checkout-coupon-toggle .woocommerce-info a.showcoupon {
  color: var(--sl-maple-600, #7A1C1C) !important;
  font-weight: 800 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

.sl-checkout-coupon-toggle .woocommerce-info a.showcoupon:hover {
  color: var(--sl-gold-500, #D4AF37) !important;
}

/* Form nhập mã ẩn/hiện */
.sl-checkout-coupon-toggle .sl-checkout-coupon-form {
  margin-top: 10px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
}

.sl-checkout-coupon-toggle .sl-checkout-coupon-form > p {
  color: var(--sl-ink-600, #575249) !important;
  font-size: 14px !important;
  margin: 0 0 12px !important;
}

.sl-checkout-coupon-toggle .sl-checkout-coupon-form .coupon {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.sl-checkout-coupon-toggle .sl-checkout-coupon-form .coupon .flex-col {
  padding: 0 !important;
}

.sl-checkout-coupon-toggle .sl-checkout-coupon-form .coupon .flex-col.flex-grow {
  flex: 1 !important;
  min-width: 180px !important;
}

.sl-checkout-coupon-toggle .sl-checkout-coupon-form input.input-text {
  width: 100% !important;
  border: 1.5px solid rgba(199, 166, 92, 0.4) !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  color: var(--sl-ink-900, #0D2F23) !important;
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  padding: 12px 14px !important;
  height: auto !important;
  line-height: 1.4 !important;
  box-shadow: none !important;
}

.sl-checkout-coupon-toggle .sl-checkout-coupon-form input.input-text:focus {
  border-color: var(--sl-gold-500, #D4AF37) !important;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15) !important;
  outline: none !important;
}

.sl-checkout-coupon-toggle .sl-checkout-coupon-form .coupon .button {
  background: linear-gradient(135deg, #F7DF9B 0%, #D4AF37 100%) !important;
  color: #102615 !important;
  border: none !important;
  border-radius: 10px !important;
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  padding: 0 24px !important;
  height: 46px !important;
  line-height: 46px !important;
  white-space: nowrap !important;
  transition: all 0.25s ease !important;
}

.sl-checkout-coupon-toggle .sl-checkout-coupon-form .coupon .button:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(212, 175, 55, 0.35);
}

.sl-checkout-page .cat-page {
  background: transparent !important;
}

.sl-checkout-page .sl-checkout-form {
  max-width: 1240px;
  margin: 0 auto;
}

.sl-checkout-page .sl-checkout-row {
  align-items: flex-start !important;
  margin-left: -10px !important;
  margin-right: -10px !important;
}

.sl-checkout-page .sl-checkout-row > .col {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

/* Fields card (billing / shipping) */
.sl-checkout-page .woocommerce-billing-fields,
.sl-checkout-page .woocommerce-shipping-fields,
.sl-checkout-page .woocommerce-additional-fields {
  background: var(--sl-ivory-50, #FFFEFB) !important;
  border-radius: 16px !important;
  border: 1.5px solid rgba(199, 166, 92, 0.3) !important;
  box-shadow: 0 12px 34px -18px rgba(16, 38, 21, 0.15) !important;
  padding: 26px 26px 20px !important;
  margin-bottom: 24px !important;
}

.sl-checkout-page .woocommerce-billing-fields h3,
.sl-checkout-page .woocommerce-shipping-fields h3,
.sl-checkout-page .woocommerce-additional-fields h3,
.sl-checkout-page #ship-to-different-address {
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  color: var(--sl-forest-900, #102615) !important;
  margin: 0 0 18px !important;
  padding-bottom: 12px !important;
  border-bottom: 2px solid rgba(212, 175, 55, 0.4) !important;
}

/* Form fields */
.sl-checkout-page .form-row {
  margin-bottom: 14px !important;
}

.sl-checkout-page .form-row label {
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--sl-ink-900, #0D2F23) !important;
  margin-bottom: 6px !important;
}

.sl-checkout-page .form-row label .required {
  color: var(--sl-maple-600, #7A1C1C) !important;
  border: none !important;
}

.sl-checkout-page .form-row input.input-text,
.sl-checkout-page .form-row textarea.input-text,
.sl-checkout-page .form-row select,
.sl-checkout-page .input-text,
.sl-checkout-page input[type="tel"],
.sl-checkout-page input[type="email"],
.sl-checkout-page input[type="text"] {
  width: 100% !important;
  border: 1.5px solid rgba(199, 166, 92, 0.4) !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  color: var(--sl-ink-900, #0D2F23) !important;
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  padding: 12px 14px !important;
  height: auto !important;
  line-height: 1.4 !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.sl-checkout-page .form-row input.input-text:focus,
.sl-checkout-page .form-row textarea.input-text:focus,
.sl-checkout-page .form-row select:focus,
.sl-checkout-page .input-text:focus {
  border-color: var(--sl-gold-500, #D4AF37) !important;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15) !important;
  outline: none !important;
}

.sl-checkout-page .select2-container .select2-selection--single {
  height: 44px !important;
  border: 1.5px solid rgba(199, 166, 92, 0.4) !important;
  border-radius: 10px !important;
  padding: 6px 12px !important;
}

.sl-checkout-page .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 28px !important;
  color: var(--sl-ink-900, #0D2F23) !important;
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 14.5px !important;
}

/* Sidebar / order review */
.sl-checkout-page .sl-checkout-sidebar {
  background: linear-gradient(165deg, var(--sl-forest-950, #091d16) 0%, var(--sl-forest-900, #102615) 100%) !important;
  border-radius: 18px !important;
  border: 1.5px solid rgba(247, 223, 155, 0.4) !important;
  box-shadow: 0 16px 40px -18px rgba(9, 29, 22, 0.5) !important;
  padding: 26px 24px !important;
  color: #E2E8F0 !important;
}

.sl-checkout-page .sl-checkout-sidebar a {
  color: var(--sl-gold-300, #F7DF9B) !important;
}

.sl-checkout-page .sl-checkout-sidebar a:hover {
  color: var(--sl-gold-500, #D4AF37) !important;
}

.sl-checkout-page .sl-checkout-sidebar .woocommerce-privacy-policy-text,
.sl-checkout-page .sl-checkout-sidebar .woocommerce-terms-and-conditions-wrapper,
.sl-checkout-page .sl-checkout-sidebar .woocommerce-terms-and-conditions-wrapper p {
  color: #CBD5E1 !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
}

.sl-checkout-page #order_review_heading.sl-checkout-order-title {
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--sl-gold-300, #F7DF9B) !important;
  margin: 0 0 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 2px solid rgba(212, 175, 55, 0.45) !important;
}

.sl-checkout-page .woocommerce-checkout-review-order-table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin-bottom: 16px !important;
}

.sl-checkout-page .woocommerce-checkout-review-order-table thead th {
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--sl-gold-300, #F7DF9B) !important;
  border-bottom: 1px solid rgba(212, 175, 55, 0.3) !important;
  padding: 8px 0 !important;
}

.sl-checkout-page .woocommerce-checkout-review-order-table td,
.sl-checkout-page .woocommerce-checkout-review-order-table th {
  padding: 10px 0 !important;
  border-bottom: 1px solid rgba(212, 175, 55, 0.18) !important;
  color: #E2E8F0 !important;
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 14px !important;
  vertical-align: top !important;
}

.sl-checkout-page .woocommerce-checkout-review-order-table .product-name {
  font-weight: 600 !important;
}

.sl-checkout-page .woocommerce-checkout-review-order-table .product-total,
.sl-checkout-page .woocommerce-checkout-review-order-table td.product-total {
  text-align: right !important;
  font-weight: 700 !important;
}

.sl-checkout-page .woocommerce-checkout-review-order-table tfoot .cart-subtotal th,
.sl-checkout-page .woocommerce-checkout-review-order-table tfoot .order-total th {
  color: var(--sl-gold-300, #F7DF9B) !important;
  font-weight: 800 !important;
}

.sl-checkout-page .woocommerce-checkout-review-order-table tfoot .order-total .amount {
  font-size: 20px !important;
  font-weight: 900 !important;
  color: #FFFFFF !important;
}

.sl-checkout-page .woocommerce-checkout-review-order-table .amount {
  color: var(--sl-gold-300, #F7DF9B) !important;
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
}

/* Shipping methods */
.sl-checkout-page .shipping__table,
.sl-checkout-page .woocommerce-shipping-methods {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.sl-checkout-page .shipping__list_item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 6px !important;
}

.sl-checkout-page .shipping__list_label,
.sl-checkout-page .shipping__list_item label {
  color: #E2E8F0 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* Payment methods */
.sl-checkout-page .woocommerce-checkout-payment {
  background: rgba(255, 255, 255, 0.05) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(212, 175, 55, 0.3) !important;
  margin-top: 16px !important;
  padding: 16px !important;
}

.sl-checkout-page .wc_payment_methods {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.sl-checkout-page .wc_payment_method {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 10px !important;
  line-height: 1.4 !important;
}

.sl-checkout-page .wc_payment_method label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #E2E8F0 !important;
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  cursor: pointer !important;
}

.sl-checkout-page .wc_payment_method .input-radio {
  flex: 0 0 auto !important;
  align-self: center !important;
  margin: 0 8px 0 0 !important;
  padding: 0 !important;
  width: 16px !important;
  height: 16px !important;
  accent-color: var(--sl-gold-500, #D4AF37) !important;
}

.sl-checkout-page .payment_box {
  flex: 1 1 100% !important;
  background: rgba(16, 38, 21, 0.5) !important;
  border-radius: 10px !important;
  border-left: 3px solid var(--sl-gold-500, #D4AF37) !important;
  padding: 12px 14px !important;
  margin-top: 8px !important;
  color: #CBD5E1 !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
}

/* ── Override WC core #payment (ID specificity cao hơn class-only) ──
   WC core: #payment ul.payment_methods li { line-height:2 } + li input { margin:0 1em 0 0 }
   → gây lệch radio/label. Ép về 1 hàng thẳng đứng giữa. */
.sl-checkout-page .sl-checkout-sidebar #payment ul.payment_methods li,
.sl-checkout-page .sl-checkout-sidebar #payment .wc_payment_method {
  line-height: 1.4 !important;
}

.sl-checkout-page .sl-checkout-sidebar #payment ul.payment_methods li input,
.sl-checkout-page .sl-checkout-sidebar #payment .wc_payment_method .input-radio {
  margin: 0 8px 0 0 !important;
  vertical-align: middle !important;
}

.sl-checkout-page .sl-checkout-sidebar #payment ul.payment_methods li label,
.sl-checkout-page .sl-checkout-sidebar #payment .wc_payment_method label {
  line-height: 1.4 !important;
  vertical-align: middle !important;
}

.sl-checkout-page .sl-checkout-sidebar #payment ul.payment_methods li .payment_box {
  flex-basis: 100% !important;
}

.sl-checkout-page .place-order {
  margin-top: 16px !important;
}

.sl-checkout-page .place-order button,
.sl-checkout-page .place-order .button,
.sl-checkout-page button#place_order,
.sl-checkout-page .woocommerce-checkout-payment button.button.alt {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  background: linear-gradient(135deg, #F7DF9B 0%, #D4AF37 50%, #B98A3A 100%) !important;
  color: #102615 !important;
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 13.5px !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 15px 20px !important;
  border-radius: 99px !important;
  border: 1.5px solid #F7DF9B !important;
  box-shadow: 0 8px 24px rgba(212, 175, 55, 0.4) !important;
  transition: all 0.3s ease !important;
}

.sl-checkout-page .place-order button:hover,
.sl-checkout-page .place-order .button:hover,
.sl-checkout-page button#place_order:hover,
.sl-checkout-page .woocommerce-checkout-payment button.button.alt:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 30px rgba(212, 175, 55, 0.55) !important;
  color: #102615 !important;
}

/* Login / coupon toggles + notices */
.sl-checkout-page .woocommerce-info,
.sl-checkout-page .message-wrapper .message-container {
  background: var(--sl-ivory-50, #FFFEFB) !important;
  border: 1.5px solid rgba(199, 166, 92, 0.35) !important;
  border-radius: 12px !important;
  color: var(--sl-ink-900, #0D2F23) !important;
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  padding: 14px 18px !important;
}

.sl-checkout-page .woocommerce-info a,
.sl-checkout-page .message-wrapper a {
  color: var(--sl-maple-600, #7A1C1C) !important;
  font-weight: 700 !important;
}

.sl-checkout-page .checkout_coupon {
  background: var(--sl-ivory-50, #FFFEFB) !important;
  border-radius: 12px !important;
  border: 1.5px dashed rgba(212, 175, 55, 0.5) !important;
  padding: 18px !important;
}

.sl-checkout-page .checkout_coupon .coupon {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.sl-checkout-page .checkout_coupon .coupon .input-text {
  flex: 1 !important;
  min-width: 160px !important;
}

.sl-checkout-page .checkout_coupon .coupon .button {
  background: linear-gradient(135deg, #F7DF9B 0%, #D4AF37 100%) !important;
  color: #102615 !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 800 !important;
}

/* ==========================================================================
   SILVERLIFE DESIGN SYSTEM ΓÇö THANKYOU PAGE (/checkout/order-received/)
   ========================================================================== */

.sl-thankyou-page .cat-page {
  background: transparent !important;
}

.sl-thankyou-page .sl-thankyou-row {
  max-width: 1240px;
  margin: 0 auto;
  align-items: flex-start !important;
}

.sl-thankyou-page .sl-thankyou-details,
.sl-thankyou-page .sl-thankyou-summary {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

.sl-thankyou-page .woocommerce-notice--success,
.sl-thankyou-page .woocommerce-thankyou-order-received {
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  color: var(--sl-forest-800, #164627) !important;
  font-weight: 700 !important;
}

.sl-thankyou-page .sl-thankyou-card {
  background: linear-gradient(165deg, var(--sl-forest-950, #091d16) 0%, var(--sl-forest-900, #102615) 100%) !important;
  border-radius: 18px !important;
  border: 1.5px solid rgba(247, 223, 155, 0.4) !important;
  box-shadow: 0 16px 40px -18px rgba(9, 29, 22, 0.5) !important;
  padding: 26px 24px !important;
  color: #E2E8F0 !important;
}

/* Message success nằm trong card tối → phải dùng vàng kim, KHÔNG dùng xanh */
.sl-thankyou-page .sl-thankyou-card .woocommerce-thankyou-order-received,
.sl-thankyou-page .sl-thankyou-card .woocommerce-notice--success,
.sl-thankyou-page .sl-thankyou-card .success-color {
  color: var(--sl-gold-300, #F7DF9B) !important;
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-weight: 700 !important;
}

.sl-thankyou-page .sl-thankyou-card a {
  color: var(--sl-gold-300, #F7DF9B) !important;
}

.sl-thankyou-page .sl-thankyou-overview {
  list-style: none !important;
  margin: 16px 0 0 !important;
  padding: 0 !important;
}

.sl-thankyou-page .sl-thankyou-overview li {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid rgba(212, 175, 55, 0.2) !important;
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 14.5px !important;
}

.sl-thankyou-page .sl-thankyou-overview li:last-child {
  border-bottom: none !important;
}

.sl-thankyou-page .sl-thankyou-overview li strong {
  color: var(--sl-gold-300, #F7DF9B) !important;
  font-weight: 800 !important;
  text-align: right !important;
}

/* Thankyou order details table (from woocommerce_order_details_table hook) */
.sl-thankyou-page .woocommerce-order-details,
.sl-thankyou-page .woocommerce-columns--addresses {
  background: var(--sl-ivory-50, #FFFEFB) !important;
  border-radius: 16px !important;
  border: 1.5px solid rgba(199, 166, 92, 0.3) !important;
  box-shadow: 0 12px 34px -18px rgba(16, 38, 21, 0.15) !important;
  padding: 24px 26px !important;
  margin-bottom: 24px !important;
}

.sl-thankyou-page .woocommerce-order-details h2,
.sl-thankyou-page .woocommerce-columns--addresses h2,
.sl-thankyou-page .woocommerce-columns--addresses h3 {
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  color: var(--sl-forest-900, #102615) !important;
  margin: 0 0 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 2px solid rgba(212, 175, 55, 0.4) !important;
}

.sl-thankyou-page .woocommerce-order-details table,
.sl-thankyou-page .woocommerce-order-details .order_details {
  width: 100% !important;
  border-collapse: collapse !important;
}

.sl-thankyou-page .woocommerce-order-details th,
.sl-thankyou-page .woocommerce-order-details td {
  padding: 10px 0 !important;
  border-bottom: 1px solid rgba(199, 166, 92, 0.18) !important;
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 14px !important;
  color: var(--sl-ink-900, #0D2F23) !important;
}

.sl-thankyou-page .woocommerce-order-details th {
  font-weight: 800 !important;
  color: var(--sl-forest-900, #102615) !important;
}

.sl-thankyou-page .woocommerce-order-details .amount {
  font-weight: 800 !important;
  color: var(--sl-maple-600, #7A1C1C) !important;
}

.sl-thankyou-page .woocommerce-order-details .order-total .amount {
  font-size: 20px !important;
  font-weight: 900 !important;
}

.sl-thankyou-page .addresses address {
  font-style: normal !important;
  color: var(--sl-ink-600, #575249) !important;
  line-height: 1.7 !important;
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
}

.sl-thankyou-page .woocommerce-customer-details .woocommerce-customer-details--phone,
.sl-thankyou-page .woocommerce-customer-details .woocommerce-customer-details--email {
  padding-left: 20px !important;
}

/* Responsive checkout/thankyou */
@media (max-width: 980px) {
  .sl-checkout-page .sl-checkout-sidebar-col,
  .sl-thankyou-page .sl-thankyou-summary {
    margin-top: 30px !important;
  }
}

@media (max-width: 768px) {
  .sl-checkout-page .woocommerce-billing-fields,
  .sl-checkout-page .woocommerce-shipping-fields,
  .sl-checkout-page .woocommerce-additional-fields {
    padding: 20px 18px 14px !important;
  }

  .sl-checkout-page .checkout_coupon .coupon {
    flex-direction: column;
  }

  .sl-checkout-page .checkout_coupon .coupon .button {
    width: 100%;
  }
}

/* ==========================================================================
   BẢO VỆ TƯƠNG PHẢN — Cấm text xanh (#164627 / forest-*) trên nền xanh đậm
   ========================================================================== */

/* Cart totals: hàng giảm giá khi áp mã */
.sl-totals-table tr.cart-discount th,
.sl-totals-table tr.cart-discount td {
  color: #E2E8F0 !important;
}

.sl-totals-table tr.cart-discount td .amount {
  color: var(--sl-gold-300, #F7DF9B) !important;
}

/* Cart totals: dòng tổng phải sáng trên nền tối */
.sl-totals-table tr.order-total td strong,
.sl-totals-table tr.order-total td .woocommerce-Price-amount,
.sl-totals-table tr.order-total td .amount {
  color: var(--sl-gold-300, #F7DF9B) !important;
}

/* Checkout sidebar: mọi text phải sáng trên nền xanh đậm */
.sl-checkout-page .sl-checkout-sidebar p,
.sl-checkout-page .sl-checkout-sidebar li,
.sl-checkout-page .sl-checkout-sidebar td,
.sl-checkout-page .sl-checkout-sidebar th,
.sl-checkout-page .sl-checkout-sidebar span,
.sl-checkout-page .sl-checkout-sidebar strong,
.sl-checkout-page .sl-checkout-sidebar label {
  color: #E2E8F0 !important;
}

.sl-checkout-page .sl-checkout-sidebar .amount {
  color: var(--sl-gold-300, #F7DF9B) !important;
}

/* Thankyou card: mọi text phải sáng trên nền xanh đậm */
.sl-thankyou-page .sl-thankyou-card p,
.sl-thankyou-page .sl-thankyou-card li,
.sl-thankyou-page .sl-thankyou-card span,
.sl-thankyou-page .sl-thankyou-card strong,
.sl-thankyou-page .sl-thankyou-card a {
  color: #E2E8F0 !important;
}

.sl-thankyou-page .sl-thankyou-card .woocommerce-Price-amount,
.sl-thankyou-page .sl-thankyou-card .amount {
  color: var(--sl-gold-300, #F7DF9B) !important;
}

.sl-thankyou-page .sl-thankyou-overview li strong {
  color: var(--sl-gold-300, #F7DF9B) !important;
}

/* Coupon áp dụng thành công: notice xanh của WC phải đọc được trên nền sáng (vẫn OK) */
/* nhưng nếu nằm trong card tối → chuyển vàng */
.sl-checkout-page .sl-checkout-sidebar .woocommerce-message,
.sl-checkout-page .sl-checkout-sidebar .woocommerce-info,
.sl-checkout-page .sl-checkout-sidebar .woocommerce-error {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(212, 175, 55, 0.35) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  color: var(--sl-gold-300, #F7DF9B) !important;
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 13.5px !important;
}

.sl-checkout-page .sl-checkout-sidebar .woocommerce-message a,
.sl-checkout-page .sl-checkout-sidebar .woocommerce-info a,
.sl-checkout-page .sl-checkout-sidebar .woocommerce-error a {
  color: var(--sl-gold-300, #F7DF9B) !important;
  text-decoration: underline !important;
}

/* --- WooCommerce Products Grid Responsiveness for columns-3 --- */
@media (min-width: 769px) {
  .woocommerce ul.products.columns-3:not(.slider):not(.flickity-enabled) {
    display: flex !important;
    flex-wrap: wrap !important;
  }
  .woocommerce ul.products.columns-3:not(.slider):not(.flickity-enabled) li.product {
    width: calc(33.333% - 20px) !important;
    max-width: calc(33.333% - 20px) !important;
    flex: 0 0 calc(33.333% - 20px) !important;
    margin-left: 10px !important;
    margin-right: 10px !important;
    margin-bottom: 20px !important;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  .woocommerce ul.products.columns-3:not(.slider):not(.flickity-enabled) li.product {
    width: calc(50% - 16px) !important;
    max-width: calc(50% - 16px) !important;
    flex: 0 0 calc(50% - 16px) !important;
    margin-left: 8px !important;
    margin-right: 8px !important;
    margin-bottom: 16px !important;
  }
}

/* =========================================================
   RESPONSIVE DESIGN FOR BLOG ARCHIVE & CATEGORY PAGES
   ========================================================= */

@media (max-width: 849px) {
  /* Reset sidebar left margin when it wraps to the bottom */
  #secondary,
  .widget-area,
  .blog-sidebar,
  .sidebar-inner,
  .post-sidebar {
    margin-left: 0 !important;
  }
}

@media (max-width: 767px) {
  /* Page Wrapper Padding to prevent touching edges */
  .blog-archive.page-wrapper {
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-top: 10px !important;
    padding-bottom: 20px !important;
  }

  /* Header adjustments */
  .category-page-title,
  .page-title.blog-page-title,
  .page-title.archive-title,
  .articles-header-container {
    padding: 16px 10px 12px !important;
    margin: 0 auto 10px !important;
  }
  
  .category-page-title h1,
  .page-title h1,
  .archive-title h1,
  .category-main-title,
  .articles-main-title {
    font-size: clamp(22px, 6vw, 30px) !important;
  }
  
  .sec-heading-dark,
  .articles-title-emerald {
    font-size: clamp(16px, 4vw, 20px) !important;
    letter-spacing: 0.1em !important;
  }
  
  .sec-heading-burgundy,
  .articles-title-burgundy {
    font-size: clamp(22px, 6vw, 30px) !important;
  }
  
  .category-breadcrumbs-tag-pill,
  .articles-tag-pill {
    padding: 6px 18px !important;
    font-size: 11px !important;
    letter-spacing: 0.1em !important;
  }
  
  .story-svg-divider svg,
  .category-title-divider-svg svg {
    max-width: 180px !important;
  }
  
  .category-subtitle-tagline,
  .search-subtitle-tagline,
  .articles-subheading {
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin-top: 10px !important;
  }
  
  /* Widget styles on mobile */
  #secondary .widget,
  .widget-area .widget,
  .blog-sidebar .widget,
  .sidebar-inner .widget {
    padding: 20px 16px !important;
    margin-bottom: 20px !important;
  }

  /* No results search box styling */
  .no-results-search-box {
    padding: 32px 16px !important;
  }
  .no-results-search-box i {
    font-size: 36px !important;
    margin-bottom: 14px !important;
  }
  .no-results-search-box h3 {
    font-size: 18px !important;
    margin-bottom: 10px !important;
  }
  .no-results-search-box p {
    font-size: 13px !important;
    margin-bottom: 16px !important;
  }
}

@media (max-width: 599px) {
  /* 1-Column Articles Grid on mobile phones */
  .category-posts-grid-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }
  
  /* Optimizing the post item card for 1-column mobile view */
  .post-item .box-image,
  .box-blog-post .box-image {
    height: 200px !important;
  }
  
  .post-item .box-text,
  .box-blog-post .box-text {
    padding: 18px 12px 20px !important;
  }
  
  .post-item .entry-title,
  .box-blog-post .entry-title {
    font-size: 16.5px !important;
    margin-bottom: 8px !important;
  }
  
  .post-item .entry-summary,
  .post-item .from_the_blog_excerpt,
  .box-blog-post p {
    font-size: 13px !important;
    margin-bottom: 16px !important;
    -webkit-line-clamp: 2 !important; /* Shorter summary on small devices */
  }
  
  .post-item .read-more,
  .box-blog-post .read-more {
    padding: 8px 18px !important;
    font-size: 11px !important;
  }
  
  .card-category-badge {
    top: 10px !important;
    left: 10px !important;
    padding: 3px 10px !important;
    font-size: 10px !important;
  }
}

@media (max-width: 480px) {
  /* Prevent pagination overflow on small devices */
  .category-pagination-wrapper ul,
  .category-pagination-wrapper ul.page-numbers,
  .nav-pagination,
  .nav-pagination.links,
  ul.page-numbers,
  ul.nav-pagination {
    gap: 6px !important;
  }
  
  .category-pagination-wrapper .page-number,
  .category-pagination-wrapper .page-numbers,
  .pagination-container .page-number,
  .pagination-container .page-numbers,
  nav.pagination .page-number,
  nav.pagination .page-numbers,
  .nav-pagination li a,
  .nav-pagination li span,
  ul.page-numbers li a,
  ul.page-numbers li span,
  a.page-number,
  span.page-number {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    font-size: 13px !important;
    line-height: 36px !important;
  }
  
  .category-pagination-wrapper .page-number.prev,
  .category-pagination-wrapper .page-number.next,
  .pagination-container .page-number.prev,
  .pagination-container .page-number.next,
  nav.pagination .page-number.prev,
  nav.pagination .page-number.next,
  .nav-pagination li a.prev,
  .nav-pagination li a.next,
  ul.page-numbers li a.prev,
  ul.page-numbers li a.next {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
  }
}

/* Mobile-only search container wrapper */
.mobile-search-container {
  display: none !important;
}

@media (max-width: 849px) {
  .mobile-search-container {
    display: block !important;
    margin-top: 0 !important;
    margin-bottom: 16px !important;
    width: 100% !important;
  }
  .mobile-search-container form {
    margin: 0 !important;
  }
  /* Hide the redundant sidebar search bar at the bottom on mobile */
  .post-sidebar .widget_search {
    display: none !important;
  }
}

/* Landscape iPad & Tablets (980px - 1194px in Landscape) */
@media only screen and (min-width: 980px) and (max-width: 1194px) and (orientation: landscape) {
  /* Articles Grid Layout: change to 2 columns to prevent squishing */
  .category-posts-grid-container {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
  }
  
  .category-posts-grid-container .post-item .box-image,
  .category-posts-grid-container .box-blog-post .box-image {
    height: 200px !important;
  }
  
  .post-item .box-text,
  .box-blog-post .box-text {
    padding: 20px 18px !important;
  }

  .category-page-title,
  .page-title.blog-page-title,
  .page-title.archive-title,
  .articles-header-container {
    padding: 36px 16px 24px !important;
    margin-bottom: 24px !important;
  }
}