:root {
    --red-bg: #ff0300;
    --button-color: #000;
    --main-color: #af0081;
    --main-dark-color: #4B4870;
    --menu-bg: #00d63d;
    --menu-bg-2: #5b8a2b;
    --menu-bg-3: #00290a;
    --menu-color: #ffffff;
    --side-bg: #ff4c60;
    --side-title: #4B4870;
    --title-color: #000000;
    --title-hover: #ff4c60;
    --footer-color: #ffffff;
    --footer-bg: #000000;
    --body-background-color: #F9F9FE;
    --body-text-color: #656565;
    --body-link-color: #e7008b;
    --posts-background-color: #ffffff;
    --posts-title-color: #333333;
    --posts-text-color: #656565;
    --posts-icons-color: #ff4c60;
    --labels-background-color: #ff4c60;
    
    /* New variables for enhanced design */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
    --border-radius: 8px;
    --border-radius-lg: 12px;
    --transition: all 0.3s ease;
    --transition-fast: all 0.15s ease;

    --wsttvn-lp-accent: var(--main-color, #af0081);
    --wsttvn-lp-accent-2: #ff25d0;
    --wsttvn-lp-text-dark: #5b8a2b;
    --wsttvn-lp-text-muted: #6b6b6b;
    --wsttvn-lp-surface: #ffffff;
    --wsttvn-lp-surface-alt: #fdf3fa;
    --wsttvn-lp-warning-bg: #fff4e5;
    --wsttvn-lp-warning-border: #e5a13a;
    --wsttvn-lp-star: #f5a623;
    --wsttvn-lp-radius: var(--border-radius-lg, 12px);
    --wsttvn-lp-shadow: var(--shadow-md, 0 4px 8px rgba(0, 0, 0, 0.12));
    --wsttvn-lp-shadow-lg: var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.15));
    --wsttvn-lp-transition: var(--transition, all 0.3s ease);
    --wsttvn-lp-max-width: 1080px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
img{
    margin: 0 auto;
    display: block;
    max-width: 100%;

}

.longtext img{
    padding: 15px 0px;
}
iframe{max-width: 100%;}
body {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #000000;
    background-color: #ffffff;
    line-height: 1.6;
    overflow-x: hidden;
}
h1,h2,h3,h4,h5,h6{
    padding-bottom: 0px;
}

a {
    color: #000;
    text-decoration: none;
    transition: var(--transition);
}

a:hover {
    color: var(--title-hover);
}

ul {
    list-style: none;
}


.container {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 15px;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}

/* ==================== HEADER STYLES ==================== */
#header-wrap {
    background-color: #5b8a2b;
    box-shadow: var(--shadow-sm);
    position: relative;
    z-index: 1000;
    padding: 0px 0px;
    height: 60px;
}

.header-header {

}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 0px;
}

.header-logo {
    flex: 0 0 auto;
    z-index: 1002;
    height: 60px;
    background: #e50000;
    padding: 0px 15px;
    line-height: 60px;
}

.header-logo img {
    max-height: 60px;
    transition: var(--transition);
    padding: 5px 0px;
}

.header-logo:hover img {
    transform: scale(1.05);
}

.logo-text {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
}

.header-center {
    flex: 1;
    text-align: center;
    padding: 0 20px;
}

.header-center .site-title {
    font-size: 16px;
    font-weight: 700;
    color: #00d63d;
    margin-bottom: 5px;
    line-height: 1.2;
    font-style: italic;
}

.header-center .site-description {
    font-size: 14px;
    color: var(--body-text-color);
    font-style: italic;
    opacity: 0.8;
}

.header-right {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 15px;
}

.header-social {
    display: flex;
    gap: 10px;
}

.header-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--main-color), var(--main-dark-color));
    color: white;
    border-radius: 50%;
    transition: var(--transition);
    font-size: 16px;
    position: relative;
    overflow: hidden;
}

.header-social a::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.5s ease;
}

.header-social a:hover::before {
    left: 100%;
}

.header-social a:hover {
    transform: translateY(-3px) scale(1.1);
    box-shadow: var(--shadow-md);
}

.header-menu {
    background: linear-gradient(135deg, var(--menu-bg), #00c23a);
    position: relative;
    z-index: 1001;
}

.header-menu .header-menu-wrap {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.main-menu-inner-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 60px;
}

/* ==================== DESKTOP MENU ==================== */
#main-menu {
    display: flex;
    max-width: calc(100% - 300px);
    position: relative;
}

#main-menu > ul {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    align-items: center;
}

#main-menu ul li {
    position: relative;
    flex-shrink: 0;
}

#main-menu ul li a {
    color: var(--menu-color);
    padding: 18px 20px;
    display: block;
    font-weight: 600;
    text-transform: capitalize;
    white-space: nowrap;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

#main-menu ul li a::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background: var(--menu-bg-2);
    transition: var(--transition);
    transform: translateX(-50%);
}

#main-menu ul li:hover > a::before,
#main-menu ul li a:focus::before {
    width: 80%;
}

#main-menu ul li:hover > a {
    color: black;
    background-color: rgba(255, 255, 255, 0.08);
}

#main-menu ul li ul {
    position: absolute;
    top: 100%;
    left: 0;
    background: linear-gradient(135deg, #01952d, #04621e);
    min-width: 240px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: var(--transition);
    z-index: 1000;
    box-shadow: var(--shadow-lg);
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    border-top: 3px solid #00c53b;
}

#main-menu ul li:hover > ul {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#main-menu ul li ul li a {
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-weight: 500;
    font-size: 14px;
    transition: var(--transition-fast);
}

#main-menu ul li ul li:last-child a {
    border-bottom: none;
}

#main-menu ul li ul li a:hover {
    background-color: var(--menu-bg-2);
    color: black;
    padding-left: 25px;
}

#main-menu ul li.has-submenu > a::after {
    content: '\f107';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-left: 8px;
    font-size: 12px;
    transition: var(--transition);
}

#main-menu ul li.has-submenu:hover > a::after {
    transform: rotate(180deg);
    color: var(--menu-bg-3);
}

#main-menu ul li ul li.has-submenu > a::after {
    content: '\f105';
    float: right;
    font-size: 12px;
}

#main-menu ul li ul li ul {
    top: 0;
    left: 100%;
    border-radius: 0 var(--border-radius) var(--border-radius) var(--border-radius);
}

/* Menu items ẩn */
        .menu-item.hidden {
            display: none !important;
        }

        /* Mobile Menu Toggle */
        .mobile-menu-toggle {
            display: none;
            color: var(--menu-color);
            font-size: 20px;
            cursor: pointer;
            padding: 8px 10px;
            background: #5b8a2b;
            border: none;
            border-radius: 5px;
        }
/* ==================== MOBILE MENU TOGGLE ==================== */
        /* Mobile Menu */
        .mobile-menu {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            background-color: var(--menu-bg-2);
            z-index: 1000;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .mobile-menu.active {
            display: block;
        }

        .mobile-menu ul li {
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .mobile-menu ul li:last-child {
            border-bottom: none;
        }

        .mobile-menu ul li a {
            color: var(--menu-color);
            padding: 15px 20px;
            display: block;
            font-weight: 500;
        }

        .mobile-menu ul li a:hover {
            background-color: rgba(255, 255, 255, 0.05);
        }

        .mobile-menu ul li.has-submenu > a {
            position: relative;
        }

        .mobile-menu ul li.has-submenu > a::after {
            content: '\f078';
            font-family: 'Font Awesome 5 Free';
            font-weight: 900;
            position: absolute;
            right: 20px;
            transition: transform 0.3s ease;
        }

        .mobile-menu ul li.has-submenu.active > a::after {
            transform: rotate(180deg);
        }

        .mobile-menu ul li ul {
            display: none;
            background-color: rgba(0, 0, 0, 0.1);
        }

        .mobile-menu ul li ul.active {
            display: block;
        }

        .mobile-menu ul li ul li a {
            padding-left: 40px;
        }

        .mobile-menu ul li ul li ul li a {
            padding-left: 60px;
        }

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1002;
    backdrop-filter: blur(3px);
}

.mobile-menu-overlay.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ==================== HEADER MENU RIGHT ==================== */
.header-menu-right {
    display: flex;
    align-items: center;
    gap: 15px;
    z-index: 1001;
}

/* ==================== DROPDOWN STYLES ==================== */
/* Dropdown Wrapper */
        .dropdown-wrapper {
            position: relative;
            display: inline-block;
        }

        /* Dropdown Trigger Button */
        .dropdown-trigger {
            display: flex;
            align-items: center;
            gap: 8px;
            background-color: var(--red-bg);
            color: white;
            border: none;
            border-radius: 8px;
            padding: 10px 16px;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .dropdown-trigger:hover {
            background-color: var(--main-color);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        }

        .dropdown-trigger:focus {
            outline: 2px solid #818cf8;
            outline-offset: 2px;
        }

        .dropdown-trigger[aria-expanded="true"] {
            background-color: var(--red-bg);
            color: #fff;
            font-weight: bold;
        }

        .dropdown-trigger[aria-expanded="true"] .dropdown-chevron {
            transform: rotate(180deg);
        }

        /* Dropdown Chevron Icon */
        .dropdown-chevron {
            transition: transform 0.2s ease;
            fill: currentColor;
        }

        /* Dropdown Menu */
        .dropdown-menu {
            position: absolute;
            top: 100%;
            left: -100px;
            margin-top: 12px;
            min-width: 280px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px);
            transition: all 0.2s ease;
            z-index: 1000;
            overflow: hidden;
        }

        .dropdown-menu[aria-hidden="false"] {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        /* Dropdown Content */
        .dropdown-content {
            padding: 8px 0;
        }

        /* Dropdown List */
        .dropdown-list {
            list-style: none;
        }

        /* Dropdown Item */
        .dropdown-item {
            border-bottom: 1px solid #f1f5f9;
        }

        .dropdown-item:last-child {
            border-bottom: none;
        }

        /* Dropdown Link */
        .dropdown-link {
            display: block;
            padding: 12px 16px;
            text-decoration: none;
            color: #334155;
            transition: background-color 0.15s ease;
        }

        .dropdown-link:hover {
            background-color: #f8fafc;
        }

        .dropdown-link:focus {
            outline: none;
            background-color: #f1f5f9;
        }

        /* Dropdown Item Content */
        .dropdown-item-content {
            display: flex;
            flex-direction: column;
        }

        /* Dropdown Title */
        .dropdown-title {
            font-weight: 500;
            color: #1e293b;
            margin-bottom: 4px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        /* Dropdown Description */
        .dropdown-desc {
            font-size: 14px;
            color: #64748b;
        }

        /* Dropdown Tag */
        .dropdown-tag {
            background-color: #fef2f2;
            color: #fffcfc;
            font-size: 12px;
            font-weight: 600;
            padding: 2px 6px;
            border-radius: 4px;
        }

        /* Dropdown Footer */
        .dropdown-footer {
            background-color: #f8fafc;
            margin-top: -15px;
            padding: 11px;
        }

        .dropdown-footer-link {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-weight: 500;
            color: #00c53b;
        }

        .dropdown-footer-link:hover {
            background-color: #f1f5f9;
        }

        /* Arrow Icon */
        .arrow-icon {
            transition: transform 0.2s ease;
        }

        .dropdown-footer-link:hover .arrow-icon {
            transform: translateX(4px);
        }

/* ==================== SEARCH STYLES ==================== */
.show-search {
    color: var(--menu-color);
    cursor: pointer;
    padding: 15px;
    font-size: 16px;
    display: flex;
    align-items: center;
    transition: var(--transition);
    background: none;
    border: none;
    border-radius: var(--border-radius);
    position: relative;
    overflow: hidden;
}

.show-search::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

.show-search:hover::before {
    left: 100%;
}

.show-search:hover {
    color: var(--main-color);
    background-color: rgba(255, 255, 255, 0.1);
}

#nav-search {
    display: none;
    position: absolute;
    top: 61px;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, var(--menu-bg), #00c23a);
    padding: 20px;
    z-index: 1004;
    box-shadow: var(--shadow-lg);
    animation: slideDownSearch 0.3s ease;
}

#nav-search.active {
    display: block;
}

@keyframes slideDownSearch {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

#nav-search .search-form {
    display: flex;
    max-width: 600px;
    margin: 0 auto;
    background: white;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

#nav-search .search-input {
    flex: 1;
    padding: 15px 20px;
    border: none;
    font-family: inherit;
    font-size: 16px;
    background: transparent;
    transition: var(--transition);
}

#nav-search .search-input:focus {
    outline: none;
    background: #f8f9fa;
}

