/* ==========================================================================
   InstantsButton - design system web
   ---------------------------------------------------------------------------
   Giữ nguyên ADN của app Flutter (brand đỏ #F5232C, nút pad tròn 3D dùng SVG
   export sẵn, bo góc lớn) nhưng dựng lại phần "vỏ" của trang theo cách các
   trang soundboard/nhạc hiện đại đang làm:

     - Thanh đầu trang kính mờ + hàng điều hướng dạng viên có biểu tượng riêng
     - Mỗi nút sound nằm trong MỘT THẺ, không còn là hình tròn trôi trên nền
     - Hero có nền loang nhiều lớp + ô tìm kiếm lớn (điểm vào chính của trang)
     - Thanh phát mini dính đáy màn hình khi đang nghe
     - Sáng/tối chọn tay được ([data-theme]) chứ không chỉ theo hệ điều hành

   QUY ƯỚC THEME: token sáng nằm ở :root. Bản tối được lặp lại HAI lần - một
   lần trong @media cho người dùng để "theo hệ thống", một lần ở
   :root[data-theme="dark"] cho người bấm nút đổi. CSS thuần không gộp được
   media query vào danh sách selector nên đây là cách ngắn nhất còn đúng.
   ========================================================================== */

/* --------------------------------- Font ----------------------------------- */
/* Chỉ dùng font hệ điều hành: không @font-face, không tải file nào. Máy nào cũng
   vẽ chữ ngay từ khung hình đầu tiên - không còn khoảng nháy chữ (FOUT) do
   font-display: swap, không tốn request, và chữ trông "bản địa" đúng theo nền
   tảng người đọc đang dùng.

   Trọng số chỉ có HAI mức trong toàn bộ file: 400 cho chữ thường, 500 cho chỗ
   cần đậm. Font hệ thống không phải font variable, nặng hơn nữa (600+) là trình
   duyệt tự bôi đậm giả (synthetic bold) - nét dày bệt, mỗi hệ một kiểu. */

/* ------------------------------ Token: sáng ------------------------------- */

:root {
    --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
        "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

    --bg: #faf8f7;
    --bg-tint-a: rgb(245 35 44 / 7%);      /* đốm loang nền trang */
    --bg-tint-b: rgb(255 107 53 / 6%);
    --surface: #ffffff;
    --surface-2: #f4f1f0;                  /* ô lõm: input, thẻ phụ */
    --surface-glass: rgb(255 255 255 / 78%);
    --text: #1a1616;
    --text-muted: #6b6364;
    --text-faint: #948c8d;
    --border: #ece7e6;
    --accent: #f5232c;
    --accent-strong: #c0111b;
    --brand-2: #ff6b35;
    --pink: #ff4d8d;

    --radius: 22px;
    --radius-lg: 30px;
    --radius-btn: 14px;
    --radius-sm: 12px;

    /* Bóng nhiều lớp: một lớp sát để tách khối, một lớp xa để tạo độ nổi.
       Bóng một lớp là thứ làm giao diện cũ trông "phẳng và rẻ". */
    --shadow-sm: 0 1px 2px rgb(58 33 36 / 6%), 0 2px 6px rgb(58 33 36 / 4%);
    --shadow: 0 2px 4px rgb(58 33 36 / 5%), 0 8px 22px rgb(58 33 36 / 7%);
    --shadow-lifted: 0 4px 8px rgb(58 33 36 / 6%), 0 18px 38px rgb(58 33 36 / 13%);
    --card-border: rgb(0 0 0 / 7%);

    /* 5 màu nhận dạng theo tab của app - dùng cho ô icon đầu mỗi mục */
    --a-trending: #f5232c;
    --a-editor: #e08700;
    --a-new: #0091a8;
    --a-hot: #e04a18;
    --a-fav: #d81b60;

    --tone: #1e90ff;                       /* màu của nút sound đang xét */

    /* Ảnh nền nút pad, hoisted lên :root để đổi theme chỉ phải sửa ở đây */
    --pad-red: url("/img/pad/light/red.svg");
    --pad-red-p: url("/img/pad/light/red_pressed.svg");
    --pad-orange: url("/img/pad/light/orange.svg");
    --pad-orange-p: url("/img/pad/light/orange_pressed.svg");
    --pad-yellow: url("/img/pad/light/yellow.svg");
    --pad-yellow-p: url("/img/pad/light/yellow_pressed.svg");
    --pad-lgray: url("/img/pad/light/light-gray.svg");
    --pad-lgray-p: url("/img/pad/light/light-gray_pressed.svg");
    --pad-green: url("/img/pad/light/green.svg");
    --pad-green-p: url("/img/pad/light/green_pressed.svg");
    --pad-dgray: url("/img/pad/light/dark-gray.svg");
    --pad-dgray-p: url("/img/pad/light/dark-gray_pressed.svg");
    --pad-blue: url("/img/pad/light/blue.svg");
    --pad-blue-p: url("/img/pad/light/blue_pressed.svg");
    --pad-indigo: url("/img/pad/light/indigo.svg");
    --pad-indigo-p: url("/img/pad/light/indigo_pressed.svg");
    --pad-purple: url("/img/pad/light/purple.svg");
    --pad-purple-p: url("/img/pad/light/purple_pressed.svg");
    --pad-pink: url("/img/pad/light/pink.svg");
    --pad-pink-p: url("/img/pad/light/pink_pressed.svg");
}

/* ------------------------------- Token: tối ------------------------------- */

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #100e0f;
        --bg-tint-a: rgb(245 35 44 / 13%);
        --bg-tint-b: rgb(255 107 53 / 9%);
        --surface: #1c1819;
        --surface-2: #262122;
        --surface-glass: rgb(28 24 25 / 80%);
        --text: #f2efef;
        --text-muted: #b0a9aa;
        --text-faint: #837b7c;
        --border: #322c2d;
        --accent: #ff5a63;
        --accent-strong: #ff8b8b;
        --brand-2: #ff8a50;
        --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%), 0 2px 6px rgb(0 0 0 / 24%);
        --shadow: 0 2px 4px rgb(0 0 0 / 40%), 0 8px 22px rgb(0 0 0 / 34%);
        --shadow-lifted: 0 4px 8px rgb(0 0 0 / 44%), 0 18px 38px rgb(0 0 0 / 50%);
        --card-border: rgb(255 255 255 / 10%);
        --a-trending: #ff6b6b;
        --a-editor: #ffc85c;
        --a-new: #5fe3fa;
        --a-hot: #ff9e7a;
        --a-fav: #ff8fb4;

        --pad-red: url("/img/pad/dark/red.svg");
        --pad-red-p: url("/img/pad/dark/red_pressed.svg");
        --pad-orange: url("/img/pad/dark/orange.svg");
        --pad-orange-p: url("/img/pad/dark/orange_pressed.svg");
        --pad-yellow: url("/img/pad/dark/yellow.svg");
        --pad-yellow-p: url("/img/pad/dark/yellow_pressed.svg");
        --pad-lgray: url("/img/pad/dark/light-gray.svg");
        --pad-lgray-p: url("/img/pad/dark/light-gray_pressed.svg");
        --pad-green: url("/img/pad/dark/green.svg");
        --pad-green-p: url("/img/pad/dark/green_pressed.svg");
        --pad-dgray: url("/img/pad/dark/dark-gray.svg");
        --pad-dgray-p: url("/img/pad/dark/dark-gray_pressed.svg");
        --pad-blue: url("/img/pad/dark/blue.svg");
        --pad-blue-p: url("/img/pad/dark/blue_pressed.svg");
        --pad-indigo: url("/img/pad/dark/indigo.svg");
        --pad-indigo-p: url("/img/pad/dark/indigo_pressed.svg");
        --pad-purple: url("/img/pad/dark/purple.svg");
        --pad-purple-p: url("/img/pad/dark/purple_pressed.svg");
        --pad-pink: url("/img/pad/dark/pink.svg");
        --pad-pink-p: url("/img/pad/dark/pink_pressed.svg");
    }
}

:root[data-theme="dark"] {
    --bg: #100e0f;
    --bg-tint-a: rgb(245 35 44 / 13%);
    --bg-tint-b: rgb(255 107 53 / 9%);
    --surface: #1c1819;
    --surface-2: #262122;
    --surface-glass: rgb(28 24 25 / 80%);
    --text: #f2efef;
    --text-muted: #b0a9aa;
    --text-faint: #837b7c;
    --border: #322c2d;
    --accent: #ff5a63;
    --accent-strong: #ff8b8b;
    --brand-2: #ff8a50;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%), 0 2px 6px rgb(0 0 0 / 24%);
    --shadow: 0 2px 4px rgb(0 0 0 / 40%), 0 8px 22px rgb(0 0 0 / 34%);
    --shadow-lifted: 0 4px 8px rgb(0 0 0 / 44%), 0 18px 38px rgb(0 0 0 / 50%);
    --card-border: rgb(255 255 255 / 10%);
    --a-trending: #ff6b6b;
    --a-editor: #ffc85c;
    --a-new: #5fe3fa;
    --a-hot: #ff9e7a;
    --a-fav: #ff8fb4;

    --pad-red: url("/img/pad/dark/red.svg");
    --pad-red-p: url("/img/pad/dark/red_pressed.svg");
    --pad-orange: url("/img/pad/dark/orange.svg");
    --pad-orange-p: url("/img/pad/dark/orange_pressed.svg");
    --pad-yellow: url("/img/pad/dark/yellow.svg");
    --pad-yellow-p: url("/img/pad/dark/yellow_pressed.svg");
    --pad-lgray: url("/img/pad/dark/light-gray.svg");
    --pad-lgray-p: url("/img/pad/dark/light-gray_pressed.svg");
    --pad-green: url("/img/pad/dark/green.svg");
    --pad-green-p: url("/img/pad/dark/green_pressed.svg");
    --pad-dgray: url("/img/pad/dark/dark-gray.svg");
    --pad-dgray-p: url("/img/pad/dark/dark-gray_pressed.svg");
    --pad-blue: url("/img/pad/dark/blue.svg");
    --pad-blue-p: url("/img/pad/dark/blue_pressed.svg");
    --pad-indigo: url("/img/pad/dark/indigo.svg");
    --pad-indigo-p: url("/img/pad/dark/indigo_pressed.svg");
    --pad-purple: url("/img/pad/dark/purple.svg");
    --pad-purple-p: url("/img/pad/dark/purple_pressed.svg");
    --pad-pink: url("/img/pad/dark/pink.svg");
    --pad-pink-p: url("/img/pad/dark/pink_pressed.svg");
}

/* --------------------------------- Nền tảng ------------------------------- */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

/* Hai đốm màu thương hiệu loang rất nhạt ở đỉnh trang: nền không còn là một
   mảng xám phẳng, nhưng cũng không cướp sự chú ý của nội dung. */
