/*
File: style.css
- Chứa toàn bộ CSS cho trang donate.
- Đã cập nhật body để căn giữa logo và main-container theo chiều dọc.
*/

:root {
    --kingmu-gold: #ffd700;
    --kingmu-gold-dark: #cda400;
    --kingmu-bg: #0a0a14;
    --kingmu-panel-bg: rgba(15, 12, 28, 0.8);
    --kingmu-border: rgba(255, 215, 0, 0.3);
    --kingmu-text: #e0e0e0;
    --kingmu-text-muted: #888;
}

body {
    background-image: url('img/background.png'); 
    background-color: var(--kingmu-bg);
    background-size: cover;
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    color: var(--kingmu-text);
    font-family: 'Roboto', sans-serif;
    display: flex;
    /* THAY ĐỔI QUAN TRỌNG: Sắp xếp các mục theo chiều dọc */
    flex-direction: column; 
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem 0;
}

/* --- LOGO NẰM BÊN NGOÀI --- */
.site-logo { 
    text-align: center; 
    margin-bottom: 2rem; /* Tạo khoảng cách với khung bên dưới */
}
.site-logo img {
    max-height: 150px;
    width: auto;
    transition: transform 0.3s ease, filter 0.3s ease;
}
.site-logo img:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 0 15px var(--kingmu-gold));
}

/* --- KHUNG CHÍNH --- */
.main-container {
    background: var(--kingmu-panel-bg);
    padding: 2rem 2.5rem;
    border-radius: 20px;
    border: 1px solid var(--kingmu-border);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.2);
    max-width: 900px;
    width: 95%;
}

h1, h2, h3, h4, h5 { 
    font-family: 'Playfair Display', serif; 
    color: var(--kingmu-gold); 
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.5); 
}

/* --- FORM VÀ CÁC THÀNH PHẦN KHÁC --- */
.form-label { color: var(--kingmu-text); font-weight: 500; }
.form-control { background-color: rgba(0, 0, 0, 0.3); border: 1px solid var(--kingmu-border); color: #fff; border-radius: 8px; }
.form-control:focus { background-color: rgba(0, 0, 0, 0.5); border-color: var(--kingmu-gold); box-shadow: 0 0 10px rgba(255, 215, 0, 0.5); color: #fff; }
.form-control::placeholder { color: #777; }

.btn-golden { background: linear-gradient(145deg, var(--kingmu-gold), var(--kingmu-gold-dark)); border: none; color: #000; font-weight: bold; font-family: 'Playfair Display', serif; padding: 12px; border-radius: 8px; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); text-transform: uppercase; letter-spacing: 1px; }
.btn-golden:hover { transform: translateY(-3px); box-shadow: 0 0 20px rgba(255, 215, 0, 0.8); color: #000; }

.table { --bs-table-bg: transparent; --bs-table-border-color: var(--kingmu-border); color: var(--kingmu-text); }
.table thead th { color: var(--kingmu-gold); text-transform: uppercase; border: 1px solid var(--kingmu-gold); }
.table-bordered { border-color: var(--kingmu-border); }
.table-bordered tbody tr td:first-child { color: #dee2e6; }

/* --- TRANG THANH TOÁN --- */
.checkout-info-box {
    background-color: rgba(0,0,0,0.2);
    /* THAY ĐỔI: Chuyển từ viền trái thành viền đầy đủ */
    border: 1.5px solid var(--kingmu-gold); /* Viền vàng đều 4 cạnh */
    padding: 1.5rem;
    border-radius: 8px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
#payment-status-text { color: #ffc107; }
.nav-tabs { border-bottom: 1px solid var(--kingmu-border); }
.nav-tabs .nav-link { background: transparent; border: 1px solid transparent; border-bottom-color: var(--kingmu-border); color: var(--kingmu-text-muted); margin-bottom: -1px; }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: var(--kingmu-gold); background-color: rgba(255, 215, 0, 0.05); border-color: var(--kingmu-border) var(--kingmu-border) transparent; font-weight: bold; }
.tab-content { padding-top: 1.5rem; }
.qr-image-wrapper { background: #fff; padding: 10px; border-radius: 8px; display: inline-block; }

/* --- SỬA MÀU CHỮ CÁC BẢNG --- */
#manual-tab-pane .table td,
#manual-tab-pane .table b { color: var(--kingmu-text); }
.checkout-info-box .table td { color: var(--kingmu-text); }

/* === ĐIỀU CHỈNH VỊ TRÍ BIỂU TƯỢNG DẤU TICK XANH === */
.h3 .bi-check-circle-fill {
    /* Di chuyển biểu tượng lên trên 3px so với vị trí mặc định */
    position: relative;
    top: -3px; 
}
/* ================================================ */