#nav-search .search-action {
    padding: 15px 25px;
    background: linear-gradient(135deg, var(--main-color), var(--main-dark-color));
    color: white;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    transition: var(--transition);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 14px;
}

#nav-search .search-action:hover {
    background: linear-gradient(135deg, var(--main-dark-color), var(--main-color));
    transform: translateX(2px);
}

/* Buttom header ------- */
.wsttvn_trustbar {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    padding: 3px 0px;
    overflow-x: auto;
    background: #ffc5c5;
    border-bottom: 1px solid #ffffff;
}
.wsttvn_trustbar-container {
    max-width: 1080px;
    padding: 0 5px;
    margin: 0 auto;
    width: 100%;
}
.wsttvn_trustbar_btn {
    flex: 1 1 0;
    white-space: nowrap;
    text-align: center;
    padding: 6px 14px;
    border-radius: 25px;
    font-weight: normal;
    font-size: 14px;
    text-decoration: none;
    color: #fff;
    transition: opacity .15s ease;
    max-width: max-content;
    line-height: 36px;
}
.wsttvn_trustbar_btn:hover {
    opacity: .9;
}
.wsttvn_trustbar_btn.wsttvn_trustbar_sms {
    background: #5b8a2b;
    
}
.wsttvn_trustbar_btn.wsttvn_trustbar_warning {
    background: #e30000;
}

/* ====================breadcrumb ==========================*/
.breadcrumb{
    margin-bottom: 10px;
}
.breadcrumb a{
    font-size: 16px;
    color: #00d63d;
    font-style: italic;
    font-weight: bold;
}
.breadcrumb span{
    font-size: 16px;
    font-style: italic;
    font-weight: bold;
}

/* ==================== CONTENT STYLES ==================== */
#content-wrapper {
    padding: 20px 0;
    animation: fadeInUp 0.6s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#main-wrapper {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
    padding: 0 15px;
}

#sidebar-wrapper {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
    padding: 0 15px;
}

#main-wrapper p{
    padding-bottom: 10px;
}
#main-wrapper img {
    padding-bottom: 25px;
}

/* ====================HOME ============================*/
.home-site .main-wrapper h1{
    line-height: 35px;
    margin-bottom: 0px;
    font-size: 24px;
    color: #af0081;
}
.home-site .main-wrapper h2, .home-site .main-wrapper h3, .home-site .main-wrapper h4, .home-site .main-wrapper h5 {
    line-height: 26px;
    font-size: 20px;
    color: #af0081;
    padding: 10px;
    margin: 10px 0px;
    background: antiquewhite;
}

.home-site .main-wrapper .img-post{
    margin-bottom: 20px;
}
.home-site .main-wrapper img{
    padding: 10px 0px;
}
.home-site .main-wrapper .home_description, .short_description{
    border: solid 2px #93008d;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 10px;
}

/* ============================================================
   WSTTVN — CSS cho lưới thẻ item (ảnh + tiêu đề + mô tả), dùng
   chung cho Nguồn gốc / Thành phần / Công dụng / Đối tượng sử
   dụng / Hướng dẫn sử dụng trên home.php.

   Khớp đúng cấu trúc HTML thật:
   <div class="wsttvn_lp_item_grid">
       <div class="wsttvn_lp_item_card">
           <div class="wsttvn_lp_item_card_image"><img ...></div>
           <div class="wsttvn_lp_item_card_body">
               <h3 class="wsttvn_lp_item_card_title">...</h3>
               <p class="wsttvn_lp_item_card_desc">...</p>
           </div>
       </div>
       ...
   </div>
   ============================================================ */

.wsttvn_lp_item_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 8px;
    width: 1080px;
    max-width: 100%;
    margin: 0 auto;
}

.wsttvn_lp_item_card {
    background: #ffffff;
    border-radius: var(--wsttvn-lp-radius);
    box-shadow: var(--wsttvn-lp-shadow);
    overflow: hidden;
    transition: var(--wsttvn-lp-transition);
    text-align: left;
}

.wsttvn_lp_item_card:hover {
    transform: translateY(-4px);
    box-shadow: var(--wsttvn-lp-shadow-lg);
}

.wsttvn_lp_item_card_image {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: var(--wsttvn-lp-surface-alt);
}

.wsttvn_lp_item_card_image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.wsttvn_lp_item_card_body {
    padding: 16px 18px;
}

.wsttvn_lp_item_card_title {
    font-size: 16px;
    font-weight: 700;
    color: var(--wsttvn-lp-accent);
    margin: 0 0 8px;
}

.wsttvn_lp_item_card_desc {
    font-size: 14px;
    line-height: 1.6;
    color: var(--wsttvn-lp-text-dark);
    margin: 0;
}

@media (max-width: 576px) {
    .wsttvn_lp_item_grid {
        grid-template-columns: 1fr;
    }
}

/* ==================== POST STYLES ==================== */
.blog-post {
    background-color: var(--posts-background-color);
    border-radius: var(--border-radius-lg) 12px;
    overflow: hidden;
    margin-bottom: 30px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    position: relative;
    border: solid 1px #f1f1f1;
    box-shadow: 0px 0px 5px 3px #d3d3d3;
}

.blog-post::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, transparent, rgba(255,76,96,0.02));
    opacity: 0;
    transition: var(--transition);
}

.blog-post:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}

.blog-post:hover::before {
    opacity: 1;
}

.post-image-wrap {
    position: relative;
    overflow: hidden;
}

.post-image-link {
    display: block;
    height: 280px;
    overflow: hidden;
    position: relative;
}

.post-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.post-image-link:hover .post-thumb {
    transform: scale(1.1);
}

.post-tag {
    position: absolute;
    top: 15px;
    left: 15px;
    background: linear-gradient(135deg, #4fff4c, #144605);
    color: white;
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 20px;
    text-transform: capitalize;
    font-weight: 600;
    box-shadow: var(--shadow-sm);
    z-index: 2;
}

.post-info {
    padding: 25px;
}

.post-info-title h2 {
    font-size: 22px;
    margin-bottom: 12px;
    line-height: 1.4;
}

.post-info-title h2 a {
    color: var(--title-color);
    transition: var(--transition);
    background: linear-gradient(135deg, var(--title-color), var(--main-dark-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.post-info-title h2 a:hover {
    background: linear-gradient(135deg, var(--main-color), var(--title-hover));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}



.post-meta {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    font-size: 13px;
    color: #363535;
    flex-wrap: wrap;
    gap: 15px;
    font-style: italic;
}

.post-author {
    display: flex;
    align-items: center;
    gap: 5px;
}

.post-author a {
    color: var(--main-color);
    font-weight: 500;
    transition: var(--transition);
}

.post-author a:hover {
    color: var(--main-dark-color);
}

.post-date {
    color: #4a4a4a;
    display: flex;
    align-items: center;
    gap: 5px;
    font-style: italic;
}

.post-snippet {
    margin-bottom: 20px;
    color: #000000;
    line-height: 1.7;
    font-size: 16px;
}

.read-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(358deg, #5b8a2b, #5b8a2b);
    color: white;
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: 600;
    transition: var(--transition);
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
}

.read-more::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.5s ease;
}

.read-more:hover::before {
    left: 100%;
}

.read-more:hover {
    background: linear-gradient(135deg, var(--main-color), var(--main-dark-color));
    transform: translateX(5px);
    box-shadow: var(--shadow-md);
}

/* ==================TRANG CHI TIẾT BÀI VIẾT ==============*/
.post-wrapper{
    
}
.post-wrapper h2 {
    font-size: 24px;
    margin-bottom: 20px;
    margin-top: 10px;
}
.post-wrapper h3{
    font-size: 20px;
}
.post-wrapper h4{
    font-size: 18px;
}
.post-wrapper h5{
    font-size: 16px;
}
.post-wrapper p{
    text-align: justify;
    font-size: 16px;
    line-height: 26px;

}

.post-wrapper ul{
    margin-left: 10px;
    
}

.post-wrapper ul li{
    list-style: square;
    margin-left: 20px;
    font-size: 16px;
    line-height: 30px;
}
.post-meta-info{
    display: flex;
    gap: 10px;
    padding: 10px;
}

@media screen and (max-width: 768px){
    .post-meta-info{
        display: block;
        gap: 10px;
        padding: 10px;
    }
}

/* ==================== SIDEBAR STYLES ==================== */
.sidebar .widget {
    background-color: var(--posts-background-color);
    border-radius: var(--border-radius-lg);
    padding: 25px;
    margin-bottom: 30px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.sidebar .widget::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(135deg, var(--side-bg), var(--main-dark-color));
    transition: var(--transition);
}

.sidebar .widget:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.sidebar .widget:hover::before {
    width: 6px;
}

.widget-title {
    position: relative;
    background: #5b8a2b;
    padding: 10px;
    line-height: 22px;
    display: block;
    align-items: center;
    height: 42px;
    margin-bottom: 20px;
    border-radius: 0px;
}

#sidebar-wrapper .widget .list-label {
    padding: 0px 0px 15px 0px;
    border-radius: 10px;
}
#sidebar-wrapper .sidebar{
    margin-bottom: 20px;
}
.footer-info{
    margin-bottom: 20px;
}

.footer-info .widget-title h3 {
    font-size: 38px;
    color: #ffffff;
    position: relative;
    display: block;
    font-weight: 700;
    text-align: center;
    border-bottom: solid 3px #fff;
    max-width: max-content;
    margin: 0 auto 34px;
    line-height: 28px;
}

.widget-title h3 {
    font-size: 18px;
    color: #ffffff;
    position: relative;
    display: inline-block;
    font-weight: 700;
}

.widget-title h3:after {
    content: '';
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    height: 3px;
    border-radius: 0px;
}

/* Popular Posts Widget */
.popular-post {
    display: flex;
    margin-bottom: 6px;
    padding-bottom: 5px;
    border-bottom: 1px solid #eee;
    transition: var(--transition);
    align-items: center;
}

.popular-post:hover {
    transform: translateX(8px);
}

.popular-post:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.popular-post-image {
    flex: 0 0 80px;
    margin-right: 15px;
    border-radius: 0px;
    overflow: hidden;
}

.popular-post-image img {
    width: 80px;
    height: 60px;
    object-fit: cover;
    transition: var(--transition);
}

.popular-post:hover .popular-post-image img {
    transform: scale(1.1);
}

.popular-post-info h4 {
    font-size: 14px;
    margin-bottom: 0px;
    line-height: 16px;
    padding: 0px;
}

.popular-post-info h4 a {
    color: var(--title-color);
    transition: var(--transition);
    font-weight: 600;
}

.popular-post-info h4 a:hover {
    color: var(--title-hover);
}

.popular-post-date {
    font-size: 10px;
    color: #5e5c5c;
    display: flex;
    align-items: center;
    gap: 5px;
    font-style: italic;
}
.popular-post-views{
    font-style: italic;
    color: #5e5c5c;
    font-size: 10px;
}


/* Categories Widget */
.list-label li {
    transition: var(--transition);
    position: relative;
}

.list-label li::before {

}

.list-label li:hover::before {
    width: 80px;
}

.list-label li:hover {
    
}

.list-label li:last-child {
    border-bottom: none;
}

.list-label li a {
    
}

.list-label li a:hover {
    color: #5b8a2b;
}


/* ==================== FOOTER STYLES ==================== */
#footer-wrapper {
    background: #5b8a2b;
    color: var(--footer-color);
    padding: 60px 0 0;
    position: relative;
    overflow: hidden;
}

