.sitemap-leader{width:100% !important;}
.bgleader{float:left;width:100%;height:0 auto;padding-bottom:900px}
/* ===== TITLE ===== */
.title{font:22px Helvetica-bold;text-align:center;color:#e60000;font-weight:bold;padding:30px 10px;}

/* ===== SKYLINE ===== */
.wrapper{width:98%;height:0 auto;position:absolute;overflow:hidden;left:0;top:0;padding:0px 1% 200px 1%;}
.wrapper::before {content:"";position: absolute;inset:0;}

.org{position:relative;z-index:1;}

/* ===== LEVEL ===== */
.level{display:flex;justify-content:center;gap:5px;position:relative;}

/* ===== CARD ===== */
.card{width:300px;background:#e60000;color:#fff;border-radius:12px;padding:15px;text-align:center;position:relative;box-shadow:0 6px 15px rgba(0,0,0,0.25);}
.card-chil{float:left;width:100%;height:0 auto;overflow:hidden;border:solid 1px #ccc;}
    .card .imgmain{float:left;width:30%;height:150px;object-fit:cover;margin-bottom:10px;padding:2%;}
    .card .infor{float:left;width:65%;height:0 auto;overflow:hidden;}
        .card .infor .name{float:left;width:100%;height:0 auto;font:17px Helvetica-bold;color:yellow;margin-top:10px;}
        .card .infor .position{float:left;width:100%;height:0 auto;font:15px Helvetica-bold;background:#ff4d4d;margin-top:10px;padding:5px 0px 5px 0px;
                    margin-bottom:5px;}
        .card .infor .email{float:left;width:100%;height:0 auto;font:13px Helvetica-bold;margin-top:5px;text-align:left;}

/* ===== POPUP ===== */
.popup{position:absolute; top: calc(100% + 2px); /* nằm bên dưới khung chính */left:50%;transform:translateX(-50%);width:100%;background:#fa8383;color:white;
       padding:10px;border-radius:8px;box-shadow: 0 5px 15px rgba(0,0,0,0.2);font-size:13px;display:none;z-index:112;font:15px Helvetica;text-align:left;}
.popup p{float:left;width:100%;height:0 auto;overflow:hidden;margin-top:5px;line-height:22px;}

.card:hover .popup {display: block;}

/* ========================= */
/* ====== CONNECTOR ======= */
/* ========================= */

/* Line từ cấp 1 xuống thanh ngang */
.vertical-main {width:2px;height:50px;background:#e60000;margin:0 auto;position:relative;}
.vertical-main::after{content:"";position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);border-top:10px solid #e60000;}

/* Thanh ngang cấp 2 */
.level-2{margin-top:40px;}
.level-2::before{content:"";position:absolute;top:-40px;left:10%;right:10%;height:2px;background:#e60000;width:80%;}

/* Dọc xuống từng box cấp 2 */
.level-2 .card::before{content:"";position:absolute;top:-40px;left:50%;width:2px;height:40px;background:#e60000;transform:translateX(-50%);}

/* Mũi tên xuống từng box */
.level-2 .card::after {content: "";position: absolute;top: -8px;left: 50%;transform:translateX(-50%);border-left:7px solid transparent;
        border-right: 7px solid transparent;border-top: 10px solid #e60000;}

/* ===== MŨI TÊN 2 CHIỀU ===== */
.two-way{width:2px;height:70px;background:#e60000;margin:8px auto;position:relative;}
    .two-way::before{content:"";position: absolute;top: -10px;left: 50%;transform: translateX(-50%);border-left: 8px solid transparent;
        border-right: 8px solid transparent;border-bottom: 12px solid #e60000;}
    .two-way::after{content:"";position: absolute;bottom: -10px;left: 50%;transform: translateX(-50%);border-left: 8px solid transparent;
        border-right: 8px solid transparent;border-top: 12px solid #e60000;}

/* Thanh ngang cấp 3 */
.level-3::before{content:"";position:absolute;top:-40px;left:16%;right:20%;height:2px;background:#e60000;width:68%;}
.level-3 .card::before {content:"";position:absolute;top:-40px;left:50%;width:2px;height:40px;background:#e60000;transform:translateX(-50%);}

/* ===== RESPONSIVE ===== */
@media(max-width:768px) {
    .level {flex-direction: column;align-items: center;}
    .level::before,
    .card::before,
    .card::after{display:none;}
    .popup{position:static;transform:none;display:block;margin-top:10px;}
}







/* -------------------- css sơ đồ tổ chức phòng ban ---------------------- */
.org-section {text-align:center;padding:60px 20px 40px  20px;position:relative;}
.org-title {font:16px Helvetica-bold;color:red;font-size:28px;font-weight:bold;margin-bottom:40px;}

/* Thanh ngang */
.org-line{position:relative;max-width:1100px;margin:40px auto 40px;}
.line{height:4px;background:#0d4ea6;position:relative;}

/* Mũi tên xuống */
.arrow{position:absolute;width:2px;height:40px;background:#0d4ea6;top:4px;}
.arrow::after{content:"";position:absolute;bottom:-8px;left:-5px;border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid #0d4ea6;}

/* Vị trí từng mũi tên */
.arrow1 { left: 2.5%; }
.arrow2 { left: 33.5%; }
.arrow3 { left: 67.5%; }
.arrow4 { left: 97.5%; }
.arrow5 { left: 19.5%; }
.arrow6 { left: 50.5%; }
.arrow7 { left: 81.5%; }

/* Card layout */
.org-wrapper {display:flex;justify-content:center;gap:20px;flex-wrap:wrap;}
.org-card{background:linear-gradient(#1e64c8, #0d4ea6);color:#fff;width:320px;border-radius:10px;box-shadow:0 4px 10px rgba(0,0,0,0.2);overflow:hidden;transition:0.3s;
        position:relative;padding-bottom:30px;}

.org-card:hover{transform:translateY(-5px);}
.card-header{display:flex;padding:15px;text-align:left;}
.card-header img {width:90px;height:110px;object-fit:cover;border:3px solid #fff;margin-right:10px;}

.dept {font-size:12px;font-weight:bold;}
.info{font:13px Helvetica;margin:5px 0;line-height:16px;}
.info h3{font-size:14px;margin:5px 0;color:yellow;}
.role{font-weight:bold;}

.card-footer{position:absolute;width:94%;background:#083c87;padding:10px;font-weight:bold;cursor:pointer;color:white;bottom:0;left:0;}
.card-footer:hover{background:#062c63;color:red;}

/* Responsive */
@media (max-width: 768px) {
    .org-wrapper{flex-direction:column;align-items:center;}
    .arrow {display:none;}
    .line{display:none;}
}
/* Overlay */
.popup-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);display:none;justify-content:center;align-items:center;z-index:999;}

/* Box */
.popup-box{background:#fff;width:80%;border-radius:10px;padding:25px;position:relative;animation:popupFade 0.3s ease;}
    .popup-box h2{margin-top:0;color:#0d4ea6;}
    .popup-box div{text-align:left;line-height:1.6;height:600px;overflow:auto;padding-right:15px;margin-top:15px;}
.close-btn{position:absolute;right:15px;top:10px;font-size:22px;cursor:pointer;color:red;}

@keyframes popupFade {from {transform:scale(0.8);opacity:0;} to {transform:scale(1);opacity:1;}}


















@media (min-width: 1821px) 
{
    .bgleader{padding-bottom:600px}
    .level{gap:2%;}
    .level-2::before{left:13%;width:74%;}
    .level-3::before{left:22%;width:56%;}

}
@media (min-width: 1440px) and (max-width: 1820px) 
{
}      
@media (min-width: 1024px) and (max-width: 1440px) 
{   
}        
@media (min-width: 768px) and (max-width: 1023px) 
{
}
@media (min-width: 480px) and (max-width: 767px) 
{
}
@media (max-width: 479px) 
{
    .bgleader{height:5800px;}
    .two-way{height:10px;background:none;}
    .two-way::after{content:none;}
    .two-way:before{content:none;}
    .vertical-main{display:none;}
}