/* Thailand Institute of Justice - Corporate Theme */
/* Based on TIJ Corporate Identity Manual and tijthailand.org design */

:root {
    /* TIJ Corporate Colors - PANTONE Color Reference */
    --tij-orange: #ff6b35;        /* Main Orange - matching tijthailand.org */
    --tij-orange-dark: #e55a2b;   /* Darker orange for hover */
    --tij-orange-light: #ff8659;  /* Lighter orange for gradients */
    --tij-grey: #6D6E71;          /* TIJ Grey - PANTONE 424 C */
    --tij-light-grey: #f8f9fa;    /* Light background */
    --tij-dark-blue: #2E3192;     /* TIJ Dark Blue - PANTONE 534 C */
    --tij-text-dark: #212529;     /* Dark text */
    --tij-text-muted: #6c757d;    /* Muted text */
    
    /* Background Colors */
    --tij-bg-light: #f8f9fa;
    --tij-bg-white: #ffffff;
    --tij-bg-section: #f5f5f5;
}

/* Base Typography - TIJ Academy Style (70% of 2x = 1.4x original) */
body {
    font-family: 'Ozone', 'Prompt', 'Sarabun', 'Kanit', sans-serif;
    font-weight: 400;
    color: var(--tij-text-dark);
    line-height: 1.6;
    background-color: var(--tij-bg-white);
    font-size: 22.4px; /* 70% of 32px */
    letter-spacing: 0.2px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Ozone', 'Prompt', 'Sarabun', 'Kanit', sans-serif;
    font-weight: 600;
    color: var(--tij-text-dark);
    margin-bottom: 1.5rem;
    letter-spacing: -0.3px;
    line-height: 1.3;
}

h1 { 
    font-size: 3.5rem; /* 70% of 5rem */
    font-weight: 700; 
    letter-spacing: -0.8px;
}
h2 { 
    font-size: 2.8rem; /* 70% of 4rem */
    font-weight: 700; 
    letter-spacing: -0.6px;
}
h3 { 
    font-size: 2.45rem; /* 70% of 3.5rem */
    font-weight: 600; 
    letter-spacing: -0.4px;
}
h4 { 
    font-size: 2.1rem; /* 70% of 3rem */
    font-weight: 600; 
    letter-spacing: -0.3px;
}
h5 { 
    font-size: 1.75rem; /* 70% of 2.5rem */
    font-weight: 600; 
    letter-spacing: -0.2px;
}
h6 { 
    font-size: 1.54rem; /* 70% of 2.2rem */
    font-weight: 600; 
    letter-spacing: -0.1px;
}

/* Paragraph and body text - TIJ Academy style (70% of 2x) */
p {
    font-size: 1.4rem; /* 70% of 2rem */
    line-height: 1.6;
    margin-bottom: 1.2rem;
    color: var(--tij-text-dark);
}

.lead {
    font-size: 1.68rem; /* 70% of 2.4rem */
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 0.1px;
}

/* Programme titles and descriptions */
.programme-title {
    font-size: 1.96rem; /* 70% of 2.8rem */
    font-weight: 600;
    color: var(--tij-text-dark);
    margin-bottom: 0.8rem;
    letter-spacing: -0.2px;
}

.programme-period {
    font-size: 1.54rem; /* 70% of 2.2rem */
    font-weight: 500;
    color: var(--tij-orange);
    margin-bottom: 1rem;
}

.programme-description {
    font-size: 1.33rem; /* 70% of 1.9rem */
    line-height: 1.6;
    color: var(--tij-text-dark);
    margin-bottom: 1rem;
}

/* Article and content text */
.article-title {
    font-size: 1.82rem; /* 70% of 2.6rem */
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 0.5rem;
}

.article-date {
    font-size: 1.26rem; /* 70% of 1.8rem */
    color: #6c757d;
    font-weight: 500;
}

.article-excerpt {
    font-size: 1.33rem; /* 70% of 1.9rem */
    line-height: 1.6;
    color: var(--tij-text-dark);
}

/* Section Headers - TIJ Academy Style (70% of 2x) */
.section-title {
    font-size: 3.08rem; /* 70% of 4.4rem */
    font-weight: 700;
    color: var(--tij-text-dark);
    margin-bottom: 2rem;
    position: relative;
    padding-left: 1.2rem;
    letter-spacing: -0.6px;
}

