/*
Theme Name: Hoi Thap Khop Thái Nguyên
Theme URI: https://hoithapkhophoctphcm.com/
Author: James Milo
Description: Giao diện dựa trên thiết kế của hoithapkhophoctphcm.com
Version: 1.2
Text Domain: hoi-thap-khop
*/

/* --- CORE RESETS & GLOBAL --- */
* { box-sizing: border-box; }
body { 
    background-color: #f2f2f2; 
    font-family: Arial, sans-serif; 
    margin: 0; 
    color: #444;
    line-height: 1.5;
}
.boxed-wrap {
    max-width: 1140px;
    margin: 0 auto;
    background: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.inner { padding: 0 15px; }
.clearfix::after { content: ""; clear: both; display: table; }
a { text-decoration: none; color: inherit; transition: all 0.2s; }
img { max-width: 100%; height: auto; display: block; }

/* --- HEADER --- */
header.header { padding: 20px 0; border-bottom: 1px solid #eee; background: #fff; }
.logo-container { display: flex; justify-content: center; align-items: center; width: 100%; }
.logo-link { display: flex; align-items: center; text-decoration: none; }
.logo-link img { width: 100px; height: 100px; margin-right: 20px; flex-shrink: 0; }
.logo-text { display: flex; flex-direction: column; justify-content: center; }
.vn-text { font-size: 20px; font-weight: bold; color: #0c3d54; text-transform: uppercase; line-height: 1.2; margin-bottom: 2px; }
.en-text { font-size: 14px; font-weight: normal; color: #444; font-style: italic; line-height: 1.2; }
.wp-block-search .wp-block-search__button.wp-element-button {
	padding-left: 10px;
	padding-right: 10px;
}

@media (max-width: 768px) {
    header.header { padding: 15px 0; }
    .logo-link img { width: 80px; height: 80px; margin-right: 10px; }
    .vn-text { font-size: 16px; }
    .en-text { font-size: 10px; }
}

/* --- MAIN NAVIGATION --- */
#navigation {
    background: #FFA07A;
    border-bottom: 3px solid #FFA07A;
    position: relative;
    z-index: 99;
    width: 100%;
    display: block;
    margin: 0;
    padding: 0;
}

#navigation .inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0;
    display: flex;
}

#navigation .navigation-inner {
    width: 100%;
}

/* Desktop Menu Visibility */
.main-menu.mom_visibility_desktop {
    display: flex !important;
}

.device-menu-wrap.mom_visibility_device {
    display: none !important;
}

@media (max-width: 992px) {
    .main-menu.mom_visibility_desktop {
        display: none !important;
    }
    .device-menu-wrap.mom_visibility_device {
        display: block !important;
    }
}

/* Ensure the UL generated by WP is horizontal */
#navigation ul.main-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

#navigation ul.main-menu li {
    list-style: none;
    border-right: 1px solid rgba(255,255,255,0.15);
    margin: 0;
    padding: 0;
    position: relative;
}

#navigation ul.main-menu li:last-child {
    border-right: none;
}

#navigation ul.main-menu li a {
    color: #fff;
    padding: 13px 20px;
    display: block;
    font-weight: bold;
    font-size: 13px;
    text-transform: uppercase;
    text-decoration: none;
}

#navigation ul.main-menu li a:hover,
#navigation ul.main-menu li.current-menu-item a {
    background: #e67e22;
}

#navigation ul.main-menu li:first-child a {
    background: #FFA07A;
}

/* Sub-menus for Desktop */
#navigation ul.main-menu li ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    min-width: 220px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    flex-direction: column;
    border-top: 2px solid #FFA07A;
}

#navigation ul.main-menu li:hover > ul {
    display: block;
}

#navigation ul.main-menu li ul li {
    border-right: none;
    border-bottom: 1px solid #eee;
    width: 100%;
}

#navigation ul.main-menu li ul li a {
    color: #444;
    padding: 10px 20px;
    text-transform: none;
    font-size: 14px;
    font-weight: normal;
}

#navigation ul.main-menu li ul li a:hover {
    background: #f9f9f9;
    color: #FFA07A;
}

