* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', 'Source Sans Pro', Arial, sans-serif;
    background: #f8f9fa;
    color: #000;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.landing-bg {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    background-image: url('/img/1.png');
    background-repeat: no-repeat;
    background-position: center center; 
    background-attachment: fixed;      
    background-size: cover;             
    
    z-index: 0; 
    opacity: 0.2;
}
.main-container {
    width: 100%;
    margin: 0 auto;
    padding: 0 0 20px 0;
    position: relative;
    z-index: 2;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hidden {
    display: none !important;
}

.search-section {
    text-align: center;
    padding: 20px 40px 40px;
    background: transparent;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    transform: translateY(-50px);
}

.logo-image {
    width: 250px;
    height: auto;
    margin-bottom: 10px;
}

.logo-title {
    font-size: 3em;
    color: #000;
    margin-bottom: 10px;
    font-weight: 700;
}

.highlight {
    color: #FFA500;
}

.search-section h2 {
    color: #546e7a;
    font-size: 1.3em;
    margin-bottom: 35px;
    font-weight: 400;
}

#form-on-tracking {
    display: flex;
    max-width: 600px;
    margin: 0 auto;
}

#form-on-tracking input {
    flex-grow: 1;
    border-radius: 25px 0 0 25px;
    border: 1px solid #ccc;
    padding: 12px 20px;
    font-size: 1.1em;
}

#form-on-tracking button {
    border-radius: 0 25px 25px 0;
    background: #FFA500;
    color: #000;
    font-weight: bold;
    border: none;
    padding: 0 25px;
    cursor: pointer;
    transition: all 0.3s ease;
}

#form-on-tracking button:hover {
    background: #FF8F00;
}

.error-text {
    color: #e74c3c;
    margin-top: 20px;
    font-size: 0.95em;
    padding: 12px;
    background: rgba(231, 76, 60, 0.1);
    border-radius: 8px;
    border-left: 4px solid #e74c3c;
}

.page-header {
    background-color: #f6c777;
    padding: 20px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    margin: 0;
}

.header-container {
    max-width: 1200px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    align-items: center;
}

#form-in-header {
    display: flex;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
}

#form-in-header input {
    border: none;
    padding: 15px 20px;
    width: 400px;
    font-size: 1.1em;
    outline: none;
}

#form-in-header button {
    background: #e0a035; 
    border: none;
    color: #fff; /* Chữ trắng đẹp hơn chữ đen trên nền này */
    padding: 0 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1.3em;
}

#form-in-header button:hover {
    background: #e0a035; /* Màu hover đậm hơn chút */
}

.skeleton-layout {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
    padding: 30px 0;
}

.skeleton-side img {
    width: 120px;
    opacity: 0.9;
}

.wrapper {
    max-width: 700px;
    width: 100%;
}

.wrapper-cell {
    display: none;
}

#skeletonLoader .wrapper-cell {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}

.wrapper-cell .image {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    margin-right: 20px;
}

.wrapper-cell .text {
    flex-grow: 1;
}

.text-line {
    height: 12px;
    margin-bottom: 10px;
    border-radius: 6px;
}

.text-line:last-child {
    width: 70%;
}

.animated-background {
    animation: placeHolderShimmer 1.25s linear infinite;
    background: linear-gradient(to right, #d4d4d4 8%, #F0F0F0 18%, #F6F6F6 33%);
    background-size: 800px 104px;
}

@keyframes placeHolderShimmer {
    0% {
        background-position: -468px 0
    }
    100% {
        background-position: 468px 0
    }
}

#resultContainer {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 20px;
    padding: 20px 40px;
    max-width: 100%;
    width: 100%;
    margin: 0;
}

.card {
    background: #fff;
    border-radius: 8px;
    padding: 25px;
    box-shadow: 0 0.46875rem 2.1875rem rgba(4, 9, 20, 0.03), 0 0.9375rem 1.40625rem rgba(4, 9, 20, 0.03), 0 0.25rem 0.53125rem rgba(4, 9, 20, 0.05), 0 0.125rem 0.1875rem rgba(4, 9, 20, 0.03);
    border-width: 0;
    transition: all 0.2s;
}

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

