html,
body{

    margin:0;

    background:#eef2f7;

    font-family:"Inter", sans-serif;

}
/* ==========================================
   FONT CHUẨN - UNICODE TIẾNG VIỆT
   ========================================== */

button,
input,
select,
textarea,
table,
th,
td,
a,
label,
span,
div{

    font-family:"Inter", sans-serif;

}

.mobile{

    width:100%;

    max-width:430px;

    min-height:100vh;

    margin:auto;

    background:white;

    display:flex;

    flex-direction:column;

}

.topbar{

    height:60px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 15px;

    background:#16a34a;

    color:white;

    position:sticky;

    top:0;

    z-index:1000;

}

/* ==========================
   Header
========================== */

.header-back{

    width:40px;

    height:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:white;

    text-decoration:none;

    font-size:24px;

}

.page-title{

    flex:1;

    text-align:center;

    font-size:20px;

    font-weight:bold;

}

.page-content{

    flex:1;

    padding:20px;

}

.input-big{

    height:58px;

    border-radius:16px;

    font-size:20px;

}

/* ==========================
   Button Group
========================== */

.button-group{

    display:flex;

    align-items:center;

    gap:12px;

    margin-top:25px;

}

/* Nút quay lại */

.btn-back {
    width:58px;
    min-width:58px;
    height:58px;
    border:none;
    border-radius:16px;
    background:#f3f4f6;
    color:#374151;
    font-size:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    cursor:pointer;
    transition:.2s;
}


/* Nút tiếp tục */

.btn-next {
    flex:1;
    height:58px;
    border:none;
    border-radius:16px;
    background:#16a34a;
    color:white;
    font-size:21px;
    font-weight:700;
    cursor:pointer;
    transition:.2s;
}

.btn-next:hover {
    background:#15803d;
}

.btn-back:hover{

    background:#e5e7eb;

}

/* ==========================
   Avatar
========================== */

.avatar-box{

    display:none;

    margin-top:20px;

    text-align:center;

}

.avatar-preview{

    width:140px;

    height:140px;

    margin:auto;

    border-radius:50%;

    background:#f3f4f6;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

    cursor:pointer;

    border:3px dashed #d1d5db;

}

.avatar-text{

    margin:15px 0;

    color:#6b7280;

    font-size:16px;

}

.btn-camera,
.btn-gallery{

    width:100%;

    height:54px;

    border:none;

    border-radius:16px;

    font-size:18px;

    margin-top:12px;

}

.btn-camera{

    background:#16a34a;

    color:white;

}

.btn-gallery{

    background:#f3f4f6;

    color:#374151;

}
.avatar-preview img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:none;

}

.avatar-preview i{

    font-size:70px;

    color:#9ca3af;

}
/* ==========================
   Dashboard
========================== */

.dashboard{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.giai-card{

    background:white;

    border-radius:20px;

    padding:20px;

    text-align:center;

    box-shadow:0 2px 10px rgba(0,0,0,.08);

}

.giai-icon{

    font-size:60px;

}

.giai-ten{

    margin-top:10px;

    font-size:24px;

    font-weight:bold;

}

.giai-info{

    color:#666;

    margin-top:8px;

}

.giai-status{

    margin-top:15px;

    font-weight:bold;

    color:#16a34a;

}

.thongke{

    display:flex;

    gap:15px;

}

.item{

    flex:1;

    background:white;

    border-radius:18px;

    padding:18px;

    text-align:center;

    box-shadow:0 2px 10px rgba(0,0,0,.08);

}

.so{

    font-size:28px;

    font-weight:bold;

    color:#16a34a;

}

.chu{

    margin-top:8px;

    color:#666;

}

.menu-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:48px;

    padding:12px 24px;

    border-radius:12px;

    background:#17a34a;

    color:#fff;

    font-size:22px;

    font-weight:700;

    text-decoration:none;

    line-height:1;

    margin-bottom:14px;

}
/*=========================
CHECK IN
=========================*/

