/* ==========================================================================
   Banner (.cqb) — MODULE DUNG CHUNG

   [2026-08-20] Bóc khỏi Content/Styles/mobile-v2.css. Banner này chạy ở trang
   chủ, thư viện cây, tạp chí và wiki — nó là một cấu kiện dùng chung, không
   phải một luật của "hệ thiết kế điện thoại", nên nó không có việc gì nằm
   trong file đó. Ghi chú gốc của khối giữ nguyên bên dưới.

   THU TU NAP: file này nạp NGAY SAU mobile-v2.css trong Template/Site.master,
   đúng chỗ khối này vốn đứng (cuối mobile-v2.css). Đổi chỗ là đổi kẻ thắng
   trong những cuộc tranh chấp cùng độ mạnh.
   ========================================================================== */

/* ==========================================================================
   ============  COMPONENT BANNER  (.cqb)  -  DUNG CHUNG MOI TRANG  =========
   --------------------------------------------------------------------------
   Chuyen tu Cqv2/home/home.css sang day ngay 2026-07-22.

   VI SAO CHUYEN:
   Banner nay khong con rieng cua trang chu - trang TAP CHI cung dung, va sau
   nay se con trang khac. De o home.css thi trang tap chi phai nap ca 63KB
   CSS cua trang chu chi de lay mot cai banner.

   PHAN CHIA:
     - O DAY (dung chung): hinh dang, mau, chu, hieu ung cua banner
     - O TUNG TRANG      : VI TRI va KICH THUOC
                           trang chu  -> .wrap-banner-main (home.css)
                           tap chi    -> .mag-banner       (GuestPost.aspx)

   ⚠ Dung viet luat VI TRI vao day. Moi trang dat banner mot cho khac nhau.
   ========================================================================== */
/* NGOAI LE: BANNER TAI TRO giu phong RIENG.
   Moi nha tai tro co nhan dien thuong hieu rieng nen KHONG ep vao phong chung
   cua site. Dung selector co #id (do uu tien 1-0-0) de thang duoc luat ep
   phong o tren - neu chi dung .cqb thi thua diem, khong an. */
#cqBanner,
#cqBanner *:not(i) {
    font-family: 'Montserrat', sans-serif !important;
}


/* Rieng chu "tra la" dung Muli cho mem, dung nhu thiet ke ban dau */
#cqBanner .cqb--leaf .cqb__t1 {
    font-family: 'Montserrat', sans-serif !important;
}

/* ==========================================================================
   BANNER TAI TRO (HTML/CSS)  -  AP DUNG TREN MOI MAN HINH
   --------------------------------------------------------------------------
   Thay cho banner anh cu (lightSlider). Chu la HTML nam tren lop nen,
   KHONG nuong vao anh -> khong bao gio bi cat, luon sac net.
   Nen hien la MAU THUAN. Muon dung anh: them vao .cqb__bg
       background-image:url(...); background-size:cover; background-position:center;
   Markup nam trong V2Home.aspx, phan chay vong nam trong khoi $(function(){...}).
   ========================================================================== */
.cqb {
    position: relative;
    height: 300px;
    overflow: hidden;
    border-radius: 0;
    isolation: isolate;
}

.cqb__slide {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .7s ease, visibility .7s;
}

.cqb__slide.is-on {
    opacity: 1;
    visibility: visible;
}

.cqb__bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
}


/* Hoa van cham mo troi cham -> tao chieu sau ma nhe tenh (0 KB) */
.cqb__veil {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    background-image: radial-gradient(rgba(255, 255, 255, .10) 1px, transparent 1px);
    background-size: 18px 18px;
    opacity: .6;
}

.cqb__slide.is-on .cqb__veil {
    animation: cqbDrift 26s linear infinite;
}


/* Quang sang tho nhe */
.cqb__glow {
    position: absolute;
    top: -25%;
    right: -10%;
    z-index: 1;
    width: 60%;
    aspect-ratio: 1;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .5;
}

.cqb__slide.is-on .cqb__glow {
    animation: cqbBreathe 9s ease-in-out infinite;
}

.cqb__body {
    display: flex;
    position: relative;
    z-index: 2;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    /* Le trong ROI RONG de chu khong bi sat mep man hinh.
       Banner tren may tinh la full-bleed (rong 100vw) nen can le lon. */
    padding: 0 clamp(24px, 6vw, 110px);
}

.cqb__body--right {
    align-items: flex-end;
    text-align: right;
}


/* Tung dong chu bay len lan luot */
.cqb-up {
    opacity: 0;
    transform: translateY(14px);
}

.cqb__slide.is-on .cqb-up {
    animation: cqbUp .7s cubic-bezier(.2, .7, .3, 1) forwards;
}

.cqb__slide.is-on .cqb-d1 { animation-delay: .10s; }

.cqb__slide.is-on .cqb-d2 { animation-delay: .22s; }

.cqb__slide.is-on .cqb-d3 { animation-delay: .34s; }

.cqb__slide.is-on .cqb-d4 { animation-delay: .46s; }