.section-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 70%;
    background: linear-gradient(to bottom, var(--tij-orange), var(--tij-orange-light));
    border-radius: 3px;
}

/* TIJ Academy Header Design - Two Level Navigation (2x font sizes) */

/* Top Orange Navigation Bar */
.navbar:first-child {
    background: linear-gradient(135deg, var(--tij-orange) 0%, #ff8a65 100%) !important;
    padding: 0.5rem 0;
    border-bottom: none;
    box-shadow: none;
}

.navbar:first-child .nav-link {
    color: white !important;
    font-size: 1.05rem; /* 70% of 1.5rem */
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    padding: 0.3rem 0.8rem !important;
}

.navbar:first-child .nav-link:hover {
    color: rgba(255, 255, 255, 0.8) !important;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

/* Main White Navigation Bar - Logo and Menu Side by Side */
.navbar.bg-white {
    background: white !important;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    box-shadow: 0 2px 20px rgba(0,0,0,0.1);
}

.navbar.bg-white .navbar-brand {
    font-weight: 700;
    color: var(--tij-text-dark) !important;
    font-size: 1.5rem;
}

.navbar.bg-white .navbar-brand img {
    height: 50px;
    width: auto;
    object-fit: contain;
    filter: none;
    transition: all 0.3s ease;
}

.navbar.bg-white .navbar-brand span {
    color: #6c757d;
    font-weight: 600;
    margin-left: 0.5rem;
    font-size: 2.1rem; /* 70% of 3rem */
}

/* Navigation links next to logo */
.navbar.bg-white .navbar-nav .nav-link {
    font-family: 'Ozone', 'Prompt', 'Sarabun', sans-serif;
    font-weight: 600;
    color: var(--tij-text-dark) !important;
    font-size: 1.4rem; /* 70% of 2rem */
    letter-spacing: 0.5px;
    text-transform: uppercase;
    position: relative;
    transition: all 0.3s ease;
    padding: 0rem 1rem !important; /* Reduced padding for side-by-side layout */
    border-radius: 6px;
    margin: 0 0.2rem;
}

.navbar.bg-white .navbar-nav .nav-link:hover {
    color: var(--tij-orange) !important;
    background-color: transparent;
    transform: translateY(-1px);
}

.navbar.bg-white .navbar-nav .nav-link.active {
    color: var(--tij-orange) !important;
    background-color: transparent;
    font-weight: 700;
}

.navbar.bg-white .navbar-nav .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 3px;
    background: linear-gradient(90deg, var(--tij-orange), var(--tij-orange-light));
    border-radius: 2px;
}

/* Log In Button */
.navbar.bg-white .btn-outline-secondary {
    color: #6c757d;
    border-color: #6c757d;
    background: transparent;
    font-size: 1.26rem; /* 70% of 1.8rem */
    font-weight: 500;
    padding: 0.5rem 1.2rem;
    transition: all 0.3s ease;
}

.navbar.bg-white .btn-outline-secondary:hover {
    background: #6c757d;
    border-color: #6c757d;
    color: white !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(108, 117, 125, 0.3);
}

/* Login/Signup Buttons in Header */
.navbar-nav .btn {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border-width: 2px;
    padding: 0.5rem 1.2rem;
    margin: 0 0.3rem;
}

.navbar-nav .btn-outline-primary {
    color: var(--tij-orange);
    border-color: var(--tij-orange);
    background: transparent;
}

.navbar-nav .btn-outline-primary:hover {
    background: var(--tij-orange);
    border-color: var(--tij-orange);
    color: white !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
}

.navbar-nav .btn-primary {
    background: linear-gradient(135deg, var(--tij-orange), var(--tij-orange-light));
    border-color: var(--tij-orange);
    color: white !important;
}

.navbar-nav .btn-primary:hover {
    background: linear-gradient(135deg, var(--tij-orange-dark), var(--tij-orange));
    border-color: var(--tij-orange-dark);
    color: white !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.4);
}

.navbar-toggler {
    border: none;
    padding: 0.25rem 0.5rem;
}

.navbar-toggler:focus {
    box-shadow: none;
}

