:root {
    --navy: #00008A;
    --orange: #ee5421;
    --light: #f8f9fa;
    --text-dark: #111;
    --transition-smooth: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    --radius-sm: 8px;
    --radius-md: 15px;
    --radius-lg: 25px;
    --radius-xl: 35px;
}

.tis-story-v3 { 
    font-family: 'Montserrat', sans-serif; 
    color: var(--text-dark); 
    background: #fff; 
    overflow-x: hidden; 
}

.container { max-width: 1200px; margin: auto; padding: 0 25px; }
.sec-p { padding: 100px 0; }


.welcome-box { display: flex; gap: 80px; align-items: center; }
.welcome-img { flex: 0.9; position: relative; }
.welcome-img img { 
    width: 100%; 
    border-radius: var(--radius-lg); 
    box-shadow: 20px 20px 60px rgba(0,0,0,0.1); 
}

.welcome-text { flex: 1.1; }
.welcome-text h1 { 
    font-size: 42px; 
    font-weight: 900; 
    color: var(--navy); 
    margin-bottom: 25px; 
    line-height: 1.2; 
}
.welcome-text p { font-size: 16px; margin-bottom: 20px; text-align: justify; }

.founder-sign { margin-top: 30px; padding-top: 25px; border-top: 1px solid #eee; }
.founder-sign h4 { font-size: 20px; font-weight: 800; color: var(--navy); margin: 0; }
.founder-sign span { color: var(--orange); font-weight: 600; font-size: 14px; }

.vis-mis-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 60px; }
.vm-card { 
    padding: 60px; 
    color: #fff; 
    min-height: 400px;
    display: flex; 
    flex-direction: column; 
    justify-content: flex-end; 
    position: relative; 
    overflow: hidden;
    border-radius: var(--radius-lg);
}
.vm-card.vision { 
    background: linear-gradient(rgba(0,0,138,0.7), rgba(0,0,138,0.7)), 
    url('../images/tamnhin.jpg') center/cover; 
}

.vm-card.mission { 
    background: linear-gradient(rgba(238,84,33,0.8), rgba(238,84,33,0.8)), 
    url('../images/sumenh.jpg') center/cover; 
}
.vm-card h2 { font-size: 32px; font-weight: 900; color: #fff; margin-bottom: 15px; text-transform: uppercase; }

.core-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 50px; }
.core-card { 
    height: 400px; 
    position: relative; 
    overflow: hidden; 
    box-shadow: 0 20px 40px rgba(0,0,0,0.1); 
    border-radius: var(--radius-md); 
}
.core-card img { width: 100%; height: 100%; object-fit: cover; transition: 0.6s; }
.core-overlay { 
    position: absolute; inset: 0; padding: 40px;
    background: linear-gradient(to top, rgba(0,0,138,0.95), transparent);
    display: flex; flex-direction: column; justify-content: flex-end; color: #fff;
}
.core-overlay h3 { font-size: 24px; font-weight: 800; margin-bottom: 10px; }
.core-overlay p { font-size: 14px; margin: 0; opacity: 0; transform: translateY(20px); transition: 0.4s; }

.core-card:hover img { transform: scale(1.1); }
.core-card:hover .core-overlay p { opacity: 1; transform: translateY(0); }

.portrait-sec h2 { 
    font-size: 36px; font-weight: 900; color: var(--navy); 
    text-align: center; margin-bottom: 50px !important; text-transform: uppercase; 
}
.portrait-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 30px; }
.portrait-item { 
    position: relative; padding: 50px 30px; background: #fff; 
    border-radius: var(--radius-xl); 
    transition: var(--transition-smooth); border: 1px solid #edf2f7; 
}
.portrait-item::after { 
    content: attr(data-count); position: absolute; top: -10px; right: 10px; 
    font-size: 100px; font-weight: 900; color: rgba(0, 0, 138, 0.05); z-index: 1; 
}
.portrait-item::before { 
    content: ""; position: absolute; top: 30px; left: 30px; width: 12px; height: 12px; 
    background: var(--orange); border-radius: 50%; 
}
.portrait-item:hover { 
    transform: translateY(-15px); 
    box-shadow: 0 25px 50px rgba(0, 0, 138, 0.1); 
    border-color: var(--navy); 
}
.portrait-item p { 
    position: relative; z-index: 2; font-size: 18px; font-weight: 800; 
    color: var(--navy); line-height: 1.5; margin-top: 10px; 
}
.portrait-item:hover p { color: var(--orange); }