/* Nhan "Duoc tai tro" */
.cqb__ad {
    display: inline-flex;
    align-items: center;
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 4;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(15, 25, 35, .42);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: rgba(255, 255, 255, .95);
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
}

.cqb__ad--dark {
    background: rgba(15, 25, 35, .14);
    color: rgba(20, 33, 46, .75);
}


/* Nut hanh dong */
.cqb__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 11px 20px;
    border-radius: 999px;
    background: var(--cq-surface);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .16);
    color: var(--cq-text);
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease;
}

.cqb__cta:hover,
.cqb__cta:focus {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
    color: var(--cq-text);
    text-decoration: none;
}

.cqb__cta i {
    font-style: normal;
    transition: transform .18s ease;
}

.cqb__cta:hover i {
    transform: translateX(3px);
}

.cqb__cta--ink {
    background: var(--cq-dark);
    color: #ffffff;
}

.cqb__cta--ink:hover,
.cqb__cta--ink:focus {
    color: #ffffff;
}


/* Dieu khien: cham tron, thanh tien trinh, mui ten */
.cqb__dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    position: absolute;
    right: 0;
    bottom: 12px;
    left: 0;
    z-index: 4;
}


/* Vien mo quanh cham -> doc duoc tren CA nen sang (SGL vang) lan nen toi.
   KHONG dat luat rieng theo mau banner: cham nam ngoai slide nen khong biet
   slide nao dang bat, se bi sai mau. */
.cqb__dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .55);
    box-shadow: 0 0 0 1px rgba(20, 33, 46, .14);
    cursor: pointer;
    transition: width .25s ease, background .25s ease;
}

.cqb__dot.is-on {
    width: 22px;
    border-radius: 999px;
    background: var(--cq-surface);
}

.cqb__bar {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 4;
    width: 100%;
    height: 2px;
    background: rgba(255, 255, 255, .2);
}

.cqb__bar i {
    display: block;
    width: 0;
    height: 100%;
    background: rgba(255, 255, 255, .9);
}

.cqb.is-playing .cqb__bar i {
    animation: cqbBar 6s linear forwards;
}

.cqb__nav {
    position: absolute;
    top: 50%;
    z-index: 4;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(15, 25, 35, .32);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #ffffff;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity .2s ease;
}

.cqb:hover .cqb__nav {
    opacity: 1;
}

.cqb__nav--prev { left: 10px; }

.cqb__nav--next { right: 10px; }


/* --- 1. TRA LA (xanh la) --- */
.cqb--leaf .cqb__bg { background: linear-gradient(135deg, var(--cq-green) 0%, var(--cq-green) 100%); }

.cqb--leaf .cqb__glow { background: var(--cq-green); }


/* --- 2. CONG DONG (xanh ngoc thuong hieu) --- */
.cqb--teal .cqb__bg { background: linear-gradient(135deg, var(--cq-green) 0%, var(--cq-green) 100%); }

.cqb--teal .cqb__glow { background: var(--cq-green); }