.checkin-page{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.search-card{

    background:white;

    padding:20px;

    border-radius:20px;

    box-shadow:0 2px 10px rgba(0,0,0,.08);

}

.title{

    text-align:center;

    font-size:26px;

    font-weight:bold;

    margin-bottom:20px;

}

.btn-checkin{

    width:100%;

    height:60px;

    margin-top:18px;

    border:none;

    border-radius:18px;

    background:#16a34a;

    color:white;

    font-size:22px;

    font-weight:bold;

}

.bang-card{

    background:white;

    border-radius:20px;

    padding:20px;

    box-shadow:0 2px 10px rgba(0,0,0,.08);

}

.player {
    height:52px;
    display:flex;
    align-items:center;
    padding:10px 0;
    border-bottom:1px solid #ececec;
    font-size:20px;
}
.result-list{
    position:relative;
    z-index:9999;
    display:block;
    margin-top:12px;
}


.result-name{

    font-size:20px;

    font-weight:bold;

}

.result-phone{

    color:#666;

    margin-top:5px;

}

.btn-item{

    margin-top:12px;

    width:100%;

    height:48px;

    border:none;

    border-radius:14px;

    background:#16a34a;

    color:white;

    font-weight:bold;

}
.giai-item{

    background:white;

    border-radius:22px;

    padding:22px;

    margin-bottom:20px;

    box-shadow:0 4px 18px rgba(0,0,0,.08);

}

.ten{

    font-size:30px;

    font-weight:700;

    margin-bottom:15px;

}

.ngay{

    display:flex;

    align-items:center;

    gap:10px;

    margin-top:12px;

    font-size:18px;

    color:#555;

}

.trangthai{

    display:flex;

    align-items:center;

    gap:8px;

    margin-top:14px;

    font-size:19px;

    font-weight:700;

    color:#16a34a;

}
.form-card{

    background:white;

    border-radius:20px;

    padding:20px;

    box-shadow:0 2px 10px rgba(0,0,0,.08);

}

.form-card label{

    font-weight:bold;

    margin-bottom:8px;

}
/* ==========================================
   BẢNG ĐẤU - CARD
   ========================================== */

.bang-item {
    background:#fff;
    border-radius:18px;
    padding:14px;
    margin-bottom:14px;

    box-shadow:0 2px 10px rgba(0,0,0,.07);
    border:1px solid #f0f0f0;
}

.bang-header {
    display:flex;
    align-items:center;

    font-size:21px;
    font-weight:700;

    margin-bottom:8px;
}

.bang-info {
    margin-top:6px;
    font-size:14px;
    color:#333;
}

.bang-status {
    display:flex;
    align-items:center;
    gap:6px;

    margin-top:10px;

    color:#16a34a;
    font-size:14px;
    font-weight:700;
}

/* Nút trong card Bảng đấu */

.bang-item .menu-btn {
    min-height:44px;

    padding:10px 16px;

    border-radius:11px;

    font-size:16px;
    font-weight:700;

    margin-bottom:0;
}

.bang-item .btnLuuSan {
    width:auto;
    margin-top:10px !important;
}

.bang-item .menu-btn:not(.btnLuuSan) {
    width:100%;
    margin-top:8px !important;
}

.bang-item .cboSan {
    height:40px;
    min-height:40px;

    padding:6px 10px;

    font-size:14px;

    border-radius:9px;
}
.team{

    text-align:center;

    font-size:24px;

    font-weight:bold;

    margin-bottom:20px;

}

.vs{

    text-align:center;

    font-size:26px;

    font-weight:bold;

    margin-bottom:20px;

}

.rest-player{

    text-align:center;

    margin-top:20px;

    font-size:20px;

    color:#666;

}
.toast-success{

    background:#16a34a;

    color:white;

    padding:15px;

    border-radius:15px;

    margin-bottom:15px;

    text-align:center;

    font-size:18px;

    font-weight:bold;

}


.san-list{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:15px;

    margin-top:20px;

}

.san-btn{

    height:70px;

    border:none;

    border-radius:18px;

    background:#16a34a;

    color:white;

    font-size:22px;

    font-weight:bold;

}
.giai-item .menu-btn{

    width:180px;

}
.giai-item .ngay{

    margin-top:10px;

    font-size:18px;

}
.btn-open{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:180px;

    height:52px;

    margin-top:18px;

    border-radius:14px;

    background:#16a34a;

    color:#fff;

    font-size:20px;

    font-weight:700;

    text-decoration:none;

    line-height:1;

}
.ds-vdv{

    max-height:500px;

    overflow-y:auto;

}

.ds-vdv .result-item{

    margin-bottom:15px;

}


.result-item {
    display:block;
    background:#fff;
    border:1px solid #ddd;
    border-radius:12px;
    padding:12px;
    margin-bottom:10px;
    cursor:pointer;
}

.player-name {
    font-size:20px;
    font-weight:700;
}

.player-phone {
    margin-left:24px;
    margin-top:3px;
    color:#0d6efd;
    font-size:14px;
}
.bang-player{

    padding:12px;
    margin-bottom:10px;
    border-radius:10px;
    background:#f8f8f8;
    border:1px solid #ddd;

}

.bang-player strong{

    display:block;

    font-size:18px;

}

.bang-player small{

    display:block;

    margin-left:20px;

    margin-top:4px;

    color:#6c757d;

    font-size:14px;

}
.gender-box{

    display:flex;

    gap:15px;

    justify-content:center;

    margin-top:20px;

}

.gender-btn{

    flex:1;

    font-size:28px;

    padding:25px;

    border-radius:20px;

    border:2px solid #ddd;

    background:white;

}

.gender-btn.active{

    border:2px solid #0d6efd;

    background:#eaf3ff;

}
.avatar-duyet{

    width:120px;

    height:120px;

    border-radius:50%;

    object-fit:cover;

    border:4px solid #20a84a;

}

.avatar-none{

    width:120px;

    height:120px;

    border-radius:50%;

    background:#efefef;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:auto;

    font-size:60px;

}

.vdv-row{

    display:flex;

    border:1px solid #ddd;

    border-radius:12px;

    overflow:hidden;

    margin-bottom:12px;

    background:#fff;

}

.vdv-stt{

    width:55px;

    background:#f4f4f4;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:22px;

    font-weight:bold;

    border-right:1px solid #ddd;

}

.vdv-info{

    flex:1;

    padding:12px;

}

.vdv-name{

    font-size:20px;

    font-weight:bold;

}

.vdv-bietdanh{

    color:#666;

    margin-top:4px;

}

.vdv-phone{

    margin-top:6px;

    color:#0d6efd;

}


.match-row{

    display:flex;

    gap:12px;

    align-items:flex-start;

}

.team-box{

    flex:1;

    border:1px solid #ddd;

    border-radius:12px;

    background:#fff;

    padding:12px;

}

.vs-box{

    width:45px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:26px;

}
.score-box{

    border-top:1px solid #ddd;

    padding-top:10px;

    margin-top:10px;

}

.score-label{

    font-weight:bold;

    margin-bottom:8px;

}







.team-players{

    display:flex;

    flex-direction:column;

    gap:8px;

}


.player-nick{

    color:#666;

}


.score-area{

    border-top:1px solid #ddd;

    margin-top:8px;

    padding-top:10px;

}

.score-title{
    font-size:15px;
    font-weight:700;
    margin-bottom:6px;
}



.vs-panel{

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:24px;

    font-weight:bold;

}

.btnLuuDiem{

    width:100%;

    margin-top:15px;

}


.score-team{

    text-align:center;

}


.score-vs{

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    align-items:center;

}
.score-spacer{

    height:28px;

}


.score-colon{

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    font-weight:bold;

    line-height:48px;

}


.status-playing{

    display:inline-block;

    background:#fff3cd;

    color:#856404;

    padding:6px 14px;

    border-radius:20px;

    font-size:14px;

    font-weight:700;

}

.status-finish{

    display:inline-block;

    background:#d4edda;

    color:#155724;

    padding:6px 14px;

    border-radius:20px;

    font-size:14px;

    font-weight:700;

}


.progress-title{

    font-size:18px;

    font-weight:700;

    margin-bottom:10px;

}

.progress{

    height:24px;

    border-radius:12px;

    overflow:hidden;

}

.progress-bar{

    font-size:14px;

    font-weight:700;

    line-height:24px;

    transition:.3s;

}

.progress-text{

    margin-top:8px;

    text-align:center;

    font-weight:700;

    color:#198754;

}
/* ==========================================
   Ô HÌNH VĐV - KẾT QUẢ CHUNG CUỘC
   ========================================== */

.vdv-result-row {
    display: flex;
    align-items: center;
    gap: 10px;
}


.vdv-result-avatar {
    width: 58px;
    height: 58px;

    flex: 0 0 58px;

    border: 1px solid #d0d0d0;
    border-radius: 8px;

    background: #f1f1f1;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 28px;
}


.vdv-result-info {
    flex: 1;
    min-width: 0;
}
/* ==========================================
   DS CHECK IN
   ========================================== */

.checkin-page {
    width:100%;
}

.checkin-header {
    background:#fff;
    border-radius:18px;
    padding:16px;
    margin-bottom:15px;
    box-shadow:0 2px 10px rgba(0,0,0,.08);
}

.checkin-title {
    font-size:22px;
    font-weight:700;
    text-align:center;
}

.checkin-total {
    margin-top:8px;
    text-align:center;
    color:#666;
    font-size:16px;
}

.checkin-total strong {
    color:#16a34a;
    font-size:18px;
}


/* Khung bảng */

.checkin-table-wrap {
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;

    background:#fff;
    border-radius:16px;

    box-shadow:0 2px 10px rgba(0,0,0,.08);
}


/* Bảng */

.checkin-table {
    width:100%;
    min-width:0;
    table-layout:fixed;
    font-size:12px;
}


/* Header */

.checkin-table thead th {
    background:#16a34a;
    color:#fff;

    padding:8px 4px;

    font-weight:700;
    text-align:center;
    white-space:nowrap;
}


/* Ô */

.checkin-table td {
    padding:8px 4px;

    border-bottom:1px solid #e5e7eb;

    vertical-align:middle;
}


/* Hover */

.checkin-table tbody tr:hover {
    background:#f8fafc;
}


/* STT */

.checkin-table .col-stt {
    width:32px;
    text-align:center;
}


/* Tên VĐV */

.checkin-table .col-vdv {
    width:110px;
}

.vdv-name-cell {
    font-weight:600;
    white-space:normal;
    word-break:normal;
    overflow-wrap:break-word;
}


/* Biệt danh */

.checkin-table .col-bietdanh {
    width:70px;
    white-space:normal;
    word-break:normal;
    overflow-wrap:break-word;
}


/* Số điện thoại */

.checkin-table .col-sdt {
    width:85px;
}

.phone-cell {
    white-space:nowrap;
}


/* Thời gian */

.checkin-table .col-time {
    width:90px;
    text-align:center;
}

.time-cell span {
    display:block;
    font-weight:600;
}

.time-cell small {
    display:block;
    margin-top:2px;
    color:#6b7280;
    font-size:10px;
}


/* Bảng */

.checkin-table .col-bang {
    width:55px;
    text-align:center;
}

.bang-badge {
    display:inline-block;

    padding:4px 6px;

    border-radius:7px;

    background:#dcfce7;
    color:#166534;

    font-size:11px;
    font-weight:700;

    white-space:nowrap;
}

/* ==========================================
   CHI TIẾT TRẬN ĐẤU
   ========================================== */

.match-card {
    background:#fff;
    border-radius:18px;
    padding:10px;
    margin-bottom:16px;

    box-shadow:0 2px 10px rgba(0,0,0,.07);
    border:1px solid #f0f0f0;
}


/* Header trận */

.match-header {
    display:flex;
    align-items:center;
    justify-content:space-between;

    margin-bottom:10px;
}

.match-title {
    font-size:21px;
    font-weight:700;
}

.match-bang {
    font-size:20px;
    font-weight:700;
}


/* Trạng thái */

.match-status {
    text-align:center;
    margin-bottom:12px;
}

.status-finish,
.status-playing {
    display:inline-block;

    padding:6px 12px;

    border-radius:20px;

    font-size:13px;
    font-weight:700;
}


/* Hai cặp */

.match-teams {
    position:relative;

    display:grid;
    grid-template-columns:1fr 1fr;

    gap:16px;

    margin-top:8px;
}


/* Cặp */

.match-team {
    border:1px solid #d5d5d5;
    border-radius:11px;

    padding:8px;

    min-width:0;
}

.team-a {
    background:#eef7ff;
    border-color:#a8d2ff;
}

.team-b {
    background:#fff1f1;
    border-color:#ffb5b5;
}


/* Tên cặp */

.match-team-title {
    text-align:center;

    font-size:15px;
    font-weight:700;

    margin-bottom:8px;
}


/* VĐV */

.match-player {
    background:rgba(255,255,255,.75);

    border:1px solid #dce1e5;
    border-radius:8px;

    padding:7px 6px;

    margin-bottom:6px;

    text-align:center;

    min-height:42px;

    display:flex;
    flex-direction:column;
    justify-content:center;

    overflow:hidden;
}

.match-player:last-child {
    margin-bottom:0;
}

.match-player strong {
    display:block;

    font-size:14px;
    font-weight:700;

    line-height:1.3;

    white-space:normal;
    word-break:normal;
    overflow-wrap:break-word;
}

.match-player small {
    display:block;

    margin-top:2px;

    font-size:12px;
    color:#666;
}


/* VS */

.match-vs {
    position:absolute;

    left:50%;
    top:50%;

    transform:translate(-50%, -50%);

    background:#fff;

    padding:4px 5px;

    font-size:15px;
    font-weight:700;

    z-index:2;
}


/* Người nghỉ */

.match-card .rest-player {
    margin-top:12px;

    text-align:center;

    font-size:14px;
}


/* Điểm */

.match-score {
    display:grid;
    grid-template-columns:1fr 30px 1fr;

    align-items:end;

    gap:6px;

    margin-top:12px;
}

.match-score .score-team {
    text-align:center;
}

.match-score .score-title {
    font-size:13px;
    font-weight:700;
    margin-bottom:5px;
}

.match-score .score-input {
    width:100%;

    height:54px;

    border-radius:14px;

    text-align:center;

    font-size:30px;
    font-weight:700;

    border:1px solid #ccc;
}

.match-score .score-vs {
    height:54px;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:26px;
    font-weight:700;
}


/* Nút */

.match-card .menu-btn {
    width:100%;

    min-height:44px;

    margin-top:12px;
    margin-bottom:0;

    border-radius:11px;

    font-size:16px;
}


/* Nút kết quả */

.match-result-button {
    margin-top:8px;
}

.match-result-button .menu-btn {
    margin-top:0;
}


/* Mobile */

@media (max-width:430px) {

    .match-card {
        padding:10px;
        border-radius:16px;
    }

    .match-title {
        font-size:20px;
    }

    .match-bang {
        font-size:19px;
    }

    .match-teams {
        gap:10px;
    }

    .match-player {
        padding:6px 4px;
    }

    .match-player strong {
        font-size:13px;
    }

    .match-player small {
        font-size:11px;
    }

    .match-score .score-input {
        height:50px;
        font-size:28px;
    }

}

.header-admin {
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.header-admin-btn {
    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: white;
    text-decoration: none;

    font-size: 20px;
}

.header-admin-btn:hover {
    color: white;
    opacity: 0.85;
}