/* Responsive Header Adjustments - TIJ Academy Style */
@media (max-width: 768px) {
    /* Top Orange Bar - Hide on mobile */
    .navbar:first-child {
        display: none;
    }
    
    .navbar.bg-white .navbar-brand img {
        height: 40px;
    }
    
    .navbar.bg-white {
        padding: 0.8rem 0;
    }
    
    .navbar.bg-white .navbar-nav .nav-link {
        padding: 0.6rem 1rem !important;
        font-size: 0.9rem;
    }
    
    .navbar.bg-white .btn-outline-secondary {
        font-size: 0.8rem;
        padding: 0.4rem 1rem;
        margin: 0.2rem;
        width: auto;
    }
}

@media (max-width: 576px) {
    .navbar.bg-white .navbar-brand img {
        height: 35px;
    }
    
    .navbar.bg-white {
        padding: 0.6rem 0;
    }
    
    .navbar.bg-white .navbar-nav .nav-link {
        text-align: center;
        padding: 0.5rem !important;
    }
    
    .navbar.bg-white .navbar-brand span {
        font-size: 1.1rem;
    }
}

/* Footer Styles - TIJ Design (White text, reduced margins) */
footer {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%) !important;
    color: white !important;
}

/* Footer text colors - All white */
footer h5,
footer h6,
footer p,
footer li,
footer .text-warning,
footer .text-muted,
footer .small {
    color: white !important;
}

/* Footer margins reduced by half */
footer .py-5 {
    padding-top: 2.5rem !important; /* Half of py-5 (3rem) */
    padding-bottom: 2.5rem !important;
}

footer .mb-4 {
    margin-bottom: 1rem !important; /* Half of mb-4 (1.5rem) */
}

footer .mb-3 {
    margin-bottom: 0.75rem !important; /* Half of mb-3 (1rem) */
}

footer .mb-2 {
    margin-bottom: 0.5rem !important; /* Half of mb-2 (0.5rem) */
}

footer .mb-1 {
    margin-bottom: 0.25rem !important; /* Half of mb-1 (0.25rem) */
}

footer .my-4 {
    margin-top: 1rem !important; /* Half of my-4 (1.5rem) */
    margin-bottom: 1rem !important;
}