body {
    font-family: var(--font-sans);
    background-color: var(--bg);
    background-image:
        radial-gradient(58rem 32rem at 12% -8%, var(--bg-tint-a), transparent 60%),
        radial-gradient(48rem 28rem at 96% 2%, var(--bg-tint-b), transparent 62%);
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: var(--text);
    font-size: 15.5px;
    font-weight: 400;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Trình duyệt mặc định cho <b>/<strong> weight 700 - kéo về 500 để chữ đậm trong
   nội dung khớp với phần còn lại của giao diện. */
b, strong {
    font-weight: 500;
}

h1 {
    font-size: clamp(26px, 3.4vw, 34px);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.14;
    /* Tên sound thường là một chuỗi hoa dài liền mạch - phải cho ngắt giữa từ,
       nếu không tiêu đề trang chi tiết sẽ chọc thủng mép màn hình. */
    overflow-wrap: anywhere;
}

h2 {
    font-size: 21px;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.22;
}

h3 {
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1.26;
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Chrome/WebKit trên di động phủ một lớp xanh mờ lên BORDER-BOX khi chạm. Hộp
   đó vuông, không theo border-radius, nên pad tròn bị lòi ra một ô vuông. Bỏ
   đi được vì mọi thứ bấm được ở đây đều đã có phản hồi :active riêng. */
a, button, summary, label, [role="button"] {
    -webkit-tap-highlight-color: transparent;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 6px;
}

::selection {
    background: color-mix(in srgb, var(--accent) 26%, transparent);
}

img {
    max-width: 100%;
}

.container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
}

.gradient-text {
    background: linear-gradient(100deg, var(--accent), var(--brand-2) 62%, var(--pink));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Hàng cuộn ngang không hiện thanh cuộn (nav, chip) */
.scroll-x {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.scroll-x::-webkit-scrollbar {
    display: none;
}

/* --------------------------------- Header --------------------------------- */
/* Hai tầng: tầng trên là nhận diện + tìm kiếm + tài khoản, tầng dưới là điều
   hướng. Nhét cả 9 thứ vào MỘT hàng như bản cũ là lý do header trông rối. */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--surface-glass);
    backdrop-filter: blur(18px) saturate(170%);
    -webkit-backdrop-filter: blur(18px) saturate(170%);
    border-bottom: 1px solid var(--border);
}

.header-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 12px;
    padding-bottom: 12px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.22rem;
    color: var(--text);
    font-weight: 500;
    letter-spacing: -0.03em;
    flex-shrink: 0;
}

.logo:hover {
    text-decoration: none;
}

.logo-text b {
    background: linear-gradient(100deg, var(--accent), var(--brand-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Logo = đúng icon pad đỏ của app, thêm quầng sáng nhẹ cho nổi khỏi nền kính */
.logo-mark {
    width: 30px;
    height: 30px;
    background: url("/img/logo.png") center / contain no-repeat;
    filter: drop-shadow(0 3px 8px color-mix(in srgb, var(--accent) 35%, transparent));
    flex-shrink: 0;
}

/* ------------------------------- Tìm kiếm --------------------------------- */

.search-form {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 150px;
    max-width: 520px;
    background: var(--surface-2);
    border: 1.5px solid transparent;
    border-radius: 999px;
    transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.search-form:focus-within {
    background: var(--surface);
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent);
}

.search-form input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    padding: 9px 6px 9px 18px;
    font: inherit;
    font-size: 0.94rem;
    outline: none;
}

.search-form input::placeholder {
    color: var(--text-faint);
}

.search-form button {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-inline-end: 4px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease;
}

.search-form button:hover {
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
}

/* --------------------- Gợi ý tìm kiếm (autocomplete) ---------------------- */
/* Dropdown do JS dựng, KHÔNG có trong template: không chạy JS thì ô tìm kiếm vẫn
   là form GET bình thường, không để lại cái vỏ rỗng. Dáng mượn nguyên .lang-list
   cho hai dropdown của header trông cùng một họ. */

.search-form {
    position: relative;
}

.suggest-list {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline: 0;
    z-index: 60;
    max-height: 58vh;
    overflow-y: auto;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lifted);
    animation: pop-in 0.16s ease;
}

/* Tên sound có thể rất dài; cắt bằng ellipsis chứ không cho xuống dòng để mọi
   dòng cao bằng nhau - phím mũi tên chạy đều, không giật. */
.suggest-item {
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 0.92rem;
    line-height: 1.45;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.suggest-item:hover,
.suggest-item.is-active {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
}

/* ------------------------- Nút tròn phụ trên header ----------------------- */
/* Đổi theme, mở menu ngôn ngữ: cùng một khuôn để header có nhịp đều. */

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface);
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.16s ease, border-color 0.16s ease, transform 0.12s ease;
}

.icon-btn:hover {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
    text-decoration: none;
}

.icon-btn:active {
    transform: scale(0.92);
}

/* Mặt trời khi đang sáng, mặt trăng khi đang tối - JS chỉ cần đổi data-theme */
.theme-toggle .icon-moon {
    display: none;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: none; }
    :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: block; }
}

:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: none; }

/* ------------------------- Hàng điều hướng (tầng 2) ----------------------- */

.nav-rail {
    border-top: 1px solid var(--border);
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 7px 20px;
    max-width: 1240px;
    margin: 0 auto;
}

/* Nhóm nút này chỉ có nghĩa từ mốc 720px trở xuống (xem @media ở cuối file): trên
   đó hàng điều hướng hiện sẵn nên không cần nút mở, còn ô tìm kiếm thì luôn trong tầm
   mắt. Ẩn luôn cả checkbox chính là thứ khiến trạng thái :checked không đụng gì tới
   giao diện máy tính. */
.nav-toggle,
.rail-check,
.nav-search,
.nav-extra {
    display: none;
}

/* Trên màn rộng lớp bọc này không tồn tại: hàng điều hướng nằm thẳng trong
   .nav-rail y như trước. Xuống điện thoại nó mới hoá thành cái hộp thả xuống. */
.nav-panel {
    display: contents;
}

/* Viên điều hướng: bình thường trong suốt, hover thì nhuộm ĐÚNG màu của mục
   đó (đỏ cho trending, xanh cho mới...), trang đang mở thì tô đặc.
   Màu riêng cho từng mục là thứ giúp mắt nhớ vị trí mà không phải đọc chữ. */
.nav-pill {
    --nav: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    padding: 7px 13px;
    border-radius: 999px;
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.9rem;
    letter-spacing: -0.01em;
    white-space: nowrap;
    transition: color 0.16s ease, background 0.16s ease;
}

.nav-pill svg {
    flex-shrink: 0;
    opacity: 0.85;
}

.nav-pill:hover {
    color: var(--nav);
    background: color-mix(in srgb, var(--nav) 12%, transparent);
    text-decoration: none;
}

.nav-pill.is-active {
    color: #fff;
    background: linear-gradient(140deg, var(--nav), color-mix(in srgb, var(--nav) 78%, #000));
    box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--nav) 65%, transparent);
}

.nav-pill.is-active svg {
    opacity: 1;
}

.n-trending { --nav: var(--a-trending); }
.n-new      { --nav: var(--a-new); }
.n-hot      { --nav: var(--a-hot); }
.n-editor   { --nav: var(--a-editor); }
.n-topic    { --nav: #7c5cff; }
.n-fav      { --nav: var(--a-fav); }

/* Đẩy Yêu thích về cuối hàng: nó là mục cá nhân, không cùng nhóm với 4 mục
   khám phá bên trái. */
.nav-pill.n-fav {
    margin-inline-start: auto;
}

.fav-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--a-fav);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 500;
}

/* display của author stylesheet thắng [hidden]{display:none} của trình duyệt,
   nên không có dòng này thì huy hiệu rỗng vẫn hiện thành một chấm hồng. */
.fav-count[hidden] {
    display: none;
}

/* ---------------------------- Chọn ngôn ngữ ------------------------------- */

.lang-menu {
    position: relative;
    flex-shrink: 0;
}

/* Cùng MỘT công tắc #lang-toggle, hai cái nhãn: chip này ở tầng trên cho màn
   rộng, và một dòng trong menu cho điện thoại. Nhãn nào bấm cũng ra cùng danh
   sách, mà danh sách thì chỉ có một bản trong HTML. */
.lang-summary {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    cursor: pointer;
    font-size: 0.86rem;
    font-weight: 500;
    user-select: none;
    transition: border-color 0.16s ease;
}

.lang-summary:hover {
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}

.lang-toggle-check:focus-visible ~ .header-inner .lang-summary {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.lang-toggle-check:checked ~ .header-inner .lang-summary svg {
    transform: rotate(180deg);
}

.lang-summary svg {
    color: var(--text-faint);
    transition: transform 0.18s ease;
}

/* Chip cờ nền TRẮNG ở cả hai theme - cờ có dải trắng sẽ biến mất nếu nền tối */
.flag-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: #fff;
    border: 1px solid rgb(0 0 0 / 10%);
    font-size: 0.86rem;
    line-height: 1;
    flex-shrink: 0;
}

.lang-list {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    inset-inline-end: 0;
    z-index: 60;
    width: 272px;
    max-height: 62vh;
    overflow-y: auto;
    padding: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lifted);
    animation: pop-in 0.16s ease;
}

.lang-toggle-check:checked ~ .header-inner .lang-list {
    display: block;
}

@keyframes pop-in {
    from { opacity: 0; transform: translateY(-6px); }
}

.lang-list-title {
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-faint);
    padding: 6px 8px 10px;
}

.lang-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: var(--radius-sm);
    border: 1.5px solid transparent;
    color: var(--text);
}

.lang-item:hover {
    background: var(--surface-2);
    text-decoration: none;
}

.lang-item.is-active {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
    color: var(--accent);
}

.lang-item-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    flex: 1;
    min-width: 0;
}

.lang-item-text b {
    font-size: 0.9rem;
    font-weight: 500;
}

.lang-item-text small {
    font-size: 0.7rem;
    color: var(--text-faint);
    letter-spacing: 0.04em;
}

.lang-check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: #fff;
    box-shadow: 0 0 14px -2px color-mix(in srgb, var(--accent) 50%, transparent);
    flex-shrink: 0;
}

.lang-item.is-active .lang-check {
    display: flex;
}

/* --------------------- Tài khoản: nút đăng nhập / avatar ------------------ */

.btn-signin {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    height: 38px;
    padding: 0 18px;
    border-radius: 999px;
    background: linear-gradient(100deg, var(--accent), var(--brand-2));
    color: #fff;
    font-size: 0.88rem;
    font-weight: 500;
    box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--accent) 60%, transparent);
    transition: transform 0.12s ease, box-shadow 0.16s ease;
}

.btn-signin:hover {
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 7px 20px -4px color-mix(in srgb, var(--accent) 70%, transparent);
}

.account-menu {
    position: relative;
    flex-shrink: 0;
}

.account-menu > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
}

.account-menu > summary::-webkit-details-marker {
    display: none;
}

.avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
    background: var(--surface-2);
}

.avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    color: var(--accent);
}

.account-card {
    position: absolute;
    top: calc(100% + 10px);
    inset-inline-end: 0;
    z-index: 60;
    width: 240px;
    padding: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lifted);
    animation: pop-in 0.16s ease;
}

.account-name {
    font-weight: 500;
    font-size: 0.94rem;
}

