/* =====================================================================
   qi-khenthuong.css — SKIN mới cho chuyên trang "Tuyên dương khen thưởng"
   (/Homekyyeu, /Kyyeugioithieu, /KyyeuEbook, /KyyeuTracuu + 4 bản mb).
   Nạp SAU vinhdanh*.css + style riêng từng trang ở _MasterKyyeu (body.qi-kt)
   và _MasterKyyeuMobile (body.qi-kt.qi-kt-mb). Chỉ ĐÈ kiểu, KHÔNG đổi markup
   hay nghiệp vụ. Màu chủ đạo bám --mau-g của bộ giao diện đang chọn
   (vinhdanh2023 = xanh lá, vinhdanh = đỏ) ⇒ đổi bộ vẫn đồng bộ.
   ⚠ KHÁC qi-kyyeu.css (skin kỷ yếu Hải Phòng, body.qi-ky) — đừng gộp.
   ===================================================================== */
body.qi-kt {
    --kt-chinh: var(--mau-g, #026E15);
    --kt-chinh-nhat: color-mix(in srgb, var(--kt-chinh) 10%, #fff);
    --kt-chinh-dam: color-mix(in srgb, var(--kt-chinh) 78%, #000);
    --kt-vang: #C9962E;
    --kt-vang-sang: #F1D37E;
    --kt-vang-nhat: #FBEBC0;
    --kt-the: #FFFDF7;
    --kt-chu: #2A2A24;
    --kt-chu-phu: #6B6455;
    --kt-vien: rgba(201, 150, 46, .35);
    --kt-bong: 0 24px 48px -24px rgba(60, 40, 0, .35), 0 2px 8px rgba(60, 40, 0, .08);
    --kt-le: clamp(16px, 12.5vw, 230px);           /* lề hai bên chừa chỗ cho dải lụa */
    background:
        radial-gradient(900px 520px at 50% -8%, #FFFEF8 0%, rgba(255, 254, 248, 0) 70%),
        linear-gradient(180deg, #FFF8E8 0%, #FFEFCE 100%);
    background-attachment: fixed;
    color: var(--kt-chu);
    font-family: Roboto, "Segoe UI", Arial, sans-serif;
}

/* ---------- Dải lụa trang trí hai bên: gọn lại, khỏi chen nội dung ---------- */
body.qi-kt .sec-anim + .sec-anim { display: none; }            /* bản cũ chèn TRÙNG 2 lần */
body.qi-kt .sec-anim { pointer-events: none; }
body.qi-kt .left-1-item { width: clamp(96px, 10vw, 190px); opacity: .92; }
body.qi-kt .right-item-1 { width: clamp(100px, 10.5vw, 200px); opacity: .92; }

/* ---------- Khung trang ---------- */
body.qi-kt .main-container { min-width: 0; padding: 0 var(--kt-le); }

/* ---------- Đầu trang: một thẻ kính mờ ---------- */
body.qi-kt header.row {
    margin: 22px 0 6px;
    padding: 0 !important;
    width: 100%;
    max-width: 1100px;
}
body.qi-kt header .w-1280 {
    align-items: center;
    gap: 24px;
    padding: 18px 28px;
    background: rgba(255, 255, 255, .72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid var(--kt-vien);
    border-radius: 20px;
    box-shadow: var(--kt-bong);
    position: relative;
    overflow: hidden;
}
body.qi-kt header .w-1280::before {               /* vạch vàng mảnh trên đỉnh thẻ */
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--kt-chinh), var(--kt-vang) 45%, var(--kt-vang-sang) 70%, var(--kt-chinh));
}
body.qi-kt header .vinhdanh-logo { flex: 0 1 auto; width: auto; min-width: 0; padding: 0; }
body.qi-kt header .vinhdanh-logo:last-child { flex: 1 1 auto; justify-content: flex-end; }
body.qi-kt header .vinhdanh-logo * { text-shadow: none; }
body.qi-kt header .image-logo-header {
    width: 76px;
    height: 76px;
    padding: 4px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--kt-vang-nhat), 0 6px 16px -6px rgba(0, 0, 0, .3);
}
body.qi-kt header .vinhdanh-logo .text-center.ms-4 { margin-left: 18px !important; text-align: left !important; }
body.qi-kt header .vinhdanh-logo a { text-decoration: none; }
body.qi-kt header .vinhdanh-logo .h1 {
    margin: 0 !important;
    font-size: 14px;
    font-weight: 600 !important;
    letter-spacing: .04em;
    color: var(--kt-chu-phu);
    text-align: left !important;
    line-height: 1.35;
}
body.qi-kt header .vinhdanh-logo .h1.ten_so {
    margin-top: 2px !important;
    font-size: 26px !important;
    font-weight: 800 !important;
    letter-spacing: .01em;
    color: var(--kt-chinh);
    line-height: 1.2;
    text-wrap: balance;
}
/* cột phải: tiêu đề chuyên trang */
body.qi-kt header .vinhdanh-logo:last-child .text-center.ms-4 { text-align: right !important; margin-left: 0 !important; }
body.qi-kt header h1 {
    margin: 0 !important;
    font-size: 21px;
    font-weight: 800 !important;
    letter-spacing: .02em;
    line-height: 1.3;
    color: var(--kt-chinh-dam);
    text-align: right !important;
    text-wrap: balance;
}
body.qi-kt header h1::before {                    /* nhãn nhỏ phía trên */
    content: "★  Vinh danh  ★";
    content: "★  Vinh danh  ★" / "";              /* chữ trang trí: trình đọc màn hình bỏ qua */
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--kt-vang);
}
body.qi-kt header h1::after {                     /* gạch chân vàng */
    content: "";
    display: block;
    width: 120px;
    height: 3px;
    margin: 10px 0 0 auto;
    border-radius: 3px;
    background: linear-gradient(90deg, rgba(201, 150, 46, 0), var(--kt-vang) 40%, var(--kt-vang-sang));
}
body.qi-kt header .vinhdanh-logo:last-child .h1 { text-align: right !important; margin-top: 6px !important; }

/* ---------- Thanh công cụ: bộ lọc + menu ---------- */
body.qi-kt form.menu-button {
    width: auto !important;
    max-width: 100%;
    margin: 18px 0 0 !important;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}
body.qi-kt form.menu-button select.button-menu {
    height: 44px;
    min-width: 140px;
    margin: 0;
    padding: 0 40px 0 18px;
    border: 1px solid var(--kt-vien);
    border-radius: 999px;
    box-shadow: 0 6px 16px -10px rgba(60, 40, 0, .45) !important;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238a6a1f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center;
    -webkit-appearance: none;
    appearance: none;
    font-size: 15px;
    font-weight: 600;
    text-transform: none;
    color: var(--kt-chu);
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s;
}
body.qi-kt form.menu-button select#drpDsGiai { min-width: 340px; max-width: 100%; }
body.qi-kt form.menu-button select.button-menu:hover { border-color: var(--kt-vang); }
body.qi-kt form.menu-button select.button-menu:focus {
    outline: none;
    border-color: var(--kt-chinh);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--kt-chinh) 18%, transparent) !important;
}