.footer-logo {
    max-height: 50px;
    height: auto;
    width: auto;
    max-width: 80px;
    object-fit: contain;
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

.footer-logo:hover {
    opacity: 1;
}

footer a {
    color: #ffffff !important;
    transition: color 0.3s ease;
}

footer a:hover {
    color: var(--tij-orange) !important;
}

footer .fab, footer .fas {
    transition: all 0.3s ease;
    color: white !important;
}

footer .fab:hover, footer .fas:hover {
    transform: translateY(-2px);
    color: var(--tij-orange) !important;
}

/* Warning icons keep orange color */
footer .text-warning i {
    color: var(--tij-orange) !important;
}

/* Links */
a {
    color: var(--tij-orange);
    text-decoration: none;
}

a:hover {
    color: var(--tij-orange-dark);
}

/* Badge Updates */
.badge.bg-primary {
    background-color: var(--tij-orange) !important;
}

.badge.bg-secondary {
    background-color: var(--tij-grey) !important;
}

.badge.bg-info {
    background-color: var(--tij-dark-blue) !important;
}

.badge.bg-success {
    background-color: #28a745 !important;
}

.badge.bg-warning {
    background-color: #ffc107 !important;
    color: #212529 !important;
}

/* Table Updates */
.table {
    color: var(--tij-text-dark);
}

.table th {
    font-family: 'Ozone', 'Prompt', 'Sarabun', sans-serif;
    font-weight: 600;
    color: var(--tij-text-dark);
    background-color: var(--tij-bg-light);
    border-color: var(--tij-light-grey);
}

.table td {
    border-color: var(--tij-light-grey);
    vertical-align: middle;
}

.table-hover tbody tr:hover {
    background-color: rgba(255, 107, 53, 0.05);
}

/* Utility Classes */
.text-warning {
    color: var(--tij-orange) !important;
}

.bg-light {
    background-color: var(--tij-bg-light) !important;
}

/* Banner Carousel Styles - Dynamic Background Images */
.banner-carousel {
    color: white;
    min-height: 600px;
    position: relative;
    overflow: hidden;
}

.carousel-content {
    background: linear-gradient(135deg, var(--tij-orange) 0%, var(--tij-orange-dark) 100%);
    padding: 100px 0;
    min-height: 600px;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

/* Overlay for better text readability when using background images */
.carousel-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1;
}

.carousel-content .container {
    position: relative;
    z-index: 2;
}

.carousel-content-2 {
    background: linear-gradient(135deg, var(--tij-dark-blue) 0%, #3a4299 100%);
}

.carousel-content-3 {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
}

.carousel-title {
    font-size: 3.92rem; /* 70% of 5.6rem */
    font-weight: 700;
    margin-bottom: 1.2rem;
    line-height: 1.2;
    color: white;
    text-shadow: 2px 2px 6px rgba(0,0,0,0.3);
    letter-spacing: -0.6px;
}

.carousel-subtitle {
    font-size: 1.96rem; /* 70% of 2.8rem */
    font-weight: 500;
    margin-bottom: 1.5rem;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: 0.1px;
}

.carousel-description {
    font-size: 1.54rem; /* 70% of 2.2rem */
    line-height: 1.6;
    margin-bottom: 2rem;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0.1px;
}

.carousel-buttons .btn {
    padding: 1rem 2rem;
    font-size: 1.4rem; /* 70% of 2rem */
    font-weight: 600;
    border-radius: 30px;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    letter-spacing: 0.3px;
    text-transform: none;
}

.carousel-buttons .btn-primary {
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid white;
    color: white;
}

.carousel-buttons .btn-primary:hover {
    background: white;
    color: var(--tij-orange);
    transform: translateY(-2px);
}

.carousel-buttons .btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.carousel-image {
    text-align: center;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Fallback styles when no background image is set */
.carousel-image.no-background {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 4rem 2rem;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.carousel-image.no-background i {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 1rem;
}

.carousel-image.no-background h3 {
    color: white;
    font-weight: 600;
    margin: 0;
}

/* Legacy image placeholder - kept for backward compatibility */
.image-placeholder {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 4rem 2rem;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.image-placeholder i {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 1rem;
}

.image-placeholder h3 {
    color: white;
    font-weight: 600;
    margin: 0;
}

/* Carousel Controls */
.carousel-control-prev,
.carousel-control-next {
    width: 60px;
    opacity: 0.8;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    opacity: 1;
}

.carousel-indicators {
    bottom: 30px;
}

.carousel-indicators button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    border: none;
    margin: 0 5px;
}

.carousel-indicators button.active {
    background-color: white;
    transform: scale(1.2);
}

/* Search Section Styles */
.search-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    position: relative;
}

.search-card {
    background: white;
    border-radius: 20px;
    padding: 3rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.search-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--tij-orange) 0%, var(--tij-orange-light) 100%);
}

/* Simple Search Section Design */
.search-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 4rem 0;
    position: relative;
    overflow: hidden;
}

.search-card-simple {
    background: transparent;
    padding: 0;
    border: none;
    box-shadow: none;
}

.search-title-simple {
    font-size: 3.08rem; /* 70% of 4.4rem */
    font-weight: 400;
    color: var(--tij-text-dark);
    margin-bottom: 2rem;
    letter-spacing: -0.3px;
    line-height: 1.2;
}

.search-form-simple {
    max-width: 800px;
    margin: 0 auto;
}