/* --- CAM (cam ruc - Co van AI) --- */
.cqb--cam .cqb__bg { background: linear-gradient(135deg, #ff8f3d 0%, #e8590c 100%); }

.cqb--cam .cqb__glow { background: #ffbd85; }


/* --- 3. SGL (vang thuong hieu, chu dam mau) --- */
.cqb--sgl .cqb__bg { background: linear-gradient(135deg, #f5c518 0%, #e0ac00 100%); }

.cqb--sgl .cqb__glow { background: #fff08a; }

.cqb--sgl .cqb__veil {
    background-image: radial-gradient(rgba(20, 33, 46, .10) 1px, transparent 1px);
    opacity: .45;
}



/* --- Kieu chu dung chung --- */
.cqb__t1 {
    margin: 0;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(34px, 6vw, 58px);
    font-weight: 400;
    line-height: 1;
}

.cqb__t2 {
    margin: 8px 0 0;
    color: rgba(255, 255, 255, .92);
    font-size: clamp(13px, 1.7vw, 19px);
    font-style: italic;
}

.cqb__t3 {
    margin: 10px 0 0;
    color: rgba(255, 255, 255, .72);
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
}


/* Cong dong */
.cqb__t1s {
    margin: 0;
    color: rgba(255, 255, 255, .9);
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(10px, 1.4vw, 15px);
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.cqb__t2b {
    margin: 4px 0 0;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(22px, 4vw, 42px);
    font-weight: 800;
    line-height: 1.05;
}

.cqb__t2b em {
    color: #f5b731;
    font-style: normal;
}

.cqb__t3g {
    margin: 4px 0 0;
    color: #f5b731;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(12px, 1.6vw, 17px);
    font-weight: 700;
}


/* SGL - chu dam mau tren nen vang */
.cqb--sgl .cqb__t1 {
    color: var(--cq-text);
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(32px, 5.5vw, 56px);
    font-weight: 300;
    letter-spacing: .08em;
}

.cqb__t2s {
    margin: 7px 0 0;
    color: rgba(42, 34, 5, .72);
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(9px, 1.2vw, 13px);
    font-weight: 600;
    letter-spacing: .34em;
    text-transform: uppercase;
}

.cqb--sgl .cqb__t3 {
    color: rgba(42, 34, 5, .6);
    font-weight: 600;
}

@media (max-width: 1279px) {
    /* Chua cho nhan "Duoc tai tro" (goc tren trai) va hang cham (duoi)
       de chu KHONG bi de len. Banner mobile thap nen rat de dinh nhau. */
    .cqb__body {
        padding-top: 34px;
        padding-bottom: 24px;
    }
    .cqb__ad {
        top: 10px;
        left: 10px;
    }

    /* Khung mobile chi cao 170px -> phai cat bot cho vua, neu khong NUT se
       de len hang cham o day. An dong dia chi web (da co nut roi, thua). */
    .cqb__t3 {
        display: none;
    }
    .cqb__t1 {
        font-size: 30px;
    }
    .cqb--sgl .cqb__t1 {
        font-size: 30px;
    }
    .cqb__t2b {
        font-size: 21px;
    }
    .cqb__t2,
    .cqb__t2s {
        margin-top: 5px;
    }
    .cqb__cta {
        margin-top: 10px;
        padding: 9px 15px;
        font-size: 12px;
    }

    /* Khung mobile thap -> khong du cho ca NUT lan HANG CHAM o day.
       Chuyen cham len GOC TREN PHAI (doi dien nhan "Duoc tai tro" ben trai)
       de phan day danh tron cho nut bam. */
    .cqb__dots {
        top: 13px;
        right: 12px;
        bottom: auto;
        left: auto;
        justify-content: flex-end;
    }
    .cqb__body {
        padding-bottom: 14px;
    }
}

/* [2026-08-17] Menu tai khoan (dropdown): icon + chu CUNG HANG.
   cq-icons chen svg vao cuoi the <a> -> block layout day icon rot xuong duoi chu.
   Ep flex + keo icon (svg/glyph) len dau hang. */
@media (max-width: 767px) {
    .profile-menu ul li > a,
    .profile-menu ul li > .Button {
        display: flex !important;
        align-items: center;
        gap: 10px;
    }
    .profile-menu ul li > a > svg.cq-ic,
    .profile-menu ul li > a > .cq-ic,
    .profile-menu ul li > .Button svg.cq-ic {
        order: -1;
        flex: 0 0 auto;
    }
}

/* [2026-08-20] Bốn nhịp chuyển động của banner. Khi bóc module lần đầu tôi cắt
   theo tiêu đề khối nên bỏ sót chúng — chúng nằm PHÍA TRÊN khối banner trong
   file cũ, cạnh phần đăng nhập. Banner vẫn chạy đúng vì mobile-v2.css vẫn được
   nạp, nên phép đo không hé ra gì; nhưng module mà thiếu nhịp của chính nó thì
   chưa phải một module. Cắt theo tiêu đề, không theo cái tên, là cách bỏ sót. */
@keyframes cqbDrift {
    to { background-position: 180px 90px; }
}

@keyframes cqbBreathe {
    0%, 100% { transform: scale(1); opacity: .42; }
    50% { transform: scale(1.18); opacity: .62; }
}

@keyframes cqbUp {
    to { opacity: 1; transform: none; }
}

@keyframes cqbBar {
    to { width: 100%; }
}

/* --- 5. VANG + XANH THAM (banner Tap chi) ---
   [2026-08-20] Chuyển từ Content/Magazine/Magazine.css sang đây. Hai bộ màu
   này là màu CỦA BANNER, viết đúng theo lối của bốn bộ ở trên; chúng nằm nhờ
   bên tạp chí chỉ vì tạp chí là nơi đầu tiên cần tới. Khi banner còn nằm lẫn
   trong mobile-v2.css thì không ai thấy chuyện đó là lạ — có chủ sở hữu rõ
   ràng rồi thì con bot gác module chỉ ra ngay: một cấu kiện được tô vẽ từ hai
   file thì sửa file thật lại không thấy gì đổi. */
/* --- Them 2 mau rieng cho banner Tap chi (giong cach cqb--sgl/leaf/teal) --- */
.cqb--gold .cqb__bg {
    background: linear-gradient(135deg, #f5c518 0%, #e0ac00 100%);
}

.cqb--gold .cqb__glow {
    background: #fff08a;
}

.cqb--gold .cqb__veil {
    background-image: radial-gradient(rgba(20, 33, 46, .10) 1px, transparent 1px);
    opacity: .45;
}

.cqb--gold .cqb__t1 {
    color: #2a2205;
}

.cqb--gold .cqb__t3 {
    color: rgba(42, 34, 5, .6);
    font-weight: 600;
}

.cqb--navy .cqb__bg {
    background: linear-gradient(135deg, #1b2a38 0%, #33556b 100%);
}

.cqb--navy .cqb__glow {
    background: #5f87a3;
}