#footer-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" fill="%23ffffff" opacity="0.02"><polygon points="1000,100 1000,0 0,100"/></svg>');
    background-size: cover;
}
#footer-wrapper svg{
    fill: #fff;
}

#footer-wrapper svg:hover{
    fill: #000;
}

#footer-wrapper .footer-info .widget-title{
    margin-bottom: 30px;
}

.footer-widgets-wrap {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0 0px;
    position: relative;
    z-index: 1;
    gap: 50px;
}

@media (max-width: 767px) {
    .footer-widgets-wrap {
        grid-template-columns: 1fr;
        margin: 0;
    }
}


.footer .widget-title h3 {
    color: var(--footer-color);
}

.footer .widget-title h3:after {
    background: #fff;
}

.footer .widget .list-label li a {
    display: flex;
    justify-content: space-between;
    color: #ffffff;
    transition: var(--transition);
    font-weight: 500;
    padding-left: 0px;
    line-height: 25px;
}
.footer .widget .list-label li a:hover {
    color: #000;
}

.footer .widget .widget-content .tag-item {
    color: #fff;
    display: flex;
    line-height: 25px;
    gap: 3px;
    align-items: center;
    font-size: 14px;
}
.footer .widget .widget-content .tag-item:hover {
    color: #000000;
}

#footer-wrapper .widget-content{
    text-align: justify;
}

#sub-footer-wrapper {
    background: rgba(0, 0, 0, 0.3);
    padding: 1px 0;
    margin-top: 50px;
    position: relative;
    z-index: 1;
    backdrop-filter: blur(10px);
}

#menu-footer ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}

#menu-footer ul li a {
    color: var(--footer-color);
    transition: var(--transition);
    font-weight: 500;
    padding: 8px 15px;
    border-radius: var(--border-radius);
    position: relative;
    overflow: hidden;
}

#menu-footer ul li a::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--main-color);
    transition: var(--transition);
    transform: translateX(-50%);
}

#menu-footer ul li a:hover::before {
    width: 80%;
}

#menu-footer ul li a:hover {
    color: var(--main-color);
    background: rgba(255, 255, 255, 0.1);
}


.copyright-area {
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
}

.copyright-area a {
    color: var(--main-color);
    font-weight: 600;
    transition: var(--transition);
}

.copyright-area a:hover {
    color: white;
    text-decoration: underline;
}

/* ==================== BACK TO TOP BUTTON ==================== */
.back-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--main-color), var(--main-dark-color));
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    z-index: 999;
    border: none;
    font-size: 18px;
    box-shadow: var(--shadow-lg);
}

.back-top.active {
    opacity: 1;
    visibility: visible;
}

.back-top:hover {
    opacity: 1;
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 10px 25px rgba(255, 76, 96, 0.3);
}

/* ==================== RESPONSIVE STYLES ==================== */
@media (max-width: 1199px) {
    .container {
        max-width: 960px;
    }
    
    #main-menu {
        max-width: calc(100% - 250px);
    }
}

@media (max-width: 991px) {
    .container {
        max-width: 720px;
    }
    
    #main-wrapper, #sidebar-wrapper {
        flex: 0 0 100%;
        max-width: 100%;
    }

    #sidebar-wrapper {
        margin-top: 40px;
    }

    .footer {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .header-center {
        display: none;
    }

    .header-right {
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: flex-end;
    }

    .header-social {
        gap: 8px;
    }

    .header-social a {
        width: 34px;
        height: 34px;
        font-size: 14px;
    }

    .header-container {
        justify-content: space-between;
        align-items: center;
        height: 60px;
    }
    
    .post-image-link {
        height: 240px;
    }
}

@media (max-width: 991px) {
    .header-container {
        padding: 0 10px;
    }
    #main-menu {
        display: none;
    }

    .mobile-menu-toggle {
        display: block;
    }

    .footer {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .header-right {
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }

    .header-social {
        gap: 6px;
    }

    .header-social a {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }

    .header-menu-right {
        gap: 8px;
    }

    .dropdown-menu {
        position: absolute;
        top: 50px;
        bottom: -350px;
        left: -140px;
        transform: translateX(-50%) translateY(100%);
        width: 100%;
        max-width: 400px;
        border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
        margin-top: 0;
    }

    .dropdown-menu.show {
        transform: translateX(-50%) translateY(0);
    }

}
@media (max-width: 768px) {
    #main-menu {
        display: none;
    }

    .mobile-menu-toggle {
        display: block;
    }

    .footer {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .header-right {
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }

    .header-social {
        gap: 6px;
    }

    .header-social a {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }

    .header-menu-right {
        gap: 8px;
    }

    .dropdown-menu {
        position: absolute;
        top: 50px;
        bottom: -350px;
        left: -140px;
        transform: translateX(-50%) translateY(100%);
        width: 100%;
        max-width: 400px;
        border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
        margin-top: 0;
    }

    .dropdown-menu.show {
        transform: translateX(-50%) translateY(0);
    }

    #nav-search {
        padding: 15px;
    }
    
    #nav-search .search-form {
        flex-direction: column;
        border-radius: var(--border-radius);
    }
    
    #nav-search .search-input {
        padding: 12px 15px;
        border-radius: var(--border-radius) var(--border-radius) 0 0;
    }
    
    #nav-search .search-action {
        padding: 12px 20px;
        border-radius: 0 0 var(--border-radius) var(--border-radius);
    }
    
    .post-image-link {
        height: 220px;
    }
    
    .post-info {
        padding: 20px;
    }
    
    .blog-post:hover {
        transform: translateY(-5px);
    }
}

@media (max-width: 576px) {
    .container {
        padding: 0 10px;
    }
    
    .post-image-link {
        height: 200px;
    }

    .post-info-title h2 {
        font-size: 18px;
    }

    .header-logo img {
        max-height: 50px;
        max-width: 200px;
    }

    .header-right {
        gap: 8px;
    }

    .header-social {
        gap: 4px;
    }

    .header-social a {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }

    .header-menu-right {
        gap: 6px;
    }

    .dropdown-trigger {
        padding: 10px 15px;
        font-size: 13px;
    }

    .show-search {
        padding: 12px;
        font-size: 15px;
    }
    
    .mobile-menu {
        width: 100%;
    }
    
    .footer-widgets-wrap {
        margin: 0 -10px;
    }

    .footer {
        padding: 0 10px;
    }

    #menu-footer ul {
        gap: 10px;
    }

    #menu-footer ul li {
        margin: 0 3px;
    }
    
    .back-top {
        bottom: 20px;
        right: 20px;
        width: 45px;
        height: 45px;
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .header-container {
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 0px;
        height: 60px;
        
    }

    .header-logo {
        flex: none;
        text-align: center;
    }

    .header-right {
        justify-content: center;
        width: 100%;
    }
    
    .header-menu-right {
        justify-content: right;
        width: 100%;
    }
    
    .post-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .popular-post {
        flex-direction: column;
        text-align: center;
    }
    
    .popular-post-image {
        margin-right: 0;
        margin-bottom: 10px;
    }
    
}

/* ==================== ACCESSIBILITY & FOCUS MANAGEMENT ==================== */
.dropdown-trigger:focus {
    outline: 3px solid var(--main-color);
    outline-offset: 2px;
}

.dropdown-link:focus {
    outline: 2px solid var(--main-color);
    outline-offset: -2px;
}

.show-search:focus {
    outline: 2px solid var(--main-color);
    outline-offset: 2px;
}

.mobile-menu-toggle:focus {
    outline: 2px solid var(--main-color);
    outline-offset: 2px;
}

.search-input:focus {
    outline: 2px solid var(--main-color);
    outline-offset: -2px;
}

/* Skip to main content for accessibility */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: var(--main-color);
    color: white;
    padding: 8px 12px;
    text-decoration: none;
    border-radius: 0 0 4px 4px;
    z-index: 10000;
    transition: top 0.3s ease;
}

.skip-link:focus {
    top: 0;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --body-text-color: #000000;
        --title-color: #000000;
        --main-color: #000000;
        --main-dark-color: #333333;
    }
    
    .blog-post {
        border: 2px solid #000000;
    }
}

/* Dark mode support 
@media (prefers-color-scheme: dark) {
    :root {
        --body-background-color: #1a1a1a;
        --body-text-color: #e0e0e0;
        --title-color: #ffffff;
        --posts-background-color: #2d2d2d;
        --posts-text-color: #e0e0e0;
    }
}
*/