.timeline-v2 { position: relative; max-width: 1100px; margin: 60px auto; }
.timeline-v2::after { 
    content: ''; position: absolute; width: 2px; background: #eee; 
    top: 0; bottom: 0; left: 50%; margin-left: -1px; 
}
.tl-item { padding: 20px 50px; position: relative; width: 50%; box-sizing: border-box; opacity: 0; transform: translateY(30px); transition: 0.6s ease-out; }
.tl-item.visible { opacity: 1; transform: translateY(0); }
.tl-item::after { 
    content: ''; position: absolute; width: 20px; height: 20px; right: -10px; 
    background: #fff; border: 4px solid var(--orange); top: 25px; border-radius: 50%; z-index: 1; 
}
.tl-item.right-side::after { left: -10px; }
.tl-item.left-side { left: 0; text-align: right; }
.tl-item.right-side { left: 50%; text-align: left; }

.tl-box { 
    padding: 25px 30px; background: var(--light); 
    border-radius: var(--radius-lg); 
    transition: 0.4s; border: 1px solid transparent; 
}
.tl-box:hover { background: #fff; box-shadow: 0 15px 40px rgba(0,0,8A,0.1); border-color: var(--navy); }
.tl-box h3 { font-size: 28px; font-weight: 900; color: var(--orange); margin: 0 0 10px 0; }
.tl-box p { font-size: 15px; font-weight: 600; color: var(--navy); line-height: 1.5; }


.partner-title { text-align: center; font-weight: 900; color: var(--navy); font-size: 28px; margin-bottom: 40px; }
.partner-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; }
.partner-item { 
    background: #fff; 
    width: calc(25% - 15px); 
    height: 100px; 
    display: flex; align-items: center; justify-content: center; 
    padding: 15px; 
    border-radius: var(--radius-sm); 
    border: 1px solid #f0f0f0; 
    transition: var(--transition-smooth);
}
.partner-item img { 
    max-width: 100%; max-height: 50px; object-fit: contain; 
    filter: grayscale(100%); opacity: 0.7; transition: 0.4s;
}
.partner-item:hover { border-color: var(--navy); border-radius: var(--radius-md); 
.partner-item:hover img { filter: grayscale(0); opacity: 1; }


@media (max-width: 991px) {
    .welcome-box { flex-direction: column; gap: 40px; }
    .vis-mis-grid, .core-grid { grid-template-columns: 1fr; }
    
    .timeline-v2::after { left: 31px; }
    .tl-item { width: 100%; padding-left: 70px; padding-right: 20px; text-align: left !important; }
    .tl-item::after { left: 21px !important; }
    .tl-item.right-side { left: 0; }
}

@media (max-width: 768px) {
    .partner-title { font-size: 22px; }
    .partner-item { width: calc(50% - 10px); height: 80px; }
    .welcome-text h1 { font-size: 32px; }
    .sec-p { padding: 60px 0; }
}

/* MẪU HEADER - TAGSUB - SECDESC */
.bento-header h2.text-navy {
    color: var(--navy);
    font-weight: 800;
    font-size: 32px;
    text-transform: uppercase;
    position: relative;
    padding-bottom: 25px;
    margin-bottom: 40px;
}
.bento-header h2.text-navy::after {
    content: '';
    display: block;
    width: 70px;
    height: 4px;
    background: var(--orange);
    margin: 20px auto 0;
    border-radius: 2px;
}
.bento-header h2.text-navy {
        font-size: 24px;
    }
}
.tag-sub { color:#ee5421; font-weight:700; text-transform: uppercase; letter-spacing: 1px; display: block; margin-bottom: 10px; }
.text-navy { font-weight:900; font-size: 36px; color: #00008A; }
.header-line { width: 60px; height: 3px; background: #ee5421; margin: 20px auto; }
@media (max-width: 768px) {
    .slide-card-inner { height: 300px; }
    .text-navy { font-size: 28px; }
}
.sec-desc { max-width: 850px; margin: 20px auto 0; font-size: 17px; color: #4a5568; line-height: 1.6; }