/* Custom CSS extracted from HTML - Giữ nguyên 100% từ v2/ */

.drop-cap::first-letter {
    float: left;
    font-family: 'Playfair Display', serif;
    font-size: 5rem;
    line-height: 1;
    padding-right: 1rem;
    color: #8B5E3C;
    font-weight: 400;
}

.article-content h2 {
    font-family: 'Playfair Display', serif;
    font-size: 50px;
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
    border-left: 2px solid #8B5E3C;
}

.article-content p {
    margin-bottom: 1.5rem;
    line-height: 1.8;
    color: #333333;
}

.article-content ul {
    list-style-type: none !important;
    margin-left: 0 !important;
    margin-bottom: 1.5rem !important;
    padding-left: 1.5rem !important;
}

.article-content ul li {
    position: relative !important;
    margin-bottom: 0.75rem !important;
    padding-left: 0.5rem !important;
    line-height: 1.8 !important;
}

.article-content ul li::before {
    content: "" !important;
    position: absolute !important;
    left: -1.25rem !important;
    top: 0.7em !important;
    width: 6px !important;
    height: 6px !important;
    background-color: #8B5E3C !important;
    border-radius: 50% !important;
}

.article-content ol {
    list-style-type: decimal !important;
    margin-left: 1.5rem !important;
    margin-bottom: 1.5rem !important;
    padding-left: 0 !important;
}

.article-content ol li {
    margin-bottom: 0.75rem !important;
    padding-left: 0.5rem !important;
    line-height: 1.8 !important;
    color: #333333 !important;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Yoast Breadcrumb Styling */
.breadcrumb-container a {
    transition: color 0.3s ease;
}

.breadcrumb-container a:hover {
    color: #ffffff;
}

.breadcrumb-container span:last-child {
    color: #ffffff;
}

/* Accordion FAQ */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
}

.accordion-item:hover .accordion-trigger {
    border-bottom-color: #8B5E3C;
}

/* Custom Bullet */
.custom-bullet {
    position: relative;
    padding-left: 1.5rem;
}

.custom-bullet::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 6px;
    height: 6px;
    background-color: #8B5E3C;
}

/* ==========================================
   Header - Height & Scroll States
   ========================================== */

/* Mặc định - Mobile */
.header-inner {
    height: 64px;
    transition: height 0.4s ease;
}

/* Mặc định - Desktop */
@media (min-width: 1024px) {
    .header-inner {
        height: 96px;
    }
}

/* Khi scroll - Mobile */
.header-scrolled .header-inner {
    height: 56px;
}

/* Khi scroll - Background */
.header-scrolled {
    background: rgba(26, 26, 26, 0.95) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Khi scroll - Desktop */
@media (min-width: 1024px) {
    .header-scrolled .header-inner {
        height: 72px;
    }
}

/* ==========================================
   Mobile Menu - Hamburger & Overlay
   ========================================== */

/* Hamburger Toggle Animation */
#mobile-menu-toggle.is-active .hamburger-line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

#mobile-menu-toggle.is-active .hamburger-line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

#mobile-menu-toggle.is-active .hamburger-line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
    width: 1.75rem;
    /* w-7 */
}

/* Mobile Menu Overlay - Visible State */
#mobile-menu-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* Mobile Menu List Items */
.mobile-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-menu-list li {
    overflow: hidden;
}

.mobile-menu-list li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    transition: color 0.3s ease, padding-left 0.3s ease;
    transform: translateX(-100%);
    opacity: 0;
}

#mobile-menu-overlay.is-open .mobile-menu-list li a {
    transform: translateX(0);
    opacity: 1;
}

/* Stagger animation delay cho từng menu item */
.mobile-menu-list li:nth-child(1) a {
    transition-delay: 0.1s;
}

.mobile-menu-list li:nth-child(2) a {
    transition-delay: 0.15s;
}

.mobile-menu-list li:nth-child(3) a {
    transition-delay: 0.2s;
}

.mobile-menu-list li:nth-child(4) a {
    transition-delay: 0.25s;
}

.mobile-menu-list li:nth-child(5) a {
    transition-delay: 0.3s;
}

.mobile-menu-list li:nth-child(6) a {
    transition-delay: 0.35s;
}

.mobile-menu-list li:nth-child(7) a {
    transition-delay: 0.4s;
}

.mobile-menu-list li:nth-child(8) a {
    transition-delay: 0.45s;
}

/* Hover effect */
.mobile-menu-list li a:hover {
    color: #8B5E3C;
    padding-left: 1rem;
}

/* Thêm mũi tên cho mỗi link */
.mobile-menu-list li a::after {
    content: '→';
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.2);
    transition: color 0.3s ease, transform 0.3s ease;
}

.mobile-menu-list li a:hover::after {
    color: #8B5E3C;
    transform: translateX(4px);
}

/* Current menu item highlight */
.mobile-menu-list li.current-menu-item a,
.mobile-menu-list li.current_page_item a {
    color: #8B5E3C;
}

/* Mobile CTA animation */
.mobile-menu-item {
    transform: translateY(20px);
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.5s ease;
}

#mobile-menu-overlay.is-open .mobile-menu-item {
    transform: translateY(0);
    opacity: 1;
}

/* Ngăn body scroll khi menu mở */
body.mobile-menu-open {
    overflow: hidden;
}

/* Responsive: ẩn overlay trên desktop */
@media (min-width: 1024px) {
    #mobile-menu-overlay {
        display: none !important;
    }
}

/* Language Switcher Spacing Adjustment 
   Reduces the gap-8 (2rem) between adjacent language items in the desktop header
*/
@media (min-width: 1024px) {
    .header-inner li.trp-language-switcher-container+li.trp-language-switcher-container {
        margin-left: -1.25rem !important;
    }
}