/* COMMENT */
.comments {
  padding-bottom: 25px;
}
.comments .write-comment button, .comments .comment-login-form button, .comments .comment-register-form button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #af0081;
  color: #ffffff;
  text-decoration: none;
  margin: 5px 5px 0 0;
  padding: 0 12px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  height: 35px;
  border: 0;
  transition: background-color 0.2s ease;
  position: relative;
  overflow: hidden;
}
.comments .write-comment button:hover, .comments .comment-login-form button:hover, .comments .comment-register-form button:hover {
  background-color: #373a45;
  transition: background-color 0.2s ease;
}
.comments .write-comment button:disabled, .comments .comment-login-form button:disabled, .comments .comment-register-form button:disabled {
  background-color: #b3b5ba;
  color: white;
  cursor: not-allowed;
}
.comments .write-comment button:disabled:hover, .comments .comment-login-form button:disabled:hover, .comments .comment-register-form button:disabled:hover {
  background-color: #b3b5ba;
}
.comments .write-comment button.alt, .comments .comment-login-form button.alt, .comments .comment-register-form button.alt {
  background-color: transparent;
  border: 1px solid #c4c7d0;
  color: #6f768c;
  font-weight: 500;
  transition: border 0.2s ease;
}
.comments .write-comment button.alt:hover, .comments .comment-login-form button.alt:hover, .comments .comment-register-form button.alt:hover {
  border: 1px solid #8b91a3;
  color: #595e6f;
  transition: border 0.2s ease;
}
.comments .login-btn, .comments .register-btn, .comments .search-btn {
    text-decoration: none;
    color: #af0081;
    font-size: 14px;
    font-weight: 500;
    padding-right: 15px;
}
.comments .login-btn:hover, .comments .register-btn:hover, .comments .search-btn:hover {
  color: #888c9d;
}
.comments .login-btn i, .comments .register-btn i, .comments .search-btn i {
  padding-right: 10px;
}
.comments .search-btn {
  padding-right: 0;
  padding-left: 15px;
  font-size: 14px;
}
.comments .comment-header {
  display: flex;
  border-bottom: 1px solid #f0f1f5;
  padding: 25px 0 15px 0;
  margin-bottom: 10px;
  align-items: center;
}
.comments .comment-header .total {
    color: #000000;
    font-size: 16px;
    padding-right: 25px;
    font-weight: 500;
}
.comments .comment-header .comment-btns {
  flex-grow: 1;
}
.comments .comment-header .sort-by {
  display: inline-flex;
  align-items: center;
  position: relative;
  height: 35px;
  z-index: 999;
}
.comments .comment-header .sort-by a {
  text-decoration: none;
  font-size: 14px;
}
.comments .comment-header .sort-by > a {
  color: #71737c;
  font-weight: 500;
}
.comments .comment-header .sort-by > a i {
  padding-left: 10px;
  color: #c1c3ce;
}
.comments .comment-header .sort-by .options {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  width: 160px;
  border-radius: 4px;
  overflow: hidden;
  flex-flow: column;
  box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.2);
}
.comments .comment-header .sort-by .options a {
  padding: 6px 10px;
  border-bottom: 1px solid #f2f2f7;
  color: #707179;
  background-color: #fff;
  font-size: 14px;
}
.comments .comment-header .sort-by .options a:last-child {
  border: 0;
}
.comments .comment-header .sort-by .options a:hover {
  background-color: #424449;
  color: #fff;
}
.comments .comment-header .sort-by:hover .options, .comments .comment-header .sort-by:active .options {
  display: flex;
}
.comments .comment-header .sort-by:hover > a, .comments .comment-header .sort-by:active > a {
  color: #4d4e54;
}
.comments .comment-header .sort-by:hover > a i, .comments .comment-header .sort-by:active > a i {
  color: #969aac;
}
.comments .write-comment, .comments .comment-auth-forms {
  width: 100%;
  padding: 10px 0 10px 0;
}
.comments .write-comment.hidden, .comments .comment-auth-forms.hidden {
  display: none;
}
.comments .write-comment .content, .comments .comment-auth-forms .content {
  display: flex;
  flex-flow: column;
  width: 100%;
  padding: 5px 0 0 0;
}
.comments .write-comment .content textarea, .comments .comment-auth-forms .content textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #af0081;
  border-bottom: 0;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  height: 150px;
  margin-top: 5px;
  resize: none;
  outline: 0;
}
.comments .write-comment .content textarea::-moz-placeholder, .comments .comment-auth-forms .content textarea::-moz-placeholder {
  color: #a8abb4;
}
.comments .write-comment .content textarea::placeholder, .comments .comment-auth-forms .content textarea::placeholder {
  color: #a8abb4;
}
.comments .write-comment .content .toolbar, .comments .comment-auth-forms .content .toolbar {
    display: flex;
    width: 100%;
    border: 1px solid #af0081;
    background-color: #f8f8f8;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}
.comments .write-comment .content .toolbar .fa-solid, .comments .comment-auth-forms .content .toolbar .fa-solid {
  padding: 10px;
  cursor: pointer;
  color: #7a7a7a;
  font-size: 14px;
}
.comments .write-comment .content .toolbar .fa-solid:hover, .comments .comment-auth-forms .content .toolbar .fa-solid:hover {
  color: #474747;
}
.comments .write-comment input, .comments .comment-auth-forms input {
    display: block;
    width: 250px;
    max-width: 100%;
    padding: 10px;
    border: 1px solid #af0081;
    border-radius: 5px;
    margin-top: 10px;
}
.comments .write-comment input::-moz-placeholder, .comments .comment-auth-forms input::-moz-placeholder {
  color: #a8abb4;
}
.comments .write-comment input::placeholder, .comments .comment-auth-forms input::placeholder {
  color: #a8abb4;
}
.comments .write-comment button, .comments .comment-auth-forms button {
  cursor: pointer;
}
.comments .write-comment .msg .error, .comments .comment-auth-forms .msg .error {
  display: inline-block;
  padding: 10px 0 0 0;
  color: #d10e0e;
  font-size: 14px;
  font-weight: 500;
}
.comments .write-comment {
  padding: 5px 0 15px 0;
}
.comments .comment-auth-forms {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #f0f1f5;
  margin-bottom: 25px;
  padding: 25px 0;
}
.comments .comment-auth-forms button {
  margin-top: 20px;
}
.comments .comment-auth-forms form h3 {
  margin: 0;
  padding: 0 0 10px 0;
  font-size: 16px;
  font-weight: 500;
  color: #7e808a;
}
.comments .comment-auth-forms form.comment-register-form {
  border-left: 1px solid #f0f1f5;
  padding-left: 35px;
  margin-left: 35px;
}
.comments .comment-content .comment-placeholder-content, .comments .comment-content .comment-search input {
    display: block;
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #af0081;
    border-radius: 4px;
    margin: 20px 0;
}
.comments .comment-content .comment-placeholder-content::-moz-placeholder, .comments .comment-content .comment-search input::-moz-placeholder {
  color: #a8abb4;
}
.comments .comment-content .comment-placeholder-content::placeholder, .comments .comment-content .comment-search input::placeholder {
  color: #a8abb4;
}
.comments .comment-content .comment-search {
  display: none;
  position: relative;
}
.comments .comment-content .comment-search i {
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translateY(-50%);
  color: #a8abb4;
  font-size: 14px;
}
.comments .comment-content .comment-search input {
  padding-left: 40px;
}
.comments .comment {
  display: flex;
  flex-flow: row;
  width: 100%;
  max-width: 100%;
  padding-top: 10px;
}
.comments .comment > .comment-profile-picture {
  width: 55px;
  padding-right: 12px;
}
.comments .comment > .comment-profile-picture span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  color: #fff;
  background-color: #777;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 500;
}
.comments .comment > .comment-profile-picture img {
  border-radius: 50px;
  width: 42px;
  height: 42px;
}
.comments .comment > .con {
  display: flex;
  flex-flow: column;
  width: calc(100% - 55px);
  max-width: calc(100% - 55px);
}
.comments .comment > .con.highlighted {
  border-left: 3px solid #416daf;
  padding-left: 20px;
}
.comments .comment > .con .votes {
  display: flex;
  flex-flow: column;
  min-width: 40px;
  align-items: center;
}
.comments .comment > .con .votes .up, .comments .comment > .con .votes .down {
  display: flex;
  text-decoration: none;
}
.comments .comment > .con .votes .up span {
  transform: rotate(45deg);
}
.comments .comment > .con .votes .down span {
  transform: rotate(225deg);
}
.comments .comment > .con .name {
    display: inline;
    padding: 0 7px 0 0;
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    color: #000000;
}
.comments .comment > .con .role {
  display: inline;
  padding: 1px 4px;
  margin: 0 6px 0 2px;
  font-size: 12px;
  font-weight: 500;
  background-color: #af0081;
  color: #fff;
  border-radius: 4px;
}
.comments .comment > .con .featured {
  color: #b3b3be;
  margin: 0 5px;
  transform: rotate(45deg);
}
.comments .comment > .con .date, .comments .comment > .con .edited {
  color: #8a8a92;
  font-size: 12px;
  margin-right: 5px;
  margin-left: 2px;
}
.comments .comment > .con .toggle-comment {
  color: #c9c9d3;
  text-decoration: none;
  display: inline-flex;
  margin-left: auto;
}
.comments .comment > .con .toggle-comment:hover {
  color: #adadbc;
}
.comments .comment > .con .comment-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.comments .comment > .con .comment-meta:hover ~ .comment-footer .share-comment-btn, .comments .comment > .con .comment-meta:active ~ .comment-footer .share-comment-btn {
  display: inline-block;
}
.comments .comment > .con .comment-content {
  position: relative;
  max-width: 100%;
  padding: 6px 0 8px 0;
  margin: 0;
  color: #1c1c1c;
}
.comments .comment > .con .comment-content p {
  color: inherit;
  margin: 0;
  padding: 0;
  word-wrap: break-word;
}
.comments .comment > .con .comment-content h6 {
  margin: 0;
  padding: 5px 0;
  color: #4b4b4b;
  word-wrap: break-word;
}
.comments .comment > .con .comment-content strong {
  color: inherit;
  font-weight: bold;
  word-wrap: break-word;
}
.comments .comment > .con .comment-content pre {
  color: inherit;
  max-width: 100%;
}
.comments .comment > .con .comment-content code {
  font-family: Consolas, monaco, monospace;
  border-left: 3px solid #416daf;
  max-width: 100%;
  width: 100%;
  overflow-x: auto;
}
.comments .comment > .con .comment-content blockquote {
  border-left: 3px solid #777;
}
.comments .comment > .con .comment-content code, .comments .comment > .con .comment-content blockquote {
  color: inherit;
  display: block;
  padding: 0 10px;
  margin: 10px 0;
  font-size: 14px;
  word-wrap: break-word;
}
.comments .comment > .con .comment-content a {
  color: #1668e2;
  text-decoration: none;
  word-wrap: break-word;
}
.comments .comment > .con .comment-content a:hover {
  text-decoration: underline;
}
.comments .comment > .con .comment-content:hover ~ .comment-footer .share-comment-btn, .comments .comment > .con .comment-content:active ~ .comment-footer .share-comment-btn {
  display: inline-block;
}
.comments .comment > .con .comment-awaiting-approval {
  padding: 10px 0;
  font-size: 14px;
  font-style: italic;
  color: #8a8a92;
}
.comments .comment .comment-footer {
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  margin-bottom: 5px;
}
.comments .comment .comment-footer a {
  display: inline-block;
  text-decoration: none;
  padding: 0 5px;
}
.comments .comment .comment-footer a:hover .arrow {
  border: solid #64646b;
  border-width: 0 2px 2px 0;
}
.comments .comment .comment-footer .num {
  color: #8a8a92;
  padding-right: 5px;
  font-size: 14px;
}
.comments .comment .comment-footer .arrow {
  border: solid #8a8a92;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 2px;
}
.comments .comment .comment-footer .arrow.up {
  transform: translateY(-2px) rotate(-135deg);
}
.comments .comment .comment-footer .arrow.down {
  transform: translateY(-4px) rotate(45deg);
}
.comments .comment .comment-footer .reply-comment-btn, .comments .comment .comment-footer .share-comment-btn, .comments .comment .comment-footer .edit-comment-btn, .comments .comment .comment-footer .moderate-comment-btn, .comments .comment .comment-footer .delete-comment-btn {
  display: inline-block;
  text-decoration: none;
  font-size: 14px;
  color: #8a8a92;
}
.comments .comment .comment-footer .reply-comment-btn:hover, .comments .comment .comment-footer .share-comment-btn:hover, .comments .comment .comment-footer .edit-comment-btn:hover, .comments .comment .comment-footer .moderate-comment-btn:hover, .comments .comment .comment-footer .delete-comment-btn:hover {
  color: #64646b;
}
.comments .comment .comment-footer .reply-comment-btn.selected, .comments .comment .comment-footer .share-comment-btn.selected, .comments .comment .comment-footer .edit-comment-btn.selected, .comments .comment .comment-footer .moderate-comment-btn.selected, .comments .comment .comment-footer .delete-comment-btn.selected {
  font-weight: 500;
}
.comments .comment .comment-footer .reply-comment-btn {
  margin-left: 5px;
}
.comments .comment .comment-footer .share-comment-btn {
  display: none;
}
.comments .comment .comment-footer:hover .share-comment-btn, .comments .comment .comment-footer:active .share-comment-btn {
  display: inline-block;
}
.comments .show-more-comments {
  display: flex;
  justify-content: center;
  align-items: center;
}
.comments .show-more-comments a {
  display: inline-block;
  max-width: 250px;
  width: 100%;
  border-radius: 50px;
  text-decoration: none;
  text-align: center;
  padding: 10px;
  font-weight: 600;
  color: #93969b;
  background-color: #edeff3;
  margin: 25px 0;
  font-size: 14px;
}
.comments .show-more-comments a:hover {
  background-color: #e7eaef;
}
.comments .loader {
  display: inline-block;
  border: 2px solid #999;
  border-top: 2px solid #eee;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  animation: spin 1s ease infinite;
}
.comments .loader.hidden {
  display: none;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@media screen and (max-width: 500px) {
  .comments .comment-header .total {
    font-size: 14px;
  }
  .comments .comment > .comment-profile-picture {
    width: 40px;
  }
  .comments .comment > .comment-profile-picture span {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }
  .comments .comment > .comment-profile-picture img {
    width: 32px;
    height: 32px;
  }
  .comments .comment > .con {
    width: calc(100% - 40px);
    max-width: calc(100% - 40px);
  }
  .comments .comment > .con .edited {
    display: none;
  }
  .comments .comment-auth-forms form {
    width: 100%;
  }
  .comments .comment-auth-forms form.comment-register-form {
    border-top: 1px solid #f0f1f5;
    border-left: none;
    padding-left: 0;
    margin-left: 0;
    padding-top: 25px;
    margin-top: 35px;
  }
}

/* ============================================================
   WSTTVN MENU + SEARCH — CSS chuẩn, hoàn chỉnh
   ============================================================
   Thay thế toàn bộ CSS menu cũ trước đây nằm inline trong thẻ <style>
   của header.php — nay chuyển hẳn về style.css theo đúng chuẩn tách
   biệt HTML/CSS, dễ bảo trì và cache được ở tầng trình duyệt/CDN.

   Quy ước:
   - Toàn bộ class dùng tiền tố `wsttvn_` — không đụng tới CSS/class
     nào khác của theme.
   - Toàn bộ CSS custom properties (biến) cũng dùng tiền tố `--wsttvn-`,
     nhất quán với quy ước đặt tên chung của dự án.
   - Màu sắc kế thừa từ bộ biến gốc của theme (--main-color, --shadow-md,
     --border-radius, --transition...) thay vì mã màu cứng — đổi màu
     thương hiệu ở 1 chỗ duy nhất (:root phía trên) sẽ tự áp dụng xuống
     toàn bộ menu.
   - Breakpoint mobile dùng đúng 991px, khớp quy ước breakpoint chung
     đã có sẵn trong file (1199 / 991 / 768 / 576 / 480).
   - prefers-reduced-motion đã được xử lý chung ở quy tắc toàn cục
     `* { transition-duration: 0.01ms !important; }` phía trên — mọi
     transition bên dưới tự động tuân theo, không cần lặp lại.
   ============================================================ */

:root {
    --wsttvn-menu-bg: var(--main-color, #af0081);
    --wsttvn-menu-bg-hover: #ff25d0;
    --wsttvn-menu-text: #ffffff;
    --wsttvn-menu-text-hover: #000000;
    --wsttvn-dropdown-bg: #970270;
    --wsttvn-dropdown-bg-mobile: #81125f;
    --wsttvn-dropdown-border: rgba(255, 255, 255, 0.15);
    --wsttvn-mobile-panel-bg: var(--main-color, #af0081);
    --wsttvn-radius: var(--border-radius, 8px);
    --wsttvn-radius-sm: 4px;
    --wsttvn-shadow: var(--shadow-md, 0 4px 8px rgba(0, 0, 0, 0.12));
    --wsttvn-transition: var(--transition, all 0.3s ease);
    --wsttvn-mobile-breakpoint: 991px;
}

/* ------------------------------------------------------------
   Khu vực "header phải" — bọc chung nav chính + (search/burger),
   căn hàng ngang, đẩy sát mép phải trong .header-container.
   ------------------------------------------------------------ */
.wsttvn_headeright {
    display: flex;
    align-items: center;
    gap: 16px;
    /* LƯU Ý: KHÔNG đặt position:relative ở đây. .wsttvn_menu bên trong dùng
       position:absolute (ở chế độ mobile) và cần định vị theo TOÀN BỘ chiều
       rộng header — nếu đặt relative ở wrapper hẹp này, menu mobile sẽ chỉ
       rộng bằng đúng vùng search+burger thay vì full-width. Để trống, trình
       duyệt sẽ tự lấy .header-container (đã có position:relative) làm mốc. */
}

/* ------------------------------------------------------------
   Khu vực chứa icon search + burger, đặt cạnh logo trong header
   ------------------------------------------------------------ */
.wsttvn_header_actions {
    display: flex;
    align-items: center;
    gap: 4px;
    position: relative;
    z-index: 1003;
}

/* ------------------------------------------------------------
   Burger menu (mobile)
   ------------------------------------------------------------ */
.wsttvn_burger {
    width: 32px;
    height: 20px;
    cursor: pointer;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    background: transparent;
    border: 0;
    padding: 0;
}

.wsttvn_burger span {
    display: block;
    background: #fff;
    height: 2px;
    border-radius: 5px;
    transition: var(--wsttvn-transition);
}

.wsttvn_burger.wsttvn_is_active span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.wsttvn_burger.wsttvn_is_active span:nth-child(2) {
    opacity: 0;
}

.wsttvn_burger.wsttvn_is_active span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

/* ------------------------------------------------------------
   Menu chính (desktop: hàng ngang / mobile: menu trượt xuống)
   ------------------------------------------------------------ */
.wsttvn_menu {
    display: flex;
    align-items: center;
    z-index: 1002;
    height: 60px;
}

.wsttvn_nav_list {
    display: flex;
    align-items: center;
    gap: 0px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.wsttvn_nav_list > .wsttvn_nav_item:not(:last-child)::after {
    /*
    content: "";
    height: 28px;
    border-left: 0.01px solid #700a3f;
    margin: auto;
    */
}
@media screen and (max-width: 992px){
    .wsttvn_nav_list > .wsttvn_nav_item:not(:last-child)::after{
        display: none;
    }
}

.wsttvn_nav_item {
    display: flex;
    
}
.wsttvn_nav_item:hover {
    
}

.wsttvn_nav_item a{
    align-items: center;
}
.wsttvn_nav_link,
.wsttvn_dropdown_toggle {
    color: var(--wsttvn-menu-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: space-between;
    height: 40px;
    padding: 0 14px;
    border: 0;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    transition: var(--wsttvn-transition);
    background: none;
}

.wsttvn_nav_link:hover,
.wsttvn_dropdown_toggle:hover,
.wsttvn_nav_link:hover, .wsttvn_dropdown_toggle:hover, .wsttvn_dropdown.wsttvn_dropdown_show .wsttvn_dropdown_toggle {
    color: #5b8a2b;
    background: #ffff;
}

/* Trạng thái focus rõ ràng cho điều hướng bằng bàn phím (accessibility) */
.wsttvn_nav_link:focus-visible,
.wsttvn_dropdown_toggle:focus-visible,
.wsttvn_dropdown_link:focus-visible,
.wsttvn_search_toggle:focus-visible,
.wsttvn_burger:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

.wsttvn_nav_link_title,
.wsttvn_dropdown_link_title {
    display: block;
    font-weight: 600;
    line-height: 1.3;
}

.wsttvn_nav_link_subtitle,
.wsttvn_dropdown_link_subtitle {
    display: block;
    font-size: 11px;
    font-weight: 400;
    opacity: 0.85;
    line-height: 1.3;
    margin-top: 2px;
    white-space: normal;
    text-align: left;
}

.wsttvn_dropdown_icon {
    font-size: 12px;
    flex-shrink: 0;
    transition: var(--wsttvn-transition);
}

.wsttvn_dropdown.wsttvn_dropdown_show .wsttvn_dropdown_icon {
    transform: rotate(180deg);
}

/* ------------------------------------------------------------
   Dropdown (menu con cấp 2)
   ------------------------------------------------------------ */
.wsttvn_dropdown {
    position: relative;
}

.wsttvn_dropdown_content {
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    width: 260px;
    background: #5b8a2b;
    overflow: hidden;
    height: 0;
    border-radius: 0px 0px 5px 5px;
    box-shadow: var(--wsttvn-shadow);
    transition: height 0.3s ease;
    z-index: 10;
}

.wsttvn_dropdown_link {
    display: block;
    padding: 10px 16px;
    color: #fff;
    font-size: 14px;
    border-bottom: 1px solid var(--wsttvn-dropdown-border);
    transition: var(--wsttvn-transition);
}

.wsttvn_dropdown_link:last-child {
    border-bottom: 0;
}

.wsttvn_dropdown_link:hover {
    background: #ffffff;
    color: var(--wsttvn-menu-text-hover);
}

/* ------------------------------------------------------------
   Tìm kiếm — icon + form trượt ra (dùng chung cơ chế wsttvn_is_active
   với menu mobile để đồng bộ trải nghiệm mở/đóng)
   ------------------------------------------------------------ */
.wsttvn_search_toggle {
    display: flex;
    gap: 5px;
    background: transparent;
    border: solid 2px #fff;
    color: var(--wsttvn-menu-text);
    font-size: 14px;
    cursor: pointer;
    padding: 10px 10px;
    line-height: 1;
    border-radius: var(--wsttvn-radius-sm);
    transition: var(--wsttvn-transition);
}

.wsttvn_search_toggle:hover,
.wsttvn_search_toggle[aria-expanded="true"] {
    color: var(--wsttvn-menu-text-hover);
    background: rgba(255, 255, 255, 0.12);
}

/* Đổi icon kính lúp <-> dấu X ngay trên nút, dựa vào aria-expanded mà JS đã
   tự quản lý sẵn (wsttvnOpenSearch()/wsttvnCloseSearch()) — không cần thêm
   JS nào khác, thuần CSS.
   LƯU Ý: neo selector theo #wsttvn_search_toggle (ID) thay vì chỉ dùng class
   — vì Font Awesome tự đặt "display: inline-block" cho mọi icon .fa-solid
   với độ ưu tiên CSS bằng đúng 1 class, và file Font Awesome được nạp SAU
   style.css trong trang, nên nếu chỉ dùng độ ưu tiên ngang bằng thì rule
   "display:none" của ta sẽ bị Font Awesome đè mất (2 icon cùng hiện 1 lúc). */
#wsttvn_search_toggle .wsttvn_search_toggle_icon_close {
    display: none;
}

#wsttvn_search_toggle[aria-expanded="true"] .wsttvn_search_toggle_icon_open {
    display: none;
}

#wsttvn_search_toggle[aria-expanded="true"] .wsttvn_search_toggle_icon_close {
    display: inline-block;
}

.wsttvn_search_toggle_title {
    display:block;
}

@media screen and (max-width: 480px){
    .wsttvn_search_toggle_title {
        display:none;
    }
    
    .wsttvn_search_toggle{
        border: none;
    }
}

.wsttvn_search_panel {
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    background: #5b8a2b;
    box-shadow: var(--wsttvn-shadow);
    transition: max-height 0.3s ease;
    z-index: 1001;
}

.wsttvn_search_panel.wsttvn_is_active {
    max-height: 90px;
}

.wsttvn_search_form {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 720px;
    margin: 0 auto;
    padding: 16px 20px;
}

.wsttvn_search_input {
    flex: 1;
    padding: 10px 14px;
    border: 0;
    border-radius: var(--wsttvn-radius-sm);
    font-family: inherit;
    font-size: 15px;
}

.wsttvn_search_input:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

.wsttvn_search_submit {
    flex-shrink: 0;
    height: 40px;
    padding: 0 14px;
    background: #5b8a2b;
    color: #fff;
    border: solid 2px #edcfdf;
    border-radius: var(--wsttvn-radius-sm);
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    transition: var(--wsttvn-transition);
}

.wsttvn_search_submit:hover {
    filter: brightness(1.1);
}

/* ============================================================
   MOBILE (<= 991px) — menu trượt xuống, title + subtitle vẫn hiển
   thị đầy đủ, chỉ đổi layout sang dạng cột
   ============================================================ */
@media (max-width: 991px) {
    .wsttvn_burger {
        display: flex;
    }

    .wsttvn_menu {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        max-height: 0;
        overflow: hidden;
        background: #5b8a2b;
        box-shadow: var(--wsttvn-shadow);
        transition: max-height 0.3s ease;
        height: auto;
        border-top: solid 1px #9dc376;
    }

    .wsttvn_menu.wsttvn_is_active {
        max-height: 80vh;
        overflow-y: auto;
    }

    .wsttvn_nav_list {
        flex-direction: column;
        align-items: stretch;
        gap: 0px;
        width: 100%;
    }

    .wsttvn_nav_item {
        flex-direction: column;
    }

    .wsttvn_nav_link,
    .wsttvn_dropdown_toggle {
        height: auto;
        min-height: 44px;
        padding: 10px 14px;
        border-bottom: 1px solid var(--wsttvn-dropdown-border);
        border-radius: var(--wsttvn-radius-sm);
    }

    .wsttvn_dropdown_content {
        position: static;
        width: 100%;
        margin-top: 0px;
        background: var(--wsttvn-dropdown-bg-mobile);
        box-shadow: none;
    }

    .wsttvn_dropdown_link {
        padding: 12px 16px;
    }

    .wsttvn_search_form {
        flex-wrap: wrap;
        padding: 14px 16px;
    }

    .wsttvn_search_panel.wsttvn_is_active {
        max-height: 120px;
    }
}

/* ============================================================
   WSTTVN LANDING PAGE — CSS trang chủ dạng landing page, tối ưu
   chuyển đổi. Toàn bộ class dùng tiền tố `wsttvn_lp_` (landing page),
   độc lập hoàn toàn với CSS blog/danh mục hiện có.

   Kế thừa bộ biến màu gốc của theme (--main-color, --shadow-*,
   --border-radius, --transition) để đồng bộ nhận diện thương hiệu.
   ============================================================ */



.wsttvn_lp {
    background: var(--wsttvn-lp-surface);
    overflow-x: hidden;
}

.wsttvn_lp_container {
    max-width: var(--wsttvn-lp-max-width);
    margin: 0 auto;
    padding: 0 15px;
}

.wsttvn_lp_container_narrow {
    max-width: 100%;
    width: 1080px;
}


/* ------------------------------------------------------------
   Nút bấm dùng chung toàn trang landing page
   ------------------------------------------------------------ */
.wsttvn_lp_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: var(--wsttvn-lp-radius);
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    border: 2px solid transparent;
    transition: var(--wsttvn-lp-transition);
    white-space: nowrap;
}

.wsttvn_lp_btn_primary {
    background: linear-gradient(135deg, var(--wsttvn-lp-accent), var(--wsttvn-lp-accent-2));
    color: #ffffff;
    box-shadow: var(--wsttvn-lp-shadow);
}

.wsttvn_lp_btn_primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--wsttvn-lp-shadow-lg);
    color: #ffffff;
}