body.qi-kt div.menu-button {
    width: auto !important;
    max-width: 100%;
    margin: 14px 0 0 !important;
    padding: 5px;
    gap: 4px;
    flex-wrap: wrap;
    background: rgba(255, 255, 255, .8);
    border: 1px solid var(--kt-vien);
    border-radius: 999px;
    box-shadow: 0 10px 24px -16px rgba(60, 40, 0, .5);
}
body.qi-kt div.menu-button .button-menu {
    margin: 0;
    padding: 9px 22px;
    border: 0;
    border-radius: 999px;
    box-shadow: none !important;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--kt-chu-phu);
    transition: background-color .2s, color .2s;
}
body.qi-kt div.menu-button .button-menu:hover { background: var(--kt-chinh-nhat); color: var(--kt-chinh); }
body.qi-kt div.menu-button .button-menu.active {
    background: linear-gradient(180deg, color-mix(in srgb, var(--kt-chinh) 88%, #fff), var(--kt-chinh));
    color: #fff;
    box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--kt-chinh) 70%, transparent) !important;
}
body.qi-kt div.menu-button .button-menu:focus-visible { outline: 3px solid var(--kt-vang-sang); outline-offset: 2px; }

/* ---------- Trang chủ: khung ảnh vinh danh ---------- */
body.qi-kt .content-container-prop {
    max-width: 1000px;
    min-height: 0;
    margin-top: 36px !important;
    margin-bottom: 48px !important;
}
body.qi-kt .content-container-prop > aside { width: 100%; }
body.qi-kt .border-two-swiper { display: none; }   /* viền lệch góc cao cố định 540px ⇒ thay bằng outline ôm khung */
body.qi-kt .swiper-hight-student-img {
    max-width: none;
    padding: 10px;
    border-radius: 18px;
    background: linear-gradient(135deg, #B9822A 0%, var(--kt-vang-sang) 32%, #E3B654 55%, #F6DF97 78%, #B9822A 100%);
    box-shadow: var(--kt-bong), 0 40px 80px -40px rgba(60, 40, 0, .5);
    outline: 1.5px solid rgba(201, 150, 46, .5);
    outline-offset: 9px;
}
body.qi-kt .swiper-hight-student {
    border-radius: 11px;
    background: radial-gradient(circle at 50% 40%, #2b2b28 0%, #121210 100%);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25);
}
body.qi-kt .swiper-hight-student .swiper-slide { height: clamp(340px, 62vh, 600px); }
body.qi-kt .swiper-hight-student .image-container-1 { width: 100%; height: 100%; }
body.qi-kt .swiper-hight-student .image-container-1 a { display: block; width: 100%; height: 100%; cursor: zoom-in; }
body.qi-kt .swiper-hight-student video { width: 100%; height: clamp(340px, 62vh, 600px); display: block; }

body.qi-kt .button-swiper-vd { top: 50%; left: 0; z-index: 5; }
body.qi-kt .button-swiper-vd button {
    top: -26px;
    width: 52px;
    height: 52px;
    font-size: 26px;
    border: 1px solid var(--kt-vien);
    background: #fff;
    box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .45);
    transition: transform .2s, background-color .2s, color .2s;
}
body.qi-kt .button-swiper-vd .swiper-vd-back { left: -26px; }
body.qi-kt .button-swiper-vd .swiper-vd-continue { right: -26px; }
body.qi-kt .button-swiper-vd button:hover { background: var(--kt-chinh); color: #fff !important; transform: scale(1.06); }
body.qi-kt .button-swiper-vd button.swiper-button-disabled { opacity: .45; pointer-events: none; }

body.qi-kt .swiper-item-v-render { margin-top: 26px !important; }
body.qi-kt .swiper-custom.swiper-item-v { width: 9px; height: 9px; background: rgba(120, 95, 40, .25); cursor: default; }
body.qi-kt .swiper-custom.swiper-item-v.active { width: 28px; background: linear-gradient(90deg, var(--kt-vang), var(--kt-chinh)) !important; }

/* ---------- Trang trong (Lời nói đầu / Album / Tra cứu): thẻ nội dung ---------- */
body.qi-kt .content-container {
    margin-top: 28px !important;
    border-radius: 20px;
    border: 1px solid var(--kt-vien);
    box-shadow: var(--kt-bong);
    /* khenthuong.js gán NỘI TUYẾN 1 trong 3 ảnh nền ngẫu nhiên (đốm màu + viền đỏ cứng trong ảnh,
       lệch với bộ màu xanh) ⇒ buộc phải !important mới đè được */
    background:
        radial-gradient(520px 260px at 100% 0%, rgba(241, 211, 126, .28), rgba(241, 211, 126, 0) 70%),
        radial-gradient(420px 220px at 0% 100%, color-mix(in srgb, var(--kt-chinh) 8%, transparent), transparent 70%),
        var(--kt-the) !important;
}
body.qi-kt .special-title-block > span {
    font-size: 28px;
    letter-spacing: .02em;
    color: var(--kt-chinh-dam);
}

/* Tra cứu: ô lọc (select2) + nút */
body.qi-kt .content-container .select2-container--default .select2-selection--single,
body.qi-kt .content-container input.heighttextbox {
    height: 38px;
    border: 1px solid var(--kt-vien);
    border-radius: 10px;
    background: #fff;
}
body.qi-kt .content-container input.heighttextbox { padding: 0 12px; }
body.qi-kt .content-container .select2-selection__rendered { line-height: 36px !important; padding-left: 12px !important; }
body.qi-kt .content-container .select2-selection__arrow { height: 36px !important; right: 6px !important; }
body.qi-kt .content-container .btn-danger[name=timkiem] {
    height: 38px;
    border: 0;
    border-radius: 10px;
    background: var(--kt-chinh);
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: .03em;
}
body.qi-kt .content-container .btn-danger[name=timkiem]:hover { background: var(--kt-chinh-dam); }

/* ---------- Chân trang ---------- */
body.qi-kt footer {                                 /* tràn hết khổ, bù lại lề của .main-container */
    height: auto;
    width: calc(100% + 2 * var(--kt-le));
    margin: 8px calc(-1 * var(--kt-le)) 0;
}
body.qi-kt footer .line-footer { display: none; }
body.qi-kt footer .content-footer {
    height: auto;
    min-height: 64px;
    padding: 18px 16px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--kt-chinh) 92%, #fff), var(--kt-chinh-dam));
    box-shadow: inset 0 3px 0 var(--kt-vang);
    color: #fff;
    font-size: 13.5px;
    letter-spacing: .06em;
    text-align: center;
    position: relative;
    z-index: 1;
}
body.qi-kt footer .l2-left { z-index: 2; width: clamp(90px, 9vw, 150px); pointer-events: none; }

/* ---------- Khổ hẹp (iPad, cửa sổ nhỏ) ---------- */
@media (max-width: 1199.98px) {
    body.qi-kt { --kt-le: clamp(16px, 10vw, 110px); }
    body.qi-kt header .vinhdanh-logo .h1.ten_so { font-size: 22px !important; }
    body.qi-kt header h1 { font-size: 18px; }
    body.qi-kt header .w-1280 { padding: 16px 20px; gap: 16px; }
    body.qi-kt header .vinhdanh-logo:first-child { flex-shrink: 0; max-width: 55%; }
}
@media (max-width: 991.98px) {
    body.qi-kt .left-1-item, body.qi-kt .right-item-1 { opacity: .35; }
    body.qi-kt header .w-1280 { flex-direction: column !important; align-items: stretch; gap: 14px; }
    body.qi-kt header .vinhdanh-logo:last-child { justify-content: flex-start; }
    body.qi-kt header .vinhdanh-logo:last-child .text-center.ms-4,
    body.qi-kt header h1,
    body.qi-kt header .vinhdanh-logo:last-child .h1 { text-align: left !important; }
    body.qi-kt header h1::after { margin-left: 0; }
    body.qi-kt .button-swiper-vd .swiper-vd-back { left: 8px; }
    body.qi-kt .button-swiper-vd .swiper-vd-continue { right: 8px; }
}

/* =====================================================================
   BẢN ĐIỆN THOẠI (_MasterKyyeuMobile)
   ===================================================================== */
body.qi-kt.qi-kt-mb { background-attachment: scroll; }
body.qi-kt-mb .main-container-mobile { background: transparent; }

body.qi-kt-mb .head-mobile {
    position: relative;
    align-items: center;
    gap: 12px;
    padding: 14px 16px 16px !important;
    background: rgba(255, 255, 255, .85);
    border-bottom: 1px solid var(--kt-vien);
    box-shadow: 0 8px 20px -14px rgba(60, 40, 0, .45);
}
body.qi-kt-mb .head-mobile::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--kt-chinh), var(--kt-vang) 45%, var(--kt-vang-sang) 70%, var(--kt-chinh));
}
body.qi-kt-mb .head-mobile .image-logo-header {
    width: 56px;
    height: 56px;
    padding: 3px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--kt-vang-nhat), 0 4px 10px -4px rgba(0, 0, 0, .3);
}
body.qi-kt-mb .head-mobile > div { margin-left: 0 !important; min-width: 0; }
body.qi-kt-mb .head-mobile span { font-size: 13px; line-height: 1.35; }
body.qi-kt-mb .head-mobile a.mobile-text-1 span { font-size: 16px; font-weight: 800 !important; color: var(--kt-chinh); }
body.qi-kt-mb .head-mobile > div > span.mobile-text-1 {
    margin-top: 3px;
    font-size: 11.5px;
    font-weight: 700 !important;
    letter-spacing: .05em;
    color: var(--kt-vang);
    filter: brightness(.85);
}

