/* --- BIẾN TOÀN CỤC --- */
:root {
    --blue: #0054a5;    /* Định nghĩa mã màu xanh áo Đoàn */
    --red: #da251d;     /* Định nghĩa mã màu đỏ cờ */
    --yellow: #ffce00;  /* Định nghĩa mã màu vàng sao */
    --gray: #64748b;    /* Màu xám dùng cho chữ phụ */
    --light-bg: #f8fafc;/* Màu nền tổng thể nhạt cho dịu mắt */
    --dark-blue: #0a192f;/* Màu xanh đen dùng cho chân trang trang trọng */
}

/* --- THIẾT LẬP CHUNG --- */
body {
    font-family: 'Be Vietnam Pro', sans-serif; /* Sử dụng font chữ hiện đại, hỗ trợ tiếng Việt tốt */
    background-color: var(--light-bg);         /* Áp dụng màu nền xám nhạt */
    margin: 0;                                 /* Loại bỏ khoảng trắng thừa sát mép trình duyệt */
    line-height: 1.6;                          /* Giãn dòng giúp đọc văn bản dễ dàng hơn */
}

/* --- ĐẦU TRANG (HEADER) --- */
header {
    padding: 40px 20px;    /* Tạo khoảng trống trên dưới 40px, hai bên 20px */
    text-align: center;    /* Căn giữa toàn bộ nội dung trong header */
    background: #fff;      /* Nền trắng để làm nổi bật lá cờ và tiêu đề */
}

.header-icons {
    display: flex;         /* Sử dụng Flexbox để xếp cây tre và lá cờ nằm ngang */
    justify-content: center;/* Căn giữa các icon theo chiều ngang */
    align-items: flex-end; /* Căn các icon sát đáy để rặng tre trông như mọc từ đất */
    gap: 25px;             /* Khoảng cách giữa cờ và tre là 25px */
    margin-bottom: 10px;   /* Khoảng cách với dòng chữ bên dưới */
}

.bamboo { color: #166534; width: 45px; height: 60px; } /* Cài đặt màu xanh lá và kích thước cho cây tre */
.flag { width: 80px; height: 50px; filter: drop-shadow(0 3px 6px rgba(0,0,0,0.2)); } /* Kích thước cờ và tạo bóng đổ nhẹ */

header h1 {
    font-size: clamp(1.8rem, 5vw, 3rem); /* Chữ tự co giãn: tối thiểu 1.8rem, tối đa 3rem */
    font-weight: 900;                    /* Độ đậm cao nhất để thể hiện sự mạnh mẽ */
    color: var(--blue);                  /* Màu xanh Đoàn truyền thống */
    margin: 10px 0;                      /* Khoảng cách trên dưới chữ */
    text-transform: uppercase;           /* Tự động viết hoa toàn bộ chữ */
}

/* --- LỜI NGỎ --- */
.intro-container {
    max-width: 850px;       /* Giới hạn độ rộng khung để nội dung tập trung */
    margin: 0 auto 50px;    /* Căn giữa khung và cách bên dưới 50px */
    padding: 40px 30px;     /* Khoảng trống lề bên trong khung */
    background: #fff;       /* Nền khung màu trắng */
    border: 2px solid var(--blue); /* Viền khung màu xanh Đoàn */
    border-radius: 20px;    /* Bo tròn góc khung nhìn mềm mại */
    position: relative;     /* Làm mốc để đặt Huy hiệu Đoàn lên trên */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05); /* Tạo bóng đổ sâu phía dưới khung */
    text-align: center;     /* Căn giữa nội dung văn bản */
}

.badge-box {
    position: absolute;     /* Đặt Huy hiệu Đoàn ở vị trí tự do */
    top: -45px;             /* Đẩy Huy hiệu lên phía trên mép khung 45px */
    left: 50%;              /* Căn giữa theo chiều ngang */
    transform: translateX(-50%); /* Chỉnh lại chính xác tâm giữa */
    background: #fff;       /* Nền trắng sau Huy hiệu */
    padding: 10px;          /* Khoảng cách viền quanh Huy hiệu */
    border-radius: 50%;     /* Bo tròn hoàn toàn tạo hình tròn */
    border: 2px solid var(--blue); /* Viền xanh quanh Huy hiệu */
}

.badge-box img { width: 80px; height: 80px; object-fit: contain; } /* Kích thước ảnh huy hiệu */

/* --- THANH TABS --- */
.tabs-container {
    max-width: 100%;        /* Rộng hết cỡ màn hình */
    background: rgba(255,255,255,0.98); /* Trắng gần như tuyệt đối */
    position: sticky;       /* Giữ thanh menu đứng yên khi cuộn trang */
    top: 0;                 /* Dính ở vị trí sát mép trên cùng */
    z-index: 1000;          /* Đảm bảo menu luôn nằm trên mọi nội dung khác */
    border-bottom: 2px solid #eee; /* Đường kẻ mờ dưới chân menu */
}