.wsttvn_lp_btn_ghost {
    background: transparent;
    color: var(--wsttvn-lp-accent);
    border-color: var(--wsttvn-lp-accent);
}

.wsttvn_lp_btn_ghost:hover {
    background: var(--wsttvn-lp-surface-alt);
    color: var(--wsttvn-lp-accent);
}

.wsttvn_lp_btn_lg {
    padding: 16px 40px;
    font-size: 17px;
}

/* ------------------------------------------------------------
   HERO
   ------------------------------------------------------------ */
.wsttvn_lp_hero {
    padding: 15px 0px;
    grid-template-columns: 3fr 1fr;
    display: grid;
    max-width: 1080px;
    margin: 0 auto;
    gap: 20px;
}

.wsttvn_lp_hero_inner {
    display: block;
    align-items: center;
    gap: 0px;
}

.wsttvn_lp_hero_title {
    font-size: 28px;
    line-height: 1.25;
    font-weight: 700;
    color: var(--wsttvn-lp-text-dark);
    margin: 0 0 0px;
}

.wsttvn_lp_hero_subtitle {
    margin: 0 0 20px;
    font-size: 16px;
}
.wsttvn_lp_hero_sub {
    font-size: 17px;
    line-height: 25px;
    margin: 0 0 0px;
    background: #ffffff;
}