.card h2,
.card h3 {
    color: #102e46;
    margin-bottom: 20px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1.2rem;
}

.card-group {
    /* Áp dụng style card chung cho container nhóm */
    background: none; 
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    border-width: 0;
    transition: none;
    /* Thiết lập bố cục nội dung là flex để xếp các card con theo chiều dọc */
    display: flex;
    flex-direction: column;
    gap: 20px; /* Khoảng cách giữa Info và History, hoặc Service và Details */
}

.fit-content-card {
    height: fit-content;
}

/* --- Yêu cầu: Card group chứa Info/History (scroll không thấy scrollbar) --- */
.scrollable-card {
    max-height: 500px; /* Đặt chiều cao tối đa cố định (có thể điều chỉnh) */
    overflow-y: scroll; /* Kích hoạt thanh cuộn */
}

/* Ẩn scrollbar trên Chrome, Safari và Opera */
.scrollable-card::-webkit-scrollbar {
    display: none;
    width: 0px; /* Tùy chọn: Đảm bảo độ rộng là 0 */
}

/* Ẩn scrollbar trên IE và Edge */
.scrollable-card {
    -ms-overflow-style: none;
}

/* Ẩn scrollbar trên Firefox */
.scrollable-card {
    scrollbar-width: none;
}

/* --- Cập nhật Media Query để đảm bảo bố cục 1 cột trên Mobile --- */
@media (max-width: 900px) {
    /* Giữ nguyên grid-template-columns: 1fr; */
    #resultContainer {
        grid-template-columns: 1fr;
    }
    
    #main-status,
    #main-code,
    #infoHistoryContainer, /* THÊM */
    #serviceDetailsContainer {
        grid-column: 1 / -1 !important;
        grid-row: auto !important
    }
    
    /* Đảm bảo scrollbar hoạt động tốt trên mobile */
    .scrollable-card {
        max-height: none; /* Giảm chiều cao trên mobile để dễ cuộn */
    }
}

#main-status {
    grid-column: 1 / 2;
    grid-row: 1;
    background: #fff;
    color: #102e46;
}

.status-header {
    display: flex;       /* Dùng flex để xếp ngang */
    align-items: center; /* Căn giữa theo chiều dọc */
    flex-wrap: wrap;     /* Tự động xuống dòng nếu màn hình quá nhỏ */
    gap: 15px;           /* Khoảng cách giữa các phần tử */
}

/* Chỉnh lại tiêu đề H2 */
.status-header h2 {
    color: #102e46;     
    font-size: 1.2em;
    margin: 0;           
    white-space: nowrap;
}

.status-tag {
    display: inline-block;
    padding: 6px 15px;
    background: #3bd65a; /* MÀU MỚI: Nền vàng cam */
    border-radius: 50px;
    font-weight: 600;
    font-size: 1em;
    margin: 0;
    color: #fff; /* Chữ trắng cho nổi */
    box-shadow: 0 2px 5px rgba(248, 185, 77, 0.4); /* Bóng nhẹ màu cam */
}

.status-date {
    display: inline-block;
    font-size: 0.95em;
    margin: 0;           /* Bỏ margin cũ */
    color: #555;         /* Màu chữ xám đậm */
    font-weight: 500;
}

#main-code {
    grid-column: 2 / 3;
    grid-row: 1;
    background: #fff;
    color: #102e46;
    display: flex;       /* Căn giữa nội dung theo chiều dọc của Card */
    align-items: center;
}

#main-code h2 {
    color: #102e46;
    font-size: 1.2em;
    margin: 0;           /* Bỏ margin dưới để không bị đẩy lệch */
    display: flex;       /* Xếp chữ "MÃ THEO DÕI" và mã code nằm ngang */
    align-items: center; 
    gap: 15px;           /* Tạo khoảng cách giữa tiêu đề và mã */
    flex-wrap: wrap;
}