.account-mail {
    color: var(--text-faint);
    font-size: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.account-link,
.account-signout {
    display: block;
    width: 100%;
    text-align: start;
    padding: 9px 10px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
}

.account-link:hover,
.account-signout:hover {
    background: var(--surface-2);
    text-decoration: none;
}

.account-signout {
    color: var(--accent);
}

/* ----------------------------- Category chips ----------------------------- */

/* Hàng chuyên mục: khung ngoài giữ hai nút mũi tên, khung trong mới là phần cuộn. */
.category-strip {
    position: relative;
}

.category-bar {
    display: flex;
    gap: 9px;
    padding-top: 18px;
    padding-bottom: 2px;
    /* Mờ dần ở mép để lộ rõ "hàng này còn cuộn được nữa", thay vì cắt cụt chip giữa
       chừng trông như lỗi tràn. Mặc định mờ cả hai bên - đó cũng là bản dùng khi
       không có JS; có JS thì nó đặt data-fade theo đúng vị trí cuộn ở dưới, để đang
       ở đầu hàng thì chip đầu tiên không bị mờ vô cớ. */
    mask-image: linear-gradient(to right, transparent, #000 42px, #000 calc(100% - 42px), transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 42px, #000 calc(100% - 42px), transparent);
}

/* Hết cuộn cả hai phía (hàng ngắn hơn màn hình): không mờ gì cả. */
[data-fade="none"] .category-bar {
    mask-image: none;
    -webkit-mask-image: none;
}

/* Chỉ còn chỗ cuộn về phía cuối - tức đang đứng ở đầu hàng. */
[data-fade="end"] .category-bar {
    mask-image: linear-gradient(to right, #000 calc(100% - 42px), transparent);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 42px), transparent);
}

[data-fade="start"] .category-bar {
    mask-image: linear-gradient(to left, #000 calc(100% - 42px), transparent);
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 42px), transparent);
}

/* RTL: đầu hàng nằm bên phải nên hai hướng đổi chỗ cho nhau. Trường hợp mờ hai bên
   đối xứng nên không phải viết lại. */
[dir="rtl"] [data-fade="end"] .category-bar {
    mask-image: linear-gradient(to left, #000 calc(100% - 42px), transparent);
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 42px), transparent);
}

[dir="rtl"] [data-fade="start"] .category-bar {
    mask-image: linear-gradient(to right, #000 calc(100% - 42px), transparent);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 42px), transparent);
}

/* Hai nút chỉ hiện khi thật sự còn chỗ để cuộn về phía đó - JS bật tắt thuộc tính
   hidden theo vị trí cuộn (xem main.js). */
.cat-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface);
    color: var(--text-muted);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: color 0.16s ease, border-color 0.16s ease;
}

.cat-arrow:hover {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}

/* display của author stylesheet thắng [hidden]{display:none} của trình duyệt, nên
   không có dòng này thì JS ẩn nút bằng hidden sẽ không ăn - đúng cái bẫy đã dính
   một lần ở .fav-count. */
.cat-arrow[hidden] {
    display: none;
}

.cat-prev {
    inset-inline-start: 0;
}

.cat-next {
    inset-inline-end: 0;
}

/* Mũi tên vẽ theo chiều LTR nên RTL phải lật, nếu không nút "về trước" lại chỉ sang
   phải. */
[dir="rtl"] .cat-arrow svg {
    transform: scaleX(-1);
}

/* Chip nền tint 12%, KHÔNG viền xám. Hover thì đặc + glow.
   Màu xoay vòng qua 6 tông thay vì đỏ hết: một hàng 15 chip cùng màu đỏ đọc
   như một vệt băng dính, xoay màu mới ra chất "confetti" của app. */
.chip {
    --chip: var(--accent);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    background: color-mix(in srgb, var(--chip) 13%, transparent);
    border: 1px solid transparent;
    color: color-mix(in srgb, var(--chip) 82%, var(--text));
    border-radius: 999px;
    padding: 7px 16px;
    font-size: 13.5px;
    letter-spacing: -0.01em;
    white-space: nowrap;
    transition: color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease, transform 0.12s ease;
}

.chip:hover {
    color: #fff;
    background: var(--chip);
    border-color: var(--chip);
    box-shadow: 0 5px 18px -4px color-mix(in srgb, var(--chip) 60%, transparent);
    transform: translateY(-1px);
    text-decoration: none;
}

.chip-sm {
    padding: 4px 12px;
    font-size: 0.8rem;
}

