/**
 * banner-dau-trang-chu.css (v1.2 A2-Pro)
 * Place: css/banner-dau-trang-chu.css
 */

.banner-dau-trang-chu { width:100%; box-sizing:border-box; }
.banner-dau-trang-chu-inner {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:40px 20px;
    box-sizing:border-box;
    overflow:hidden;
    transition: background 0.25s ease;
    margin-bottom: 30px;
    
}

.banner-dau-trang-chu-content {
    max-width:1200px;
    width:100%;
    text-align:center;
    margin:0 auto;
}

/* Title & desc */
.banner-dau-trang-chu-title {
    margin:0 0 12px;
    font-weight:800;
    line-height:1.05;
    word-break:break-word;
}

.banner-dau-trang-chu-desc {
    margin:0 auto 18px;
    max-width:900px;
    line-height:1.5;
}

/* Search wrapper & form */
.banner-dau-trang-chu-search-wrap {
    display:block;
    margin: 0 auto;
    box-sizing:border-box;
}

.banner-dau-trang-chu-searchform {
    display:flex;
    gap:8px;
    justify-content:center;
    width:100%;
    box-sizing:border-box;
}

.banner-dau-trang-chu-search-input {
    padding:10px 12px;
    border:1px solid rgba(0,0,0,0.08);
    border-radius:6px;
    outline:none;
    min-width:120px;
    flex:1 1 auto;
    box-sizing:border-box;
    font-size:14px;
}

.banner-dau-trang-chu-search-btn {
    background: #dd0000;
    padding:10px 14px;
    border-radius:6px;
    border: none;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    white-space:nowrap;
}

/* Buttons */
.banner-dau-trang-chu-buttons {
    margin-top:18px;
    display:flex;
    gap:10px;
    justify-content:center;
    flex-wrap:wrap;
}

.banner-dau-trang-chu-btn {
    display:inline-block;
    text-decoration:none;
    font-weight:600;
    border: none;
    cursor: pointer;
}

/* Responsive */
@media (max-width: 900px) {
    .banner-dau-trang-chu-inner { padding:28px 16px; }
    .banner-dau-trang-chu-title { font-size:28px !important; }
    .banner-dau-trang-chu-desc { font-size:15px !important; }
    .banner-dau-trang-chu-search-wrap { width:100%; padding:0 10px; }
    .banner-dau-trang-chu-searchform { width:100%; }
    .banner-dau-trang-chu-search-input { width:100%; }
    .banner-dau-trang-chu-buttons { flex-direction:column; gap:8px; align-items:center; }
}

/* Scroll effect helpers */
.banner-dau-trang-chu[data-effect="up"] .banner-dau-trang-chu-inner { transition: transform 0.6s ease, opacity 0.6s ease; }
.banner-dau-trang-chu[data-effect="down"] .banner-dau-trang-chu-inner { transition: transform 0.6s ease, opacity 0.6s ease; }
.banner-dau-trang-chu[data-effect="left"] .banner-dau-trang-chu-inner { transition: transform 0.6s ease, opacity 0.6s ease; }
.banner-dau-trang-chu[data-effect="right"] .banner-dau-trang-chu-inner { transition: transform 0.6s ease, opacity 0.6s ease; }

.banner-dau-trang-chu.effect-init[data-effect="up"] .banner-dau-trang-chu-inner { transform: translateY(20px); opacity:0; }
.banner-dau-trang-chu.effect-init[data-effect="down"] .banner-dau-trang-chu-inner { transform: translateY(-20px); opacity:0; }
.banner-dau-trang-chu.effect-init[data-effect="left"] .banner-dau-trang-chu-inner { transform: translateX(30px); opacity:0; }
.banner-dau-trang-chu.effect-init[data-effect="right"] .banner-dau-trang-chu-inner { transform: translateX(-30px); opacity:0; }

/* small normalize inside Customizer iframe */
#customize-preview .banner-dau-trang-chu-search-input { box-sizing:border-box; }

/* Buttons preview safety */
#customize-preview .banner-dau-trang-chu-btn { text-decoration:none; }

/* Accessibility: screen reader */
.banner-dau-trang-chu .screen-reader-text { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
/* =========================================
   MOBILE BUTTON LAYOUT: 3 nút trên 1 hàng,
   nếu nhiều hơn tự xuống hàng.
   ========================================= */
@media (max-width: 600px) {

    .banner-dau-trang-chu-buttons {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
        width: 100%;
        max-width: 360px;
        margin: 18px auto 0 auto !important;
        box-sizing: border-box;
    }

    .banner-dau-trang-chu-btn {
        text-align: center !important;
        padding: 14px 10px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
        display: block !important;
        box-sizing: border-box;
        width: 100% !important;
        white-space: normal !important; /* để text dài xuống dòng */
    }
    .banner-dau-trang-chu-btn a{
        text-align: center !important;
        padding: 14px 10px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
        display: block !important;
        box-sizing: border-box;
        width: 100% !important;
        white-space: normal !important; /* để text dài xuống dòng */
    }
}
/* =========================================
   OVERLAY LỚP PHỦ CHO BANNER
   ========================================= */
.banner-dau-trang-chu-inner {
    position: relative;
    overflow: hidden;
}

.banner-dau-trang-chu-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.35); /* độ tối 35% - có thể chỉnh */
    z-index: 1;
    pointer-events: none; /* không chặn click */
}

/* Đảm bảo nội dung nằm trên overlay */
.banner-dau-trang-chu-content {
    position: relative;
    z-index: 2;
}