:root{
    --bg:#f7f8fb;
    --ink:#2b2f36;
    --muted:#9aa4b2;
    --line:#d9dde6;
    --ring:#eef1f6;
    /* brand accents */
    --teal:#09a6a6;
    --orange:#f59e0b;
    --pink:#ec4899;
    --blue:#2563eb;
    --green:#3f6b2f;
    }
body{font-size: 16px;}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6{font-family: 'Merriweather', 'Times New Roman', Times, serif;}
.rd-navbar-center{
    background: url(/tranphuhp-media/logo/pattern.jpg);
    background-repeat: repeat;
}
.pagination-custom{
    display: flex;
    width: 100%;
    gap: 15px;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

.pagination-custom li{
    display: inline-block;
    margin: 0 5px;
    padding: 5px 10px;
    background-color: #f0f0f0;
}

.pagination-custom li a{
    color: #0d2d61;
    text-decoration: none;
}

.pagination-custom li.active{
    background-color: #0d2d61;
}

.pagination-custom li.active a{
    color: #fff;
}

/* ===== PTT CUSTOM STYLES ===== */

/* Hero Banner Section */
.hero-banner-section {
    background: linear-gradient(135deg, #ffffff 0%, #dfdfdf 100%);
    padding: 80px 0;
    color: #0d2d61;
}

.hero-content .hero-title {
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.hero-content .hero-subtitle {
    font-weight: 400;
    margin-bottom: 1.5rem;
    color: #b80924;
}

.hero-description p {
    line-height: 1.6;
    margin-bottom: 1rem;
}

.hero-gallery {
    position: relative;
}

.main-image {
    margin-bottom: 20px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.gallery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.gallery-item {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    transition: transform 0.3s ease;
}

.gallery-item:hover {
    transform: scale(1.05);
}

/* Historical Periods */
.historical-periods {
    margin-top: 30px;
}

.historical-periods h3 {
    margin-bottom: 20px;
    font-weight: 600;
}

.periods-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    margin-top: 15px;
}

.period-item {
    background: rgba(255, 255, 255, 0.85);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    padding: 15px 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.period-item:hover,
.period-item.active {
    background: rgba(184, 9, 36, 0.8);
    border-color: #b80924;
    transform: translateY(-2px);
}

.period-year {
    display: block;
    font-weight: 700;
    margin-bottom: 5px;
}

.period-desc {
    display: block;
    line-height: 1.2;
}

/* Tran Phu Section */
.tran-phu-section {
    padding: 80px 0;
    background: linear-gradient(135deg, #b80924 0%, #0d2d61 100%);
    color: white;
}

.tran-phu-section .section-title {
    color: white;
}

.tran-phu-photo {
    text-align: center;
}

.tran-phu-photo img {
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.tran-phu-content .message-content p {
    color: rgba(255, 255, 255, 0.95);
}

.hero-gallery img{width: 100%}

/* Principal Message Section */
.principal-message-section {
    padding: 80px 0;
    background-color: white;
}

.principal-info {
    text-align: center;
    margin-top: 20px;
}

.principal-name {
    font-weight: 700;
    color: #0d2d61;
    margin-bottom: 5px;
}

.principal-title {
    color: #b80924;
    font-weight: 600;
    margin-bottom: 0;
}

/* Introduction Section */
.introduction-section {
    padding: 80px 0;
    background-color: #f8f9fa;
}

.history-photo {
    text-align: center;
}

.history-photo img {
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.section-title {
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
}

.principal-photo {
    text-align: center;
}

.principal-photo img {
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.message-content p {
    margin-bottom: 0;
}

/* Exhibitions Section */
.exhibitions-section {
    padding: 80px 0;
    background-color: white;
}

.exhibitions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 40px;
}

.section-header {
    text-align: center;
    margin-bottom: 50px;
}

.section-subtitle {
    color: #666;
    margin-bottom: 0;
}

.exhibition-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    height: 100%;
}

.exhibition-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.card-image {
    position: relative;
    overflow: hidden;
}

.card-image img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.exhibition-card:hover .card-image img {
    transform: scale(1.1);
}

.card-content {
    padding: 25px;
}

.card-title {
    font-weight: 700;
    color: #0d2d61;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.card-description {
    color: #666;
    line-height: 1.6;
    margin-bottom: 0;
}

/* Exhibition Card Colors */
.card-bac-ho {
    border-top: 5px solid #0d2d61;
}

.card-permanent {
    border-top: 5px solid #434345;
}

.card-special {
    border-top: 5px solid #b80924;
}

.exhibition-nav {
    text-align: center;
    margin-top: 40px;
}

.nav-link {
    display: inline-block;
    margin: 0 15px;
    padding: 10px 20px;
    background-color: #f0f0f0;
    color: #0d2d61;
    text-decoration: none;
    border-radius: 25px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.nav-link:hover {
    background-color: #0d2d61;
    color: white;
}

/* Collections Section */
.collections-section {
    padding: 80px 0;
    background-color: #f8f9fa;
}

.collections-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 40px;
}

.collection-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    height: 100%;
}

.collection-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.collection-card .card-image img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

.collection-nav {
    text-align: center;
    margin-top: 40px;
}

/* Tour 360 Section */
.tour-360-section {
    padding: 0;
    background-color: #f8f9fa;
    color: #333;
}

.tour-content .section-title {
    color: #0d2d61;
    margin-bottom: 1rem;
}

.tour-content .section-subtitle {
    margin-bottom: 30px;
    color: #666;
}

.btn-tour-360 {
    background: linear-gradient(45deg, #b80924, #ff6b6b);
    color: white;
    padding: 15px 40px;
    border: none;
    border-radius: 50px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(184, 9, 36, 0.3);
}

.btn-tour-360:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(184, 9, 36, 0.4);
    color: white;
}

.tour-image {
    margin-top: 40px;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}

/* Historical Timeline Section - Custom Style */
.historical-timeline-section{padding: 80px 0;}
.dots{display:flex;gap:10px;justify-content:center;margin:4px 0 24px}
.dot{width:10px;height:10px;border-radius:50%}

/* === Slider wrapper & controls === */
.slider{
position:relative;
display:grid;
grid-template-columns:auto 1fr auto;
align-items:center;
gap:8px;
}
/* viewport card that holds the fixed rail */
.viewport{ position:relative; overflow:hidden; background:#fff; border-radius:16px;}
.viewport::before{
content:""; position:absolute; left:24px; right:24px; top:48%; height:2px; background:var(--line); z-index:1; pointer-events:none;
}
.viewport li, .viewport ol{list-style: none;}
.historical-timeline-section btn{background-color: transparent; box-shadow: none;}

/* === Timeline scroller === */
.timeline{
position:relative; height:360px; /* control item vertical space */
overflow-x:hidden; overflow-y:hidden;
display:flex; gap:48px; padding:32px 24px; scroll-snap-type:x proximity;
background:transparent; border-radius:16px;
z-index:2; /* content above the fixed rail */
}
.timeline::-webkit-scrollbar{height:10px}
.timeline::-webkit-scrollbar-track{background:transparent}
.timeline::-webkit-scrollbar-thumb{background:#cfd6e3;border-radius:999px}


.timeline::before{content:none !important;}




/* === Event item === */
.event{
position:relative; flex:0 0 clamp(220px, 24vw, 300px); scroll-snap-align:center;
}


/* color hook per item - Brand Colors */
.event{ --accent: #fd7e14;} /* Orange */
.event.orange{ --accent: #e83e8c;} /* Pink */
.event.pink{ --accent: #0dcaf0;} /* Cyan */
.event.blue{ --accent: #198754;} /* Green */
.event.green{ --accent: #0d2d61;} /* Dark Blue */
.event.teal{ --accent: #b80924;} /* Red */


/* concentric marker at the baseline */
.marker{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);width:28px;height:28px;border-radius:50%;
box-shadow:0 0 0 4px #fff, 0 0 0 8px var(--ring), 0 4px 10px rgba(0,0,0,.12);
background:#fff;border:4px solid var(--accent);z-index:2}
.marker::after{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--accent)}


/* stems above/below */
.stem{position:absolute;left:50%;transform:translateX(-50%);width:3px;background:var(--accent);z-index:1}
.event:nth-child(odd) .stem{top:calc(53% - 50px);height:50px;}
.event:nth-child(even) .stem{top:43%;height:50px;}
.stem::after{content:"";position:absolute;left:50%;transform:translateX(-50%);width:10px;height:10px;border-radius:50%;background:var(--accent)}
.event:nth-child(odd) .stem::after{top:-6px}
.event:nth-child(even) .stem::after{bottom:-6px}


/* year + bullets blocks */
.card{position:absolute;left:50%;transform:translateX(-50%);width:90%;max-width:260px;text-align:center;color:var(--muted);background:white;}
.event:nth-child(odd) .card{top:16px}
.event:nth-child(even) .card{bottom:16px}


.year{font-size:24px;margin:0 0 10px 0;font-weight:700;color:var(--accent);text-transform:uppercase}
.hr{height:3px;width:60px;margin:8px auto 12px;background:var(--accent);border-radius:2px}
.bullets{font-size:14px;margin:0;color:#666;line-height:1.5}


/* responsive: compact height on small screens */
@media (max-width:700px){
.slider{padding: 60px 0}
.timeline{height:320px; gap:30px}
.event{flex-basis:78vw}
.year{font-size:20px}
.card{max-width:220px;padding:15px 12px}
.bullets{font-size:13px}
}


@media (prefers-reduced-motion: reduce){
.timeline{scroll-behavior:auto}
}

.message-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    height: 100%;
}

.message-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.message-card .card-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

/* Media Section */
.media-section {
    padding: 80px 0;
    background-color: #f8f9fa;
}

.media-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 40px;
}

.media-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    height: 100%;
}

.media-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.media-card .card-image {
    position: relative;
}

.media-card .card-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(184, 9, 36, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.play-button:hover {
    background: #b80924;
    transform: translate(-50%, -50%) scale(1.1);
}

.play-button i {
    color: white;
    margin-left: 3px;
}

.video-duration {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 5px 10px;
    border-radius: 15px;
}

/* Database Section */
.database-section {
    padding: 80px 0;
    background-color: white;
    color: #333;
}

.database-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 40px;
}

.database-section .section-title {
    color: #0d2d61;
}

.database-section .section-subtitle {
    color: #666;
}

.database-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    height: 100%;
    border: 1px solid #e0e0e0;
}

.database-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.database-card .card-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.database-card .card-title {
    color: #0d2d61;
}

.database-card .card-description {
    color: #666;
}

/* Database Card Colors */
.card-history {
    border-top: 5px solid #0d2d61;
}

.card-academic {
    border-top: 5px solid #434345;
}

.card-facilities {
    border-top: 5px solid #b80924;
}

.card-achievements {
    border-top: 5px solid #434345;
}

.card-community {
    border-top: 5px solid #0d2d61;
}

/* Buttons */
.btn-view-all {
    background: linear-gradient(45deg, #0d2d61, #434345);
    color: white;
    padding: 12px 30px;
    border: none;
    border-radius: 25px;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(13, 45, 97, 0.3);
}

.btn-view-all:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(13, 45, 97, 0.4);
    color: white;
}

/* Responsive Design */
@media (max-width: 991.98px) {
    
    .gallery-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .periods-grid {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: 8px;
    }
    
    .period-item {
        padding: 12px 8px;
    }
    
    /* Grid layouts - Tablet: 2 items per row */
    .exhibitions-grid,
    .collections-grid,
    .media-grid,
    .database-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
    
    /* Timeline responsive */
    .timeline-container {
        height: 250px;
    }
    
    .timeline-text-box {
        width: 180px;
        padding: 12px 15px;
    }
    
    .timeline-text-box h4 {
        margin-bottom: 6px;
    }
    
    .timeline-text-box p {
        margin-bottom: 6px;
    }
    
    .timeline-nav {
        gap: 20px;
    }
    
    .nav-btn {
        width: 45px;
        height: 45px;
    }
}

@media (max-width: 767.98px) {
    .hero-banner-section,
    .tran-phu-section,
    .principal-message-section,
    .introduction-section,
    .exhibitions-section,
    .collections-section,
    .tour-360-section,
    .historical-timeline-section,
    .media-section,
    .database-section {
        padding: 60px 0;
    }
    
    .btn-tour-360 {
        padding: 12px 30px;
    }
    
    .nav-link {
        display: block;
        margin: 10px 0;
    }
    
    .exhibition-nav,
    .collection-nav {
        text-align: left;
    }
    
    /* Grid layouts - Mobile: 1 item per row */
    .exhibitions-grid,
    .collections-grid,
    .media-grid,
    .database-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    /* Timeline mobile */
    .timeline-container {
        height: 200px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0 10px;
    }
    
    .timeline-point {
        min-width: 120px;
    }
    
    .timeline-year {
        margin-bottom: 8px;
    }
    
    .marker-dot {
        width: 40px;
        height: 40px;
    }
    
    .marker-rings {
        width: 60px;
        height: 60px;
    }
    
    .ring.outer {
        width: 60px;
        height: 60px;
    }
    
    .ring.inner {
        width: 50px;
        height: 50px;
        top: 5px;
        left: 5px;
    }
    
    .timeline-text-box {
        width: 150px;
        padding: 10px 12px;
    }
    
    .timeline-text-box h4 {
        margin-bottom: 5px;
    }
    
    .timeline-text-box p {
        margin-bottom: 5px;
    }
    
    .timeline-nav {
        gap: 15px;
        margin-top: 20px;
    }
    
    .nav-btn {
        width: 40px;
        height: 40px;
    }
    
    .dot {
        width: 10px;
        height: 10px;
    }
}

@media (max-width: 575.98px) {
    .card-content {
        padding: 20px;
    }
    
    .play-button {
        width: 50px;
        height: 50px;
    }
    
    .periods-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
        margin-bottom: 15px;
    }
    
    .period-item {
        padding: 10px 6px;
    }
    .principal-photo, .tran-phu-photo{margin-bottom: 15px;}
    .tour-360-section{padding: 0;}
    .viewport::before, .event .marker, .event .stem{display: none;}
    .timeline{padding: 0; height: 150px; gap: 0}
    .slider{padding: 0}
    .event{flex-basis: 100%;}
}