.search-input-simple .form-control {
    border: 2px solid #dee2e6;
    border-radius: 12px;
    padding: 1.2rem 1.8rem;
    font-size: 1.26rem; /* 70% of 1.8rem */
    background-color: white;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.search-input-simple .form-control:focus {
    border-color: var(--tij-orange);
    box-shadow: 0 0 0 0.2rem rgba(255, 107, 53, 0.25);
    background-color: white;
}

.search-input-simple .form-control::placeholder {
    color: #6c757d;
    font-size: 1.12rem; /* 70% of 1.6rem */
    opacity: 0.7;
}

.search-btn-simple {
    background: #28a745 !important;
    border: 2px solid #28a745 !important;
    color: white !important;
    font-size: 1.26rem; /* 70% of 1.8rem */
    font-weight: 600;
    padding: 1.2rem 2.5rem;
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    letter-spacing: 0.3px;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
}

.search-btn-simple:hover {
    background: #218838 !important;
    border-color: #218838 !important;
    color: white !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
}

.search-btn-simple:focus {
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

/* Responsive adjustments for simple search */
@media (max-width: 768px) {
    .search-title-simple {
        font-size: 3rem;
        margin-bottom: 1.5rem;
    }
    
    .search-input-simple .form-control {
        font-size: 1.4rem;
        padding: 1rem 1.5rem;
    }
    
    .search-input-simple .form-control::placeholder {
        font-size: 1.2rem;
    }
    
    .search-btn-simple {
        font-size: 1.4rem;
        padding: 1rem 2rem;
        width: 100%;
        margin-top: 1rem;
    }
}

@media (max-width: 576px) {
    .search-title-simple {
        font-size: 2.2rem;
        line-height: 1.3;
    }
    
    .search-input-simple .form-control {
        font-size: 1.2rem;
    }
    
    .search-btn-simple {
        font-size: 1.2rem;
    }
}

.search-input-group .form-label {
    font-weight: 600;
    color: var(--tij-text-dark);
    margin-bottom: 0.8rem;
    font-size: 1.1rem;
    letter-spacing: 0.2px;
}

.search-input-group .input-group-text {
    background: var(--tij-orange);
    border: 1px solid var(--tij-orange);
    color: white;
    font-weight: 500;
}

.search-input-group .form-control,
.search-input-group .form-select {
    border: 2px solid var(--tij-light-grey);
    border-radius: 0 12px 12px 0;
    padding: 1rem 1.5rem;
    font-size: 1.1rem;
    background-color: #f8f9fa;
    transition: all 0.3s ease;
}

.search-input-group .form-control:focus,
.search-input-group .form-select:focus {
    border-color: var(--tij-orange);
    box-shadow: 0 0 0 0.2rem rgba(255, 107, 53, 0.25);
    background-color: white;
}

.search-btn {
    background: linear-gradient(135deg, var(--tij-orange) 0%, var(--tij-orange-light) 100%);
    border: none;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
    letter-spacing: 0.3px;
}

.search-btn:hover {
    background: linear-gradient(135deg, var(--tij-orange-dark) 0%, var(--tij-orange) 100%);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(255, 107, 53, 0.3);
}

.advanced-search-panel {
    background: var(--tij-bg-light);
    border-radius: 12px;
    border: 1px solid var(--tij-light-grey);
}

.quick-search-title {
    color: var(--tij-text-dark);
    font-weight: 600;
    margin-bottom: 1rem;
}

.quick-search-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.quick-tag {
    background: var(--tij-orange);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.quick-tag:hover {
    background: var(--tij-orange-dark);
    color: white;
    transform: translateY(-1px);
}

/* Modern Statistics Cards - TIJ Academy Size */
.stat-card {
    background: white;
    border-radius: 15px;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border-top: 4px solid var(--tij-orange);
    position: relative;
    overflow: hidden;
}

.stat-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}

.stat-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--tij-orange) 0%, var(--tij-orange-light) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    color: white;
    font-size: 1.8rem;
}

.stat-number {
    font-size: 3.5rem; /* 70% of 5rem */
    font-weight: 700;
    color: var(--tij-orange);
    margin-bottom: 0.8rem;
    letter-spacing: -0.5px;
}

.stat-label {
    color: var(--tij-text-dark);
    font-size: 1.54rem; /* 70% of 2.2rem */
    font-weight: 600;
    margin: 0;
    letter-spacing: 0.1px;
}

/* Modern Responsive Design for Carousel and Search - TIJ Academy Style */
@media (max-width: 768px) {
    body {
        font-size: 15px;
    }
    
    h1 { font-size: 1.4rem; /* 70% of 2rem */ }
    h2 { font-size: 1.19rem; /* 70% of 1.7rem */ }
    h3 { font-size: 1.05rem; /* 70% of 1.5rem */ }
    
    .section-title {
        font-size: 1.26rem; /* 70% of 1.8rem */
    }
    
    .carousel-title {
        font-size: 1.54rem; /* 70% of 2.2rem */
    }
    
    .carousel-subtitle {
        font-size: 0.84rem; /* 70% of 1.2rem */
    }
    
    .carousel-description {
        font-size: 0.7rem; /* 70% of 1rem */
    }
    
    .carousel-content {
        padding: 60px 0;
        min-height: 500px;
    }
    
    .search-title {
        font-size: 1.54rem; /* 70% of 2.2rem */
    }
    
    .search-card {
        padding: 2rem;
        border-radius: 15px;
    }
    
    .search-btn {
        margin-top: 1rem;
        padding: 1rem 2rem;
        font-size: 1rem;
    }
    
    .stat-card {
        margin-bottom: 2rem;
        padding: 1.5rem;
    }
    
    .stat-number {
        font-size: 1.75rem; /* 70% of 2.5rem */
    }
    
    .stat-label {
        font-size: 0.77rem; /* 70% of 1.1rem */
    }
}