#main-tracking-code {
    display: inline-block; /* Quan trọng: Đổi từ block sang inline để nằm ngang */
    font-weight: 800;
    letter-spacing: 2px;
    font-size: 1.4em;    /* Tăng kích thước font lên chút cho rõ */
    color: #f8b94d;
}

#info {
    grid-column: 1 / 2;
    grid-row: 2;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.info-item {
    padding: 12px;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #007D88;
}

.info-item.full-width {
    grid-column: 1 / -1;
}

.info-label {
    display: block; 
    color: #7f8c8d;
    font-size: 0.9em;
    margin-bottom: 8px;
    font-weight: 500;
}

.info-item strong {
    color: #000;
    font-size: 1em;
}

#service {
    grid-column: 2 / 3;
    grid-row: 2;
}

#service p {
    padding: 12px 0;
    border-bottom: 1px solid #ecf0f1;
    display: flex;
    justify-content: space-between;
}

#service p:last-child {
    border-bottom: none;
}

#service p strong {
    color: #7f8c8d;
}

#service p span {
    color: #000;
    font-weight: 600;
}

#infoHistoryContainer {
    grid-column: 1 / 2;
    grid-row: 2; /* Chiếm vị trí cột 1, hàng 2 */
}

#serviceDetailsContainer {
    grid-column: 2 / 3;
    grid-row: 2; /* Chiếm vị trí cột 2, hàng 2 */
}

#history {
    grid-column: 1 / 2;
    grid-row: 3 / 5;
}

#history-list {
    list-style: none;
    padding: 10px 0 0 0;
    position: relative;
}

#history-list::before {
    content: '';
    position: absolute;
    top: 15px;
    bottom: 0;
    left: 100px; /* Vị trí đường kẻ */
    width: 2px;
    background: #e0e0e0;
    z-index: 1;
}

#history-list li {
    position: relative;
    margin-bottom: 25px;
    display: flex;
    align-items: flex-start;
    z-index: 2;
}

#history-list .time-col {
    width: 85px; /* Cố định chiều rộng */
    text-align: right;
    padding-right: 25px; /* Khoảng cách đến chấm tròn */
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.time-col .date-part {
    font-size: 0.85em;
    color: #888;
    font-weight: 500;
}

.time-col .time-part {
    font-size: 1.1em;
    color: #102e46;
    font-weight: 700;
}

#history-list .dot {
    position: absolute;
    left: 100px; /* Trùng với đường kẻ */
    transform: translateX(-50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #ccc; /* Mặc định xám */
    margin-top: 5px; /* Căn chỉnh với dòng đầu của text */
    z-index: 3;
    transition: all 0.3s ease;
}

#history-list .content-col {
    padding-left: 25px;
    flex-grow: 1;
}

.content-col .status {
    display: block;
    color: #333;
    font-weight: 700;
    font-size: 1em;
    text-transform: uppercase;
    margin-bottom: 4px;
    line-height: 1.4;
}

.content-col .location {
    display: block;
    color: #7f8c8d;
    font-size: 0.9em;
    font-style: normal;
}

#history-list li:first-child .dot {
    border-color: #f8b94d; /* Màu cam */
    background: #f8b94d;
    box-shadow: 0 0 0 4px rgba(248, 185, 77, 0.2); /* Hiệu ứng tỏa sáng */
    width: 18px;
    height: 18px;
}

#history-list li:first-child .time-part {
    color: #f8b94d; /* Giờ cũng màu cam */
}

#history-list li:first-child .status {
    color: #102e46; /* Status đậm hơn */
    font-size: 1.1em;
}

@media (max-width: 480px) {
    #history-list::before {
        left: 15px; /* Dời đường kẻ về sát trái */
    }

    #history-list li {
        flex-direction: column; /* Xếp chồng lên nhau */
        padding-left: 40px; /* Chừa chỗ cho đường kẻ */
    }

    #history-list .time-col {
        width: 100%;
        text-align: left;
        padding-right: 0;
        margin-bottom: 4px;
        flex-direction: row; /* Ngày và giờ nằm ngang trên mobile */
        gap: 10px;
        align-items: center;
    }
    
    .time-col .time-part {
        font-size: 0.95em;
    }
    
    #history-list .dot {
        left: 15px;
        margin-top: 2px;
    }

    #history-list .content-col {
        padding-left: 0;
    }
}