.category-bar .chip:nth-child(6n + 1) { --chip: #f5232c; }
.category-bar .chip:nth-child(6n + 2) { --chip: #ff6b35; }
.category-bar .chip:nth-child(6n + 3) { --chip: #00a8c0; }
.category-bar .chip:nth-child(6n + 4) { --chip: #7c5cff; }
.category-bar .chip:nth-child(6n + 5) { --chip: #14b981; }
.category-bar .chip:nth-child(6n + 6) { --chip: #e0187a; }

/* Màu confetti cho hàng tag ở trang chi tiết */
.chip-c0 { --chip: #f5232c; }
.chip-c1 { --chip: #e0187a; }
.chip-c2 { --chip: #00a8c0; }
.chip-c3 { --chip: #d18700; }
.chip-c4 { --chip: #ff6b35; }
.chip-c5 { --chip: #14b981; }

/* ---------------------------------- Hero ---------------------------------- */
/* Thẻ hero là "cửa vào" của trang chủ: nền loang nhiều lớp, tiêu đề cỡ lớn,
   ô tìm kiếm to (thao tác số 1 của người vào trang soundboard) và một dàn pad
   trang trí bên phải để nói ngay "đây là chỗ bấm ra tiếng". */

.hero {
    position: relative;
    overflow: hidden;
    margin: 22px 0 34px;
    padding: 52px 40px;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(30rem 20rem at 8% 0%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%),
        radial-gradient(26rem 18rem at 78% 108%, color-mix(in srgb, var(--brand-2) 24%, transparent), transparent 68%),
        radial-gradient(22rem 16rem at 52% 12%, color-mix(in srgb, var(--pink) 14%, transparent), transparent 70%),
        var(--surface);
    border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
    box-shadow: var(--shadow);
}

.hero-inner {
    position: relative;
    z-index: 1;
    max-width: 640px;
}

.hero h1 {
    font-size: clamp(30px, 5.2vw, 46px);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1.05;
}

/* Ba tầng chữ trong hero, mỗi tầng một việc: tiêu đề để nhận ra trang, câu chốt
   để hiểu ngay làm gì được, đoạn mô tả để đọc kỹ (và để máy tìm kiếm có cái mà
   đọc). Không tầng nào cùng cỡ chữ với tầng khác - hai đoạn văn bản trần cùng cỡ
   nằm chồng nhau là thứ khiến khối này trông rời rạc ở bản trước. */
.hero p {
    color: var(--text-muted);
    margin-top: 14px;
    font-size: clamp(15px, 1.5vw, 17px);
    max-width: 46ch;
}

/* Câu chốt: to hơn đoạn dưới một bậc rõ rệt, và balance để dòng cuối không rơi
   lại một hai chữ lẻ ngay dưới một tiêu đề lớn. */
.hero .hero-lead {
    max-width: 40ch;
    color: var(--text);
    font-size: clamp(16px, 1.85vw, 19.5px);
    line-height: 1.55;
    text-wrap: balance;
}

.hero .hero-intro {
    position: relative;
    margin-top: 22px;
    padding-top: 20px;
    max-width: 56ch;
    color: var(--text-muted);
    font-size: clamp(14px, 1.35vw, 15.5px);
    line-height: 1.75;
    /* pretty chỉ sửa mấy dòng cuối (không để chữ mồ côi), rẻ hơn balance nhiều -
       balance mà đặt lên đoạn 5-7 dòng thì trình duyệt bỏ qua. */
    text-wrap: pretty;
}

/* Gạch màu ngắn thay cho một đường kẻ ngang hết chiều rộng: đủ để tách khỏi câu
   chốt mà không cắt đôi khối chữ. */
.hero .hero-intro::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 42px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), var(--brand-2));
}

/* Dòng đầu đậm và đậm màu hơn phần còn lại: mắt bắt được câu mở, phần sau vẫn là
   chữ nền. Làm bằng ::first-line nên không phải nhét thẻ <b> vào 18 bản dịch. */
.hero .hero-intro::first-line {
    color: var(--text);
    font-weight: 500;
}

/* Dàn pad trang trí: 5 nút thật (cùng file SVG với nút bấm được) trôi rất chậm.
   aria-hidden vì nó thuần trang trí. */
.hero-art {
    position: absolute;
    inset-inline-end: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 360px;
    height: 300px;
    pointer-events: none;
}

.hero-pad {
    position: absolute;
    border-radius: 50%;
    background: var(--pad) center / contain no-repeat;
    animation: float 7s ease-in-out infinite;
}

.hero-pad:nth-child(1) { width: 122px; height: 122px; top: 18%; left: 8%;  animation-delay: 0s; }
.hero-pad:nth-child(2) { width: 84px;  height: 84px;  top: 2%;   left: 52%; animation-delay: 1.1s; }
.hero-pad:nth-child(3) { width: 96px;  height: 96px;  top: 56%;  left: 44%; animation-delay: 2.2s; }
.hero-pad:nth-child(4) { width: 66px;  height: 66px;  top: 34%;  left: 76%; animation-delay: 3.3s; }
.hero-pad:nth-child(5) { width: 58px;  height: 58px;  top: 78%;  left: 10%; animation-delay: 4.4s; }

/* Hero của bốn trang danh sách: cùng khối với trang chủ, nhỏ hơn một bậc vì ngay
   dưới nó đã là lưới nút - hero to bằng trang chủ sẽ đẩy hàng nút đầu tiên xuống
   dưới màn hình đầu. Đặt Ở ĐÂY chứ không đặt cuối file: các mốc responsive của
   .hero nằm phía sau và phải đè được padding này, mà hai selector cùng độ ưu tiên
   thì cái đứng sau thắng. */
.hero-browse {
    padding: 40px 36px;
}

.hero-browse h1 {
    font-size: clamp(27px, 4.4vw, 40px);
}

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-12px) rotate(3deg); }
}

/* ------------------------------ Section header ---------------------------- */

.home-section {
    margin: 44px 0;
}

.section-header {
    --sec: var(--a-trending);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.section-header h2 {
    display: flex;
    align-items: center;
    gap: 13px;
    font-size: clamp(19px, 2.2vw, 23px);
}

.sec-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    flex-shrink: 0;
    color: #fff;
    background: linear-gradient(140deg, var(--sec), color-mix(in srgb, var(--sec) 78%, #000));
    box-shadow: 0 8px 18px -6px color-mix(in srgb, var(--sec) 75%, transparent);
}

.s-trending { --sec: var(--a-trending); }
.s-new      { --sec: var(--a-new); }
.s-hot      { --sec: var(--a-hot); }
.s-editor   { --sec: var(--a-editor); }
.s-fav      { --sec: var(--a-fav); }
.s-star     { --sec: #7c5cff; }

/* "Xem tất cả" thành viên bấm được, mũi tên trượt khi rê chuột */
.view-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 7px 15px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    font-size: 13.5px;
    font-weight: 500;
    white-space: nowrap;
    transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.view-all::after {
    content: "→";
    transition: transform 0.18s ease;
}

.view-all:hover {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
    text-decoration: none;
}

.view-all:hover::after {
    transform: translateX(3px);
}

/* Mũi tên phải quay ngược ở giao diện phải-sang-trái (Ả Rập) */
[dir="rtl"] .view-all::after {
    content: "←";
}

[dir="rtl"] .view-all:hover::after {
    transform: translateX(-3px);
}

/* ------------------------------- Sound grid ------------------------------- */
/* Đúng như app: pad dàn hàng thẳng trên nền, KHÔNG thẻ - không viền, không nền,
   không bóng. Nút mới là thứ người ta nhìn; bọc mỗi nút vào một cái hộp chỉ làm
   loãng chúng đi. Phản hồi khi rê chuột dồn hết lên chính cái pad (phóng nhẹ +
   quầng sáng theo màu nút) chứ không lên một cái khung quanh nó.

   SỐ CỘT ĐẶT CỨNG, KHÔNG DÙNG auto-fill. auto-fill cho ra số cột tuỳ bề rộng
   (8, 6, 5, 3...) trong khi số nút mỗi mục là cố định, nên hễ số cột không chia
   hết số nút là hàng cuối hụt - 8 nút rồi rớt xuống 4 nút lẻ loi. Bộ 8/6/4/3
   đều là ƯỚC CỦA 24, và mọi chỗ dùng lưới này đều trả về bội của 24 (mục trang
   chủ 24, sound liên quan 24, trang duyệt 48) nên hàng cuối luôn đầy.

   Mốc breakpoint đặt đúng chỗ ô lưới co lại bằng cỡ pad tối đa (128px): vượt mốc
   thì số cột đổi nhưng CỠ PAD gần như không nhảy, chỉ khoảng cách giãn ra. */

.sound-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 26px 14px;
}

/* --- Lưới xem trước: tự cắt hàng cuối nếu nó không đầy --------------------- */
/* Khoá số cột vẫn chưa đủ, vì có mục DB trả về thiếu (Editor's Choice chỉ 20 nút
   chứ không phải 24). Mẹo chọn: phần tử vừa MỞ ĐẦU một hàng (:nth-child(Cn+1))
   vừa nằm trong nhóm C-1 phần tử cuối (:nth-last-child(-n+C-1)) thì chắc chắn
   nó đang mở một hàng dở - giấu nó và mọi phần tử sau nó. Đúng với MỌI số lượng.

   Chỉ áp cho lưới xem trước (trang chủ, sound liên quan). Trang duyệt, tìm kiếm
   và Yêu thích phải hiện đủ, không được giấu bớt kết quả của người dùng.

   CÁC KHOẢNG MEDIA PHẢI LOẠI TRỪ NHAU (min+max, không dùng max chồng nhau):
   :nth-child đếm cả phần tử đang display:none, nên nếu luật của hai mốc cùng có
   hiệu lực thì chúng cộng dồn trên cùng một tập chỉ số và cắt sai - ví dụ 20 nút
   ở 6 cột từng bị cắt còn 16 (2 hàng + 4 lẻ) thay vì 18. Mỗi khổ màn hình chỉ
   được khớp đúng một bộ luật. */

@media (min-width: 1060px) {
    .sound-grid { grid-template-columns: repeat(8, 1fr); }

    .sound-grid-fit > :nth-child(8n + 1):nth-last-child(-n + 7),
    .sound-grid-fit > :nth-child(8n + 1):nth-last-child(-n + 7) ~ * {
        display: none;
    }
}

@media (min-width: 800px) and (max-width: 1059px) {
    .sound-grid { grid-template-columns: repeat(6, 1fr); }

    .sound-grid-fit > :nth-child(6n + 1):nth-last-child(-n + 5),
    .sound-grid-fit > :nth-child(6n + 1):nth-last-child(-n + 5) ~ * {
        display: none;
    }
}

@media (min-width: 560px) and (max-width: 799px) {
    .sound-grid { grid-template-columns: repeat(4, 1fr); }

    .sound-grid-fit > :nth-child(4n + 1):nth-last-child(-n + 3),
    .sound-grid-fit > :nth-child(4n + 1):nth-last-child(-n + 3) ~ * {
        display: none;
    }
}

@media (max-width: 559px) {
    .sound-grid { grid-template-columns: repeat(3, 1fr); }

    .sound-grid-fit > :nth-child(3n + 1):nth-last-child(-n + 2),
    .sound-grid-fit > :nth-child(3n + 1):nth-last-child(-n + 2) ~ * {
        display: none;
    }
}

.sound-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* Ô lưới phải được phép hẹp lại: mặc định min-width của grid item là
       min-content, nên một tiêu đề dài không dấu cách (PIPIDEAKAAKAAAA...) sẽ
       banh cả cột ra và đẩy trang rộng hơn màn hình trên điện thoại. */
    min-width: 0;
}

.sound-card.is-leaving {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.pad-wrap {
    position: relative;
    width: 100%;
    max-width: 128px;
    aspect-ratio: 1;
}

/* --------------------- Hàng hành động dưới mỗi nút ------------------------ */
/* Ba nút tròn: yêu thích - chia sẻ - tải MP3. Đặt DƯỚI chú thích, căn giữa theo
   trục của pad, thay cho huy hiệu tim dán ở góc pad: một huy hiệu lệch về góc
   phá mất trục đối xứng của hình tròn, mà cũng chỉ làm được đúng một việc.

   Nghỉ thì chỉ là chấm màu trên nền tint 13% cho khỏi ồn (một trang có 96 nút =
   288 chấm), rê vào thẻ mới đậm lên, rê đúng nút thì tô đặc. */

.fav-btn .heart-full,
.fav-btn.is-liked .heart-line {
    display: none;
}

.fav-btn.is-liked .heart-full {
    display: block;
}

/* margin-top:auto đẩy hàng nút xuống ĐÁY ô. Ô lưới cao bằng nhau theo ô cao nhất,
   nên nếu không có nó thì chú thích 1 dòng và 2 dòng sẽ làm hàng nút so le nhau
   trên cùng một hàng. */
.card-actions {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 9px;
}

.card-act {
    --act: var(--text-faint);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    flex-shrink: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--act) 12%, transparent);
    color: color-mix(in srgb, var(--act) 70%, var(--text-faint));
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease, transform 0.12s ease;
}

.sound-card:hover .card-act {
    background: color-mix(in srgb, var(--act) 18%, transparent);
    color: var(--act);
}

.card-act:hover {
    background: var(--act);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 4px 12px -3px color-mix(in srgb, var(--act) 60%, transparent);
}

.card-act:active {
    transform: scale(0.86);
}

.card-act svg {
    width: 15px;
    height: 15px;
}

.a-fav   { --act: var(--pink); }
.a-share { --act: #2f8fd8; }
.a-dl    { --act: #14b981; }

/* Đã thích thì tô đặc luôn, không cần rê chuột mới thấy */
.card-act.a-fav.is-liked {
    background: var(--pink);
    color: #fff;
    box-shadow: 0 4px 12px -3px color-mix(in srgb, var(--pink) 55%, transparent);
}

.card-act.a-fav.is-liked svg {
    width: 14px;
    height: 14px;
}

/* Nút yêu thích dạng chữ ở trang chi tiết (giữ dáng .btn) */
.btn-fav.is-liked {
    color: var(--pink);
    border-color: color-mix(in srgb, var(--pink) 45%, transparent);
    background: color-mix(in srgb, var(--pink) 10%, transparent);
}

/* --------- Nút pad tròn 3D: nền là SVG export từ SoundPad của app --------- */
/* Lúc tải chỉ nạp lớp thường. Xếp sẵn cả lớp pressed như trước sẽ nhân đôi số
   request SVG (10 -> 20) đúng lúc pad đang là phần tử LCP, mà ảnh pressed thì
   lần vẽ đầu không cần đến. main.js gắn .pads-ready sau sự kiện load để nạp
   nốt lớp pressed lúc rảnh - bấm vẫn đổi tức thì, chỉ là không chặn lần vẽ đầu.
   Trước khi .pads-ready kịp gắn, :active vẫn có ảnh đúng (chỉ là nạp theo yêu
   cầu), nên không có trạng thái nào bị vỡ. */

.sound-btn {
    width: 100%;
    max-width: 128px;
    aspect-ratio: 1;
    border: 0;
    padding: 0;
    border-radius: 50%;
    background-color: transparent;
    background-image: var(--pad);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    color: #fff;
    cursor: pointer;
    position: relative;
    display: block;
    transition: box-shadow 0.24s ease, transform 0.14s ease;
}

/* Không còn thẻ để nhấc lên, nên phản hồi khi rê chuột nằm hết ở cái pad:
   phóng nhẹ + quầng sáng theo đúng màu của nó. */
.sound-card:hover .sound-btn {
    transform: scale(1.05);
    box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--tone) 65%, transparent);
}

.sound-btn:active,
.sound-card:hover .sound-btn:active {
    background-image: var(--pad-p);
    background-size: 100% 100%;
    transform: scale(0.97);
}

/* Trang đã tải xong: quay lại kiểu xếp chồng hai lớp, đổi trạng thái bằng
   background-size nên không phải chờ mạng ở lần bấm đầu tiên. Đặt sau khối
   trên để thắng ở cùng mức đặc hiệu. */
.pads-ready .sound-btn {
    background-image: var(--pad-p), var(--pad);
    background-size: 0 0, 100% 100%;
}

.pads-ready .sound-btn:active,
.pads-ready .sound-card:hover .sound-btn:active {
    background-image: var(--pad-p), var(--pad);
    background-size: 100% 100%, 0 0;
}

.sound-btn.playing {
    box-shadow: 0 0 26px -2px color-mix(in srgb, var(--tone) 55%, transparent);
}

/* Ảnh minh hoạ clip tròn giữa mặt nút. Mặt nút (cap) có tâm ở 46.4% chiều
   cao, ảnh rộng 73% nút (= 86% cap). */
.pad-img {
    position: absolute;
    left: 13.5%;
    top: 10%;
    width: 73%;
    aspect-ratio: 1;
    border-radius: 50%;
    object-fit: cover;
    pointer-events: none;
    transition: transform 0.09s ease;
}

.sound-btn:active .pad-img {
    transform: translateY(3.2%);
}

/* Vệt sáng vẽ ĐÈ lên ảnh - nút nhựa bóng thì lớp bóng nằm trên mọi thứ in bên
   dưới. Chỉ cần khi có ảnh; nút không ảnh đã có vệt sáng sẵn trong file SVG. */
.sound-btn:has(.pad-img)::after {
    content: "";
    position: absolute;
    left: 28.4%;
    top: 13.2%;
    width: 43.3%;
    height: 18.7%;
    border-radius: 50%;
    background: radial-gradient(closest-side,
        rgb(255 255 255 / 40%),
        rgb(255 255 255 / 11%) 50%,
        rgb(255 255 255 / 0%));
    pointer-events: none;
}

/* Vòng aura lan toả khi đang phát */
.sound-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid var(--tone);
    opacity: 0;
    pointer-events: none;
}

.sound-btn.playing::before {
    animation: aura 1.2s ease-out infinite;
}

@keyframes aura {
    0%   { transform: scale(1);    opacity: 0; }
    35%  { transform: scale(1.08); opacity: 0.55; }
    100% { transform: scale(1.18); opacity: 0; }
}

/* Badge pill tối ở giữa mặt nút */
.eq-badge,
.pad-spinner {
    display: none;
    position: absolute;
    left: 50%;
    top: 46.4%;
    transform: translate(-50%, -50%);
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 26%;
    padding: 0 11%;
    border-radius: 999px;
    background: rgb(0 0 0 / 46%);
    border: 1px solid rgb(255 255 255 / 40%);
    pointer-events: none;
}

.sound-btn.playing .eq-badge {
    display: flex;
}

.sound-btn.loading .pad-spinner {
    display: flex;
}

.eq-badge i {
    width: 3px;
    height: 55%;
    border-radius: 2px;
    background: #fff;
    animation: eq 0.9s ease-in-out infinite;
    transform-origin: center;
}

.eq-badge i:nth-child(2) { animation-delay: 0.15s; }
.eq-badge i:nth-child(3) { animation-delay: 0.3s; }
.eq-badge i:nth-child(4) { animation-delay: 0.45s; }

@keyframes eq {
    0%, 100% { transform: scaleY(0.45); }
    50%      { transform: scaleY(1); }
}

.pad-spinner::after {
    content: "";
    width: 45%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 2.4px solid rgb(255 255 255 / 25%);
    border-top-color: #fff;
    animation: spin 0.9s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.sound-btn-lg {
    max-width: 208px;
}

/* Bảng màu nút - đúng 10 màu AppPalette.soundButton của app.
   light-gray/dark-gray được app remap thành lime/teal có chủ đích. */
.c-red        { --tone: #f5232c; --pad: var(--pad-red);    --pad-p: var(--pad-red-p); }
.c-orange     { --tone: #ff7a00; --pad: var(--pad-orange); --pad-p: var(--pad-orange-p); }
.c-yellow     { --tone: #ffc300; --pad: var(--pad-yellow); --pad-p: var(--pad-yellow-p); }
.c-light-gray { --tone: #a3e635; --pad: var(--pad-lgray);  --pad-p: var(--pad-lgray-p); }
.c-green      { --tone: #00d68f; --pad: var(--pad-green);  --pad-p: var(--pad-green-p); }
.c-dark-gray  { --tone: #00bfc7; --pad: var(--pad-dgray);  --pad-p: var(--pad-dgray-p); }
.c-blue       { --tone: #1e90ff; --pad: var(--pad-blue);   --pad-p: var(--pad-blue-p); }
.c-indigo     { --tone: #6c5cff; --pad: var(--pad-indigo); --pad-p: var(--pad-indigo-p); }
.c-purple     { --tone: #b14bff; --pad: var(--pad-purple); --pad-p: var(--pad-purple-p); }
.c-pink       { --tone: #ff3d9a; --pad: var(--pad-pink);   --pad-p: var(--pad-pink-p); }

/* Chú thích như app: 12.5px, màu phụ, chữ thường - nút mới là thứ người ta nhìn,
   chữ để đậm ngang nút thì cả lưới thành một bảng chữ. Đang phát mới lên 500 +
   đúng màu của nút; chỉ còn hai mức weight nên đây là bậc đậm duy nhất còn lại
   để đánh dấu trạng thái đang phát. */
.sound-title {
    /* width + overflow-wrap: nhiều tên sound là một chuỗi dài không dấu cách
       ("FAHHHHHHHHHHHH"); để mặc định thì nó tràn ra ngoài ô và kéo giãn cả trang. */
    width: 100%;
    overflow-wrap: anywhere;
    margin-top: 9px;
    color: var(--text-muted);
    font-weight: 400;
    font-size: 0.79rem;
    line-height: 1.25;
    letter-spacing: -0.01em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.16s ease;
}

.sound-title:hover {
    color: var(--tone);
    text-decoration: none;
}

.sound-card:has(.sound-btn.playing) .sound-title {
    color: var(--tone);
    font-weight: 500;
}

/* ---------------------------- Thanh phát mini ----------------------------- */
/* Các trang soundboard tốt đều có thanh phát dính đáy: bấm một nút rồi cuộn
   tiếp mà vẫn biết đang nghe gì, tua được, lặp được, dừng được. */

.mini-player {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 80;
    background: var(--surface-glass);
    backdrop-filter: blur(20px) saturate(170%);
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    border-top: 1px solid var(--border);
    box-shadow: 0 -8px 30px rgb(0 0 0 / 10%);
    transform: translateY(100%);
    transition: transform 0.32s cubic-bezier(0.34, 1.3, 0.64, 1);
}

.mini-player.is-open {
    transform: translateY(0);
}

.mini-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 11px;
    padding-bottom: 11px;
}

/* Chấm màu = màu của nút đang phát, có nhịp đập nhẹ khi đang chạy */
.mini-dot {
    position: relative;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--pad, var(--pad-blue)) center / contain no-repeat;
}

.mini-dot::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid var(--tone);
    opacity: 0;
}

.mini-player.is-playing .mini-dot::after {
    animation: aura 1.4s ease-out infinite;
}

.mini-main {
    flex: 1;
    min-width: 0;
}

.mini-title {
    display: block;
    /* Là thẻ <a> nên mặc định nó ăn màu đỏ của link; ở đây nó là NHÃN của bài
       đang phát, không phải một liên kết cần mời gọi, nên trả về màu chữ thường. */
    color: var(--text);
    font-weight: 500;
    font-size: 0.88rem;
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 6px;
}

.mini-title:hover {
    color: var(--tone);
}

.mini-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.mini-play .icon-pause,
.mini-player.is-playing .mini-play .icon-play {
    display: none;
}

.mini-player.is-playing .mini-play .icon-pause {
    display: block;
}

.mini-play {
    width: 42px;
    height: 42px;
    border: 0;
    color: #fff;
    background: linear-gradient(140deg, var(--tone), color-mix(in srgb, var(--tone) 74%, #000));
    box-shadow: 0 5px 16px -5px color-mix(in srgb, var(--tone) 80%, transparent);
}

.mini-play:hover {
    color: #fff;
    border-color: transparent;
}

/* Chừa chỗ cho thanh phát để nó không che footer/nút cuối trang */
body.has-mini-player {
    padding-bottom: 76px;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .sound-btn.playing::before,
    .mini-player.is-playing .mini-dot::after,
    .hero-pad,
    .eq-badge i,
    .pad-spinner::after {
        animation: none;
    }

    .sound-card:hover .sound-btn {
        transform: none;
    }
}

/* ------------------------------ Browse pages ------------------------------ */

.browse-header {
    padding: 30px 0 24px;
}

.browse-header h1 {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 500;
    letter-spacing: -0.035em;
}

.browse-description {
    color: var(--text-muted);
    margin-top: 8px;
    max-width: 62ch;
}

.search-form-page {
    margin-top: 18px;
    max-width: 560px;
    height: 50px;
    background: var(--surface);
    border-color: var(--border);
    box-shadow: var(--shadow-sm);
}

.search-form-page input {
    padding-inline-start: 22px;
}

.search-form-page button {
    width: auto;
    height: 38px;
    padding: 0 20px;
    border-radius: 999px;
    background: linear-gradient(100deg, var(--accent), var(--brand-2));
    color: #fff;
    font-weight: 500;
    font-size: 0.9rem;
}

.search-form-page button:hover {
    background: linear-gradient(100deg, var(--accent-strong), var(--accent));
    color: #fff;
}

.empty-state {
    color: var(--text-muted);
    text-align: center;
    padding: 56px 0;
}

/* Khối chữ cuối trang danh sách. Nó tồn tại vì SEO - bốn trang trending/popular/
   new/editor-choice trước đó gần như không có chữ nào riêng - nên phải trông như
   một phần của trang chứ không phải bức tường chữ nhét thêm: một thẻ nền nhạt,
   một đoạn ngắn, rồi hàng chip dẫn sang ba danh sách còn lại. */
.seo-block {
    margin: 46px 0 10px;
    padding: 26px 28px 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.seo-block h2 {
    font-size: clamp(18px, 2.1vw, 22px);
    font-weight: 500;
    letter-spacing: -0.025em;
}

.seo-block p {
    margin-top: 10px;
    max-width: 76ch;
    color: var(--text-muted);
    line-height: 1.75;
    font-size: clamp(14px, 1.35vw, 15.5px);
    text-wrap: pretty;
}

.seo-links-title {
    margin-top: 20px;
    color: var(--text-faint);
    font-size: 0.82rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.seo-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

/* ------------------------------- Pagination ------------------------------- */

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 42px 0 8px;
}

.page-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 10px 20px;
    color: var(--text);
    font-weight: 500;
    font-size: 0.9rem;
    box-shadow: var(--shadow-sm);
    transition: border-color 0.16s ease, color 0.16s ease, transform 0.12s ease;
}

.page-link:hover {
    border-color: color-mix(in srgb, var(--accent) 50%, transparent);
    color: var(--accent);
    transform: translateY(-1px);
    text-decoration: none;
}

.page-info {
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0 8px;
    font-variant-numeric: tabular-nums;
}

/* ------------------------------- Detail page ------------------------------ */

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 20px 0 8px;
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--text-faint);
}

.breadcrumb a {
    color: var(--text-muted);
}

/* Hero = CẢ THẺ nhuộm theo màu của chính sound, thêm một đốm loang lớn phía
   sau pad để mắt bám vào nút trước, chữ sau. */
.detail-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    gap: 40px;
    align-items: center;
    background:
        radial-gradient(24rem 20rem at 14% 50%, color-mix(in srgb, var(--tone) 26%, transparent), transparent 70%),
        radial-gradient(20rem 16rem at 92% 8%, color-mix(in srgb, var(--tone) 14%, transparent), transparent 68%),
        var(--surface);
    border: 1px solid color-mix(in srgb, var(--tone) 22%, transparent);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 38px;
    margin-top: 12px;
}

.detail-stage {
    position: relative;
    flex-shrink: 0;
    /* Chốt bề rộng: .pad-wrap dùng width:100% nên không tự đẩy khối rộng ra được */
    width: 232px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.detail-info {
    position: relative;
    min-width: 0;
    flex: 1;
}

.pad-wrap-lg {
    max-width: 208px;
}

.detail-info h1 {
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 500;
    letter-spacing: -0.035em;
}

.detail-description {
    margin-top: 14px;
    color: var(--text-muted);
    max-width: 60ch;
}

.detail-stats {
    display: flex;
    gap: 18px;
    color: var(--text-muted);
    font-size: 0.92rem;
    margin-top: 6px;
}

.detail-actions {
    display: flex;
    gap: 10px;
    margin-top: 22px;
    flex-wrap: wrap;
}

/* ------------------------------- Thanh phát ------------------------------- */

.player {
    width: 100%;
    max-width: 232px;
}

.player-seek {
    display: block;
    width: 100%;
    height: 6px;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 999px;
    background: color-mix(in srgb, var(--tone) 22%, transparent);
    cursor: pointer;
}

.player-seek:disabled {
    cursor: default;
    opacity: 0.6;
}

.player-seek::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--tone);
    border: 2px solid var(--surface);
    box-shadow: 0 1px 5px color-mix(in srgb, var(--tone) 65%, transparent);
}

.player-seek::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: 2px solid var(--surface);
    border-radius: 50%;
    background: var(--tone);
}

.player-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
}

.player-time {
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.player-loop {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-faint);
    cursor: pointer;
    transition: color 0.16s ease, background 0.16s ease;
}

.player-loop:hover {
    color: var(--tone);
    background: color-mix(in srgb, var(--tone) 12%, transparent);
}

.player-loop[aria-pressed="true"] {
    background: var(--tone);
    color: #fff;
    box-shadow: 0 0 16px -2px color-mix(in srgb, var(--tone) 55%, transparent);
}

/* ------------------------- Huy hiệu & viên thống kê ----------------------- */

.badge-row {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.badge {
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 999px;
    color: #fff;
}

/* GRADIENT CỐ ĐỊNH, RỰC RỠ - và không phụ thuộc màu của sound.
   Ba tông cách xa nhau trên vòng màu (hổ phách 40° / tím-hồng sen 280° / ngọc 168°)
   nên ba nhãn đứng cạnh nhau phân biệt được ngay.

   MẤU CHỐT ĐỂ VỪA SÁNG VỪA ĐỌC ĐƯỢC: đảo màu chữ theo độ sáng của nền, chứ không
   ép chữ trắng lên mọi thứ. Hổ phách và ngọc là hai màu sáng nhất trong bộ - chữ
   trắng trên đó chỉ đạt ~2:1 (chìm hẳn), nên hai nhãn đó dùng chữ đậm cùng tông.
   Nhờ vậy nền được phép rực hết mức mà vẫn vượt WCAG AA cho chữ nhỏ:

     hổ phách #FF8A00 -> #FFC021  + chữ #4A1D00   7.8:1
     tím sen  #7C3AED -> #C026D3  + chữ trắng     5.7:1 -> 4.7:1
     aqua     #06B6D4 -> #22D3EE  + chữ #083344   5.5:1 -> 7.4:1

   ⚠️ Bản đầu đi #ff5a1f -> #ffb020 mà vẫn để chữ trắng: nửa phải của nhãn gần như
   không đọc được, và vì hai đầu gradient lệch nhau quá xa nên viên chữ ngắn ("NEW")
   với viên chữ dài ("TRENDING") trông như hai màu khác nhau. */

.badge-trending {
    background: linear-gradient(100deg, #FF8A00, #FFC021);
    color: #4A1D00;
    box-shadow: 0 3px 12px -3px rgb(255 138 0 / 55%);
}

.badge-popular {
    background: linear-gradient(100deg, #7C3AED, #C026D3);
    color: #fff;
    box-shadow: 0 3px 12px -3px rgb(160 40 220 / 55%);
}

/* Aqua thuần, KHÔNG pha lục: bản trước #2DD4BF -> #34D399 có đầu ngả vàng-lục nên
   ở cỡ nhỏ trông xỉn. Tông này cũng đúng màu --a-new của mục "Just Added". */
.badge-new {
    background: linear-gradient(100deg, #06B6D4, #22D3EE);
    color: #083344;
    box-shadow: 0 3px 12px -3px rgb(6 182 212 / 55%);
}

.stat-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 15px;
    border-radius: 999px;
    font-weight: 500;
    font-size: 0.88rem;
    font-variant-numeric: tabular-nums;
}

.stat-views {
    color: #1c7fc4;
    background: color-mix(in srgb, #2f8fd8 14%, transparent);
}

.stat-likes {
    color: var(--pink);
    background: color-mix(in srgb, var(--pink) 14%, transparent);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .stat-views { color: #6fc0f5; }
}

:root[data-theme="dark"] .stat-views { color: #6fc0f5; }

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}

/* --------------------------------- Buttons -------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 999px;
    padding: 11px 22px;
    font-weight: 500;
    font-size: 0.92rem;
    letter-spacing: -0.01em;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform 0.12s ease, box-shadow 0.16s ease,
                border-color 0.16s ease, background 0.16s ease;
}

.btn:hover {
    text-decoration: none;
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0) scale(0.98);
}

.btn-primary {
    background: linear-gradient(100deg, var(--accent), var(--brand-2));
    color: #fff;
    box-shadow: 0 5px 18px -5px color-mix(in srgb, var(--accent) 70%, transparent);
}

.btn-primary:hover {
    box-shadow: 0 9px 24px -6px color-mix(in srgb, var(--accent) 80%, transparent);
}

.btn-ghost {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
    box-shadow: var(--shadow-sm);
}

.btn-ghost:hover {
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
    color: var(--accent);
}

.btn-danger {
    background: var(--accent);
    color: #fff;
}

/* ----------------------------- Sound Guide -------------------------------- */
/* App tách bài viết thành 5 mục, mỗi mục một màu + một biểu tượng riêng. Web
   xếp dọc cả 5 (không cần chuyển tab) nhưng giữ nguyên màu/biểu tượng. */

.guide {
    display: grid;
    gap: 16px;
    margin-top: 26px;
}

.guide-card {
    --g: var(--accent);
    position: relative;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 26px;
}

/* Vạch màu mảnh ở cạnh trên: nhận ra mục nào mà không cần đọc tiêu đề */
.guide-card::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--g), color-mix(in srgb, var(--g) 20%, transparent));
}

.guide-card h2 {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 1.14rem;
    margin-bottom: 14px;
}

.guide-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: linear-gradient(140deg, var(--g), color-mix(in srgb, var(--g) 78%, #000));
    color: #fff;
    box-shadow: 0 6px 14px -5px color-mix(in srgb, var(--g) 70%, transparent);
    flex-shrink: 0;
}

.g-red   { --g: #f5232c; }
.g-amber { --g: #ffb020; }
.g-mint  { --g: #14c79a; }
.g-cyan  { --g: #00c8e0; }
.g-pink  { --g: #ff4d8d; }

/* Pro tip cố ý nổi hơn các mục khác - đúng như app */
.guide-protip {
    background:
        radial-gradient(20rem 12rem at 100% 0%, color-mix(in srgb, var(--g) 20%, transparent), transparent 70%),
        var(--surface);
    border-color: color-mix(in srgb, var(--g) 35%, transparent);
}

.article-body p {
    margin: 10px 0;
}

.article-body h2,
.article-body h3 {
    font-size: 1.02rem;
    margin: 18px 0 6px;
}

.article-body a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Danh sách "dùng thế nào" đánh số như app */
.use-cases {
    list-style: none;
    counter-reset: uc;
    display: grid;
    gap: 12px;
}

.use-cases li {
    counter-increment: uc;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    line-height: 1.55;
}

.use-cases li::before {
    content: counter(uc);
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin-top: 1px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.74rem;
    font-weight: 500;
    color: var(--g);
    background: color-mix(in srgb, var(--g) 16%, transparent);
}

/* FAQ dạng thẻ mở/đóng, mở ra thì nhuộm màu của mục */
.faq-item {
    border: 1px solid transparent;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    padding: 13px 15px;
    margin-bottom: 8px;
    transition: background 0.16s ease, border-color 0.16s ease;
}

.faq-item[open] {
    background: color-mix(in srgb, var(--g) 9%, transparent);
    border-color: color-mix(in srgb, var(--g) 38%, transparent);
}

.faq-item summary {
    cursor: pointer;
    font-weight: 500;
    list-style: none;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: "";
    float: inline-end;
    width: 8px;
    height: 8px;
    margin-top: 5px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.45;
    transition: transform 0.18s ease;
}

.faq-item[open] summary::after {
    transform: rotate(225deg);
    color: var(--g);
    opacity: 1;
}

.faq-item p {
    margin-top: 12px;
    color: var(--text-muted);
    line-height: 1.6;
}

/* --------------------- Từ khoá liên quan & mã nhúng ----------------------- */

.keyword-block,
.embed-block {
    margin: 30px 0;
}

.keyword-block h2,
.embed-block h2 {
    font-size: 1.14rem;
    margin-bottom: 14px;
}

.embed-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.embed-row input {
    flex: 1;
    min-width: 220px;
    padding: 11px 16px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.78rem;
}

/* --------------------------- "Cũng thích" --------------------------------- */

.also-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

.also-card {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 16px;
    background: var(--surface);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    color: var(--text);
    box-shadow: var(--shadow-sm);
    transition: border-color 0.16s ease, transform 0.14s ease, box-shadow 0.16s ease;
}

.also-card:hover {
    text-decoration: none;
    border-color: color-mix(in srgb, var(--tone) 50%, transparent);
    background: color-mix(in srgb, var(--tone) 5%, var(--surface));
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.also-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    background: radial-gradient(circle at 50% 32%,
        color-mix(in srgb, var(--tone) 70%, #fff),
        var(--tone) 70%);
    box-shadow: 0 3px 8px -2px color-mix(in srgb, var(--tone) 65%, transparent);
}

.also-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.also-text b {
    font-size: 0.88rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.also-text small {
    font-size: 0.74rem;
    color: var(--text-faint);
}

/* 12 gợi ý (ALSO_LIKE_LIMIT trong SoundPresenter) chia hết cho 6, 4, 3 và 2 nên
   mọi số cột thực tế đều ra hàng đầy. Chỗ hỏng duy nhất là khi bề ngang vừa đủ
   cho 5 cột: auto-fill xếp 5+5+2, thành ba hàng với hàng cuối trống hai phần ba.
   Từ 1100px ép thẳng 6 cột để luôn còn đúng hai hàng; cột hẹp lại thì thu chấm
   màu và padding để nhường chỗ cho tiêu đề. */
@media (min-width: 1100px) {
    .also-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .also-card {
        gap: 10px;
        padding: 12px 13px;
    }

    .also-dot {
        width: 22px;
        height: 22px;
    }
}

.pixel {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

/* ---------------------- Empty state (như PopEmptyState) ------------------- */

.empty-block {
    text-align: center;
    padding: 60px 24px 76px;
    max-width: 480px;
    margin: 0 auto;
}

.empty-blob {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    margin: 0 auto 26px;
    border-radius: 50%;
    color: var(--pink);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--pink) 24%, transparent),
        color-mix(in srgb, var(--pink) 6%, transparent));
    box-shadow: 0 10px 30px -8px color-mix(in srgb, var(--pink) 45%, transparent);
}

.empty-block h2 {
    font-size: 1.3rem;
    margin-bottom: 10px;
}

.empty-block p {
    color: var(--text-muted);
    margin-bottom: 26px;
}

/* ---------------------------------- Toast --------------------------------- */

.toast {
    position: fixed;
    top: 18px;
    left: 50%;
    z-index: 100;
    transform: translate(-50%, -150%);
    max-width: calc(100vw - 32px);
    padding: 11px 22px;
    border-radius: 999px;
    background: linear-gradient(100deg, var(--accent), var(--brand-2));
    color: #fff;
    font-size: 0.9rem;
    font-weight: 500;
    box-shadow: 0 12px 30px -8px color-mix(in srgb, var(--accent) 70%, transparent);
    opacity: 0;
    transition: transform 0.36s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
}

.toast.is-open {
    transform: translate(-50%, 0);
    opacity: 1;
}

/* --------------------------- Trang đăng nhập ------------------------------ */

.login-page {
    max-width: 440px;
    margin: 0 auto;
    padding: 64px 0 84px;
    text-align: center;
}

.login-pad {
    display: block;
    width: 104px;
    height: 104px;
    margin: 0 auto 26px;
    background: url("/img/logo.png") center / contain no-repeat;
    filter: drop-shadow(0 10px 26px color-mix(in srgb, var(--accent) 45%, transparent));
    animation: float 7s ease-in-out infinite;
}

.login-page h1 {
    font-weight: 500;
}

.login-sub {
    color: var(--text-muted);
    margin-top: 10px;
    margin-bottom: 34px;
}

.login-error {
    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    border-radius: var(--radius-sm);
    padding: 13px 16px;
    margin-bottom: 20px;
    font-size: 0.9rem;
    text-align: start;
}

.g_id_signin {
    display: flex;
    justify-content: center;
}

/* --------------------------------- Topics --------------------------------- */

.topic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 18px;
}

.topic-card {
    background: var(--surface);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.topic-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
    box-shadow: var(--shadow-lifted);
}

.topic-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
}

.topic-link:hover {
    text-decoration: none;
}

.topic-thumb {
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--surface-2);
}

.topic-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.topic-card:hover .topic-thumb img {
    transform: scale(1.05);
}

.topic-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 18px 18px;
}

.topic-cat {
    align-self: flex-start;
}

.topic-title {
    font-size: 1.04rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

/* Cắt tóm tắt đúng 3 dòng để các thẻ trong một hàng cao bằng nhau */
.topic-excerpt {
    color: var(--text-muted);
    font-size: 0.9rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.topic-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: auto;
    padding-top: 6px;
    color: var(--text-faint);
    font-size: 0.8rem;
    font-weight: 500;
}

/* Bài đầu khối "phổ biến" chiếm trọn chiều ngang, ảnh nằm bên trái */
.topic-grid-feature .topic-card.is-featured {
    grid-column: 1 / -1;
}

@media (min-width: 720px) {
    .topic-grid-feature .topic-card.is-featured .topic-link {
        flex-direction: row;
    }

    .topic-grid-feature .topic-card.is-featured .topic-thumb {
        flex: 0 0 44%;
        aspect-ratio: auto;
    }

    .topic-grid-feature .topic-card.is-featured .topic-body {
        justify-content: center;
        padding: 26px 28px;
    }

    .topic-grid-feature .topic-card.is-featured .topic-title {
        font-size: 1.45rem;
    }
}

.load-more-row {
    display: flex;
    justify-content: center;
    margin-top: 26px;
}

.load-more-row .btn.is-loading {
    opacity: .6;
    pointer-events: none;
}

.topic-article {
    max-width: 760px;
    margin: 24px auto 44px;
}

.topic-article-head {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 22px;
}

.topic-article-head h1 {
    line-height: 1.14;
}

.topic-lede {
    color: var(--text-muted);
    font-size: 1.05rem;
}

.topic-hero {
    width: 100%;
    border-radius: var(--radius);
    margin-bottom: 26px;
    box-shadow: var(--shadow);
}

.topic-article .article-body {
    font-size: 1.04rem;
    line-height: 1.68;
}

.topic-article .article-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
}

/* Nút phát chèn giữa bài viết từ placeholder {{SOUND:slug}} */
.article-sound {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 132px;
    margin: 16px 14px 16px 0;
    vertical-align: top;
}

.article-sound .sound-title {
    font-size: 0.86rem;
    text-align: center;
}

/* ------------------------------- Static pages ----------------------------- */

.static-page {
    max-width: 780px;
    margin: 32px auto 56px;
    background: var(--surface);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 40px;
}

.static-page h1 {
    margin-bottom: 16px;
}

.static-page p {
    margin: 12px 0;
    color: var(--text-muted);
}

.static-page h2 {
    font-size: 1.14rem;
    margin: 26px 0 8px;
    color: var(--text);
}

.static-page ul {
    padding-inline-start: 22px;
    margin: 8px 0;
    color: var(--text-muted);
}

.static-page li::marker {
    color: var(--accent);
}

/* Lưới thành viên: thẻ đều nhau, tự xuống hàng trên màn hẹp */
.static-page ul.team {
    list-style: none;
    padding: 0;
    margin: 20px 0 8px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 18px;
}

.static-page ul.team li {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    margin: 0;
    padding: 22px 14px 18px;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

/* .static-page li::marker tô chấm đỏ cho mọi list - thẻ thành viên thì không cần */
.static-page ul.team li::marker {
    content: "";
}

.static-page ul.team img {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--surface);
    box-shadow: 0 0 0 3px var(--surface),
                0 0 0 5px color-mix(in srgb, var(--accent) 35%, transparent);
}

.static-page ul.team b {
    color: var(--text);
    font-size: 1rem;
    line-height: 1.25;
}

.static-page ul.team span {
    font-size: 0.84rem;
    color: var(--text-muted);
}

.studio {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin: 12px 0;
}

.studio img {
    flex: 0 0 auto;
    width: 96px;
    height: 96px;
}

.studio h3 {
    margin: 0 0 4px;
    font-size: 1.02rem;
    color: var(--text);
}

@media (max-width: 480px) {
    /* Dưới ~430px, logo + 3 nút của tầng trên vừa đúng quá một hàng nên nút đăng
       nhập bị đẩy xuống hàng riêng, ăn thêm gần 50px chỉ để chứa một cái nút.
       Bớt vài pixel ở logo và nút là cả cụm về lại một hàng. */
    .header-inner {
        gap: 6px;
    }

    .logo {
        font-size: 1.05rem;
        gap: 8px;
    }

    .logo-mark {
        width: 26px;
        height: 26px;
    }

    .btn-signin {
        height: 34px;
        padding: 0 13px;
        font-size: 0.84rem;
    }

    .icon-btn.theme-toggle {
        width: 34px;
        height: 34px;
    }

    .studio {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* ------------------------------ Data deletion ----------------------------- */

.notice {
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    padding: 20px;
    margin: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
}

.notice-danger {
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}

.deletion-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
}

.deletion-check {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 0.92rem;
    cursor: pointer;
}

.deletion-check input {
    accent-color: var(--accent);
    margin-top: 3px;
}

/* Nút chỉ bật khi đã tick - required của checkbox vẫn chặn submit ở nơi
   không hỗ trợ :has() */
.deletion-form:not(:has(input:checked)) .btn-danger {
    opacity: .5;
    pointer-events: none;
}

/* -------------------------------- Error page ------------------------------ */

.error-page {
    text-align: center;
    padding: 84px 0;
}

/* .error-page p bên dưới cũng khớp thẻ này (nó là một <p>) và có specificity cao
   hơn, nên phải bám vào .error-page thì mã lỗi mới giữ được màu gradient. */
.error-page .error-code {
    font-size: clamp(5rem, 14vw, 8rem);
    font-weight: 500;
    letter-spacing: -0.05em;
    background: linear-gradient(135deg, var(--accent), var(--brand-2) 55%, var(--pink));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1;
}

.error-page h1 {
    margin: 12px 0 8px;
}

.error-page p {
    color: var(--text-muted);
    margin-bottom: 26px;
}

/* ------------------------- Badge Google Play + CTA app -------------------- */
/* Badge giữ đúng nhận diện của Google: nền đen, chữ trắng, dòng nhỏ in hoa trên
   tên "Google Play". Nền đen ở CẢ hai theme (không đảo màu theo sáng/tối) vì đây
   là tài sản thương hiệu của bên thứ ba - người dùng nhận ra nó bằng hình dáng
   quen thuộc, đổi màu là mất luôn cái quen thuộc đó. Theme tối chỉ thêm một viền
   mờ để khối đen không chìm vào nền tối. */

.play-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px 8px 13px;
    border-radius: var(--radius-btn);
    border: 1px solid transparent;
    background: #000;
    color: #fff;
    text-decoration: none;
    line-height: 1.1;
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.play-badge:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.play-badge:active {
    transform: translateY(0);
}

.play-badge-icon {
    width: 22px;
    height: 22px;
    flex: none;
}

/* Hai dòng chữ: dòng nhỏ là chữ nền, dòng tên mới là thứ mắt đọc. Chênh lệch cỡ
   chữ phải rõ - hai dòng xấp xỉ nhau là thứ làm badge tự làm trông giống hàng
   nhái. */
.play-badge-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    text-align: start;
}

.play-badge-text small {
    font-size: 8.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.86;
}

.play-badge-text b {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.play-badge-lg {
    padding: 10px 20px 10px 16px;
    gap: 12px;
}

.play-badge-lg .play-badge-icon {
    width: 27px;
    height: 27px;
}

.play-badge-lg .play-badge-text small { font-size: 9.5px; }
.play-badge-lg .play-badge-text b     { font-size: 18px; }

/* Badge trong hero: <p> nên phải xoá margin mặc định của đoạn văn hero (.hero p). */
.hero .hero-cta {
    margin-top: 26px;
    max-width: none;
}

.footer-brand .play-badge {
    margin-top: 16px;
}

/* Dải mời tải app ở trang chi tiết. Cùng ngôn ngữ với các thẻ khác của trang
   (nền surface, viền, bo góc lớn) chứ không phải một banner sặc sỡ: nó nằm giữa
   dòng chảy nội dung, hét lên là thành quảng cáo chen ngang. */
.app-cta {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 34px;
    padding: 26px 30px;
    border-radius: var(--radius);
    border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
    background:
        radial-gradient(22rem 14rem at 4% 0%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 70%),
        radial-gradient(18rem 12rem at 96% 110%, color-mix(in srgb, var(--brand-2) 14%, transparent), transparent 68%),
        var(--surface);
    box-shadow: var(--shadow-sm);
}

/* Ba pad thật thu nhỏ, chỉ để khối này không phải là một hộp chữ trơ trọi.
   Ẩn hẳn ở khổ hẹp thay vì thu nhỏ tiếp: dưới 720px chỗ đó phải nhường cho chữ. */
.app-cta-art {
    position: relative;
    flex: none;
    width: 96px;
    height: 84px;
}

.app-cta-art .hero-pad:nth-child(1) { width: 54px; height: 54px; top: 8%;  left: 0;   animation-delay: 0s; }
.app-cta-art .hero-pad:nth-child(2) { width: 38px; height: 38px; top: 0;   left: 56%; animation-delay: 1.4s; }
.app-cta-art .hero-pad:nth-child(3) { width: 32px; height: 32px; top: 62%; left: 46%; animation-delay: 2.8s; }

.app-cta-text {
    flex: 1 1 auto;
    min-width: 0;
}

.app-cta-text h2 {
    font-size: clamp(18px, 2.2vw, 22px);
    font-weight: 500;
    letter-spacing: -0.02em;
}

.app-cta-text p {
    margin-top: 8px;
    max-width: 52ch;
    color: var(--text-muted);
    font-size: 0.94rem;
    line-height: 1.65;
}

.app-cta .play-badge {
    flex: none;
}

@media (max-width: 720px) {
    .app-cta {
        flex-wrap: wrap;
        gap: 16px;
        padding: 22px 20px;
    }

    .app-cta-art {
        display: none;
    }

    /* Badge xuống hàng riêng và trải hết bề ngang: trên điện thoại đây là nút bấm
       chính của khối, không phải một mẩu trang trí nép bên phải. */
    .app-cta .play-badge {
        flex: 1 0 100%;
        justify-content: center;
    }
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .play-badge {
        border-color: rgb(255 255 255 / 22%);
    }
}

:root[data-theme="dark"] .play-badge {
    border-color: rgb(255 255 255 / 22%);
}

/* --------------------------------- Footer --------------------------------- */
/* Ba cột thay cho một khối chữ căn giữa: khối chữ căn giữa làm chân trang
   trông như phần "còn sót lại", ba cột mới ra dáng một trang có tổ chức. */

.site-footer {
    border-top: 1px solid var(--border);
    background: var(--surface);
    margin-top: 64px;
}

.footer-inner {
    padding: 40px 20px 28px;
}

/* Flex chứ không phải grid: khối "From the blog" chỉ có ở một số trang, grid cố
   định cột sẽ chừa lại một cột trống toang hoác ở những trang không có nó. */
.footer-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px 64px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--border);
}

.footer-brand {
    flex: 1 1 260px;
    max-width: 420px;
}

.footer-col {
    flex: 0 1 190px;
}

.footer-brand .logo {
    margin-bottom: 12px;
}

.footer-tagline {
    color: var(--text-muted);
    font-size: 0.92rem;
    max-width: 34ch;
}

.footer-col-title {
    font-weight: 500;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 12px;
}

.footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 9px;
    font-size: 0.9rem;
}

.footer-links a {
    color: var(--text-muted);
    font-weight: 500;
}

.footer-links a:hover {
    color: var(--accent);
    text-decoration: none;
}

.footer-copy {
    color: var(--text-faint);
    font-size: 0.84rem;
    padding-top: 22px;
    text-align: center;
}

/* ---------------------------------- Embed --------------------------------- */

.embed-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: transparent;
}

.embed-card {
    padding: 12px;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.embed-card .sound-btn {
    width: 92px;
}

/* -------------------------------- Responsive ------------------------------ */

@media (max-width: 1040px) {
    .hero-art {
        opacity: 0.4;
        inset-inline-end: -60px;
    }
}

@media (max-width: 860px) {
    .hero {
        padding: 40px 26px;
    }

    /* Dàn pad trang trí bị chữ đè lên thì bỏ hẳn, không để nó thành nhiễu nền */
    .hero-art {
        display: none;
    }

    .detail-hero {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 28px;
        padding: 30px 22px;
    }

    .detail-stage {
        width: 100%;
    }

    .detail-stats,
    .detail-actions,
    .stat-pills,
    .badge-row,
    .tag-list {
        justify-content: center;
    }

    .footer-grid {
        gap: 28px 40px;
    }

    .footer-brand {
        flex-basis: 100%;
    }
}

@media (max-width: 720px) {
    .container {
        padding: 0 14px;
    }

    /* Trên điện thoại header gom lại thành ĐÚNG MỘT hàng: nút menu, tên app, nút
       tìm kiếm. Sáu mục điều hướng, ô tìm kiếm, đổi theme, đổi ngôn ngữ và nút đăng
       nhập đều nằm sau nút menu hoặc nút kính lúp, nên không còn gì để xếp tầng.
       Vì thế cũng bỏ luôn trò kéo điểm dính lên bằng top âm của bản trước: hàng này
       chính là thứ cần ở lại khi cuộn, dính thẳng ở 0 là đúng. */
    .nav-rail {
        display: contents;
    }

    .header-inner {
        gap: 8px;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    /* order chứ không phải thứ tự trong template: nút menu ra đầu hàng, kính lúp và
       ảnh đại diện ra cuối, còn logo nuốt hết khoảng trống ở giữa. */
    .header-inner .nav-toggle {
        order: -1;
    }

    .logo {
        margin-inline-end: auto;
    }

    .header-inner .nav-search {
        order: 5;
    }

    .account-menu {
        order: 6;
    }

    /* Đăng nhập xuống menu (bản thứ hai trong .nav-extra) - nó là cái nút to nhất
       hàng, mà lại là thứ ít bấm nhất trên điện thoại. */
    .header-inner > .btn-signin {
        display: none;
    }

    /* Hai cái nút ở hai đầu hàng: chung một khuôn tròn 32px. */
    .nav-toggle,
    .nav-search {
        display: inline-flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        margin: 0;
        border: 0;
        border-radius: 50%;
        background: var(--surface-2);
        color: var(--text-muted);
        cursor: pointer;
    }

    .nav-toggle:hover,
    .nav-search:hover {
        color: var(--accent);
    }

    /* Ẩn ba công tắc bằng clip chứ không bằng display:none - còn focus được thì còn
       mở được bằng bàn phím, và khung focus vẽ lên đúng cái nhãn của nó. */
    .rail-check {
        display: block;
        position: absolute;
        width: 1px;
        height: 1px;
        margin: 0;
        overflow: hidden;
        clip-path: inset(50%);
    }

    .rail-check:focus-visible ~ .header-inner .nav-toggle,
    .rail-check:focus-visible ~ .header-inner .nav-search {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

    .nav-toggle-check:checked ~ .header-inner .nav-toggle,
    .search-check:checked ~ .header-inner .nav-search {
        background: color-mix(in srgb, var(--accent) 16%, transparent);
        color: var(--accent);
    }

    /* Đóng thì biến mất hẳn; mở thì thả xuống dưới hàng header chứ KHÔNG đẩy nội
       dung - đẩy thì hàng dính đỉnh lại cao lên đúng thứ vừa bỏ đi. Mốc neo là
       .site-header (nó sticky, tức là đã positioned), vì .nav-rail giờ là
       display:contents nên không còn hộp nào để neo vào. */
    .main-nav {
        display: none;
    }

    .nav-toggle-check:checked ~ .nav-rail .nav-panel {
        position: absolute;
        top: calc(100% + 6px);
        inset-inline-start: 10px;
        z-index: 60;
        display: block;
        width: 232px;
        max-width: calc(100vw - 20px);
        padding: 6px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        box-shadow: var(--shadow-lifted);
        animation: pop-in 0.16s ease;
    }

    .nav-toggle-check:checked ~ .nav-rail .main-nav {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        width: auto;
        overflow: visible;
        margin: 0;
        padding: 0;
    }

    .nav-toggle-check:checked ~ .nav-rail .nav-pill {
        justify-content: flex-start;
        padding: 9px 12px;
        border-radius: var(--radius-sm);
        font-size: 0.92rem;
    }

    /* Đăng nhập, đổi theme, đổi ngôn ngữ nằm cuối menu, ngăn bằng một đường kẻ để
       không bị đọc nhầm là mục điều hướng thứ bảy. */
    .nav-toggle-check:checked ~ .nav-rail .nav-extra {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        margin-top: 6px;
        padding-top: 8px;
        border-top: 1px solid var(--border);
    }

    .nav-extra .btn-signin {
        flex-basis: 100%;
        justify-content: center;
        margin-bottom: 2px;
    }

    .nav-extra .icon-btn {
        width: 36px;
        height: 36px;
        flex-shrink: 0;
    }

    .nav-extra .lang-summary {
        flex: 1;
        min-width: 0;
        height: 36px;
    }

    .nav-extra .lang-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Theme và ngôn ngữ rời khỏi hàng trên. Riêng .lang-menu phải để display:contents
       chứ không display:none: danh sách ngôn ngữ vẫn nằm trong nó và còn phải thả
       xuống được, mà con của một nút display:none thì không vẽ ra gì cả. */
    .header-inner > .theme-toggle {
        display: none;
    }

    .header-inner .lang-menu {
        display: contents;
    }

    .header-inner .lang-summary {
        display: none;
    }

    .lang-toggle-check:checked ~ .header-inner .lang-list {
        top: calc(100% + 6px);
        inset-inline: 10px;
        width: auto;
    }

    /* Ô tìm kiếm biến khỏi tầng trên: nó chiếm nguyên một hàng cho một việc mà
       nút kính lúp ở thanh dưới đã làm được. Bấm nút đó thì chính ô này thả xuống -
       một ô duy nhất trong markup, không phải ô thứ hai dựng riêng cho điện thoại,
       nên gợi ý tìm kiếm và form GET vẫn chạy y nguyên. */
    .header-inner .search-form {
        display: none;
    }

    .search-check:checked ~ .header-inner .search-form {
        position: absolute;
        top: calc(100% + 6px);
        inset-inline: 10px;
        z-index: 60;
        display: flex;
        max-width: none;
        background: var(--surface);
        border-color: var(--border);
        box-shadow: var(--shadow-lifted);
        animation: pop-in 0.16s ease;
    }

    /* Ba tấm panel dùng chung một chỗ đứng nên chỉ một cái được hiện. JS gỡ sẵn hai
       cái kia mỗi lần bật một cái; mấy dòng này là phần làm khi không có JS, thứ tự
       ưu tiên: ngôn ngữ > tìm kiếm > menu. */
    .search-check:checked ~ .nav-rail .nav-panel,
    .lang-toggle-check:checked ~ .nav-rail .nav-panel {
        display: none;
    }

    .lang-toggle-check:checked ~ .header-inner .search-form {
        display: none;
    }


    /* Điện thoại thì vuốt là cuộn được, hai cái nút chỉ tổ đè lên chip. */
    .cat-arrow {
        display: none;
    }

    /* Yêu thích thôi không dạt về cuối nữa - trong panel dọc thì margin auto
       đẩy nó xuống đáy, chỉ để lại một khoảng trống không ai hiểu để làm gì. */
    .nav-pill.n-fav {
        margin-inline-start: 0;
    }

    .hero {
        padding: 32px 20px;
        margin: 16px 0 26px;
        border-radius: var(--radius);
    }

    .seo-block {
        padding: 20px 18px;
        margin: 34px 0 6px;
        border-radius: var(--radius);
    }

    /* Số cột do các mốc 1059/799/559 ở khối "Sound grid" quyết định - đừng đặt
       lại ở đây, mốc 720 nằm giữa hai mốc đó và sẽ phá vỡ quy tắc "chia hết". */
    .sound-grid {
        gap: 18px 10px;
    }

    /* Không chặn cỡ pad ở đây nữa: ô lưới đã tự co (3 cột ~101-124px) nên pad
       bám theo ô, chặn cứng 96px chỉ tạo thêm khoảng trống thừa.

       Phải hạ CẢ .pad-wrap-lg: nút là display:block width:100%, thu mỗi
       max-width của nó thì nó nép mép trái khung 208px chứ không tự căn giữa -
       trang detail trên điện thoại vì thế lệch trái 24px, kèm 48px cao thừa do
       khung vẫn giữ aspect-ratio 1 theo bề rộng cũ. */
    .pad-wrap-lg,
    .sound-btn-lg {
        max-width: 160px;
    }

    .sound-title {
        margin-top: 8px;
        font-size: 0.76rem;
    }

    .static-page {
        padding: 26px 20px;
    }

    .guide-card {
        padding: 20px 18px;
    }

    .mini-inner {
        gap: 10px;
    }

    /* Thanh phát mini trên điện thoại: bỏ chấm pad để chừa chỗ cho tiêu đề */
    .mini-dot {
        display: none;
    }

    .footer-grid {
        gap: 26px;
    }

    .footer-col {
        flex-basis: 140px;
    }

    .pagination {
        gap: 6px;
    }

    .page-link {
        padding: 9px 15px;
        font-size: 0.85rem;
    }
}