@media (max-width: 576px) {
    body {
        font-size: 10.5px; /* 70% of 15px */
    }
    
    h1 { font-size: 1.4rem; /* 70% of 2rem */ }
    h2 { font-size: 1.12rem; /* 70% of 1.6rem */ }
    h3 { font-size: 0.98rem; /* 70% of 1.4rem */ }
    
    .section-title {
        font-size: 1.26rem; /* 70% of 1.8rem */
    }
    
    .carousel-title {
        font-size: 1.4rem; /* 70% of 2rem */
    }
    
    .carousel-subtitle {
        font-size: 0.84rem; /* 70% of 1.2rem */
    }
    
    .carousel-description {
        font-size: 0.7rem; /* 70% of 1rem */
    }
    
    .carousel-buttons .btn {
        padding: 1rem 1.5rem;
        font-size: 1rem;
        margin-bottom: 1rem;
        width: 100%;
    }
    
    .search-title {
        font-size: 1.33rem; /* 70% of 1.9rem */
    }
    
    .search-card {
        padding: 1.5rem;
    }
    
    .quick-search-tags {
        justify-content: center;
    }
}

/* TIJ Card Components - Based on tijthailand.org */
.tij-card {
    background: var(--tij-bg-white);
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    overflow: hidden;
    margin-bottom: 2rem;
}

.tij-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.tij-card-header {
    background: linear-gradient(135deg, var(--tij-orange) 0%, var(--tij-orange-light) 100%);
    color: white;
    padding: 1.5rem;
    border: none;
    font-weight: 600;
}

.tij-card-body {
    padding: 2rem;
}

.tij-card-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--tij-text-dark);
    margin-bottom: 1rem;
}

.tij-card-text {
    color: var(--tij-text-muted);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

/* Icon with Orange Background - TIJ Style */
.tij-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--tij-orange) 0%, var(--tij-orange-light) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

.tij-icon-sm {
    width: 32px;
    height: 32px;
    font-size: 1rem;
}

.tij-icon-lg {
    width: 64px;
    height: 64px;
    font-size: 1.5rem;
}