#details {
    grid-column: 2 / 3;
    grid-row: 3;
}

#details p {
    padding: 12px 0;
    border-bottom: 1px solid #ecf0f1;
    display: flex;
    justify-content: space-between;
}

#details p:last-child {
    border-bottom: none;
}

#details p span {
    color: #7f8c8d;
}

#details p strong {
    color: #000;
    font-weight: 600;
}

.error-container {
    text-align: center;
    padding: 60px 40px;
    max-width: 600px;
    margin: auto;
}

#error-message-results {
    color: #e74c3c;
    font-size: 1.2em;
    padding: 30px;
    background: rgba(231, 76, 60, 0.1);
    border-radius: 16px;
    border: 2px solid rgba(231, 76, 60, 0.2);
}

.partners {
    background: #fff;
    padding: 10px 0;
    width: 100%;
    overflow: hidden; /* Ẩn phần logo trôi ra ngoài */
}

.container-footer {
    text-align: center;
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.footer-title {
    color: #102e46;
    font-weight: 700;
    font-size: 0.9rem; /* Giảm cỡ chữ tiêu đề nhỏ lại */
    letter-spacing: 2px;
    margin-bottom: 10px; /* Kéo carousel lên sát tiêu đề hơn */
    margin-top: 5px;
    position: relative;
    display: inline-block;
}

.footer-title::after {
    content: '';
    display: block;
    width: 30px;
    height: 2px;
    background: #f8b94d;
    margin: 4px auto 0;
}

.carousel-wrapper {
    position: relative;
    height: 50px; /* Chiều cao vùng hiển thị logo */
    width: 100%;
    display: flex;
    justify-content: center;
}

.carousel-inner {
    position: relative;
    width: 100%;
    height: 100%;
}

.carousel-item {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
    width: 100px; /* Giảm chiều rộng khung item */
    display: flex;
    justify-content: center;
    align-items: center;
}

.carousel-item img {
    max-width: 100%;
    max-height: 30px; /* Giảm từ 50px xuống 30px */
    object-fit: contain;
    filter: grayscale(100%);
    transition: filter 0.3s;
}

.carousel-item.active {
    left: 50%;
    transform: translate(-50%, -50%) scale(1.2); /* Scale nhỏ hơn chút (1.2) */
    opacity: 1;
    z-index: 10;
}
.carousel-item.active img {
    filter: grayscale(0%); /* Có màu */
}

/* 2. Vị trí BÊN TRÁI (Nhỏ hơn, mờ hơn) */
.carousel-item.prev {
    left: 25%; /* Kéo sát vào trung tâm hơn */
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0.3; /* Mờ hơn chút để tập trung vào giữa */
    z-index: 5;
}

/* 3. Vị trí BÊN PHẢI (Nhỏ hơn, mờ hơn - Nơi logo chuẩn bị vào) */
.carousel-item.next {
    left: 75%; /* Kéo sát vào trung tâm hơn */
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0.3;
    z-index: 5;
}

/* Mobile: Thu hẹp khoảng cách left/right để không bị tràn màn hình */
@media (max-width: 600px) {
    .partners {
        padding: 5px 0; /* Mobile ép sát hơn nữa */
    }
    .carousel-item.prev { left: 15%; }
    .carousel-item.next { left: 85%; }
}

@media (max-width: 900px) {
    .skeleton-side {
        display: none;
    }
    #resultContainer {
        grid-template-columns: 1fr;
    }
    
    #main-status,
    #main-code,
    #info,
    #service,
    #details,
    #history {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
    }
    
    .info-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .search-section {
        padding: 15px 20px 30px;
        transform: translateY(-30px);
    }
    .logo-image {
        width: 150px;
    }
    .search-section h2 {
        font-size: 1.1em;
        margin-bottom: 20px;
    }
    .logo-title {
        font-size: 2em;
    }
    #form-on-tracking {
        flex-direction: column;
        gap: 10px;
    }
    #form-on-tracking input,
    #form-on-tracking button {
        border-radius: 25px;
        width: 100%;
        padding: 15px 20px;
    }
    #history-list li {
        padding-left: 40px;
    }
    #history-list::before {
        left: 15px;
    }
    #history-list li::before {
        left: 7px;
    }
    #history-list li::after {
        left: 11px;
    }
    .card {
        padding: 20px;
    }
    .card h2,
    .card h3 {
        font-size: 1rem;
    }
}

