/* =====================================================================
   Giao diện hệ thống chấm — giáo trình "Lập trình cơ sở với Python"
   Tác giả giáo trình: TS. Nguyễn Quốc Long · 2026
   Nạp SAU style.css của VNOJ (xem templates/base.html), chỉ ghi đè phần cần thiết.
   ===================================================================== */

:root {
    --gt-xanh: #1f477f;
    --gt-xanh-dam: #16325c;
    --gt-xanh-sang: #2f6bc0;
    --gt-xanh-nhat: #e9eff9;
    --gt-vang: #f2b705;
    --gt-vang-dam: #b98900;
    --gt-vang-nhat: #fff6d9;
    --gt-nen: #f4f6fa;
    --gt-the: #ffffff;
    --gt-chu: #1c2433;
    --gt-chu-phu: #5a6478;
    --gt-vien: #dfe4ee;
    --gt-la: #1d8a4e;
    --gt-la-nhat: #e5f5ec;
    --gt-do: #c4372b;
    --gt-do-nhat: #fdecea;
    --gt-cam: #c86a00;
    --gt-cam-nhat: #fff1e0;
    --gt-tim: #6b4bb5;
    --gt-tim-nhat: #f0ebfa;
    --gt-ma-nen: #f6f8fb;
    --gt-bong: 0 1px 2px rgba(22, 50, 92, .06), 0 4px 16px rgba(22, 50, 92, .06);
    --gt-bo: 12px;
    --gt-font: 'Be Vietnam Pro', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --gt-font-ma: 'JetBrains Mono', Consolas, 'Courier New', monospace;
    --gt-nav-cao: 60px;
    --gt-nut: #1f477f;
    --gt-nut-dam: #16325c;
}

body[data-theme="dark"] {
    --gt-xanh: #8fb4ec;
    --gt-xanh-sang: #a9c6f2;
    --gt-xanh-nhat: #1d2a3f;
    --gt-vang-nhat: #3a3112;
    --gt-nen: #11161f;
    --gt-the: #18202c;
    --gt-chu: #e4e8ef;
    --gt-chu-phu: #a3adbf;
    --gt-vien: #2b3647;
    --gt-la-nhat: #15301f;
    --gt-do-nhat: #3a1d1a;
    --gt-cam-nhat: #3a2a12;
    --gt-tim-nhat: #2a2240;
    --gt-ma-nen: #0f141c;
    --gt-nut: #2f5fa3;
    --gt-nut-dam: #3a6fb8;
}
@media (prefers-color-scheme: dark) {
    body:not([data-theme="light"]):not([data-theme="dark"]) {
        --gt-xanh: #8fb4ec;
        --gt-xanh-sang: #a9c6f2;
        --gt-xanh-nhat: #1d2a3f;
        --gt-vang-nhat: #3a3112;
        --gt-nen: #11161f;
        --gt-the: #18202c;
        --gt-chu: #e4e8ef;
        --gt-chu-phu: #a3adbf;
        --gt-vien: #2b3647;
        --gt-la-nhat: #15301f;
        --gt-do-nhat: #3a1d1a;
        --gt-cam-nhat: #3a2a12;
        --gt-tim-nhat: #2a2240;
        --gt-ma-nen: #0f141c;
        --gt-nut: #2f5fa3;
        --gt-nut-dam: #3a6fb8;
    }
}

/* ---------- Nền, chữ ---------- */
html, body {
    background: var(--gt-nen) !important;
}
body {
    font-family: var(--gt-font) !important;
    color: var(--gt-chu);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
nav ul li, .sidebox h3, h1, h2, h3, h4, h5, input, select, textarea, button, .button, th, td {
    font-family: var(--gt-font) !important;
}
h1, h2, h3, h4 { color: var(--gt-chu); letter-spacing: -0.01em; font-weight: 700; }
h3, h4 { font-weight: 600; }
html { overflow-x: hidden; }
a { color: var(--gt-xanh-sang); }
a:hover { color: var(--gt-xanh); }
code, pre, kbd, tt, .ace_editor { font-family: var(--gt-font-ma) !important; }
hr { border-color: var(--gt-vien) !important; }

#page-container {
    min-height: calc(100vh - 240px) !important;
    background: transparent !important;
    border: none !important;
    max-width: 1280px;
    padding-top: var(--gt-nav-cao);
}
#content {
    margin: 26px auto 0 !important;
    width: auto !important;
    padding: 0 28px;
}
#content > h2:first-of-type, #content .title-row h2 {
    font-weight: 700;
    font-size: 1.75em;
}