.wsttvn_lp_hero_rating {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--wsttvn-lp-text-muted);
}

.wsttvn_lp_stars {
    color: var(--wsttvn-lp-star);
    font-size: 16px;
    letter-spacing: 2px;
}

.wsttvn_lp_hero_top{
    padding: 10px 0px;
}

.wsttvn_lp_hero_image {
    margin-bottom: 0px;
    overflow: hidden;
    box-shadow: var(--wsttvn-lp-shadow-lg);
    max-width: 1080px;
    margin: 0 auto;
}

.wsttvn_lp_hero_image img {
    width: 100%;
    height: auto;

}
.wsttvn_lp_hero_image_2 {
    margin-bottom: 20px;
}

.wsttvn_lp_hero_image_2 img{
    max-width: 100%;
    width: 100%;
    height: auto;
}


.wsttvn_lp_tagline{
    margin: 10px auto;
}

/* ============================================================
   WSTTVN LANDING PAGE — MỞ RỘNG (giá, khuyến mãi, các mục nội dung
   tách riêng: nguồn gốc, thành phần, công dụng, đối tượng dùng,
   hướng dẫn sử dụng). Bổ sung cho khối CSS landing page gốc phía trên
   — không sửa/xoá gì trong khối gốc.
   ============================================================ */

/* ------------------------------------------------------------
   Khối giá + khuyến mãi trong Hero — điểm nhấn quan trọng nhất
   để khách quyết định mua ngay, phải "đập vào mắt" đầu tiên.
   ------------------------------------------------------------ */



/* ------------------------------------------------------------
   Các mục nội dung tách riêng (Nguồn gốc / Thành phần / Công dụng /
   Đối tượng sử dụng) — dùng chung 1 layout: icon tròn + tiêu đề +
   nội dung, xen kẽ nền trắng/nền nhạt để mỗi mục nổi bật rõ ràng,
   không bị "dính" liền thành 1 khối dài đơn điệu như bản cũ.
   ------------------------------------------------------------ */
.wsttvn_lp_feature {

}

.wsttvn_lp_feature_alt {
    background: var(--wsttvn-lp-surface-alt);
}



.wsttvn_lp_feature_content {
    font-size: 15.5px;
    line-height: 1.8;
    color: var(--wsttvn-lp-text-dark);
}

.wsttvn_lp_feature_content p {
    margin: 0 0 14px;
}

.wsttvn_lp_feature_content ul {
    margin: 0 0 14px;
    padding-left: 22px;
}

.wsttvn_lp_feature_content li {
    margin-bottom: 10px;
}

.wsttvn_lp_feature_content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--wsttvn-lp-radius);
    margin: 16px 0;
}

/* Thành phần: mỗi <li> trình bày như 1 thẻ nhỏ nổi bật, dễ quét mắt
   hơn 1 danh sách gạch đầu dòng đơn thuần. */
.wsttvn_lp_ingredients_list ul {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}

.wsttvn_lp_ingredients_list li {
    background: #ffffff;
    border-left: 4px solid var(--wsttvn-lp-accent);
    border-radius: 0 var(--wsttvn-lp-radius) var(--wsttvn-lp-radius) 0;
    box-shadow: var(--wsttvn-lp-shadow);
    padding: 14px 18px;
    margin: 0;
    font-size: 14.5px;
}

/* ------------------------------------------------------------
   Hướng dẫn sử dụng — trình bày dạng info-box thực dụng, tách biệt
   hẳn khỏi nền trang để khách dễ tìm lại khi cần tra cứu liều dùng.
   ------------------------------------------------------------ */

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 576px) {
    .wsttvn_lp_price_main {
        padding: 8px 16px;
    }

    .wsttvn_lp_price_value {
        font-size: 24px;
    }

    .wsttvn_lp_ingredients_list ul {
        grid-template-columns: 1fr;
    }

}

/* ------------------------------------------------------------
   CẢNH BÁO CHÍNH HÃNG
   ------------------------------------------------------------ */
.wsttvn_lp_warning {

}
.wsttvn_lp_warning .wsttvn_lp_warning_title {
    font-size: 26px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
    color: #fff;
}

.wsttvn_lp_warning_inner {
    max-width: 100%;
    width: 1080px;
    margin: 0 auto;
}

.wsttvn_lp_warning_content {
    font-size: 17px;
    line-height: 1.7;
}

.wsttvn_lp_warning_content p {
    margin: 0 0 10px;
}

/* ------------------------------------------------------------
   CHI TIẾT SẢN PHẨM (render nội dung home_site.description)
   ------------------------------------------------------------ */
.wsttvn_lp_details {
    padding: 0px 0px;
}

.wsttvn_lp_details_content {
    font-size: 17px;
    line-height: 1.8;
}

.wsttvn_lp_details_content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--wsttvn-lp-radius);
    margin: 20px 0;
}

.wsttvn_lp_details_content h2, 
.wsttvn_lp_details_content h3, 
.wsttvn_lp_details_content h4 {
    color: #5b8a2b;
    margin: 20px 0 0px;
    font-size: 28px;
}

.wsttvn_lp_details_cta {
    text-align: center;
    margin-top: 36px;
}

/* ------------------------------------------------------------
   ĐÁNH GIÁ KHÁCH HÀNG
   ------------------------------------------------------------ */
.wsttvn_lp_reviews {
    padding: 56px 0;
    background: var(--wsttvn-lp-surface-alt);
}

.wsttvn_lp_reviews_summary {
    text-align: center;
    font-size: 15px;
    color: var(--wsttvn-lp-text-muted);
    margin: -16px 0 32px;
}

.wsttvn_lp_reviews_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.wsttvn_lp_review_card {
    background: var(--wsttvn-lp-surface);
    border-radius: var(--wsttvn-lp-radius);
    box-shadow: var(--wsttvn-lp-shadow);
    padding: 22px;
}

.wsttvn_lp_review_content {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--wsttvn-lp-text-dark);
    margin: 10px 0 14px;
}

.wsttvn_lp_review_images {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}

.wsttvn_lp_review_images img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 6px;
}

.wsttvn_lp_review_author {
    font-size: 13px;
    font-weight: 600;
    color: var(--wsttvn-lp-text-muted);
}

/* ------------------------------------------------------------
   FAQ (dùng <details>/<summary> gốc HTML — không cần JS, luôn
   hoạt động kể cả khi JS bị chặn)
   ------------------------------------------------------------ */
.wsttvn_lp_faq {
    padding: 56px 15px;
}

.wsttvn_lp_faq_list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wsttvn_lp_faq_item {
    background: var(--wsttvn-lp-surface-alt);
    border-radius: var(--wsttvn-lp-radius);
    padding: 4px 20px;
}

.wsttvn_lp_faq_question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--wsttvn-lp-text-dark);
    cursor: pointer;
    list-style: none;
}

.wsttvn_lp_faq_question::-webkit-details-marker {
    display: none;
}

.wsttvn_lp_faq_question i {
    color: var(--wsttvn-lp-accent);
    transition: var(--wsttvn-lp-transition);
    flex-shrink: 0;
}

.wsttvn_lp_faq_item[open] .wsttvn_lp_faq_question i {
    transform: rotate(180deg);
}

.wsttvn_lp_faq_answer {
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--wsttvn-lp-text-muted);
    padding: 0 0 18px;
}

/* ============================================================
   RESPONSIVE — dùng đúng breakpoint 991px đã có sẵn trong file
   ============================================================ */