@media (max-width: 650px) {
    .main-container {
        padding: 10px;
    }
    .logo-image {
        width: 130px;
    }
    .search-section h2 {
        font-size: 1em;
    }
    #form-on-tracking input {
        font-size: 1em;
    }
    #history-list::before {
        left: 19px;
    }
    #history-list li::before {
        left: 11px;
    }
    #history-list li::after {
        left: 15px;
    }
    .status-tag {
        font-size: 0.9em;
        padding: 6px 15px;
    }
    .status-date {
        font-size: 0.85em;
    }
}

@media (max-width: 480px) {
    .search-section {
        padding: 10px 15px 25px;
        transform: translateY(-20px);
    }
    .logo-image {
        width: 120px;
    }
    .search-section h2 {
        font-size: 0.95em;
        margin-bottom: 15px;
    }
    #form-on-tracking input {
        font-size: 0.95em;
        padding: 12px 18px;
    }
    #form-on-tracking button {
        padding: 12px 18px;
        font-size: 0.9em;
    }
    .card {
        padding: 15px;
    }
    .card h2,
    .card h3 {
        font-size: 0.9rem;
        margin-bottom: 15px;
    }
    #main-tracking-code {
        font-size: 0.9em;
        letter-spacing: 1px;
    }
    .info-item {
        padding: 10px;
    }
    #history-list .date {
        font-size: 14px;
    }
    #history-list .status {
        font-size: 12px;
    }
    #history-list .location {
        font-size: 11px;
    }
    .partner-logo {
        width: 80px;
        margin: 0 10px;
    }
}

/* --- START STYLE ICON XỊN --- */

/* 1. Style chung cho icon trong tiêu đề Card */
.card h3 i {
    margin-right: 10px;
    color: #f8b94d; /* Màu cam điểm nhấn */
}

.info-item {
    display: flex;
    align-items: center;
    padding: 15px;
    background: #fff;
    /* Viền dùng màu Xám bạn yêu cầu, chỉnh mờ đi chút */
    border: 1px solid rgba(168, 168, 169, 0.3); 
    border-radius: 12px;
    transition: all 0.2s ease;
}

.info-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border-color: #f8b94d; /* Hover vào thì viền sáng màu cam */
}

.icon-wrapper {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    /* Nền cam nhạt trong suốt */
    background: rgba(248, 185, 77, 0.15); 
    color: #f8b94d; /* Icon màu cam đậm */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    margin-right: 15px;
    flex-shrink: 0;
}

.info-content {
    display: flex;
    flex-direction: column;
}

.info-label {
    margin-bottom: 4px;
    font-size: 0.85em;
    color: #a8a8a9; /* MÀU MỚI: Xám */
    font-weight: 600; /* Tăng độ đậm chút vì màu xám hơi nhạt */
}

.info-item strong {
    font-size: 1.05em;
    color: #102e46;
}

.detail-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.detail-row {
    display: flex;
    align-items: center;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 8px;
}

.detail-row p {
    margin: 0;
    padding: 0;
    border: none;
    flex-grow: 1;
    display: flex;
    justify-content: space-between;
}

.icon-mini {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(168, 168, 169, 0.15); /* Nền xám nhạt */
    color: #f8b94d; /* Icon màu cam */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 15px;
    font-size: 0.9rem;
}


.dest-group {
    display: flex;
    align-items: center; 
    gap: 6px; /* Khoảng cách giữa tên nước và dấu check */
}