/* ---------- Thanh điều hướng ---------- */
#navigation.gt-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 500; height: var(--gt-nav-cao); }
#navigation.gt-nav #nav-container {
    background: linear-gradient(90deg, #16325c 0%, #1f477f 100%) !important;
    height: var(--gt-nav-cao);
    display: flex;
    align-items: center;
    box-shadow: 0 2px 10px rgba(10, 25, 50, .25);
    border-bottom: 3px solid var(--gt-vang);
}
#navigation.gt-nav #nav-list {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    margin: 0;
    padding: 0 0 0 14px;
    height: 100%;
}
#navigation.gt-nav #nav-list > li { display: block; text-transform: none; height: 100%; }
#navigation.gt-nav #nav-list > li > a.gt-nav-link {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 13px !important;
    border: none !important;
    font-size: 14.5px;
    font-weight: 500;
    color: #dce6f5 !important;
    position: relative;
    box-sizing: border-box;
}
#navigation.gt-nav #nav-list > li > a.gt-nav-link:hover { background: rgba(255, 255, 255, .09); color: #fff !important; }
#navigation.gt-nav #nav-list > li > a.gt-nav-link.active { color: #fff !important; font-weight: 600; }
#navigation.gt-nav #nav-list > li > a.gt-nav-link.active::after {
    content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px;
    background: var(--gt-vang); border-radius: 3px 3px 0 0;
}
.gt-nav-icon { margin-right: 7px; opacity: .8; font-size: 14px; width: 15px; text-align: center; }
#navigation.gt-nav li.home-nav-element { margin-right: 14px; }
#navigation.gt-nav li.home-nav-element a.gt-brand-link {
    display: flex !important; align-items: center; height: 100% !important; padding: 0 !important;
}
#navigation.gt-nav li.home-nav-element a:hover { background: transparent !important; }
.gt-brand { display: flex; align-items: center; gap: 10px; }
.gt-brand-icon { width: 36px; height: 36px; display: block; }
.gt-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.gt-brand-small { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--gt-vang); font-weight: 600; }
.gt-brand-big { font-size: 15px; font-weight: 700; color: #fff; white-space: nowrap; }

#navigation.gt-nav #user-links {
    position: static; margin-left: auto; padding-right: 16px; height: 100%; display: flex; align-items: center; gap: 4px;
}
#navigation.gt-nav #user-links #report-issue { color: #dce6f5; font-size: 13.5px; margin-right: 6px; }
#navigation.gt-nav #user-links #report-issue .fa { color: var(--gt-vang); }
#navigation.gt-nav .gt-icon-btn { color: #c9d6ea; padding: 6px; }
#navigation.gt-nav .anon { display: flex; gap: 8px; align-items: center; }
.gt-btn-dang-nhap, .gt-btn-dang-ky {
    display: inline-block; padding: 7px 14px !important; border-radius: 8px; font-weight: 600; font-size: 14px;
    text-decoration: none !important; line-height: 1.2;
}
.gt-btn-dang-nhap { color: #fff !important; border: 1px solid rgba(255, 255, 255, .45); }
.gt-btn-dang-nhap:hover { background: rgba(255, 255, 255, .1); }
.gt-btn-dang-ky { background: var(--gt-vang); color: #1b2333 !important; border: 1px solid var(--gt-vang); }
.gt-btn-dang-ky:hover { background: #ffc928; }
#navigation.gt-nav #user-links > ul > li > a > span { padding: 6px 8px; align-items: center; }
#navigation.gt-nav #user-links > ul > li > a > span > img { border-radius: 50%; }
#navigation.gt-nav .gt-user-name { color: #fff !important; font-weight: 600; font-size: 14px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
#navigation.gt-nav #user-links ul li ul {
    background: var(--gt-the); border-radius: 10px; overflow: hidden; border: 1px solid var(--gt-vien);
    box-shadow: 0 10px 30px rgba(10, 25, 50, .18);
}
#navigation.gt-nav #user-links ul li ul li a, #navigation.gt-nav #user-links ul li ul li button {
    color: var(--gt-chu) !important; border-left: none !important; font-size: 14px !important; padding: 10px 16px !important;
    background: transparent !important; text-transform: none;
}
#navigation.gt-nav #user-links ul li ul li a:hover, #navigation.gt-nav #user-links ul li ul li button:hover { background: var(--gt-xanh-nhat) !important; }
#navigation.gt-nav .notification-bell { color: #dce6f5 !important; padding: 6px 8px !important; }
#navicon { color: #fff !important; }

/* Điện thoại / máy tính bảng: menu xổ xuống toàn chiều ngang */
@media (max-width: 1060px) {
    #navigation.gt-nav .gt-nav-link { padding: 0 9px !important; font-size: 14px; }
    .gt-nav-icon { display: none; }
}
@media (max-width: 860px) {
    #navigation.gt-nav { height: 56px; }
    #navigation.gt-nav #nav-container { height: 56px; }
    #page-container { padding-top: 56px; }
    #navigation.gt-nav #navicon {
        display: flex !important; align-items: center; justify-content: center; float: none;
        width: 44px; height: 44px; margin: 0 2px 0 6px; font-size: 22px; line-height: 1; padding: 0;
    }
    #navigation.gt-nav #nav-list {
        display: none; position: fixed; top: 56px; left: 0; right: 0; bottom: auto; width: auto; height: auto;
        flex-direction: column; align-items: stretch; padding: 6px 0 10px;
        background: #16325c !important; box-shadow: 0 12px 24px rgba(0, 0, 0, .25);
    }
    #navigation.gt-nav #nav-list.show-list { display: flex !important; }
    #navigation.gt-nav #nav-list > li { height: auto; }
    #navigation.gt-nav #nav-list > li > a.gt-nav-link { height: 48px; padding: 0 22px !important; font-size: 16px; }
    #navigation.gt-nav #nav-list > li > a.gt-nav-link.active::after { left: 0; right: auto; top: 10px; bottom: 10px; width: 4px; height: auto; border-radius: 0 3px 3px 0; }
    .gt-nav-icon { display: inline-block; margin-right: 12px; }
    #navigation.gt-nav #nav-list li.home-nav-element { display: none !important; }
    #navigation.gt-nav #user-links { padding-right: 8px; }
    #navigation.gt-nav .gt-user-name { display: none; }
    #content { padding: 0 14px; margin-top: 18px !important; }
}
/* Trên điện thoại, logo nằm cạnh nút menu (bản sao trong #user-links ẩn trên máy tính) */
.gt-brand-mobile { display: none; }
@media (max-width: 860px) {
    .gt-brand-mobile { display: flex; align-items: center; gap: 8px; color: #fff !important; text-decoration: none !important; margin-right: auto; }
    .gt-brand-mobile img { width: 30px; height: 30px; }
    .gt-brand-mobile span { font-weight: 700; font-size: 15px; color: #fff; }
}
@media (max-width: 400px) {
    .gt-brand-mobile span { font-size: 13.5px; }
    .gt-btn-dang-nhap, .gt-btn-dang-ky { padding: 6px 10px !important; font-size: 13px; }
}

/* ---------- Nút, ô nhập ---------- */
.button, button, input[type=submit] {
    background: var(--gt-nut) !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    padding: 8px 16px;
    box-shadow: none;
    transition: background .15s;
}
.button:hover, button:hover, input[type=submit]:hover { background: var(--gt-nut-dam) !important; }
.button.disabled { background: #9aa3b2 !important; }
input[type=text], input[type=password], input[type=email], input[type=number], input[type=search], select, textarea {
    border-radius: 8px !important;
    border: 1px solid var(--gt-vien) !important;
    padding: 7px 10px !important;
    font-size: 14.5px !important;
}
input:focus, textarea:focus, select:focus { outline: 2px solid rgba(47, 107, 192, .35); border-color: var(--gt-xanh-sang) !important; }

/* ---------- Bảng ---------- */
.table {
    background: var(--gt-the) !important;
    border-radius: var(--gt-bo);
    overflow: hidden;
    box-shadow: var(--gt-bong);
    border: 1px solid var(--gt-vien);
    border-collapse: separate;
}
.table th {
    background: var(--gt-xanh-dam) !important;
    color: #fff !important;
    border-color: transparent !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    letter-spacing: .02em;
    padding: 10px 12px !important;
}
.table th a, .table th a:link, .table th a:visited { color: #fff !important; }
.table td { border-color: var(--gt-vien) !important; border-width: 0 0 1px 0 !important; padding: 9px 10px !important; }
.table tr:last-child td { border-bottom: none !important; }
.table.striped tr:nth-child(2n) { background: rgba(31, 71, 127, .025) !important; }
.table tbody tr:hover td { background: var(--gt-xanh-nhat); }
#problem-table td.problem-name, #problem-table td.problem { text-align: left !important; font-weight: 500; }
#problem-table td.problem-name a { color: var(--gt-chu); }
#problem-table td.problem-name a:hover { color: var(--gt-xanh-sang); }
#problem-table td.category { color: var(--gt-chu-phu); font-size: 13.5px; white-space: nowrap; }

/* ---------- Hộp bên (sidebox), thẻ, tab ---------- */
.sidebox { margin-bottom: 4px; }
.sidebox h3 {
    background: var(--gt-xanh-dam) !important; color: #fff !important; font-size: 1.05em !important; font-weight: 600 !important;
    padding: 10px 14px !important; border-radius: var(--gt-bo) var(--gt-bo) 0 0 !important; margin: 0 !important;
}
.sidebox-content {
    background: var(--gt-the); border: 1px solid var(--gt-vien) !important; border-top: none !important;
    border-radius: 0 0 var(--gt-bo) var(--gt-bo); margin: 0 !important; padding: 10px 14px !important;
}
.tabs ul li.active a, .tabs ul li a.active { border-top-color: var(--gt-vang) !important; }
.alert { border-radius: 10px !important; }

/* ---------- Trang đề bài ---------- */
.problem-title h2, #content > .problem-title h2 { font-size: 1.7em; font-weight: 700; }
.content-description { font-size: 15.5px; line-height: 1.7; }
.content-description h4, .content-description h3, .content-description h2 {
    color: var(--gt-xanh) !important; font-weight: 700 !important; border-bottom: 2px solid var(--gt-xanh-nhat) !important;
    padding-bottom: 4px; margin-top: 1.4em;
}
.content-description pre, .content-description pre code, div.md-typeset pre {
    background: var(--gt-ma-nen) !important; border: 1px solid var(--gt-vien) !important; border-radius: 10px !important;
    font-size: 14px; padding: 12px 14px !important;
}
.content-description code { background: var(--gt-ma-nen); border: 1px solid var(--gt-vien); border-radius: 5px; padding: 1px 5px; font-size: .92em; }
.content-description pre code { border: none !important; padding: 0 !important; }
.content-description em:last-child { color: var(--gt-chu-phu); }
.btn-clipboard { border-radius: 6px !important; font-family: var(--gt-font) !important; }
.problem-info-entry .fa { color: var(--gt-xanh); }
.gt-meo-nop {
    margin: 12px 0 4px; padding: 10px 12px; background: var(--gt-vang-nhat); border: 1px solid #f0d78a;
    border-radius: 10px; font-size: 13.5px; line-height: 1.5; color: var(--gt-chu);
}
body[data-theme="dark"] .gt-meo-nop { border-color: #5a4a1a; }
.gt-meo-nop b { display: block; margin-bottom: 2px; }
.gt-meo-nop code { font-size: 12.5px; }

/* ---------- Chân trang ---------- */
footer.gt-footer {
    box-sizing: border-box; width: 100%;
    position: static !important; height: auto !important; background: var(--gt-xanh-dam) !important; color: #c9d6ea !important;
    margin-top: 0; padding: 30px 28px 26px; border-top: 3px solid var(--gt-vang); text-align: left !important;
}
.gt-footer-inner { max-width: 1220px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px 40px; align-items: start; }
.gt-footer-brand { display: flex; gap: 14px; align-items: center; }
.gt-footer-title { color: #fff; font-weight: 600; font-size: 15.5px; }
.gt-footer-title em { color: var(--gt-vang); font-style: normal; }
.gt-footer-sub { font-size: 14px; color: #c9d6ea; }
.gt-footer-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 20px; font-size: 14px; }
.gt-footer-links a, .gt-footer-note a { color: #fff !important; text-decoration: none; }
.gt-footer-links a:hover, .gt-footer-note a:hover { text-decoration: underline; }
.gt-footer-note { grid-column: 1 / -1; font-size: 12.5px; color: #9fb2d1; border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 12px; }
@media (max-width: 700px) {
    .gt-footer-inner { grid-template-columns: 1fr; }
    footer.gt-footer { padding: 24px 16px; }
}

/* =====================================================================
   Các trang riêng: trang chủ, giới thiệu, hướng dẫn, lỗi
   ===================================================================== */
.gt-trang { max-width: 1180px; margin: 0 auto; }
.gt-the {
    background: var(--gt-the); border: 1px solid var(--gt-vien); border-radius: var(--gt-bo); box-shadow: var(--gt-bong);
    padding: 22px 24px;
}
.gt-nhan {
    display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--gt-vang-dam);
}
body[data-theme="dark"] .gt-nhan { color: var(--gt-vang); }
.gt-tieu-de-muc { font-size: 1.45em; font-weight: 700; margin: 0 0 4px; }
.gt-mo-ta-muc { color: var(--gt-chu-phu); margin: 0 0 18px; }
.gt-muc { margin-top: 40px; }

/* Khối giới thiệu đầu trang chủ */
.gt-hero {
    display: grid; grid-template-columns: 1.55fr 1fr; gap: 36px; align-items: center;
    background: radial-gradient(1200px 400px at 0% 0%, #24548f 0%, #16325c 55%, #132a4d 100%);
    color: #e6edf8; border-radius: 18px; padding: 40px 44px; position: relative; overflow: hidden;
    box-shadow: 0 10px 30px rgba(22, 50, 92, .25);
}
.gt-hero::after {
    content: ""; position: absolute; right: -80px; bottom: -120px; width: 360px; height: 360px; border-radius: 50%;
    background: radial-gradient(circle, rgba(242, 183, 5, .18), rgba(242, 183, 5, 0) 70%);
}
.gt-hero h1 { color: #fff; font-size: 2.15em; line-height: 1.22; margin: 8px 0 14px; font-weight: 700; }
.gt-hero h1 span { color: var(--gt-vang); }
.gt-hero p { font-size: 16px; line-height: 1.65; margin: 0 0 12px; color: #d6e1f2; }
.gt-hero .gt-nhan { color: var(--gt-vang); }
.gt-tac-gia { display: flex; align-items: center; gap: 10px; margin: 16px 0 22px; font-size: 15px; color: #fff; }
.gt-tac-gia .fa { color: var(--gt-vang); }
.gt-nut-hang { display: flex; flex-wrap: wrap; gap: 10px; }
.gt-nut {
    display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 10px; font-weight: 600; font-size: 15px;
    text-decoration: none !important; transition: transform .12s, background .12s; line-height: 1.2;
}
.gt-nut:hover { transform: translateY(-1px); }
.gt-nut-chinh { background: var(--gt-vang); color: #1b2333 !important; }
.gt-nut-chinh:hover { background: #ffc928; }
.gt-nut-phu { background: rgba(255, 255, 255, .1); color: #fff !important; border: 1px solid rgba(255, 255, 255, .35); }
.gt-nut-phu:hover { background: rgba(255, 255, 255, .18); }
.gt-nut-vien { background: var(--gt-the); color: var(--gt-xanh) !important; border: 1px solid var(--gt-vien); }
.gt-nut-vien:hover { border-color: var(--gt-xanh-sang); }

/* "Bìa sách" vẽ bằng CSS */
.gt-bia-wrap { display: flex; justify-content: center; position: relative; z-index: 1; }
.gt-bia {
    width: 230px; aspect-ratio: 3 / 4.1; border-radius: 6px 14px 14px 6px; position: relative;
    background: linear-gradient(160deg, #fdfdfd 0%, #eef2f8 100%);
    box-shadow: -8px 0 0 #d9a404 inset, 0 18px 40px rgba(0, 0, 0, .35), 0 2px 0 rgba(255, 255, 255, .4) inset;
    padding: 26px 22px 20px 30px; box-sizing: border-box; display: flex; flex-direction: column; color: #16325c;
    transform: rotate(-2.5deg);
}
.gt-bia::before {
    content: ""; position: absolute; left: 10px; top: 0; bottom: 0; width: 3px; background: rgba(22, 50, 92, .12);
}
.gt-bia-tg { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #5a6478; }
.gt-bia-ten { font-size: 22px; line-height: 1.12; font-weight: 700; margin: 12px 0 0; color: #16325c; }
.gt-bia-ten span { display: block; color: #1f477f; }
.gt-bia-ma {
    margin-top: auto; background: #16325c; color: #e6edf8; border-radius: 8px; padding: 9px 10px;
    font-family: var(--gt-font-ma); font-size: 10.5px; line-height: 1.55; white-space: pre; overflow: hidden;
}
.gt-bia-ma .k { color: #f2b705; }
.gt-bia-ma .s { color: #9be0b5; }
.gt-bia-ma .c { color: #8fa6c8; }
.gt-bia-nam { font-size: 11px; color: #5a6478; margin-top: 10px; text-align: right; }

/* Ba bước dùng hệ thống */
.gt-buoc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: buoc; }
.gt-buoc > div { position: relative; padding-top: 18px; }
.gt-buoc > div::before {
    counter-increment: buoc; content: counter(buoc); position: absolute; top: -14px; left: 20px; width: 30px; height: 30px;
    border-radius: 50%; background: var(--gt-vang); color: #1b2333; font-weight: 700; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 4px var(--gt-nen);
}
.gt-buoc h3 { font-size: 1.05em; margin: 4px 0 6px; }
.gt-buoc p { margin: 0; color: var(--gt-chu-phu); font-size: 14.5px; }

/* Lưới chương */
.gt-luoi-chuong { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
a.gt-chuong {
    display: flex; flex-direction: column; gap: 6px; text-decoration: none !important; color: var(--gt-chu) !important;
    background: var(--gt-the); border: 1px solid var(--gt-vien); border-radius: var(--gt-bo); padding: 16px 18px 14px;
    box-shadow: var(--gt-bong); transition: border-color .15s, transform .15s, box-shadow .15s; position: relative;
}
a.gt-chuong:hover { border-color: var(--gt-xanh-sang); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(22, 50, 92, .12); }
.gt-chuong-so {
    font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gt-xanh-sang);
}
.gt-chuong-ten { font-weight: 600; font-size: 15.5px; line-height: 1.35; min-height: 2.7em; }
.gt-chuong-xs { font-size: 12.5px; color: var(--gt-chu-phu); }
.gt-chuong-xs b { color: var(--gt-vang-dam); font-weight: 600; }
body[data-theme="dark"] .gt-chuong-xs b { color: var(--gt-vang); }
.gt-thanh { height: 7px; border-radius: 4px; background: var(--gt-xanh-nhat); overflow: hidden; margin-top: 6px; }
.gt-thanh > i { display: block; height: 100%; background: linear-gradient(90deg, #2f6bc0, #1d8a4e); border-radius: 4px; }
.gt-chuong-so-bai { display: flex; justify-content: space-between; font-size: 13px; color: var(--gt-chu-phu); }
.gt-chuong-so-bai b { color: var(--gt-chu); }
a.gt-chuong.gt-trong { opacity: .78; }
a.gt-chuong.gt-dac-biet { border-left: 4px solid var(--gt-vang); }
a.gt-chuong.gt-btl { background: linear-gradient(135deg, var(--gt-the) 0%, var(--gt-vang-nhat) 100%); }

/* Ô tổng tiến độ */
.gt-tong { display: flex; align-items: center; gap: 22px; }
.gt-vong {
    --p: 0; width: 92px; height: 92px; border-radius: 50%; flex: none;
    background: conic-gradient(var(--gt-la) calc(var(--p) * 1%), var(--gt-xanh-nhat) 0);
    display: flex; align-items: center; justify-content: center;
}
.gt-vong span {
    width: 70px; height: 70px; border-radius: 50%; background: var(--gt-the); display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 19px;
}
.gt-tong h3 { margin: 0 0 4px; font-size: 1.15em; }
.gt-tong p { margin: 0; color: var(--gt-chu-phu); }

/* Hai cột thông tin */
.gt-hai-cot { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.gt-danh-sach-gon { margin: 0; padding-left: 1.2em; }
.gt-danh-sach-gon li { margin: 4px 0; }

/* Bảng kết quả chấm */
.gt-verdict-luoi { display: grid; grid-template-columns: 1fr; gap: 12px; }
.gt-verdict {
    display: grid; grid-template-columns: 92px 1fr; gap: 0 18px; background: var(--gt-the); border: 1px solid var(--gt-vien);
    border-radius: var(--gt-bo); padding: 16px 18px; box-shadow: var(--gt-bong);
}
.gt-verdict-ma {
    grid-row: span 3; align-self: start; text-align: center; font-weight: 700; font-size: 20px; border-radius: 10px; padding: 12px 0;
    font-family: var(--gt-font-ma);
}
.gt-verdict h3 { margin: 0 0 2px; font-size: 1.08em; }
.gt-verdict h3 small { font-weight: 500; color: var(--gt-chu-phu); font-size: .85em; }
.gt-verdict p { margin: 4px 0 0; font-size: 14.5px; }
.gt-verdict p b { color: var(--gt-chu); }
.v-ac { background: var(--gt-la-nhat); color: var(--gt-la); }
.v-wa { background: var(--gt-do-nhat); color: var(--gt-do); }
.v-tle { background: var(--gt-cam-nhat); color: var(--gt-cam); }
.v-ir, .v-rte { background: var(--gt-tim-nhat); color: var(--gt-tim); }
.v-ce { background: var(--gt-xanh-nhat); color: var(--gt-xanh); }
.v-khac { background: #eef0f4; color: #4d5566; }
body[data-theme="dark"] .v-khac { background: #262e3b; color: #b8c1d1; }

/* Khối mã minh họa */
.gt-ma {
    background: #0f1f38; color: #e3eaf6; border-radius: 10px; padding: 14px 16px; font-family: var(--gt-font-ma);
    font-size: 13.5px; line-height: 1.6; overflow-x: auto; white-space: pre; margin: 10px 0;
}
.gt-ma .c { color: #8fa6c8; }
.gt-ma .k { color: #f2b705; }
.gt-ma .s { color: #9be0b5; }
.gt-ma .sai { color: #ff8f84; }
.gt-ma-nhan { font-size: 12.5px; font-weight: 600; color: var(--gt-chu-phu); margin-top: 10px; }
.gt-dung-sai { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.gt-dung-sai > div { border-radius: 10px; padding: 12px 14px; }
.gt-dung { background: var(--gt-la-nhat); border: 1px solid rgba(29, 138, 78, .25); }
.gt-sai { background: var(--gt-do-nhat); border: 1px solid rgba(196, 55, 43, .25); }
.gt-dung h4, .gt-sai h4 { margin: 0 0 6px; font-size: 1em; }
.gt-dung h4 { color: var(--gt-la); }
.gt-sai h4 { color: var(--gt-do); }

/* Mục lục trang hướng dẫn */
.gt-muc-luc { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.gt-muc-luc a {
    display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--gt-the); border: 1px solid var(--gt-vien);
    font-size: 13.5px; text-decoration: none; color: var(--gt-chu) !important;
}
.gt-muc-luc a:hover { border-color: var(--gt-xanh-sang); color: var(--gt-xanh-sang) !important; }
.gt-dau-trang { padding: 26px 28px; border-radius: 16px; background: linear-gradient(135deg, var(--gt-xanh-nhat), var(--gt-the)); border: 1px solid var(--gt-vien); }
.gt-dau-trang h1 { margin: 6px 0 6px; font-size: 1.9em; line-height: 1.25; }
.gt-dau-trang p { margin: 0; color: var(--gt-chu-phu); max-width: 760px; }
.gt-noi-dung h2 { font-size: 1.35em; margin: 36px 0 10px; padding-top: 8px; scroll-margin-top: 80px; }
.gt-noi-dung h3 { font-size: 1.08em; margin: 18px 0 6px; }
.gt-noi-dung p, .gt-noi-dung li { font-size: 15px; }
.gt-noi-dung table.gt-bang { width: 100%; border-collapse: collapse; background: var(--gt-the); border-radius: 10px; overflow: hidden; border: 1px solid var(--gt-vien); font-size: 14.5px; }
.gt-bang th { background: var(--gt-xanh-dam); color: #fff; text-align: left; padding: 9px 12px; font-weight: 600; }
.gt-bang td { padding: 9px 12px; border-top: 1px solid var(--gt-vien); vertical-align: top; text-align: left; }
details.gt-hoi { background: var(--gt-the); border: 1px solid var(--gt-vien); border-radius: 10px; padding: 0; margin: 8px 0; }
details.gt-hoi summary { cursor: pointer; padding: 12px 16px; font-weight: 600; list-style: none; position: relative; padding-right: 40px; }
details.gt-hoi summary::-webkit-details-marker { display: none; }
details.gt-hoi summary::after { content: "+"; position: absolute; right: 16px; top: 9px; font-size: 20px; color: var(--gt-xanh-sang); }
details.gt-hoi[open] summary::after { content: "–"; }
details.gt-hoi > div { padding: 0 16px 12px; color: var(--gt-chu); }
.gt-ghi-chu { background: var(--gt-vang-nhat); border-left: 4px solid var(--gt-vang); padding: 10px 14px; border-radius: 0 10px 10px 0; margin: 12px 0; font-size: 14.5px; }
.gt-kbd { font-family: var(--gt-font-ma); background: var(--gt-ma-nen); border: 1px solid var(--gt-vien); border-radius: 5px; padding: 1px 6px; font-size: .9em; }

/* Mục lục giáo trình */
.gt-ml { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.gt-ml-chuong { background: var(--gt-the); border: 1px solid var(--gt-vien); border-radius: var(--gt-bo); padding: 16px 18px; }
.gt-ml-chuong h3 { margin: 0 0 6px; font-size: 1.02em; display: flex; gap: 10px; align-items: baseline; }
.gt-ml-chuong h3 .so {
    flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--gt-xanh-dam); color: #fff; display: inline-flex;
    align-items: center; justify-content: center; font-size: 14px;
}
.gt-ml-chuong ul { margin: 0; padding-left: 1.1em; color: var(--gt-chu-phu); font-size: 14px; }
.gt-ml-chuong .chan { margin-top: 8px; font-size: 13px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

/* Trang lỗi */
.gt-loi { text-align: center; padding: 50px 20px 30px; }
.gt-loi-ma { font-family: var(--gt-font-ma); font-size: 84px; font-weight: 700; color: var(--gt-xanh); line-height: 1; letter-spacing: -0.03em; }
.gt-loi-ma span { color: var(--gt-vang); }
.gt-loi h1 { font-size: 1.6em; margin: 14px 0 8px; }
.gt-loi p { color: var(--gt-chu-phu); max-width: 560px; margin: 0 auto 22px; word-break: break-word; }
.gt-loi .gt-nut-hang { justify-content: center; }
.gt-loi .gt-ma { display: inline-block; text-align: left; }

/* ---------- Điện thoại ---------- */
@media (max-width: 900px) {
    .gt-hero { grid-template-columns: 1fr; padding: 28px 22px; gap: 22px; }
    .gt-hero h1 { font-size: 1.65em; }
    .gt-bia-wrap { display: none; }
    .gt-buoc { grid-template-columns: 1fr 1fr; gap: 26px 14px; }
    .gt-hai-cot, .gt-ml, .gt-dung-sai { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    body { font-size: 15px; }
    .gt-buoc { grid-template-columns: 1fr; }
    .gt-luoi-chuong { grid-template-columns: 1fr; }
    .gt-the { padding: 16px; }
    .gt-verdict { grid-template-columns: 64px 1fr; gap: 0 12px; padding: 14px; }
    .gt-verdict-ma { font-size: 15px; padding: 9px 0; }
    .gt-dau-trang { padding: 20px 18px; }
    .gt-dau-trang h1 { font-size: 1.5em; }
    .gt-tong { gap: 14px; }
    .gt-loi-ma { font-size: 64px; }
    #problem-table td.category { display: none; }
    #problem-table th.category { display: none; }
}

/* Khoảng cách giữa nội dung và chân trang (chân trang nằm ngoài #page-container) */
#page-container { padding-bottom: 56px; }
#content-body { padding-bottom: 0 !important; }

/* Tinh chỉnh điện thoại (sau lần xem ảnh chụp thứ nhất) */
.gt-brand-mobile span { white-space: nowrap; }
@media (max-width: 440px) {
    #navigation.gt-nav #theme-toggle { display: none !important; }
    #navigation.gt-nav #user-links #report-issue { margin-right: 0; }
    .gt-vong { width: 64px; height: 64px; }
    .gt-vong span { width: 48px; height: 48px; font-size: 14px; }
    .gt-tong { align-items: flex-start; }
    .gt-nut { width: 100%; justify-content: center; box-sizing: border-box; }
}

/* Trang đề và danh sách bài trên điện thoại */
@media (max-width: 699px) {
    #common-content { display: flex; flex-direction: column; }
    #common-content > #content-right { width: 100% !important; max-width: none !important; padding: 0 !important; }
    #common-content > #content-right .info-float {
        width: 100% !important; box-sizing: border-box; background: var(--gt-the); border: 1px solid var(--gt-vien);
        border-radius: var(--gt-bo); padding: 14px 16px !important; margin-bottom: 18px;
    }
    /* Danh sách bài: bảng lên trước, ô tìm kiếm xuống sau; ẩn cột mã (tên bài đã có mã sách) */
    #common-content > #content-right.problems { order: 2; margin-top: 18px; }
    #common-content > #content-left.problems { order: 1; }
    #problem-table th.problem-code, #problem-table td.problem-code,
    #problem-table th.ac-rate, #problem-table td.ac-rate { display: none; }
    .problem-title h2 { font-size: 1.4em !important; }
}
@media (max-width: 699px) {
    #common-content > #content-right.problems .info-float { background: none; border: none; padding: 0 !important; }
}
/* Ô kết quả chấm: mã ở cột 1, mọi dòng chữ ở cột 2 */
.gt-verdict-ma { grid-column: 1; grid-row: 1 / span 6; }
.gt-verdict > :not(.gt-verdict-ma) { grid-column: 2; }
/* Tắt chữ ghép của JetBrains Mono: người mới phải thấy đúng ">=", "!=", "==" như gõ trên bàn phím */
code, pre, kbd, tt, .gt-ma, .gt-kbd, .gt-bia-ma, .gt-verdict-ma, .ace_editor {
    font-variant-ligatures: none !important; font-feature-settings: "liga" 0, "calt" 0 !important;
}

/* Phần tử con của lưới không được nở theo khối mã dài (tránh tràn ngang trên điện thoại) */
.gt-dung-sai > *, .gt-hai-cot > *, .gt-verdict > *, .gt-buoc > *, .gt-ml > *, .gt-luoi-chuong > * { min-width: 0; }
#navigation.gt-nav .notification-badge.hidden { display: none !important; }
#navigation.gt-nav #user-links > ul.gt-user-menu > li > a > span { display: flex; }