@media (max-width: 991px) {
    .wsttvn_lp_hero {
        background: linear-gradient(160deg, var(--wsttvn-lp-surface-alt) 0%, #ffffff 60%);
        padding: 0px 0px;
    }
    .wsttvn_lp_hero_inner {
        /* grid-template-columns: 1fr; */
        /* text-align: center; */
        /* gap: 10px; */
        padding: 10px;
    }
    .wsttvn_lp_hero_content{
        padding: 0 10px;
    }
    
    .wsttvn_lp_hero_image {
        border-radius: 0px;
    }

    .wsttvn_lp_hero_sub {
        margin-left: auto;
        margin-right: auto;
    }


    .wsttvn_lp_hero_rating {
        justify-content: center;
    }

    .wsttvn_lp_hero_image {
        /*order: -1;*/
        max-width: 100%;
        margin: 0 auto;
        padding: 0px 0px;
    }

}
@media (max-width: 768px) {
    .wsttvn_lp_hero {
        background: linear-gradient(160deg, var(--wsttvn-lp-surface-alt) 0%, #ffffff 60%);
        padding: 0px 0px;
        grid-template-columns: 1fr;
        display: grid;
        max-width: 100%;
        margin: 0 auto;
        gap: 10px;
    }
}
@media (max-width: 576px) {
    .wsttvn_lp_hero_title {
        font-size: 18px;
    }


    .wsttvn_lp_warning_inner {
        flex-direction: column;
    }

}


/* ============================================================
   MY ACCOUNT — CSS cho myaccount.php (đăng nhập/đăng ký, đơn hàng,
   tải xuống, yêu thích, cài đặt tài khoản). Trang này trước đó CHƯA
   có CSS riêng — toàn bộ style bên dưới bổ sung mới, dùng đúng tên
   class đã có sẵn trong myaccount.php (không đổi tên class trong PHP).

   Kế thừa bộ biến màu gốc của theme (--main-color, --shadow-*,
   --border-radius, --transition) để đồng bộ nhận diện thương hiệu
   với các phần khác của site (menu, landing page...).
   ============================================================ */

.myaccount {
    max-width: 1080px;
    margin: 0 auto;
    padding: 40px 15px 60px;
}

.myaccount .page-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--title-color, #000);
    margin: 0 0 24px;
}

/* ------------------------------------------------------------
   ĐĂNG NHẬP / ĐĂNG KÝ — 2 cột song song
   ------------------------------------------------------------ */
.myaccount .login-register {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.myaccount .login,
.myaccount .register {
    background: #ffffff;
    border-radius: var(--border-radius-lg, 12px);
    box-shadow: var(--shadow-md, 0 4px 8px rgba(0, 0, 0, 0.12));
    padding: 32px;
}

/* ------------------------------------------------------------
   FORM dùng chung (đăng nhập, đăng ký, settings)
   ------------------------------------------------------------ */
.myaccount .form {
    display: flex;
    flex-direction: column;
}

.myaccount .form-label,
.myaccount .form-label-3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 600;
    color: var(--body-text-color, #656565);
    margin: 16px 0 6px;
}

.myaccount .form-label:first-child,
.myaccount .form-label-3:first-child {
    margin-top: 0;
}

.myaccount .form-link {
    font-size: 13px;
    font-weight: 500;
    color: var(--main-color, #af0081);
    text-decoration: none;
}

.myaccount .form-link:hover {
    text-decoration: underline;
}

.myaccount .form-input,
.myaccount select.form-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #e1e1e8;
    border-radius: var(--border-radius, 8px);
    font-size: 15px;
    font-family: inherit;
    color: var(--title-color, #000);
    background: #ffffff;
    transition: var(--transition, all 0.3s ease);
    box-sizing: border-box;
}

.myaccount .form-input:focus,
.myaccount select.form-input:focus {
    outline: none;
    border-color: var(--main-color, #af0081);
    box-shadow: 0 0 0 3px rgba(175, 0, 129, 0.12);
}

.myaccount .form-group {
    display: flex;
    gap: 16px;
}

.myaccount .form-group .col {
    flex: 1;
    min-width: 0;
}

.myaccount .form-select {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--body-text-color, #656565);
}

.myaccount .form-select select {
    padding: 8px 10px;
    border: 1px solid #e1e1e8;
    border-radius: var(--border-radius, 8px);
    font-family: inherit;
    font-size: 14px;
}

.myaccount .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 24px;
    padding: 13px 24px;
    background: linear-gradient(135deg, var(--main-color, #af0081), #ff25d0);
    color: #ffffff;
    border: 0;
    border-radius: var(--border-radius, 8px);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: var(--transition, all 0.3s ease);
}

.myaccount .btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md, 0 4px 8px rgba(0, 0, 0, 0.12));
    color: #ffffff;
}

.myaccount .btn.alt {
    background: #f2f2f5;
    color: var(--title-color, #000);
}

.myaccount .error {
    color: #d0021b;
    background: #fdecec;
    border: 1px solid #f4b7b7;
    border-radius: var(--border-radius, 8px);
    padding: 10px 14px;
    font-size: 14px;
    margin: 0;
}

/* ------------------------------------------------------------
   MENU TÀI KHOẢN (Orders / Downloads / Wishlist / Settings)
   ------------------------------------------------------------ */
.myaccount .menu {
    background: #ffffff;
    border-radius: var(--border-radius-lg, 12px);
    box-shadow: var(--shadow-md, 0 4px 8px rgba(0, 0, 0, 0.12));
    padding: 20px 24px;
    margin-bottom: 28px;
}

.myaccount .menu h2 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--body-text-color, #656565);
    margin: 0 0 12px;
}

.myaccount .menu-items {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.myaccount .menu-items a {
    padding: 9px 16px;
    border-radius: 999px;
    background: #f2f2f5;
    color: var(--title-color, #000);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition, all 0.3s ease);
}

.myaccount .menu-items a:hover {
    background: var(--main-color, #af0081);
    color: #ffffff;
}

/* ------------------------------------------------------------
   Tiêu đề khu vực nội dung (dùng chung cho các tab còn lại)
   ------------------------------------------------------------ */
.myaccount .wishlist h2,
.myaccount .settings h2 {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 18px;
}

/* ------------------------------------------------------------
   YÊU THÍCH (Wishlist) — dùng chung grid .posts với danh mục
   ------------------------------------------------------------ */
.myaccount .wishlist .posts-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
}

.myaccount .wishlist .post {
    display: block;
    text-decoration: none;
    color: inherit;
    background: #ffffff;
    border-radius: var(--border-radius-lg, 12px);
    box-shadow: var(--shadow-md, 0 4px 8px rgba(0, 0, 0, 0.12));
    overflow: hidden;
    transition: var(--transition, all 0.3s ease);
}

.myaccount .wishlist .post:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.15));
}

.myaccount .wishlist .post .img {
    width: 100%;
    aspect-ratio: 1 / 1;
}

.myaccount .wishlist .post .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.myaccount .wishlist .post .name {
    display: block;
    padding: 12px 14px 4px;
    font-size: 14px;
    font-weight: 600;
}

.myaccount .wishlist .post .price {
    display: block;
    padding: 0 14px 14px;
    font-size: 14px;
    font-weight: 700;
    color: var(--main-color, #af0081);
}

.myaccount .wishlist .post .price .rrp {
    margin-left: 6px;
    font-size: 12px;
    font-weight: 400;
    color: #999;
    text-decoration: line-through;
}

/* ------------------------------------------------------------
   CÀI ĐẶT TÀI KHOẢN (Settings)
   ------------------------------------------------------------ */
.myaccount .settings {
    background: #ffffff;
    border-radius: var(--border-radius-lg, 12px);
    box-shadow: var(--shadow-md, 0 4px 8px rgba(0, 0, 0, 0.12));
    padding: 32px;
}

.myaccount .settings .form {
    max-width: 560px;
}

/* ------------------------------------------------------------
   Utility class dùng trong myaccount.php (dùng chung, đặt tên
   ngắn gọn theo quy ước sẵn có trong file — không đổi tên trong PHP)
   ------------------------------------------------------------ */
.myaccount .pad-top-2 { padding-top: 10px; }
.myaccount .pad-y-5   { padding-top: 30px; padding-bottom: 30px; text-align: center; color: var(--body-text-color, #656565); }
.myaccount .pad-right-2 { padding-right: 10px; }
.myaccount .pad-left-2  { padding-left: 10px; }
.myaccount .mar-right-2 { margin-right: 10px; }
.myaccount .expand { width: 100%; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .myaccount .login-register {
        grid-template-columns: 1fr;
    }

    .myaccount .form-group {
        flex-direction: column;
        gap: 0;
    }

    .myaccount .wishlist .posts-wrapper {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
}



/* ============================================================
   WSTTVN LANDING PAGE — MỞ RỘNG (giá, khuyến mãi, các mục nội dung
   tách riêng: nguồn gốc, thành phần, công dụng, đối tượng dùng,
   hướng dẫn sử dụng). Bổ sung cho khối CSS landing page gốc phía trên
   — không sửa/xoá gì trong khối gốc.
   ============================================================ */

/* ------------------------------------------------------------
   Khối giá + khuyến mãi trong Hero — điểm nhấn quan trọng nhất
   để khách quyết định mua ngay, phải "đập vào mắt" đầu tiên.
   ------------------------------------------------------------ */

.wsttvn_lp_promo_ribbon {
    margin-bottom: 20px;
    font-size: 17px;
}
.wsttvn_lp_hero_image_3{
    margin-bottom: 20px;
}


/* ------------------------------------------------------------
   Các mục nội dung tách riêng (Nguồn gốc / Thành phần / Công dụng /
   Đối tượng sử dụng) — dùng chung 1 layout: icon tròn + tiêu đề +
   nội dung, xen kẽ nền trắng/nền nhạt để mỗi mục nổi bật rõ ràng,
   không bị "dính" liền thành 1 khối dài đơn điệu như bản cũ.
   ------------------------------------------------------------ */
.wsttvn_lp_feature {
    padding: 20px 0;
}

.wsttvn_lp_feature_alt {
    
}


.wsttvn_lp_feature_content {
    font-size: 15.5px;
    line-height: 1.8;
    color: var(--wsttvn-lp-text-dark);
}

.wsttvn_lp_feature_content p {
    margin: 0 0 14px;
}

.wsttvn_lp_feature_content ul {
    margin: 0 0 14px;
    padding-left: 22px;
}

.wsttvn_lp_feature_content li {
    margin-bottom: 10px;
}

.wsttvn_lp_feature_content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--wsttvn-lp-radius);
    margin: 16px 0;
}

/* Thành phần: mỗi <li> trình bày như 1 thẻ nhỏ nổi bật, dễ quét mắt
   hơn 1 danh sách gạch đầu dòng đơn thuần. */
.wsttvn_lp_ingredients_list ul {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}

.wsttvn_lp_ingredients_list li {
    background: #ffffff;
    border-left: 4px solid var(--wsttvn-lp-accent);
    border-radius: 0 var(--wsttvn-lp-radius) var(--wsttvn-lp-radius) 0;
    box-shadow: var(--wsttvn-lp-shadow);
    padding: 14px 18px;
    margin: 0;
    font-size: 14.5px;
}





/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 576px) {
    .wsttvn_lp_price_main {
        padding: 8px 16px;
    }

    .wsttvn_lp_price_value {
        font-size: 24px;
    }

    .wsttvn_lp_ingredients_list ul {
        grid-template-columns: 1fr;
    }

}

/* ============================================================
   Admin — tiêu đề phân mục trong form Cập nhật trang chủ (home-site.php)
   ============================================================ */
.wsttvn_admin_section_title {
    margin: 28px 0 12px;
    padding-top: 20px;
    border-top: 1px solid #e5e5e5;
    font-size: 16px;
    font-weight: 700;
}

.wsttvn_admin_section_title:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/* ---- 1) Tiêu đề + mô tả full-width ---- */
.wsttvn_lp_section_header {
    margin: 16px 0 28px;
}
.wsttvn_lp_section_header_title {
    margin: 0 0 8px;
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
}

.wsttvn_lp_section_header_desc {
    margin: 0;
    color: #ffdede;
    line-height: 1.65;
    font-size: 16px;
    text-align: justify;
}

/* ---- 2) Thân section 2 cột: ảnh trái / danh sách phải ---- */
.wsttvn_lp_section_body {
    display: block;
}
.wsttvn_lp_section_body.wsttvn_lp_section_body_has_image {
    display: flex;
    align-items: flex-start;
    gap: 28px;
    padding: 0px;
    border-radius: 25px;
}
.wsttvn_lp_section_body_image {
    flex: 0 0 38%;
    max-width: 38%;
    position: sticky;
    top: 20px;
}
.wsttvn_lp_section_body_image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
}
.wsttvn_lp_section_body_list {
    flex: 1;
    min-width: 0;
}

/* ---- Danh sách item dạng LIST (thay cho card grid) ---- */
.wsttvn_lp_item_list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.wsttvn_lp_item_row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    background: #ffffffc9;
    border-radius: 12px;
}
.wsttvn_lp_item_row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.wsttvn_lp_item_row_image {
    flex: 0 0 96px;
    max-width: 96px;
}
.wsttvn_lp_item_row_image img {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 100%;
    display: block;
    border: solid #ffc4c9 2px;
}
.wsttvn_lp_item_row_body {
    flex: 1;
    min-width: 0;
}
.wsttvn_lp_item_row_title {
    margin: 0 0 6px;
    font-size: 1.05rem;
    font-weight: 700;
}
.wsttvn_lp_item_row_desc {
    margin: 0;
    color: #555;
    line-height: 1.6;
}

.wsttvn_lp_tag_info {
    padding: 0px;
    margin-bottom: 20px;
}
.wsttvn_lp_tag_info ul{
    list-style: unset;
    margin-left: 15px;
}
.wsttvn_lp_tag_info h3{
    background: #5b8a2b;
    line-height: 22px;
    padding: 10px;
    color: #fff;
    margin-bottom: 5px;
    border-radius: 5px;
}
.wsttvn_lp_tag_info .tag_info_content {
    border: solid 1px #5b8a2b;
    padding: 10px 15px;
    border-radius: 5px;
}
@media (max-width: 990px) {
    .wsttvn_lp_tag_info {
        padding: 10px;
    }
}
@media (max-width: 768px) {
    .wsttvn_lp_section_body.wsttvn_lp_section_body_has_image {
        flex-direction: column;
    }
    .wsttvn_lp_section_body_image {
        max-width: 100%;
        flex-basis: auto;
        position: static;
    }
    .wsttvn_lp_item_row {
        gap: 12px;
    }
    .wsttvn_lp_item_row_image,
    .wsttvn_lp_item_row_image img {
        flex-basis: 72px;
        max-width: 72px;
        width: 72px;
        height: 72px;
    }
    .wsttvn_lp_tag_info {
        padding: 10px;
    }
}

/* ============================================================
   WSTTVN LP — SECTION GRID 4 CỘT
   Tiêu đề / Ảnh / Mô tả / 4 thẻ item
   ============================================================ */
.wsttvn_lp_g4 {
    padding: 10px 15px;
    text-align: center;
}

/* Hàng 1 — Tiêu đề */
.wsttvn_lp_g4_title {
    position: relative;
    max-width: 860px;
    margin: 8px auto 22px;
    padding-bottom: 14px;
    font-size: 26px;
    line-height: 1.3;
    font-weight: 700;
    color: #ffffff;
}

.wsttvn_lp_g4_title::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 64px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, #ffc4c9, var(--wsttvn-lp-accent-2));
    transform: translateX(-50%);
}

