* { box-sizing: border-box; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; }
body { background-color: #f4f5f7; color: #333; line-height: 1.6; }
a { text-decoration: none; color: #333; }
ul { list-style: none; }



/* ================= BỘ LỌC TÌM SIM NĂM SINH ================= */
.filter-dropdown {
    flex: 1;
    min-width: 150px;
    padding: 12px 15px;
    font-size: 14px;
    font-weight: 600;
    color: #444;
    background-color: #f8f9fa;
    border: 1px solid #e1e4e8;
    border-radius: 6px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23b71c1c%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 15px top 50%;
    background-size: 10px auto;
    transition: all 0.2s ease-in-out;
}
/* ================= BỘ LỌC TÌM SIM NĂM SINH ================= */
.filter-dropdown {
    flex: 1;
    min-width: 150px;
    padding: 12px 15px;
    font-size: 14px;
    font-weight: 600;
    color: #444;
    background-color: #f8f9fa;
    border: 1px solid #e1e4e8;
    border-radius: 6px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23b71c1c%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 15px top 50%;
    background-size: 10px auto;
    transition: all 0.2s ease-in-out;
}

.filter-dropdown:hover {
    background-color: #ffffff;
    border-color: #b71c1c;
    box-shadow: 0 0 0 3px rgba(183, 28, 28, 0.15);
}

.filter-dropdown:hover {
    background-color: #ffffff;
    border-color: #b71c1c;
    box-shadow: 0 0 0 3px rgba(183, 28, 28, 0.15);
}

.header-banner { background: linear-gradient(to right, #7f0000, #b71c1c, #d32f2f); padding: 20px 40px; display: flex; align-items: center; position: relative; overflow: hidden; }
.banner-avatar { width: 160px; height: 160px; border-radius: 50%; border: 5px solid #ffc107; object-fit: cover; box-shadow: 0 0 20px rgba(255, 193, 7, 0.5); margin-right: 30px; z-index: 2; }
.banner-content { z-index: 2; text-align: center; flex: 1; }
.banner-title { color: #ffda75; font-size: 42px; font-weight: 900; text-transform: uppercase; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); margin-bottom: 5px; }
.banner-hotline { color: #ffffff; font-size: 36px; font-weight: bold; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); margin-bottom: 5px; }
.banner-slogan { color: #ffc107; font-size: 18px; font-style: italic; }

.main-nav { background-color: #7f0000; display: flex; border-bottom: 3px solid #ffc107; }
.main-nav a { color: white; padding: 15px 25px; font-weight: bold; font-size: 15px; text-transform: uppercase; border-right: 1px solid #b71c1c; transition: 0.3s; }
.main-nav a:hover, .main-nav a.active { background-color: #b71c1c; color: #ffc107; }

.main-wrapper { display: flex; padding: 15px; gap: 15px; }
.col-left { width: 20%; }
.col-main { width: 60%; }
.col-right { width: 20%; }

.sidebar-box { margin-bottom: 20px; border: 1px solid #e0e0e0; border-radius: 4px; overflow: hidden; }
.box-title { background-color: #b71c1c; color: white; padding: 10px 15px; font-weight: bold; text-transform: uppercase; font-size: 14px; }
.box-content, .sidebar-list { padding: 10px; background: #fff; }
.menu-list li a, .sidebar-list li a { display: block; padding: 8px 10px; border-bottom: 1px dashed #ddd; font-size: 14px; transition: 0.2s; color: #333; }
.menu-list li a:hover, .sidebar-list li a:hover { color: #d32f2f; background: #ffebee; padding-left: 15px; font-weight: bold; }

.search-section { background-color: #d32f2f; padding: 20px; border-radius: 6px; margin-bottom: 15px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }
.search-group { display: flex; margin-bottom: 10px; }
.search-group input { flex: 1; padding: 12px 15px; font-size: 16px; border: 2px solid #fff; border-radius: 4px 0 0 4px; outline: none; }
.search-group button { background-color: #ffc107; color: #333; border: 2px solid #ffc107; padding: 0 25px; font-size: 16px; font-weight: bold; cursor: pointer; border-radius: 0 4px 4px 0; transition: 0.3s; }
.search-group button:hover { background-color: #ffca28; transform: scale(1.02); }

#khu-vuc-thu-mua { background-color: #ffffff; padding: 35px 40px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); margin-bottom: 25px; border-top: 4px solid #d9534f; }
#khu-vuc-thu-mua h2 { text-align: center; color: #d9534f; margin-bottom: 25px; font-size: 22px; text-transform: uppercase; font-weight: bold; }
.form-group-radio { margin-bottom: 25px; display: flex; justify-content: center; gap: 40px; }
.form-group-radio label { cursor: pointer; font-size: 17px; font-weight: 600; color: #333; display: flex; align-items: center; gap: 8px; }
.form-group-radio input[type="radio"] { transform: scale(1.3); accent-color: #d9534f; }
.form-group-input { margin-bottom: 18px; }
.form-group-input input { width: 100%; padding: 14px 15px; border: 1px solid #ddd; border-radius: 5px; font-size: 16px; transition: all 0.3s ease; box-sizing: border-box; }
.form-group-input input:focus { border-color: #f0ad4e; outline: none; box-shadow: 0 0 5px rgba(240, 173, 78, 0.4); }
#form-thumua button[type="submit"] { width: 100%; padding: 16px; background-color: #d9534f; color: #fff; font-weight: bold; border: none; border-radius: 5px; cursor: pointer; font-size: 17px; text-transform: uppercase; transition: 0.3s ease; margin-top: 10px; }
#form-thumua button[type="submit"]:hover { background-color: #c9302c; }
.hotline-thumua { text-align: center; margin-top: 25px; font-size: 17px; color: #555; }
.hotline-thumua strong { color: #d9534f; font-size: 22px; }

.floating-buttons { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 999; }
.float-btn { width: 50px; height: 50px; border-radius: 50%; color: white; display: flex; align-items: center; justify-content: center; font-size: 24px; text-decoration: none; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); transition: 0.3s; }
.float-btn:hover { transform: scale(1.1); color: white;}
.btn-phone { background-color: #d32f2f; }
.btn-zalo { background-color: #0084ff; }

@media (max-width: 900px) {
    .main-wrapper { flex-wrap: wrap; }
    .col-main { width: 100%; order: 1; }
    .col-left, .col-right { width: calc(50% - 8px); order: 2; }
}
@media (max-width: 768px) {
    .search-section { padding: 10px !important; margin-bottom: 10px !important; }
    .search-group { margin-bottom: 5px !important; }
    .search-group input { padding: 6px 8px !important; font-size: 14px !important; min-width: 0 !important; }
    .search-group button { padding: 0 12px !important; font-size: 14px !important; }
}
@media (max-width: 600px) {
    .header-banner { padding: 12px; }
    .banner-avatar { width: 70px; height: 70px; margin-right: 10px; }
    .banner-title { font-size: 20px; }
    .banner-hotline { font-size: 18px; }
    .banner-slogan { font-size: 11px; }
    .main-nav { overflow-x: auto; }
    .main-nav a { white-space: nowrap; padding: 10px 12px; font-size: 13px;}
    .main-wrapper { padding: 5px; }
    .col-left, .col-right { width: 100%; }
}