/* Buttons - TIJ Style */
.btn-tij-primary {
    background: linear-gradient(135deg, var(--tij-orange) 0%, var(--tij-orange-light) 100%);
    border: none;
    color: white;
    font-family: 'Ozone', 'Prompt', 'Sarabun', sans-serif;
    font-weight: 500;
    padding: 0.75rem 2rem;
    border-radius: 8px;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.btn-tij-primary:hover {
    background: linear-gradient(135deg, var(--tij-orange-dark) 0%, var(--tij-orange) 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
    color: white;
}

.btn-tij-outline {
    background: transparent;
    border: 2px solid var(--tij-orange);
    color: var(--tij-orange);
    font-family: 'Ozone', 'Prompt', 'Sarabun', sans-serif;
    font-weight: 500;
    padding: 0.75rem 2rem;
    border-radius: 8px;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.btn-tij-outline:hover {
    background: var(--tij-orange);
    color: white;
    transform: translateY(-2px);
}

/* Section Dividers */
.tij-section {
    padding: 4rem 0;
}

.tij-section-light {
    background-color: var(--tij-bg-light);
}

.tij-section-white {
    background-color: var(--tij-bg-white);
}

/* Primary Components */
.bg-primary-tij {
    background: linear-gradient(135deg, var(--tij-orange) 0%, var(--tij-light-orange) 100%) !important;
}

.bg-secondary-tij {
    background-color: var(--tij-grey) !important;
}

.bg-light-tij {
    background-color: var(--tij-light-grey) !important;
}

.bg-dark-tij {
    background-color: var(--tij-dark-blue) !important;
}

.text-primary-tij {
    color: var(--tij-orange) !important;
}

.text-secondary-tij {
    color: var(--tij-grey) !important;
}

.text-dark-tij {
    color: var(--tij-dark-blue) !important;
}

/* Buttons */
.btn-primary-tij {
    background: linear-gradient(135deg, var(--tij-orange) 0%, var(--tij-light-orange) 100%);
    border-color: var(--tij-orange);
    color: white;
    font-weight: 500;
}

.btn-primary-tij:hover {
    background: linear-gradient(135deg, var(--tij-orange-hover) 0%, var(--tij-orange) 100%);
    border-color: var(--tij-orange-hover);
    color: white;
}

.btn-outline-tij {
    border-color: var(--tij-orange);
    color: var(--tij-orange);
}

.btn-outline-tij:hover {
    background-color: var(--tij-orange);
    border-color: var(--tij-orange);
    color: white;
}

/* Cards */
.card-tij {
    border-color: var(--tij-light-grey);
    box-shadow: 0 4px 6px rgba(109, 110, 113, 0.1);
}

.card-header-tij {
    background: linear-gradient(135deg, var(--tij-dark-blue) 0%, #3a4299 100%);
    color: white;
    border-bottom-color: var(--tij-grey);
}

.card-header-orange {
    background: linear-gradient(135deg, var(--tij-orange) 0%, var(--tij-light-orange) 100%);
    color: white;
    border-bottom-color: var(--tij-orange-hover);
}

/* Forms */
.form-control:focus {
    border-color: var(--tij-orange);
    box-shadow: 0 0 0 0.2rem rgba(210, 105, 30, 0.25);
}

.form-select:focus {
    border-color: var(--tij-orange);
    box-shadow: 0 0 0 0.2rem rgba(210, 105, 30, 0.25);
}

/* Tables */
.table-tij {
    color: var(--tij-grey);
}

.table-tij th {
    color: var(--tij-dark-blue);
    background-color: var(--tij-grey-light);
    font-weight: 500;
}

.table-tij thead th {
    background-color: var(--tij-dark-blue);
    color: white;
}

.table-striped-tij > tbody > tr:nth-of-type(odd) > td {
    background-color: rgba(188, 190, 192, 0.05);
}

/* Badges */
.badge-tij {
    background-color: var(--tij-orange);
    color: white;
}

.badge-tij-grey {
    background-color: var(--tij-grey);
    color: white;
}

.badge-tij-blue {
    background-color: var(--tij-dark-blue);
    color: white;
}

/* Alerts */
.alert-tij {
    background-color: var(--tij-orange-light);
    border-color: var(--tij-orange);
    color: var(--tij-orange-hover);
}

.alert-tij-info {
    background-color: var(--tij-grey-light);
    border-color: var(--tij-light-grey);
    color: var(--tij-grey);
}

/* Navigation */
.navbar-tij {
    background: linear-gradient(135deg, var(--tij-orange) 0%, var(--tij-light-orange) 100%);
}

.navbar-tij .nav-link {
    color: white !important;
    font-weight: 500;
    transition: all 0.3s ease;
}

.navbar-tij .nav-link:hover {
    color: var(--tij-light-grey) !important;
    transform: translateY(-1px);
}

.navbar-tij .nav-link.active {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
}

/* Accordion */
.accordion-button-tij {
    color: var(--tij-dark-blue);
    background-color: var(--tij-grey-light);
}

.accordion-button-tij:not(.collapsed) {
    background-color: var(--tij-orange);
    color: white;
}

.accordion-button-tij:focus {
    box-shadow: 0 0 0 0.25rem rgba(210, 105, 30, 0.25);
}

/* Progress Bars */
.progress-bar-tij {
    background: linear-gradient(90deg, var(--tij-orange) 0%, var(--tij-light-orange) 100%);
}

/* List Groups */
.list-group-item-tij {
    border-left: 4px solid var(--tij-orange);
}

.list-group-item-tij.active {
    background-color: var(--tij-orange-light);
    border-color: var(--tij-orange);
    color: var(--tij-orange-hover);
}

/* Utilities */
.border-tij {
    border-color: var(--tij-light-grey) !important;
}

.border-tij-orange {
    border-color: var(--tij-orange) !important;
}

.shadow-tij {
    box-shadow: 0 0.5rem 1rem rgba(109, 110, 113, 0.15) !important;
}

.shadow-tij-lg {
    box-shadow: 0 1rem 3rem rgba(109, 110, 113, 0.175) !important;
}

/* Gradients */
.gradient-tij-orange {
    background: linear-gradient(135deg, var(--tij-orange) 0%, var(--tij-light-orange) 100%);
}

.gradient-tij-blue {
    background: linear-gradient(135deg, var(--tij-dark-blue) 0%, #3a4299 100%);
}

.gradient-tij-grey {
    background: linear-gradient(135deg, var(--tij-grey) 0%, var(--tij-light-grey) 100%);
}

/* Hover Effects */
.hover-tij:hover {
    background-color: var(--tij-orange-light);
    border-color: var(--tij-orange);
    transition: all 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(109, 110, 113, 0.15);
    transition: all 0.3s ease;
}

/* Custom Components */
.hero-tij {
    background: linear-gradient(135deg, var(--tij-dark-blue) 0%, var(--tij-orange) 100%);
    color: white;
}

.stats-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px rgba(109, 110, 113, 0.1);
    border-left: 4px solid var(--tij-orange);
}

.feature-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--tij-orange) 0%, var(--tij-light-orange) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
}

/* Search Results Classification Styles */
.search-results {
    background-color: #f8f9fa;
}

.classification-item {
    border-left: 4px solid transparent;
    padding-left: 1rem;
    transition: all 0.3s ease;
}

.classification-item:hover {
    border-left-color: var(--tij-orange);
}

.classification-level .badge {
    font-size: 0.9rem;
    padding: 0.5rem 0.8rem;
    font-weight: 600;
}

.classification-entry {
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
}

.classification-entry:hover {
    border-color: var(--tij-orange);
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.1);
}

.classification-code {
    font-family: 'Ozone', 'Prompt', monospace;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--tij-dark-blue) !important;
}