/* bộ lọc: 2 ô xếp gọn, không tràn khổ 360–440px */
body.qi-kt-mb .title-mobile-menu2 { height: auto !important; margin-top: 14px !important; padding: 0 16px !important; }
body.qi-kt-mb .title-mobile-menu2 > ul { width: 100%; overflow: visible; }
body.qi-kt-mb .title-mobile-menu2 form { width: 100%; gap: 8px; }
body.qi-kt-mb .title-mobile-menu2 select.button-menu {
    height: 42px;
    margin: 0;
    padding: 0 34px 0 14px;
    border: 1px solid var(--kt-vien);
    border-radius: 12px;
    box-shadow: 0 4px 12px -8px rgba(60, 40, 0, .45) !important;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238a6a1f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
    -webkit-appearance: none;
    appearance: none;
    font-size: 14.5px;
    font-weight: 600;
    text-transform: none;
    color: var(--kt-chu);
    text-overflow: ellipsis;
}
body.qi-kt-mb .title-mobile-menu2 select#drpNamHoc { flex: 0 0 auto; width: 128px !important; padding-right: 30px; }
body.qi-kt-mb .title-mobile-menu2 select#drpDsGiai { flex: 1 1 0; width: auto !important; min-width: 0; }

/* menu 4 mục: thanh viên thuốc, vuốt ngang được */
body.qi-kt-mb .title-mobile-menu {
    height: auto;
    margin-top: 12px;
    padding: 0 16px !important;
    box-shadow: none;
}
body.qi-kt-mb .title-mobile-menu ul {
    width: 100%;
    gap: 4px;
    padding: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    background: rgba(255, 255, 255, .85);
    border: 1px solid var(--kt-vien);
    border-radius: 999px;
}
body.qi-kt-mb .title-mobile-menu ul::-webkit-scrollbar { display: none; }
body.qi-kt-mb .title-mobile-menu li { flex: 1 0 auto; margin: 0 !important; }
body.qi-kt-mb .title-mobile-menu li a {
    width: 100%;
    justify-content: center;
    padding: 9px 12px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--kt-chu-phu);
}
body.qi-kt-mb .title-mobile-menu li a.active { background: var(--kt-chinh); color: #fff; }
body.qi-kt-mb .title-mobile-menu li a.active::after { display: none; }

/* ảnh trang chủ: khung vàng bo góc */
body.qi-kt-mb .mobile-container-item { padding: 0 16px !important; margin-top: 18px !important; }
body.qi-kt-mb .item-image-mob { margin-bottom: 18px !important; }
body.qi-kt-mb .outline-items-image { display: none; }
body.qi-kt-mb .mob-image-1 {
    padding: 6px;
    border-radius: 14px;
    background: linear-gradient(135deg, #B9822A 0%, var(--kt-vang-sang) 35%, #E3B654 60%, #F6DF97 85%, #B9822A 100%);
    box-shadow: 0 14px 28px -16px rgba(60, 40, 0, .5);
}
body.qi-kt-mb .mob-image-1 img { display: block; border-radius: 9px; box-shadow: none; background: #1a1a18; }

/* thẻ nội dung trang trong + chân trang */
body.qi-kt-mb .container-text-mobile { border-color: var(--kt-vien); border-radius: 16px; box-shadow: var(--kt-bong); }
body.qi-kt-mb footer { width: 100%; margin: 28px 0 0 !important; }   /* bỏ phần tràn lề của bản máy tính */
body.qi-kt-mb footer .content-footer {
    align-items: center !important;
    padding: 16px 16px !important;
    font-size: 12.5px;
    line-height: 1.5;
}
body.qi-kt-mb footer .l2-left-mobile { z-index: 2; width: 90px; pointer-events: none; }
@media (max-width: 379.98px) {                      /* 360px: 4 mục menu vừa một hàng, khỏi phải vuốt */
    body.qi-kt-mb .title-mobile-menu li a { padding: 9px 8px; font-size: 13px; }
}