/* ==========================================================================
   Dai "Tu khoa HOT" tren trang chu (PC + mobile).

   File RIENG chu khong nhet vao style.css: style.css di qua Cloudflare voi
   max-age 12 tieng, nen moi lan sua no la mot lan phai tang ?v= o TAT CA cho
   tham chieu - quen mot cho la nguoi dung nhan ban cu ma khong ai biet. File
   moi thi chua tung co ban cache nao, khong dinh lop loi do.

   Mau lay tu bien cua theme.css khi co, kem gia tri du phong cho truong hop
   file nay duoc nap truoc (base.html nap theme.css SAU block css cua trang).
   ========================================================================== */

.hot-kw {
    --hkw-bg:        #f6f7f9;
    --hkw-bg-hover:  #ffe9ee;
    --hkw-border:    #e6e8ec;
    --hkw-text:      #3d4149;
    --hkw-accent:    #fd113a;
    --hkw-top-bg:    #fff1f4;
    --hkw-top-text:  #d40f33;

    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 22px;
    padding: 0;
}

/* Tung the tu khoa. Dung the "a" that chu khong phai the "span" gan onclick
   (viet khong co dau ngoac nhon: tools/tpl-balance.js doc chung nhu the HTML
   that va bao lech neu ai chay no qua ca file CSS nay): day la
   lien ket noi bo toi /tag/{slug} - Google phai theo duoc, va nguoi dung phai
   mo duoc bang chuot giua / tab moi. */
.hot-kw-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    /* Cao toi thieu 34px: day la muc tieu bam. Duoi nguong nay thi tren man
       hinh cam ung nguoi dung bam truot sang the ben canh. */
    min-height: 34px;
    padding: 0 14px;

    border: 1px solid var(--hkw-border);
    border-radius: 999px;
    background: var(--hkw-bg);
    color: var(--hkw-text);

    font-size: 14px;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

.hot-kw-item:hover,
.hot-kw-item:focus-visible {
    background: var(--hkw-bg-hover);
    border-color: var(--hkw-accent);
    color: var(--hkw-accent);
    text-decoration: none;
}

/* Vien ro rang khi di bang ban phim. focus-visible chu khong phai focus, de
   nguoi bam chuot khong thay vien thua. */
.hot-kw-item:focus-visible {
    outline: 2px solid var(--hkw-accent);
    outline-offset: 2px;
}

/* Ba tu khoa dan dau duoc lam noi len - de mat luot qua la thay ngay dau la
   phan dang duoc quan tam nhat, khong phai doc het ca dai. */
.hot-kw-item.is-top {
    background: var(--hkw-top-bg);
    border-color: transparent;
    color: var(--hkw-top-text);
    font-weight: 700;
}

.hot-kw-item.is-top:hover,
.hot-kw-item.is-top:focus-visible {
    background: var(--hkw-accent);
    color: #fff;
}

/* So thu hang cua ba muc dau. aria-hidden o HTML vi no la trang tri - noi
   dung that da nam trong ten the loai. */
.hot-kw-rank {
    font-size: 12px;
    font-weight: 700;
    opacity: .75;
}

/* --------------------------------------------------------------- MOBILE */

/* Tren dien thoai dai nay cuon NGANG mot hang thay vi xuong dong nhieu hang:
   xuong dong thi 20 tu khoa an het phan noi dung ben duoi khoi man hinh dau
   tien. Cuon ngang giu chieu cao co dinh va van cham toi duoc tat ca. */
.hot-kw.hot-kw-scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    margin: 0 0 14px;
    padding: 2px 12px 8px;

    /* An thanh cuon nhung van cuon duoc - thanh cuon ngang tren mobile chi
       chiem cho chu khong ai keo no. */
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}

.hot-kw.hot-kw-scroll::-webkit-scrollbar {
    display: none;
}

.hot-kw.hot-kw-scroll .hot-kw-item {
    flex: 0 0 auto;
    min-height: 32px;
    font-size: 13px;
}

/* ----------------------------------------------------------- GIAO DIEN TOI */

/* Bam theo theme cua SITE (html[data-theme]) chu khong theo he dieu hanh:
   theme.css da chon huong do cho toan bo trang, di nguoc lai se ra dai tu
   khoa sang giua mot trang toi. */
html[data-theme="dark"] .hot-kw {
    --hkw-bg:        #22242b;
    --hkw-bg-hover:  #2e313a;
    --hkw-border:    #32353f;
    --hkw-text:      #c9ccd2;
    --hkw-accent:    #ff5f8f;
    --hkw-top-bg:    #3a2029;
    --hkw-top-text:  #ff8fb0;
}

html[data-theme="dark"] .hot-kw-item.is-top:hover,
html[data-theme="dark"] .hot-kw-item.is-top:focus-visible {
    background: var(--hkw-accent);
    color: #17181c;
}

/* Nguoi dat he dieu hanh giam chuyen dong thi bo hieu ung doi mau. */
@media (prefers-reduced-motion: reduce) {
    .hot-kw-item {
        transition: none;
    }
}