.verified-icon {
    width: 35px;  /* Kích thước vừa phải, không quá to */
    height: 35px;
    object-fit: contain;
    display: inline-block;
    margin-top: -2px; /* Tinh chỉnh nhẹ để khớp với dòng kẻ chữ */
}

/* --- END STYLE ICON XỊN --- */

@media (max-width: 600px) {
    .header-container {
        flex-direction: row;
        justify-content: center;
        gap: 0;
    }
    #form-in-header {
        width: 100%;
        max-width: 400px;
    }
    #form-in-header input {
        width: 100%;
        flex: 1;
    }
    #form-in-header button {
        flex-shrink: 0;
    }
    .lang-select-dummy {
        display: none;
    }
    .card {
        padding: 20px;
    }
}

/* ==========================================================================
   MOBILE & TABLET RESPONSIVE OVERRIDES (Thêm vào cuối file tracking.css)
   ========================================================================== */

/* 1. Tinh chỉnh Header (Thanh tìm kiếm dính ở trên) cho Mobile */
@media (max-width: 768px) {
    .page-header {
        padding: 10px 0; /* Giảm padding */
    }

    .header-container {
        padding: 0 10px;
    }

    #form-in-header {
        max-width: 100%;
        height: 45px; /* Chiều cao cố định nhỏ gọn */
        border: 1px solid #e0e0e0;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }

    #form-in-header input {
        font-size: 14px;
        padding: 0 15px;
    }

    #form-in-header button {
        padding: 0 20px;
        font-size: 1rem;
    }
}

@media (max-width: 900px) {
    #resultContainer {
        grid-template-columns: 1fr; /* Chuyển về 1 cột */
        gap: 15px; /* Giảm khoảng cách giữa các card */
        padding: 15px; /* Padding lề ngoài nhỏ lại */
    }

    #main-status, #main-code, #infoHistoryContainer, #serviceDetailsContainer, #info, #service, #details, #history {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
    }
    
    .info-grid {
        grid-template-columns: repeat(2, 1fr); 
    }
}

@media (max-width: 600px) {
    .search-section {
        padding: 0 15px 30px;
        transform: translateY(-20px);
    }
    
    .logo-image {
        width: 160px; 
    }

    .logo-title {
        font-size: 1.8rem;
    }

    .card {
        padding: 15px; 
        border-radius: 12px; 
    }
    
    .info-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .info-item {
        padding: 10px;
        flex-direction: row; 
        align-items: center;
    }
    
    .icon-wrapper {
        width: 38px;
        height: 38px;
        font-size: 1rem;
        margin-right: 12px;
    }
    
    .info-item strong {
        font-size: 0.95rem;  
        word-break: break-word;  
    }
}


@media (max-width: 600px) {
    #history-list {
        padding-top: 5px;
    }
 
    #history-list::before {
        left: 14px; 
    }

    #history-list li {
        flex-direction: column; 
        padding-left: 40px; 
        margin-bottom: 25px;
    }
 
    #history-list .dot {
        left: 14px;
        top: 0; 
        margin-top: 2px;
        width: 12px;
        height: 12px;
    }
     
    #history-list li:first-child .dot {
        width: 16px;
        height: 16px;
        left: 14px; 
        transform: translateX(-50%);
    }
 
    #history-list .time-col {
        width: 100%;
        text-align: left;
        padding-right: 0;
        margin-bottom: 5px;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        border-bottom: 1px dashed #eee;  
        padding-bottom: 4px;
    }

    .time-col .time-part {
        font-size: 1rem;
        color: #102e46;
    }

    .time-col .date-part {
        font-size: 0.85rem;
    }
 
    #history-list .content-col {
        padding-left: 0;
    }

    .content-col .status {
        font-size: 0.95rem;
    }
    
    .content-col .location {
        font-size: 0.85rem;
        margin-top: 2px;
    }
}
 
@media (max-width: 600px) {
    .partners {
        padding: 15px 0;
    }
    .carousel-item img {
        max-height: 25px;  
    }
    .footer-title {
        font-size: 0.8rem;
    }
}