.classification-description {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--tij-text-dark);
}

.classification-toggle .btn {
    border: none;
    background: none;
    font-size: 1.2rem;
    padding: 0.5rem;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    text-decoration: none !important;
}

.classification-toggle .btn:focus,
.classification-toggle .btn:active {
    text-decoration: none !important;
    outline: none;
    box-shadow: none;
}

.classification-toggle .btn:hover {
    background-color: var(--tij-orange);
    color: white !important;
}

.classification-toggle .btn:hover i {
    color: white !important;
}

.classification-toggle .fa-plus:before {
    content: "\f067";
}

.classification-toggle .fa-minus:before {
    content: "\f068";
}

.classification-content {
    transition: all 0.3s ease;
}

.classification-item {
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 1rem;
    transition: all 0.3s ease;
}

.classification-item:hover {
    border-color: var(--tij-orange);
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.1);
    background-color: rgba(255, 107, 53, 0.02);
}

.classification-level {
    cursor: default;
}

.text-orange {
    color: var(--tij-orange) !important;
}

/* Collapse animation improvements */
.collapsing {
    transition: height 0.35s ease;
}

.collapse {
    display: none;
}

.collapse.show {
    display: block;
}

/* Ensure smooth transitions for collapse elements */
.classification-toggle .collapse {
    overflow: hidden;
}

.search-statistics {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
    padding: 2rem;
}

.search-statistics .stat-item {
    padding: 1rem;
}

.search-statistics .stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.search-statistics .stat-label {
    font-size: 1rem;
    color: var(--tij-text-dark);
    font-weight: 500;
}

/* Responsive adjustments for classification */
@media (max-width: 768px) {
    .classification-entry {
        padding: 1.5rem !important;
    }
    
    .classification-code {
        font-size: 1.2rem;
    }
    
    .classification-description {
        font-size: 1rem;
    }
    
    .search-statistics .stat-number {
        font-size: 2rem;
    }
    
    .classification-toggle {
        margin-left: 1rem;
    }
    
    .classification-level .badge {
        font-size: 0.8rem;
    }
    
    .classification-toggle .btn {
        width: 35px;
        height: 35px;
        font-size: 1rem;
    }
}

.container-fluid {
	padding-left: 0px !important;
	padding-right: 0px !important;
	margin-left: 0px !important;
	margin-right: 0px !important;
}