.tabs-nav {
    max-width: 1100px;      /* Giới hạn độ rộng vùng chứa nút bấm */
    margin: 0 auto;         /* Căn giữa vùng chứa menu */
    display: flex;          /* Xếp các nút nằm ngang */
    position: relative;     /* Làm mốc để vạch kẻ đỏ chạy bên trong */
}

.tab-btn {
    flex: 1;                /* Chia đều chiều ngang cho các nút bấm */
    padding: 22px 5px;      /* Độ cao của nút bấm */
    border: none;           /* Xóa viền nút mặc định */
    background: none;       /* Xóa nền nút mặc định */
    cursor: pointer;        /* Hiện hình bàn tay khi chọn nút */
    font-weight: 800;       /* Chữ nút rất đậm */
    color: var(--gray);     /* Mặc định màu xám */
    text-transform: uppercase; /* Viết hoa tên các mục */
    font-family: inherit;   /* Sử dụng chung font của trang */
    font-size: 0.85rem;     /* Kích thước chữ nút vừa phải */
}

.tab-btn.active { color: var(--red); } /* Khi được chọn, chữ nút chuyển màu đỏ */

.tab-underline {
    position: absolute;     /* Đặt vạch kẻ ở vị trí tự do */
    bottom: 0;              /* Nằm sát dưới cùng của thanh menu */
    height: 4px;            /* Độ dày vạch kẻ là 4px */
    background: var(--red); /* Vạch kẻ màu đỏ hào hùng */
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); /* Hiệu ứng trượt mượt mà */
    border-radius: 4px 4px 0 0; /* Bo tròn nhẹ đầu trên vạch kẻ */
}

/* --- NỘI DUNG VÀ BÌNH LUẬN --- */
.content-wrapper { max-width: 850px; margin: 60px auto; padding: 0 20px; }
.tab-panel { display: none; animation: fadeIn 0.6s ease; } /* Ẩn các tab, tab hiện ra sẽ có hiệu ứng mờ dần */
.tab-panel.active { display: block; } /* Chỉ hiện tab đang kích hoạt */

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Hiệu ứng xuất hiện từ 0 đến 100% độ rõ */

.comment-box-ui {
    background: #fff; padding: 30px; border-radius: 15px; border: 1px solid #ddd; margin-top: 60px;
} /* Khung chứa bình luận */

.cmt-item {
    background: #f8fafc; padding: 12px; margin-bottom: 8px; border-left: 4px solid var(--blue); border-radius: 4px;
} /* Từng dòng bình luận lẻ */

/* --- CHÂN TRANG (FOOTER) --- */
footer {
    background: var(--dark-blue); /* Màu nền xanh đen trang trọng */
    color: #fff;                  /* Chữ trắng nổi bật */
    padding: 80px 20px 30px;      /* Khoảng cách lề cực rộng tạo sự thoáng đãng */
    margin-top: 100px;            /* Cách vùng nội dung bên trên 100px */
    border-top: 5px solid var(--red); /* Đường viền đỏ đậm phía trên cùng của footer */
}

.footer-grid {
    max-width: 1100px;            /* Giới hạn độ rộng footer */
    margin: 0 auto;               /* Căn giữa footer */
    display: grid;                /* Sử dụng Grid để chia cột */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Tự động chia cột theo màn hình */
    gap: 50px;                    /* Khoảng cách giữa các cột thông tin */
}

.footer-col h4 {
    color: var(--yellow);         /* Tiêu đề cột màu vàng rực rỡ */
    font-size: 1.2rem;            /* Kích thước tiêu đề lớn */
    margin-bottom: 25px;          /* Cách dòng nội dung bên dưới */
    text-transform: uppercase;    /* Viết hoa tiêu đề cột */
    padding-bottom: 10px;         /* Khoảng cách với vạch đỏ trang trí */
    border-bottom: 2px solid var(--red); /* Vạch đỏ dưới tiêu đề cột */
    display: inline-block;        /* Để vạch kẻ chỉ dài bằng độ dài của chữ */
}

.footer-bottom {
    text-align: center;           /* Căn giữa dòng bản quyền */
    margin-top: 60px;             /* Cách xa vùng thông tin bên trên */
    padding-top: 20px;            /* Khoảng cách lề trên */
    border-top: 1px solid rgba(255,255,255,0.1); /* Đường kẻ ngang mờ phân cách */
    font-size: 0.8rem;            /* Chữ bản quyền nhỏ lại */
    opacity: 0.6;                 /* Làm chữ mờ đi một chút để sang trọng */
}