/* Specific Home Icon for the first menu item */
#navigation ul.main-menu li:first-child a::before {
    content: "\f015";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 8px;
}

/* --- MOBILE MENU STYLES --- */
@media (max-width: 992px) {
    #navigation {
        background: #FFA07A;
        border: none;
        height: auto;
    }

    #navigation .inner {
        display: block !important;
        padding: 0 !important;
    }
    
    .main-menu.mom_visibility_desktop {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    .device-menu-wrap.mom_visibility_device {
        display: block !important;
        visibility: visible !important;
        width: 100%;
        position: relative;
    }

    .device-menu-holder {
        background: #FFA07A;
        color: #fff;
        padding: 12px 15px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: bold;
        text-transform: uppercase;
        font-size: 18px; /* Larger icon size */
        min-height: 45px;
    }

    .device-menu-holder i.mh-icon::before {
        content: "\f0c9";
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
    }

    .device-menu-holder .mh-caret::before {
        content: "\f0d7";
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
    }
    
    .device-menu-wrap.open .device-menu-holder .mh-caret::before {
        content: "\f0d8";
    }

    /* Mobile menu list */
    ul.device-menu {
        display: none; /* Hidden by default */
        list-style: none;
        padding: 0;
        margin: 0;
        background: #fff;
        border-top: 1px solid rgba(0,0,0,0.05);
        box-shadow: 0 5px 10px rgba(0,0,0,0.1);
        width: 100%;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1000;
    }

    ul.device-menu li {
        border-right: none;
        border-bottom: 1px solid #f0f0f0;
        width: 100%;
    }

    ul.device-menu li a {
        color: #444;
        padding: 12px 20px;
        display: block;
        font-size: 14px;
        font-weight: bold;
        text-transform: uppercase;
        width: 100%;
        background: #fff;
        transition: all 0.2s;
    }

    ul.device-menu li a:hover,
    ul.device-menu li.current-menu-item a {
        background: #f9f9f9;
        color: #FFA07A;
        padding-left: 25px;
    }

    /* Sub-menus on mobile */
    ul.device-menu li ul {
        position: static;
        display: block;
        box-shadow: none;
        border-top: none;
        padding-left: 0;
        background: #fafafa;
        width: 100%;
    }

    ul.device-menu li ul li a {
        font-weight: normal;
        font-size: 13px;
        background: #fafafa;
        padding-left: 35px;
        text-transform: none;
    }

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

    /* Open state for mobile menu */
    .device-menu-wrap.open ul.device-menu {
        display: block;
    }
}