/* Hàng 2 — Hình ảnh */
.wsttvn_lp_g4_media {
    max-width: 100%;
    margin: 0 auto 22px;
    overflow: hidden;
    box-shadow: var(--wsttvn-lp-shadow-lg);
}

.wsttvn_lp_g4_media img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    padding: 0;
}

/* Hàng 3 — Mô tả */
.wsttvn_lp_g4_desc {
    max-width: 100%;
    margin: 0 auto 32px;
    font-size: 16px;
    line-height: 1.75;
    color: #ffdede;
    text-align: justify;
}

.wsttvn_lp_g4_desc p {
    margin: 0;
    padding: 0;
}

/* Hàng 4 — Lưới 4 cột (flex để tự căn giữa khi < 4 item) */
.wsttvn_lp_g4_grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.wsttvn_lp_g4_card {
    position: relative;
    flex: 0 1 calc((100% - 60px) / 4);
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 0px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    transition: var(--wsttvn-lp-transition);
}

.wsttvn_lp_g4_card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--wsttvn-lp-accent), var(--wsttvn-lp-accent-2));
    z-index: 2;
}

.wsttvn_lp_g4_card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25);
}

.wsttvn_lp_g4_card_media {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--wsttvn-lp-surface-alt);
}

.wsttvn_lp_g4_card_media img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    padding: 0;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.wsttvn_lp_g4_card:hover .wsttvn_lp_g4_card_media img {
    transform: scale(1.06);
}

.wsttvn_lp_g4_card_body {
    position: relative;
    flex: 1;
    padding: 30px 18px 20px;
}

/* Số thứ tự nổi đè lên mép ảnh */
.wsttvn_lp_g4_card_index {
    position: absolute;
    top: -21px;
    left: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 3px solid #ffffff;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--wsttvn-lp-accent), var(--wsttvn-lp-accent-2));
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    box-shadow: var(--wsttvn-lp-shadow);
}

/* Thẻ không có ảnh: số thứ tự nằm trong luồng */
.wsttvn_lp_g4_card_noimg .wsttvn_lp_g4_card_body {
    padding-top: 22px;
}

.wsttvn_lp_g4_card_noimg .wsttvn_lp_g4_card_index {
    position: static;
    margin-bottom: 12px;
}

.wsttvn_lp_g4_card_title {
    margin: 0 0 8px;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 700;
    color: var(--wsttvn-lp-accent);
}

.wsttvn_lp_g4_card_desc {
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: 1.65;
    color: #555555;
    text-align: justify;
}

/* Rich-text cũ (khi chưa nhập item) — đặt trên nền trắng cho dễ đọc */
.wsttvn_lp_g4_fallback {
    max-width: 1000px;
    margin: 0 auto;
    padding: 24px;
    background: #ffffff;
    border-radius: var(--wsttvn-lp-radius);
    text-align: left;
}

/* ------------------------------------------------------------
   Hướng dẫn sử dụng — trình bày dạng info-box thực dụng, tách biệt
   hẳn khỏi nền trang để khách dễ tìm lại khi cần tra cứu liều dùng.
   ------------------------------------------------------------ */
.wsttvn_lp_usage {
    padding: 25px 0;
}

.wsttvn_lp_usage .wsttvn_lp_usage_container{
    padding: 10px 15px;
}

/* Biến thể nền sáng: Hướng dẫn sử dụng (trong .wsttvn_lp_usage_box) */


.wsttvn_lp_usage_box .wsttvn_lp_usage_title {
    color: var(--wsttvn-lp-accent);
    font-size: 22px;
}

.wsttvn_lp_usage_box .wsttvn_lp_usage_desc {
    color: var(--wsttvn-lp-text-dark);
    font-size: 16px;
}

.wsttvn_lp_usage_box .wsttvn_lp_usage_img {
    
}



/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 1080px){
    .wsttvn_lp_hero_top {
        padding: 0px 0px;
    }
}
@media (max-width: 991px) {
    .header-logo {
        margin-left: -10px;
    }
    .wsttvn_lp_g4_title {
        font-size: 22px;
    }
}

@media (max-width: 576px) {
    .wsttvn_lp_g4 {
        padding: 5px 10px;
    }

    .wsttvn_lp_g4_title {
        font-size: 20px;
        margin-bottom: 18px;
    }

    .wsttvn_lp_g4_media {
        border-radius: 10px;
        margin-bottom: 18px;
    }

    .wsttvn_lp_g4_desc {
        font-size: 15px;
        margin-bottom: 24px;
        text-align: justify;
    }

    .wsttvn_lp_g4_grid {
        gap: 14px;
    }

    .wsttvn_lp_g4_card {
        flex-basis: calc((100% - 14px) / 2);
    }

    .wsttvn_lp_g4_card_body {
        padding: 26px 14px 16px;
    }

    .wsttvn_lp_g4_card_index {
        width: 36px;
        height: 36px;
        top: -18px;
        left: 14px;
        font-size: 13px;
    }

    .wsttvn_lp_g4_card_title {
        font-size: 15px;
    }

    .wsttvn_lp_g4_card_desc {
        font-size: 13.5px;
    }

    .wsttvn_lp_usage_box {
        padding: 18px 14px;
    }
}

@media (max-width: 420px) {
    .wsttvn_lp_g4_card {
        flex-basis: 100%;
    }
}

/* Thiết bị cảm ứng: bỏ hiệu ứng nhấc thẻ */
@media (hover: none) {
    .wsttvn_lp_g4_card:hover {
        transform: none;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    }

    .wsttvn_lp_g4_card:hover .wsttvn_lp_g4_card_media img {
        transform: none;
    }
}



/* ============================================================
   WSTTVN LP — SECTION SPLIT (Công dụng)
   Tiêu đề / Mô tả / 2 cột 1:1: ảnh trái + lưới 2x2 thẻ phải
   Thẻ card dùng lại .wsttvn_lp_g4_card để đồng bộ giao diện.
   ============================================================ */
.wsttvn_lp_split_row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: stretch;
    text-align: left;
}

/* Cột trái — ảnh cao bằng cột thẻ bên phải */
.wsttvn_lp_split_media {
    position: relative;
    margin: 0;
    min-height: 360px;
    border-radius: var(--wsttvn-lp-radius);
    overflow: hidden;
    box-shadow: var(--wsttvn-lp-shadow-lg);
    background: var(--wsttvn-lp-surface-alt);
}

.wsttvn_lp_split_media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    object-fit: cover;
    display: block;
}

/* Cột phải — lưới 2x2 */
.wsttvn_lp_split_content {
    min-width: 0;
}

.wsttvn_lp_split_grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Thẻ trong lưới split: nhỏ gọn hơn lưới 4 cột */
.wsttvn_lp_split_grid .wsttvn_lp_g4_card {
    flex: none;
}

.wsttvn_lp_split_grid .wsttvn_lp_g4_card_media {
    aspect-ratio: 16 / 10;
}

.wsttvn_lp_split_grid .wsttvn_lp_g4_card_body {
    padding: 26px 16px 16px;
}

.wsttvn_lp_split_grid .wsttvn_lp_g4_card_index {
    width: 38px;
    height: 38px;
    top: -19px;
    left: 16px;
    font-size: 13px;
}

.wsttvn_lp_split_grid .wsttvn_lp_g4_card_title {
    font-size: 15px;
}

.wsttvn_lp_split_grid .wsttvn_lp_g4_card_desc {
    font-size: 13.5px;
    line-height: 1.6;
}

/* Không có ảnh: lưới trải full-width 4 cột */
.wsttvn_lp_split_row_noimg {
    grid-template-columns: 1fr;
}

.wsttvn_lp_split_row_noimg .wsttvn_lp_split_grid {
    grid-template-columns: repeat(4, 1fr);
}

/* Rich-text dự phòng trong cột phải */
.wsttvn_lp_split_content .wsttvn_lp_g4_fallback {
    max-width: none;
    height: 100%;
}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 991px) {
    /* Xếp chồng: ảnh trên, lưới thẻ dưới */
    .wsttvn_lp_split_row {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .wsttvn_lp_split_media {
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    .wsttvn_lp_split_row_noimg .wsttvn_lp_split_grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .wsttvn_lp_split_grid {
        gap: 14px;
    }

    .wsttvn_lp_split_media {
        aspect-ratio: 4 / 3;
        border-radius: 10px;
    }

    .wsttvn_lp_split_grid .wsttvn_lp_g4_card_body {
        padding: 24px 12px 14px;
    }

    .wsttvn_lp_split_grid .wsttvn_lp_g4_card_index {
        width: 34px;
        height: 34px;
        top: -17px;
        left: 12px;
        font-size: 12px;
    }

    .wsttvn_lp_split_grid .wsttvn_lp_g4_card_title {
        font-size: 14px;
    }
}

@media (max-width: 420px) {
    .wsttvn_lp_split_grid,
    .wsttvn_lp_split_row_noimg .wsttvn_lp_split_grid {
        grid-template-columns: 1fr;
    }
}

/* SALE DATE TO CONTENT */

.sale_date{
    padding-top: 10px;
}
.sale_date .gta_sale_date {
    font-size: 18px;
    font-style: italic;
    font-family: sans-serif;
    color: #ff0000;
    background: #fff700;
    padding: 3px 10px;
}