/* --- HOME LAYOUT GRID --- */
.home-main-layout { display: flex; padding: 25px 15px; background: #fff; }
.home-sidebar-left { flex: 0 0 25%; max-width: 25%; padding-right: 25px; }
.home-main-content { flex: 0 0 75%; max-width: 75%; }

/* Top row: Slider */
.home-top-row { display: flex; margin-bottom: 30px; }
.home-slider-col { flex: 0 0 100%; max-width: 100%; }

/* Video row inline */
.home-video-row-inline { margin-bottom: 35px; border-bottom: 1px solid #eee; padding-bottom: 25px; }

/* News grid: 2 columns */
.home-news-row { display: flex; margin: 0 -10px; }
.home-bottom-widget { flex: 0 0 50%; max-width: 50%; padding: 0 10px; }

/* --- WIDGET STYLES (SIDEBAR & FOOTER) --- */
.widget { margin-bottom: 35px; }
.widget-head { border-bottom: 2px solid #0c3d54; margin-bottom: 18px; position: relative; }
.widget-title {
    margin: 0; font-size: 15px; font-weight: 700; color: #0c3d54; display: inline-block; background: #fff;
    padding-right: 12px; position: relative; bottom: -2px; text-transform: uppercase;
}
.widget-title span { border-bottom: 2px solid #FFA07A; padding-bottom: 10px; }

/* Left News List Sidebar */
.latest-news-sidebar { list-style: none; padding: 0; margin: 0; border: 1px solid #eee; }
.latest-news-sidebar li { padding: 12px 15px; border-bottom: 1px solid #f9f9f9; display: flex; align-items: flex-start; }
.latest-news-sidebar li:last-child { border-bottom: none; }
.latest-news-sidebar li i { font-size: 10px; color: #ccc; margin-top: 5px; margin-right: 12px; }
.latest-news-sidebar li a { font-size: 13.5px; color: #333; line-height: 1.4; font-weight: 500; }
.latest-news-sidebar li a:hover { color: #e67e22; }

/* Member Menu Left */
.widget_nav_menu ul { list-style: none; padding: 0; margin: 0; border: 1px solid #eee; }
.widget_nav_menu ul li { border-bottom: 1px solid #f9f9f9; }
.widget_nav_menu ul li a { display: block; padding: 11px 15px; font-size: 13.5px; color: #333; font-weight: 500; }
.widget_nav_menu ul li a::before {
    content: "\f101"; font-family: "Font Awesome 5 Free"; font-weight: 900; margin-right: 10px; color: #ddd; font-size: 11px;
}
.widget_nav_menu ul li a:hover { color: #e67e22; padding-left: 20px; background: #fafafa; }

/* --- NEWS BOX WIDGET --- */
.news-box { border: 1px solid #eee; margin-bottom: 30px; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.03); }
.news-box .nb-header { padding: 11px 15px; color: #fff; }
.news-box .nb-title { margin: 0; font-size: 15px; font-weight: 700; text-transform: uppercase; }
.news-box .nb-content { padding: 18px; }

.big-post { margin-bottom: 22px; border-bottom: 1px solid #f2f2f2; padding-bottom: 18px; }
.big-news-image { margin-bottom: 15px; border: 1px solid #f0f0f0; padding: 3px; }
.big-news-summary h3 { margin: 10px 0 8px; font-size: 17px; font-weight: 700; line-height: 1.4; }
.big-news-summary h3 a:hover { color: #e67e22; }
.mom-post-meta { font-size: 11.5px; color: #999; margin-bottom: 8px; text-transform: uppercase; }
.big-news-excerpt { font-size: 13.5px; color: #444; line-height: 1.6; }
.read-more-link { color: #e67e22; font-weight: bold; font-size: 12px; margin-left: 5px; }

.small-post { margin-bottom: 16px; display: flex; }
.small-news-image { flex: 0 0 90px; margin-right: 15px; border: 1px solid #f0f0f0; padding: 2px; }
.small-news-image img { width: 86px; height: 58px; object-fit: cover; }
.small-news-summary h3 { margin: 0; font-size: 13.5px; font-weight: 500; line-height: 1.4; color: #333; }
.small-news-summary h3 a:hover { color: #e67e22; }

.nb-footer { text-align: right; border-top: 1px solid #f2f2f2; padding-top: 10px; margin-top: 5px; }
.show-more-button { font-size: 11px; color: #999; text-transform: uppercase; letter-spacing: 0.5px; }
.show-more-button:hover { color: #e67e22; }

/* --- VIDEO CLIP ROW --- */
.video-grid { display: flex; margin: 0 -10px; }
.video-item { flex: 0 0 33.333%; padding: 0 10px; }
.video-thumbnail { position: relative; background: #000; border: 3px solid #fff; box-shadow: 0 0 5px rgba(0,0,0,0.1); }
.video-thumbnail img { opacity: 0.85; transition: all 0.3s; }
.video-thumbnail i {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 35px; color: #fff; text-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.video-item:hover img { opacity: 1; }
.video-item h3 { margin: 12px 0; font-size: 13.5px; font-weight: normal; text-align: center; }

/* --- CONTACT INFO SIDEBAR --- */
.contact-info-widget p { font-size: 13px; line-height: 1.7; margin-bottom: 12px; border-bottom: 1px dotted #eee; padding-bottom: 8px; }
.contact-info-widget i { width: 22px; text-align: center; margin-right: 6px; }

/* --- FOOTER --- */
footer#footer { background: #fff; padding: 50px 0 30px; border-top: 1px solid #eee; border-bottom: 1px solid #eee; }
footer#footer .inner { display: flex; flex-wrap: wrap; margin: 0 -15px; }
footer#footer .one_half { flex: 0 0 50%; max-width: 50%; padding: 0 15px; }
footer#footer .widget-title { background: #fff; }
footer#footer ul li { border-bottom: 1px dotted #f0f0f0; padding: 9px 0; font-size: 13.5px; color: #666; }
footer#footer a:hover { color: #e67e22; }

.copyrights-area { background: #0c3d54; color: #fff; padding: 18px 0; text-align: center; font-size: 13px; }
.copyrights-text { margin: 0; color: rgba(255,255,255,0.7); }

/* --- MAIN LAYOUT FOR DETAIL & ARCHIVE --- */
.main-content-wrap {
    display: flex;
    padding: 30px 15px;
    background: #fff;
}

.main-content {
    flex: 0 0 72%;
    max-width: 72%;
    padding-right: 35px;
}

.sidebar-right {
    flex: 0 0 28%;
    max-width: 28%;
}

/* --- SINGLE POST & PAGE --- */
.entry-header {
    margin-bottom: 25px;
}

.entry-title {
    font-size: 28px;
    color: #0c3d54;
    margin: 10px 0 15px;
    line-height: 1.3;
}

.entry-meta {
    font-size: 13px;
    color: #999;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}

.entry-meta span {
    margin-right: 20px;
}

.entry-meta i {
    margin-right: 5px;
    color: #e67e22;
}

.post-thumbnail {
    margin-bottom: 30px;
}

.post-thumbnail img {
    border-radius: 4px;
    width: 100%;
}

.entry-content {
    font-size: 16px;
    line-height: 1.8;
    color: #333;
}

.entry-content p {
    margin-bottom: 20px;
}

.entry-content h2, .entry-content h3 {
    color: #0c3d54;
    margin: 30px 0 15px;
}

.entry-footer {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.tag-label {
    font-weight: bold;
    color: #0c3d54;
}

/* --- RELATED POSTS --- */
.related-posts {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 2px solid #0c3d54;
}

.related-title {
    font-size: 20px;
    color: #0c3d54;
    margin-bottom: 25px;
    text-transform: uppercase;
}

.related-title span {
    border-bottom: 2px solid #FFA07A;
    padding-bottom: 10px;
}

.related-grid {
    display: flex;
    margin: 0 -10px;
}

.related-item {
    flex: 0 0 33.333%;
    padding: 0 10px;
}

.related-thumb img {
    border-radius: 4px;
    width: 100%;
    margin-bottom: 10px;
}

.related-item h4 {
    font-size: 14px;
    line-height: 1.4;
    margin: 0;
}

.related-item h4 a {
    color: #333;
}

.related-item h4 a:hover {
    color: #e67e22;
}



.page-title {
    font-size: 24px;
    color: #0c3d54;
    padding-bottom: 10px;
    margin: 0;
}

.archive-post {
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #eee;
    display: flex;
}

.archive-post-thumbnail {
    flex: 0 0 240px;
    margin-right: 20px;
}

.archive-post-thumbnail img {
    border-radius: 4px;
    width: 100%;
}

.archive-post-summary {
    flex: 1;
}

.archive-post-summary .entry-title {
    font-size: 20px;
    margin-top: 0;
}

.archive-post-summary .entry-meta {
    border: none;
    padding: 0;
    margin-bottom: 10px;
}

.archive-post-summary .entry-excerpt {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
}

/* --- PAGINATION --- */
.pagination {
    margin-top: 30px;
    display: flex;
    gap: 10px;
}

.pagination .page-numbers {
    display: inline-block;
    padding: 8px 15px;
    background: #fff;
    border: 1px solid #eee;
    color: #444;
    font-weight: bold;
    border-radius: 4px;
}

.pagination .page-numbers.current {
    background: #e67e22;
    color: #fff;
    border-color: #e67e22;
}

.pagination .page-numbers:hover:not(.current) {
    background: #f9f9f9;
    color: #e67e22;
    border-color: #e67e22;
}

/* --- BREADCRUMBS --- */
.breadcrumbs {
    font-size: 13px;
    color: #999;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.breadcrumbs a {
    color: #666;
}

.breadcrumbs a:hover {
    color: #e67e22;
}

.breadcrumbs .sep {
    margin: 0 10px;
    color: #ccc;
}

/* --- CONTACT PAGE STYLES --- */

.contact-info-col {
    flex: 0 0 45%;
    max-width: 45%;
    padding: 0 20px;
}

.contact-form-col {
    flex: 0 0 55%;
    max-width: 55%;
    padding: 0 20px;
}

.contact-map-full {
    width: 100%;
    margin-top: 30px;
    padding: 0 20px;
}

.contact-map-full iframe {
    width: 100% !important;
    border-radius: 4px;
    border: 1px solid #eee !important;
}

/* Contact Details List */
.contact-details-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.contact-details-list li {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
    display: flex;
    align-items: flex-start;
}

.contact-details-list li i {
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: #f9f9f9;
    color: #FFA07A;
    border-radius: 50%;
    margin-right: 15px;
    flex-shrink: 0;
}

/* Contact Form 7 Refinement */
.wpcf7-form p {
    margin-bottom: 15px;
}

.wpcf7-form label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    color: #0c3d54;
}

.wpcf7-form-control {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    transition: border-color 0.3s;
}

.wpcf7-form-control:focus {
    border-color: #FFA07A;
    outline: none;
}

.wpcf7-submit {
    background: #FFA07A;
    color: #fff;
    border: none;
    padding: 12px 30px;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.3s;
    width: auto !important;
}

.wpcf7-submit:hover {
    background: #FFA07A;
}


@media (max-width: 768px) {
    .contact-info-col,
    .contact-form-col {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 30px;
    }
}

.home-slider { 
    width: 100%; 
    position: relative; 
    overflow: hidden; 
    background: #f0f0f0;
}
.home-slider .swiper-wrapper,
.home-slider .swiper-slide { 
    height: 100%; 
}
.home-slider .swiper-slide a { 
    display: block; 
    height: 100%; 
    position: relative; 
}
.home-slider .swiper-slide img.slide-image { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    display: block; 
}
.placeholder-slide {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ddd;
    color: #666;
    font-size: 20px;
}
.slider-caption {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: rgba(12,61,84,0.6);
    color: #fff;
    padding: 15px 25px;
    border-radius: 4px;
    z-index: 10;
}
.slider-caption h3 { 
    margin: 0; 
    font-size: 0.8rem; 
    color: #fff; 
}
.swiper-button-next, 
.swiper-button-prev { 
    color: #fff; 
}
.swiper-pagination-bullet-active { 
    background: #FFA07A; 
}

    /* --- RESPONSIVE --- */
@media (max-width: 992px) {
    .home-slider { height: 300px; }
    .home-main-layout { flex-direction: column; }
    .home-sidebar-left, .home-main-content { flex: 0 0 100%; max-width: 100%; padding: 0; }
	.slider-caption h3 {font-size: 0.7rem; }
    
    /* Move slider to top on mobile */
    .home-main-layout { display: flex; flex-direction: column; }
    .home-main-content { order: -1; } /* Main content (Slider) first */
    .home-sidebar-left { order: 1; } /* Sidebar after slider */

    .home-top-row { flex-direction: column; }
    .home-slider-col { flex: 0 0 100%; max-width: 100%; padding: 0; }
    .home-news-row { flex-direction: column; }
    .home-news-row .home-bottom-widget { flex: 0 0 100%; max-width: 100%; }
    .video-grid { flex-direction: column; }
    .video-item { flex: 0 0 100%; max-width: 100%; margin-bottom: 20px; }
    footer#footer .one_half { flex: 0 0 100%; max-width: 100%; }

    .main-content-wrap { flex-direction: column; }
    .main-content, .sidebar-right { flex: 0 0 100%; max-width: 100%; padding-right: 0; }
    .archive-post { flex-direction: column; }
    .archive-post-thumbnail { flex: 0 0 100%; margin-right: 0; margin-bottom: 15px; }

    .related-grid { flex-direction: column; }
    .related-item { flex: 0 0 100%; max-width: 100%; margin-bottom: 25px; }
}

@media (max-width: 576px) {
    .slider-caption { padding: 10px 7px; }
	.home-main-layout {padding: 10px 0px;}
}