/* ==================================================
   THANHNHAC.COM — USER.CSS

   Organized: 2026-07-11
   Template: Cassiopeia / Joomla
================================================== */
/* ==================================================
   00. VARIABLES & GLOBAL
================================================== */
/* --------------------------------------------------
   Color Variables
-------------------------------------------------- */
/* ---------- Biến màu ---------- */

:root {
    --tn-gold: #d8aa57;
    --tn-gold-light: #edc676;
    --tn-dark: #0c0c0c;
    --tn-white: #ffffff;
}

/* --------------------------------------------------
   Smooth Scrolling
-------------------------------------------------- */
html {
    scroll-behavior: smooth;
}

/* Chừa khoảng cho sticky header */
#videos,
#about {
    scroll-margin-top: 85px;
}

/* ==================================================
   01. HEADER & NAVIGATION
================================================== */
/* --------------------------------------------------
   Sticky Transparent Header
-------------------------------------------------- */
.container-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;

    display: grid;
    grid-template-columns: minmax(190px, 220px) minmax(0, 1fr);
    align-items: center;
    column-gap: 48px;

    width: 100%;
    padding: 10px clamp(18px, 5vw, 72px);

    background: rgba(10, 10, 10, 0.38);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    box-shadow: none;
    transition:
        background-color 0.3s ease,
        box-shadow 0.3s ease;
}

/* Header đen hơn sau khi cuộn */
.container-header.header-scrolled {
    background: rgba(10, 10, 10, 0.95);
    box-shadow: 0 5px 22px rgba(0, 0, 0, 0.35);
}

/* --------------------------------------------------
   Logo
-------------------------------------------------- */
/* Khối chứa logo */
.container-header > .grid-child:first-child {
    display: flex;
    align-items: center;

    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
}

.container-header .navbar-brand {
    margin: 0;
    padding: 0;
}

.container-header .navbar-brand a {
    display: block;
}

.container-header .navbar-brand img {
    display: block;

    width: 195px;
    max-width: 100%;
    height: auto;

    margin: 0;
}

/* Tagline của Cassiopeia — ẩn vì đã có trong thiết kế */
.container-header .site-description {
    display: none;
}

/* --------------------------------------------------
   Desktop Navigation
-------------------------------------------------- */
/* Khối chứa menu */
.container-header > .container-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
}

.container-header .container-nav nav {
    width: auto;
    margin: 0;
    padding: 0;
}

/* Menu nằm ngang trên desktop */
.container-header .mod-menu {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;

    gap: 34px;

    margin: 0;
    padding: 0;
}

.container-header .mod-menu > li {
    margin: 0;
    padding: 0;
}

.container-header .mod-menu > li > a {
    position: relative;
    display: block;

    padding: 12px 0;

    color: var(--tn-white);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;

    transition: color 0.25s ease;
}

/* Gạch vàng bên dưới menu */
.container-header .mod-menu > li > a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 4px;

    width: 0;
    height: 2px;

    background: var(--tn-gold);
    transition: width 0.25s ease;
}

.container-header .mod-menu > li > a:hover,
.container-header .mod-menu > li.active > a,
.container-header .mod-menu > li.current > a {
    color: var(--tn-gold-light);
}

.container-header .mod-menu > li > a:hover::after,
.container-header .mod-menu > li.active > a::after,
.container-header .mod-menu > li.current > a::after {
    width: 100%;
}

/* ==================================================
   02. HOMEPAGE HERO
================================================== */
/* --------------------------------------------------
   Hero Background
-------------------------------------------------- */
.container-banner {
    min-height: 100vh;

    display: flex;
    align-items: center;

    margin-top: 0;
    padding:
        120px
        clamp(24px, 8vw, 120px)
        60px;

    background-image:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.58) 0%,
            rgba(0, 0, 0, 0.36) 48%,
            rgba(0, 0, 0, 0.22) 100%
        ),
        url("/images/hero.jpg");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* --------------------------------------------------
   Hero Content
-------------------------------------------------- */
.hero-box {
    width: 100%;
    max-width: 600px;

    color: var(--tn-white);
}

.hero-box h1 {
    margin: 0 0 18px;

    color: var(--tn-white);
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 700;
    line-height: 1.05;
}

.hero-subtitle {
    margin-bottom: 20px;

    color: var(--tn-gold-light);
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    font-weight: 500;
}

.hero-box p {
    margin-bottom: 12px;

    font-size: clamp(1rem, 1.6vw, 1.15rem);
    line-height: 1.75;
}

/* --------------------------------------------------
   Hero Buttons
-------------------------------------------------- */
.hero-btn {
    display: inline-block;

    margin-top: 18px;
    margin-right: 14px;
    padding: 14px 28px;

    border: 2px solid var(--tn-gold);
    border-radius: 40px;

    background: var(--tn-gold);
    color: var(--tn-white);

    font-weight: 600;
    text-decoration: none;

    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}

.hero-btn:hover,
.hero-btn:focus {
    background: #ad7f3d;
    border-color: #ad7f3d;
    color: var(--tn-white);

    transform: translateY(-2px);
}

.hero-btn-outline {
    background: transparent;
    border-color: var(--tn-white);
}

.hero-btn-outline:hover,
.hero-btn-outline:focus {
    background: var(--tn-white);
    border-color: var(--tn-white);
    color: var(--tn-dark);
}

/* --------------------------------------------------
   Header and Hero — Tablet & Mobile
-------------------------------------------------- */
@media (max-width: 991px) {

    .container-header {
        grid-template-columns: minmax(145px, 185px) minmax(0, 1fr);
        column-gap: 12px;

        min-height: 66px;
        padding: 8px 16px;

        background: rgba(10, 10, 10, 0.96);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .container-header > .grid-child:first-child {
        width: auto;
        min-width: 0;
        margin: 0;
        padding: 0;
    }

    .container-header .navbar-brand,
    .container-header .navbar-brand a {
        margin: 0;
        padding: 0;
    }

    .container-header .navbar-brand img {
        width: 175px;
        max-width: 100%;
        height: auto;
    }

    /* Khối menu chỉ giữ nút hamburger trên cùng một hàng */
    .container-header > .container-nav {
        position: relative;

        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: nowrap;

        width: auto;
        min-width: 0;
        margin: 0;
        padding: 0;
    }

    /* Nút hamburger */
    .container-header .navbar-toggler {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        width: 44px;
        height: 42px;
        margin: 0 0 0 auto;
        padding: 7px;

        border: 1px solid rgba(216, 170, 87, 0.58);
        border-radius: 8px;

        background: rgba(255, 255, 255, 0.05);
        color: #fff;
    }

    .container-header .navbar-toggler:hover,
    .container-header .navbar-toggler:focus {
        border-color: var(--tn-gold);
        background: rgba(216, 170, 87, 0.12);
        box-shadow: 0 0 0 3px rgba(216, 170, 87, 0.18);
    }

    /* Menu xổ xuống, không đẩy Hero xuống */
    .container-header .navbar-collapse {
        position: absolute;
        top: calc(100% + 10px);
        right: 0;
        z-index: 1200;

        width: min(290px, calc(100vw - 32px));
        margin: 0;
        padding: 10px 16px;

        border: 1px solid rgba(216, 170, 87, 0.28);
        border-radius: 12px;

        background: rgba(12, 12, 12, 0.985);
        box-shadow: 0 18px 45px rgba(0, 0, 0, 0.42);
    }

    /* Bootstrap/Joomla collapse states */
    .container-header .navbar-collapse.collapse:not(.show) {
        display: none !important;
    }

    .container-header .navbar-collapse.collapse.show,
    .container-header .navbar-collapse.collapsing {
        display: block !important;
    }

    .container-header .navbar-collapse.collapsing {
        overflow: hidden;
    }

    /* Menu dọc bên trong dropdown */
    .container-header .mod-menu {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;

        width: 100%;
        gap: 0;
        margin: 0;
        padding: 0;
    }

    .container-header .mod-menu > li {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .container-header .mod-menu > li > a {
        display: block;
        width: 100%;

        padding: 12px 8px;

        border-bottom: 1px solid rgba(255, 255, 255, 0.08);

        color: #fff;
        font-size: 1rem;
        line-height: 1.25;
        text-align: left;
        white-space: nowrap;
    }

    .container-header .mod-menu > li:last-child > a {
        border-bottom: 0;
    }

    .container-header .mod-menu > li > a::after {
        display: none;
    }

    .container-header .mod-menu > li > a:hover,
    .container-header .mod-menu > li.active > a,
    .container-header .mod-menu > li.current > a {
        color: var(--tn-gold-light);
        background: rgba(216, 170, 87, 0.09);
    }

    .container-banner {
        min-height: 100svh;
        padding: 95px 24px 50px;
        background-position: 58% center;
    }

    .hero-box {
        max-width: 540px;
    }
}

@media (max-width: 480px) {

    .container-header {
        grid-template-columns: minmax(130px, 160px) minmax(0, 1fr);
        min-height: 62px;
        padding: 7px 13px;
    }

    .container-header .navbar-brand img {
        width: 155px;
    }

    .container-header .navbar-collapse {
        right: -2px;
        width: min(270px, calc(100vw - 26px));
    }

    .container-banner {
        min-height: 100svh;
        padding: 90px 20px 42px;
        background-position: 61% center;
    }

    .hero-box h1 {
        font-size: 3rem;
    }

    .hero-btn {
        display: block;
        width: fit-content;
        margin-top: 14px;
        margin-right: 0;
    }
}

/* --------------------------------------------------
   Hero — Large Monitors
-------------------------------------------------- */
/* Màn hình desktop lớn */
@media (min-width: 1600px) {
    .container-banner {
        background-position: center 20%;
    }
}

/* Màn hình rất lớn hoặc ultrawide */
@media (min-width: 2200px) {
    .container-banner {
        background-position: center 14%;
    }
}

/* ==================================================
   03. HOMEPAGE SECTIONS
================================================== */
/* --------------------------------------------------
   Homepage Content Wrappers
-------------------------------------------------- */
.home-content-module,
.home-content-module .mod-custom {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.tn-home-content {
    width: 100%;
    overflow: hidden;
}

.tn-home-section {
    width: 100%;
}


/* Latest Releases background */

.tn-releases-wrap {
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8f5ef 100%
        );
}


/* Latest Videos background */

.tn-videos-wrap {
    background:
        radial-gradient(
            circle at top right,
            rgba(216, 170, 87, 0.14),
            transparent 38%
        ),
        #101010;
}


/* About background */

.tn-about-wrap {
    background:
        linear-gradient(
            135deg,
            #f7f4ed 0%,
            #ffffff 55%,
            #eee7da 100%
        );
}


/* Prevent Cassiopeia from constraining Top-a */

.container-top-a {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.container-top-a > * {
    width: 100%;
    max-width: none;
    margin: 0;
}

/* --------------------------------------------------
   Latest Releases
-------------------------------------------------- */
.releases-section {
    width: 100%;
    max-width: 1400px;

    margin: 0 auto;
    padding: 90px clamp(24px, 6vw, 80px);

    color: #171717;
}

.section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;

    margin-bottom: 36px;
}

.section-label {
    display: block;

    margin-bottom: 8px;

    color: var(--tn-gold);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.16em;
}

.section-heading h2 {
    margin: 0;

    color: #151515;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.1;
}

/* section link  View all album */
.section-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 10px 16px;

    border: 1px solid rgba(141, 100, 43, 0.35);
    border-radius: 999px;

    color: #8d642b;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;

    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}

.section-link:hover {
    background: #8d642b;
    border-color: #8d642b;
    color: #fff;
    transform: translateY(-2px);
}


/* Album grid */

.album-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(22px, 3vw, 38px);
}

.album-card {
    min-width: 0;
}

.album-cover {
    position: relative;
    display: block;

    overflow: hidden;

    aspect-ratio: 1 / 1;

    border-radius: 12px;
    background: #111;

    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);

    text-decoration: none;
}

.album-cover img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.45s ease,
        filter 0.45s ease;
}

.album-cover::after {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.5),
        rgba(0, 0, 0, 0) 55%
    );

    opacity: 0;
    transition: opacity 0.35s ease;
}

.album-play {
    position: absolute;
    right: 18px;
    bottom: 18px;
    z-index: 2;

    display: grid;
    place-items: center;

    width: 52px;
    height: 52px;

    padding-left: 3px;

    border-radius: 50%;

    background: var(--tn-gold);
    color: #fff;

    font-size: 1rem;

    opacity: 0;
    transform: translateY(10px);

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);

    transition:
        opacity 0.35s ease,
        transform 0.35s ease,
        background-color 0.25s ease;
}

.album-cover:hover img {
    transform: scale(1.055);
    filter: brightness(0.82);
}

.album-cover:hover::after {
    opacity: 1;
}

.album-cover:hover .album-play {
    opacity: 1;
    transform: translateY(0);
}

.album-play:hover {
    background: var(--tn-gold-light);
}


/* Album text */

.album-info {
    padding-top: 18px;
}

.album-info h3 {
    margin: 0 0 7px;

    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.4;
}

.album-info h3 a {
    color: #171717;
    text-decoration: none;
}

.album-info h3 a:hover {
    color: #a47432;
}

.album-info p {
    margin: 0;

    color: #777;
    font-size: 0.9rem;
}


/* Tablet */

@media (max-width: 991px) {

    .releases-section {
        padding-top: 70px;
        padding-bottom: 70px;
    }

    .album-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* Phone */

@media (max-width: 560px) {

    .section-heading {
        display: block;
    }

    .section-link {
        display: inline-block;
        margin-top: 18px;
    }

    .album-grid {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .album-play {
        opacity: 1;
        transform: none;
    }
}

/* --------------------------------------------------
   Latest Videos
-------------------------------------------------- */
.videos-section {
    width: 100%;
    max-width: 1400px;

    margin: 0 auto;
    padding: 90px clamp(24px, 6vw, 80px);

    color: #fff;
}

/* .container-top-b no longer used; videos are inside .tn-videos-wrap */

.videos-heading h2 {
    color: #fff;
}

.videos-heading .section-link {
    color: var(--tn-gold-light);
    border-color: rgba(216, 170, 87, 0.45);
}

.videos-heading .section-link:hover {
    background: var(--tn-gold);
    border-color: var(--tn-gold);
    color: #111;
}


/* Video grid */

.video-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 38px 30px;
}

.video-card {
    min-width: 0;
}

.video-thumb {
    position: relative;
    display: block;

    width: 100%;
    padding: 0;
    overflow: hidden;

    aspect-ratio: 16 / 9;

    border: 0;
    border-radius: 14px;

    background: #080808;
    cursor: pointer;

    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.35);

    text-align: left;
}

.video-thumb img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.5s ease,
        filter 0.5s ease;
}

.video-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.72),
            rgba(0, 0, 0, 0.04) 65%
        );

    opacity: 0.8;

    transition: opacity 0.35s ease;
}

.video-play {
    position: absolute;
    top: 50%;
    left: 50%;

    display: grid;
    place-items: center;

    width: 72px;
    height: 72px;
    padding-left: 5px;

    border: 2px solid rgba(255, 255, 255, 0.82);
    border-radius: 50%;

    background: rgba(0, 0, 0, 0.55);
    color: #fff;

    font-size: 1.35rem;

    transform: translate(-50%, -50%) scale(0.92);

    transition:
        transform 0.35s ease,
        background-color 0.35s ease,
        border-color 0.35s ease;
}

.video-thumb:hover img {
    transform: scale(1.055);
    filter: brightness(0.76);
}

.video-thumb:hover .video-overlay {
    opacity: 1;
}

.video-thumb:hover .video-play {
    transform: translate(-50%, -50%) scale(1);
    background: var(--tn-gold);
    border-color: var(--tn-gold);
    color: #111;
}


/* Video title */

.video-info {
    padding-top: 17px;
}

.video-info h3 {
    margin: 0 0 7px;

    color: #fff;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.4;
}

.video-info p {
    margin: 0;

    color: #aaa;
    font-size: 0.88rem;
}

/* --------------------------------------------------
   Video Modal
-------------------------------------------------- */
body.tn-video-open {
    overflow: hidden;
}

.tn-video-modal {
    position: fixed;
    inset: 0;
    z-index: 5000;

    display: grid;
    place-items: center;

    padding: 24px;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}

.tn-video-modal.is-visible {
    opacity: 1;
    visibility: visible;
}

.tn-video-backdrop {
    position: absolute;
    inset: 0;

    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.tn-video-dialog {
    position: relative;
    z-index: 1;

    width: min(1100px, 94vw);

    overflow: hidden;

    border: 1px solid rgba(216, 170, 87, 0.35);
    border-radius: 16px;

    background: #111;

    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.72);

    transform: translateY(20px) scale(0.98);

    transition: transform 0.3s ease;
}

.tn-video-modal.is-visible .tn-video-dialog {
    transform: translateY(0) scale(1);
}

.tn-video-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding: 14px 18px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.tn-video-modal-header h2 {
    margin: 0;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: #fff;
    font-size: 1rem;
    font-weight: 600;
}

.tn-video-close {
    display: grid;
    place-items: center;

    flex: 0 0 auto;

    width: 38px;
    height: 38px;
    padding: 0;

    border: 0;
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.08);
    color: #fff;

    font-size: 1.7rem;
    line-height: 1;

    cursor: pointer;

    transition:
        background-color 0.25s ease,
        color 0.25s ease;
}

.tn-video-close:hover {
    background: var(--tn-gold);
    color: #111;
}

.tn-video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;

    background: #000;
}

.tn-video-frame iframe {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    border: 0;
}

/* --------------------------------------------------
   Video Responsive
-------------------------------------------------- */
@media (max-width: 800px) {

    .videos-section {
        padding-top: 70px;
        padding-bottom: 70px;
    }

    .video-grid {
        grid-template-columns: 1fr;
    }

    .video-play {
        width: 62px;
        height: 62px;
    }
}

@media (max-width: 560px) {

    .tn-video-modal {
        padding: 10px;
    }

    .tn-video-dialog {
        width: 100%;
        border-radius: 12px;
    }

    .tn-video-modal-header {
        padding: 11px 13px;
    }

    .video-info h3 {
        font-size: 1.05rem;
    }
}

/* --------------------------------------------------
   About The Tuan
-------------------------------------------------- */
.about-section {
    display: grid;
    grid-template-columns:
        minmax(320px, 0.9fr)
        minmax(380px, 1.1fr);

    align-items: center;
    gap: clamp(45px, 7vw, 100px);

    width: 100%;
    max-width: 1400px;

    margin: 0 auto;
    padding: 105px clamp(24px, 6vw, 80px);
}

.about-image {
    position: relative;
    overflow: hidden;

    aspect-ratio: 4 / 5;

    border-radius: 18px;
    background: #161616;

    box-shadow: 0 24px 65px rgba(0, 0, 0, 0.18);
}

.about-image::before {
    content: "";
    position: absolute;
    z-index: 2;

    top: 20px;
    left: 20px;
    right: -16px;
    bottom: -16px;

    border: 1px solid rgba(177, 128, 57, 0.55);
    border-radius: 18px;

    pointer-events: none;
}

.about-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition: transform 0.6s ease;
}

.about-image:hover img {
    transform: scale(1.035);
}

.about-content {
    max-width: 680px;
}

.about-content h2 {
    margin: 10px 0 28px;

    color: #171717;
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.025em;
}

.about-content p {
    margin: 0 0 20px;

    color: #555;
    font-size: 1.05rem;
    line-height: 1.85;
}

.about-content .about-lead {
    color: #2e2e2e;
    font-size: 1.18rem;
    line-height: 1.75;
}

.about-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;

    margin-top: 34px;
}

.about-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 14px 27px;

    border: 2px solid var(--tn-gold);
    border-radius: 999px;

    background: var(--tn-gold);
    color: #fff;

    font-weight: 700;
    text-decoration: none;

    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}

.about-btn:hover,
.about-btn:focus {
    background: #a97837;
    border-color: #a97837;
    color: #fff;
    transform: translateY(-2px);
}

.about-text-link {
    color: #895e27;
    font-weight: 700;
    text-decoration: none;
}

.about-text-link:hover {
    color: var(--tn-gold);
}


/* Tablet */

@media (max-width: 900px) {

    .about-section {
        grid-template-columns: 1fr;
        gap: 50px;

        padding-top: 80px;
        padding-bottom: 80px;
    }

    .about-image {
        width: min(520px, 100%);
        margin: 0 auto;
    }

    .about-content {
        max-width: 720px;
        margin: 0 auto;
    }
}


/* Phone */

@media (max-width: 560px) {

    .about-section {
        padding: 65px 20px 70px;
    }

    .about-content h2 {
        font-size: 2.65rem;
    }

    .about-content p,
    .about-content .about-lead {
        font-size: 1rem;
    }

    .about-actions {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
    }
}

/* --------------------------------------------------
   Listen Everywhere
-------------------------------------------------- */
.tn-streaming-wrap {
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(216, 170, 87, 0.17),
            transparent 34%
        ),
        radial-gradient(
            circle at 90% 85%,
            rgba(216, 170, 87, 0.09),
            transparent 28%
        ),
        #0d0d0d;
}

.tn-streaming-wrap::before {
    content: "♪";
    position: absolute;
    top: -130px;
    right: 4%;

    color: rgba(216, 170, 87, 0.04);
    font-size: 34rem;
    font-weight: 700;
    line-height: 1;

    pointer-events: none;
}

.streaming-section {
    position: relative;
    z-index: 1;

    width: 100%;
    max-width: 1400px;

    margin: 0 auto;
    padding:
        100px
        clamp(24px, 6vw, 80px)
        110px;

    text-align: center;
}

.streaming-section .section-label {
    color: var(--tn-gold-light);
}

.streaming-section h2 {
    margin: 9px 0 20px;

    color: #fff;
    font-size: clamp(2.5rem, 5vw, 4.4rem);
    font-weight: 700;
    line-height: 1.08;
}

.streaming-intro {
    max-width: 650px;

    margin: 0 auto 46px;

    color: #b8b8b8;
    font-size: 1.08rem;
    line-height: 1.75;
}


/* Streaming cards */

.streaming-links {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;

    text-align: left;
}

.streaming-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 15px;

    min-width: 0;
    padding: 22px 20px;

    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 14px;

    background: rgba(255, 255, 255, 0.055);
    color: #fff;

    text-decoration: none;

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}

.streaming-card:hover,
.streaming-card:focus {
    border-color: rgba(216, 170, 87, 0.65);

    background: rgba(216, 170, 87, 0.12);
    color: #fff;

    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.32);
    transform: translateY(-5px);
}

.streaming-icon {
    display: grid;
    place-items: center;

    width: 46px;
    height: 46px;

    border-radius: 50%;

    background: var(--tn-gold);
    color: #111;

    font-size: 1.2rem;
    font-weight: 800;
}

.streaming-text {
    min-width: 0;
}

.streaming-text strong,
.streaming-text small {
    display: block;
}

.streaming-text strong {
    margin-bottom: 4px;

    color: #fff;
    font-size: 1rem;
    line-height: 1.25;
}

.streaming-text small {
    overflow: hidden;

    color: #aaa;
    font-size: 0.78rem;
    line-height: 1.3;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.streaming-arrow {
    color: var(--tn-gold-light);
    font-size: 1.2rem;

    transition: transform 0.25s ease;
}

.streaming-card:hover .streaming-arrow {
    transform: translateX(4px);
}


/* Slight platform variations */

.streaming-youtube .streaming-icon {
    padding-left: 3px;
}

.streaming-facebook .streaming-icon {
    font-family: Arial, sans-serif;
    font-size: 1.35rem;
}


/* Tablet */

@media (max-width: 1050px) {

    .streaming-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* Phone */

@media (max-width: 580px) {

    .streaming-section {
        padding:
            75px
            20px
            80px;
    }

    .streaming-links {
        grid-template-columns: 1fr;
    }

    .streaming-section h2 {
        font-size: 2.7rem;
    }

    .streaming-intro {
        margin-bottom: 35px;
        font-size: 1rem;
    }

    .streaming-card {
        padding: 18px;
    }

    .tn-streaming-wrap::before {
        display: none;
    }
}

/* ==================================================
   04. ALBUMS
================================================== */
/* --------------------------------------------------
   Albums Category Page
-------------------------------------------------- */
/* Nội dung trang Albums */
body.view-category .site-grid {
    background: #f7f5f1;
}

body.view-category main {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding:
        130px
        clamp(24px, 6vw, 80px)
        90px;
}

/* Tiêu đề trang */
body.view-category .page-header h1,
body.view-category .page-header h2 {
    margin: 0 0 42px;
    color: #161616;
    font-size: clamp(2.4rem, 5vw, 4rem);
    font-weight: 700;
    line-height: 1.1;
}

/* Category Blog thành album grid */
body.view-category .com-content-category-blog__items,
body.view-category .blog-items:not(.items-leading) {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 42px 30px !important;
}

/* Xóa độ rộng cột mặc định Joomla */
body.view-category .blog-item {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
}

/* Album card */
body.view-category .blog-item-content {
    height: 100%;
}

/* Ảnh intro */
body.view-category .item-image {
    position: relative;
    overflow: hidden;
    float: none !important;
    width: 100%;
    margin: 0 0 18px;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    background: #111;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.14);
}

body.view-category .item-image a {
    display: block;
    width: 100%;
    height: 100%;
}

body.view-category .item-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform 0.45s ease,
        filter 0.45s ease;
}

/* Album Overlay khi hover */
body.view-category .item-image:hover img {
    transform: scale(1.055);
    filter: brightness(0.78);
}

/* --------------------------------------------------
   Album Cover Play Button
-------------------------------------------------- */
body.view-category .item-image {
    position: relative;
    overflow: hidden;
}

body.view-category .item-image img{
    transition:
        transform .35s ease,
        filter .35s ease;
}

/* Nút tròn */
body.view-category .item-image::after{

    content:"▶";

    position:absolute;

    right:18px;
    bottom:18px;

    width:58px;
    height:58px;

    border-radius:50%;

    background:#1db954;          /* Spotify Green */

    color:#fff;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:24px;

    box-shadow:
        0 10px 25px rgba(0,0,0,.28);

    opacity:0;

    transform:
        translateY(12px)
        scale(.85);

    transition:
        all .28s ease;

    pointer-events:none;

    z-index:5;
}

/* Hover */

body.view-category .item-image:hover::after{

    opacity:1;

    transform:
        translateY(0)
        scale(1);
}

/* Cover */

body.view-category .item-image:hover img{

    transform:scale(1.06);

    filter:
        brightness(.70);
}

/* Nút nổi lên chút */

body.view-category .blog-item:hover{

    transform:translateY(-6px);
}

/* Mobile */

@media (max-width:768px){

    body.view-category .item-image::after{

        width:32px;
        height:32px;

        font-size:14px;

        right:8px;
        bottom:8px;

        opacity:1;

        transform:none;
    }

}

/* Tên album */
body.view-category .blog-item .page-header {
    margin: 0;
}

body.view-category .blog-item .page-header h2 {
    margin: 0;
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.4;
}

body.view-category .blog-item .page-header h2 a {
    color: #171717;
    text-decoration: none;
    transition: color 0.25s ease;
}

body.view-category .blog-item .page-header h2 a:hover {
    color: #9c6c2e;
}

/* Ẩn metadata còn sót */
body.view-category .article-info,
body.view-category .article-info-term,
body.view-category .icons,
body.view-category .tags,
body.view-category .readmore {
    display: none;
}

/* Pagination */
body.view-category .pagination {
    margin-top: 55px;
    justify-content: center;
}

/* Tablet */
@media (max-width: 991px) {

    body.view-category .blog-items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Phone */
@media (max-width: 560px) {

    body.view-category main {
        padding-top: 110px;
        padding-left: 20px;
        padding-right: 20px;
    }

    body.view-category .blog-items {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    body.view-category .item-image::after {
        display: none;
    }
}

/* --------------------------------------------------
   Joomla Masonry Override
-------------------------------------------------- */
/* Tắt hoàn toàn Masonry columns của Cassiopeia */
body.albums-page .blog-items.masonry-4,
body.view-category .blog-items.masonry-4 {
    display: grid !important;

    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;

    column-count: initial !important;
    column-width: auto !important;
    columns: initial !important;

    gap: 42px 30px !important;

    width: 100% !important;
    margin: 0 !important;
}

/* Mỗi article là một card trong grid */
body.albums-page .blog-items.masonry-4 > .blog-item,
body.view-category .blog-items.masonry-4 > .blog-item {
    display: block !important;

    grid-column: auto !important;
    grid-row: auto !important;

    break-inside: auto !important;
    page-break-inside: auto !important;

    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
}

/* Chỉ ẩn nội dung chi tiết ở trang danh sách */
body.albums-page .blog-items .album-detail-page,
body.view-category .blog-items .album-detail-page {
    display: none !important;
}

/* Ảnh bìa */
body.albums-page .blog-items .item-image,
body.view-category .blog-items .item-image {
    float: none !important;

    display: block;
    width: 100% !important;
    margin: 0 0 16px !important;

    aspect-ratio: 1 / 1;
    overflow: hidden;

    border-radius: 12px;
}

body.albums-page .blog-items .item-image img,
body.view-category .blog-items .item-image img {
    display: block;

    width: 100% !important;
    height: 100% !important;

    object-fit: cover;
}

/* Tiêu đề album */
body.albums-page .blog-items .page-header,
body.view-category .blog-items .page-header {
    margin: 0 !important;
}

body.albums-page .blog-items .page-header h2,
body.view-category .blog-items .page-header h2 {
    margin: 0 !important;

    font-size: 1.1rem !important;
    line-height: 1.4;
}

/* Tablet */
@media (max-width: 991px) {
    body.albums-page .blog-items.masonry-4,
    body.view-category .blog-items.masonry-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Điện thoại */
@media (max-width: 560px) {
    body.albums-page .blog-items.masonry-4,
    body.view-category .blog-items.masonry-4 {
        grid-template-columns: 1fr !important;
        gap: 34px !important;
    }
}

/* --------------------------------------------------
   Album Card Polish
-------------------------------------------------- */
/* Mỗi album là một card mềm, sạch */
body.albums-page .blog-item,
body.view-category .blog-item {
    padding: 12px 12px 18px !important;

    border: 1px solid rgba(160, 120, 65, 0.12);
    border-radius: 16px;

    background: rgba(255, 255, 255, 0.72);

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.06);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease,
        background-color 0.3s ease;
}

/* Card nâng nhẹ khi hover */
body.albums-page .blog-item:hover,
body.view-category .blog-item:hover {
    transform: translateY(-7px);

    border-color: rgba(216, 170, 87, 0.38);
    background: #fff;

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.13);
}

/* Ảnh bìa nằm gọn trong card */
body.albums-page .blog-item .item-image,
body.view-category .blog-item .item-image {
    margin-bottom: 17px !important;
    border-radius: 12px;
}

/* Tên album có thêm khoảng thở */
body.albums-page .blog-item .page-header,
body.view-category .blog-item .page-header {
    padding: 0 5px 2px;
}

/* Tên album */
body.albums-page .blog-item .page-header h2,
body.view-category .blog-item .page-header h2 {
    margin: 0 !important;
    font-size: 1.08rem !important;
    line-height: 1.4;
}

/* Mobile không nâng card quá nhiều */
@media (max-width: 560px) {

    body.albums-page .blog-item,
    body.view-category .blog-item {
        padding: 10px 10px 17px !important;
    }

    body.albums-page .blog-item:hover,
    body.view-category .blog-item:hover {
        transform: translateY(-3px);
    }
}

/* --------------------------------------------------
   Albums — Mobile Image Only
-------------------------------------------------- */
@media (max-width: 560px) {

    /* Ẩn tên album trên điện thoại */
    body.view-category .blog-item .page-header,
    body.albums-page .blog-item .page-header {
        display: none !important;
    }

    /* Bỏ khung card để bìa album rộng hơn */
    body.view-category .blog-item,
    body.albums-page .blog-item {
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    /* Bìa album chiếm toàn bộ chiều rộng card */
    body.view-category .item-image,
    body.albums-page .item-image {
        width: 100% !important;
        margin: 0 !important;
        border-radius: 14px;
    }

    /* Giữ nút play hiển thị trên mobile */
    body.view-category .item-image::after,
    body.albums-page .item-image::after {
        display: flex !important;
    }
}

/* --------------------------------------------------
   Album Detail Page
-------------------------------------------------- */
.album-detail-page {
    width: 100%;
    background:
        linear-gradient(
            180deg,
            #f8f5ef 0%,
            #ffffff 55%,
            #f4efe6 100%
        );
}


/* Hero album */

.album-detail-hero {
    display: grid;
    grid-template-columns:
        minmax(300px, 0.85fr)
        minmax(380px, 1.15fr);

    align-items: center;
    gap: clamp(45px, 7vw, 100px);

    width: 100%;
    max-width: 1400px;

    margin: 0 auto;
    padding:
        145px
        clamp(24px, 6vw, 80px)
        95px;
}


/* Cover */

.album-detail-cover {
    position: relative;

    width: 100%;
    max-width: 520px;

    margin: 0 auto;

    overflow: hidden;

    aspect-ratio: 1 / 1;

    border-radius: 18px;

    background: #111;

    box-shadow:
        0 28px 75px rgba(0, 0, 0, 0.22);
}

.album-detail-cover::after {
    content: "";

    position: absolute;
    inset: 12px -16px -16px 12px;
    z-index: -1;

    border: 1px solid rgba(177, 128, 57, 0.5);
    border-radius: 18px;
}

.album-detail-cover img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* Album text */

.album-detail-info h1 {
    margin: 10px 0 14px;

    color: #171717;

    font-size: clamp(3rem, 6vw, 5.5rem);
    font-weight: 700;
    line-height: 0.98;
    letter-spacing: -0.035em;
}

.album-detail-artist {
    margin: 0 0 24px;

    color: #9c6c2e;

    font-size: 1.15rem;
    font-weight: 700;
}

.album-detail-description {
    max-width: 650px;

    margin: 0 0 32px;

    color: #555;

    font-size: 1.08rem;
    line-height: 1.8;
}


/* Buttons */

.album-detail-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 13px;
}

.album-main-play,
.album-platform-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 48px;
    padding: 12px 22px;

    border-radius: 999px;

    font-size: 0.94rem;
    font-weight: 700;
    text-decoration: none;

    cursor: pointer;

    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}

.album-main-play {
    border: 2px solid var(--tn-gold);

    background: var(--tn-gold);
    color: #111;
}

.album-main-play:hover {
    background: var(--tn-gold-light);
    border-color: var(--tn-gold-light);

    transform: translateY(-2px);
}

.album-platform-btn {
    border: 1px solid rgba(141, 100, 43, 0.35);

    background: transparent;
    color: #7f5826;
}

.album-platform-btn:hover {
    border-color: #8d642b;

    background: #8d642b;
    color: #fff;

    transform: translateY(-2px);
}

/* --------------------------------------------------
   Track List
-------------------------------------------------- */
.album-track-section {
    width: 100%;
    max-width: 1100px;

    margin: 0 auto;
    padding:
        20px
        clamp(20px, 5vw, 60px)
        90px;
}

.album-track-heading {
    margin-bottom: 30px;
}

.album-track-heading h2 {
    margin: 8px 0 0;

    color: #171717;

    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1.1;
}

.album-track-list {
    overflow: hidden;

    border: 1px solid rgba(160, 120, 65, 0.16);
    border-radius: 16px;

    background: rgba(255, 255, 255, 0.9);

    box-shadow:
        0 18px 48px rgba(0, 0, 0, 0.08);
}

.album-track {
    display: grid;
    grid-template-columns:
        42px
        minmax(0, 1fr)
        48px;

    align-items: center;
    gap: 18px;

    padding: 17px 20px;

    border-bottom: 1px solid #ece7df;

    transition: background-color 0.25s ease;
}

.album-track:last-child {
    border-bottom: 0;
}

.album-track:hover {
    background: #f8f3ea;
}

.track-number {
    color: #aaa;

    font-size: 0.82rem;
    font-weight: 700;
}

.track-info {
    min-width: 0;
}

.track-info strong,
.track-info span {
    display: block;
}

.track-info strong {
    overflow: hidden;

    color: #202020;

    font-size: 1rem;
    line-height: 1.35;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.track-info span {
    margin-top: 3px;

    color: #888;

    font-size: 0.8rem;
}

.track-play {
    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;
    padding: 0 0 0 3px;

    border: 0;
    border-radius: 50%;

    background: #151515;
    color: #fff;

    cursor: pointer;

    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}

.track-play:hover,
.track-play.is-playing {
    background: var(--tn-gold);
    color: #111;

    transform: scale(1.06);
}

/* --------------------------------------------------
   About Album
-------------------------------------------------- */
.album-about-section {
    width: min(850px, calc(100% - 40px));

    margin: 0 auto;
    padding: 10px 0 110px;
}

.album-about-section h2 {
    margin: 8px 0 22px;

    color: #171717;

    font-size: clamp(2.2rem, 4vw, 3.5rem);
    line-height: 1.12;
}

.album-about-section p {
    margin: 0 0 20px;

    color: #555;

    font-size: 1.08rem;
    line-height: 1.9;
}

/* --------------------------------------------------
   Album Detail Responsive
-------------------------------------------------- */
@media (max-width: 900px) {

    .album-detail-hero {
        grid-template-columns: 1fr;
        gap: 48px;

        padding-top: 115px;
    }

    .album-detail-info {
        width: min(720px, 100%);

        margin: 0 auto;
    }
}


@media (max-width: 560px) {

    .album-detail-hero {
        padding:
            95px
            20px
            65px;
    }

    .album-detail-cover {
        border-radius: 14px;
    }

    .album-detail-info h1 {
        font-size: 3rem;
    }

    .album-detail-description {
        font-size: 1rem;
    }

    .album-detail-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .album-main-play,
    .album-platform-btn {
        width: 100%;
    }

    .album-track-section {
        padding:
            10px
            16px
            70px;
    }

    .album-track {
        grid-template-columns:
            34px
            minmax(0, 1fr)
            42px;

        gap: 10px;

        padding: 14px 13px;
    }

    .album-about-section {
        width: calc(100% - 40px);
        padding-bottom: 80px;
    }

    .album-about-section p {
        font-size: 1rem;
    }
}

/* --------------------------------------------------
   Mini Audio Preview Player
-------------------------------------------------- */
body.tn-player-visible {
    padding-bottom: 106px;
}

.tn-player {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;

    padding: 12px clamp(18px, 4vw, 58px);

    background:
        linear-gradient(
            90deg,
            rgba(12, 12, 12, 0.98),
            rgba(25, 21, 15, 0.98)
        );

    border-top: 1px solid rgba(216, 170, 87, 0.4);
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.35);

    color: #fff;

    opacity: 0;
    visibility: hidden;
    transform: translateY(110%);

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease,
        transform 0.3s ease;
}

.tn-player.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.tn-player-inner {
    display: grid;
    grid-template-columns:
        64px
        minmax(160px, 260px)
        52px
        minmax(220px, 1fr)
        42px;

    align-items: center;
    gap: 18px;

    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

.tn-player-cover {
    display: block;

    width: 64px;
    height: 64px;

    border-radius: 8px;
    object-fit: cover;

    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.35);
}

.tn-player-info {
    min-width: 0;
}

.tn-player-info strong,
.tn-player-info span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tn-player-info strong {
    margin-bottom: 4px;

    color: #fff;
    font-size: 1rem;
    line-height: 1.3;
}

.tn-player-info span {
    color: #c8c8c8;
    font-size: 0.82rem;
}

.tn-player-toggle {
    display: grid;
    place-items: center;

    width: 48px;
    height: 48px;
    padding: 0 0 0 3px;

    border: 0;
    border-radius: 50%;

    background: var(--tn-gold);
    color: #111;

    font-size: 1.05rem;
    cursor: pointer;

    transition:
        background-color 0.25s ease,
        transform 0.25s ease;
}

.tn-player-toggle:hover,
.tn-player-toggle:focus-visible {
    background: var(--tn-gold-light);
    transform: scale(1.06);
}

.tn-player-progress-area {
    min-width: 0;
}

.tn-player-progress {
    width: 100%;
    height: 5px;

    margin: 0;

    accent-color: var(--tn-gold);
    cursor: pointer;
}

.tn-player-time {
    display: flex;
    justify-content: space-between;
    gap: 14px;

    margin-top: 5px;

    color: #aaa;
    font-size: 0.72rem;
}

.tn-player-close {
    display: grid;
    place-items: center;

    width: 38px;
    height: 38px;
    padding: 0;

    border: 0;
    border-radius: 50%;

    background: transparent;
    color: #ddd;

    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;

    transition:
        background-color 0.25s ease,
        color 0.25s ease;
}

.tn-player-close:hover,
.tn-player-close:focus-visible {
    background: rgba(255, 255, 255, 0.1);
    color: var(--tn-gold-light);
}


/* Nút play trên album */

.album-play.play-preview {
    border: 0;
    cursor: pointer;
}


/* Trạng thái album đang phát */

.play-preview.is-playing {
    background: #fff;
    color: #171717;
}


/* Tablet */

@media (max-width: 900px) {

    body.tn-player-visible {
        padding-bottom: 132px;
    }

    .tn-player-inner {
        grid-template-columns:
            54px
            minmax(120px, 1fr)
            46px
            38px;

        gap: 12px;
    }

    .tn-player-cover {
        width: 54px;
        height: 54px;
    }

    .tn-player-progress-area {
        grid-column: 1 / -1;
    }

    .tn-player-toggle {
        width: 44px;
        height: 44px;
    }
}


/* Phone */

@media (max-width: 560px) {

    body.tn-player-visible {
        padding-bottom: 142px;
    }

    .tn-player {
        padding: 10px 14px;
    }

    .tn-player-inner {
        grid-template-columns: 50px minmax(0, 1fr) 44px 34px;
        gap: 10px;
    }

    .tn-player-cover {
        width: 50px;
        height: 50px;
    }

    .tn-player-info strong {
        font-size: 0.9rem;
    }

    .tn-player-info span {
        font-size: 0.75rem;
    }

    .tn-player-time span:nth-child(2) {
        display: none;
    }

    .tn-player-close {
        width: 32px;
        height: 32px;
    }
}

/* ==================================================
   05. ABOUT STORY PAGE
================================================== */
body.view-article main {
    padding-top: 100px;
}

.about-story-page {
    background: #f8f5ef;
}

.about-story-hero {
    display: grid;
    grid-template-columns: minmax(320px, 0.9fr) minmax(360px, 1.1fr);
    align-items: center;
    gap: clamp(45px, 7vw, 100px);

    width: 100%;
    max-width: 1400px;

    margin: 0 auto;
    padding:
        75px
        clamp(24px, 6vw, 80px)
        90px;
}

.about-story-image {
    overflow: hidden;
    aspect-ratio: 4 / 5;

    border-radius: 18px;
    background: #111;

    box-shadow: 0 24px 65px rgba(0, 0, 0, 0.18);
}

.about-story-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}

.about-story-intro h1 {
    margin: 10px 0 22px;

    color: #171717;
    font-size: clamp(3rem, 7vw, 6rem);
    font-weight: 700;
    line-height: 0.98;
}

.about-story-lead {
    max-width: 650px;

    margin: 0;

    color: #4b4b4b;
    font-size: clamp(1.2rem, 2.4vw, 1.6rem);
    line-height: 1.65;
}

.about-story-content {
    width: min(900px, calc(100% - 40px));

    margin: 0 auto;
    padding: 20px 0 100px;
}

.about-story-content h2 {
    margin: 55px 0 18px;

    color: #171717;
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1.15;
}

.about-story-content p {
    margin: 0 0 22px;

    color: #4d4d4d;
    font-size: 1.1rem;
    line-height: 1.9;
}

.about-story-content blockquote {
    margin: 50px 0;
    padding: 30px 34px;

    border-left: 4px solid var(--tn-gold);

    background: #fff;
    color: #2b2b2b;

    font-size: clamp(1.4rem, 3vw, 2rem);
    font-style: italic;
    line-height: 1.55;

    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.08);
}

.about-story-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;

    margin-top: 42px;
}

@media (max-width: 900px) {

    .about-story-hero {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .about-story-image {
        width: min(520px, 100%);
        margin: 0 auto;
    }
}

@media (max-width: 560px) {

    body.view-article main {
        padding-top: 82px;
    }

    .about-story-hero {
        padding:
            45px
            20px
            65px;
    }

    .about-story-content {
        width: calc(100% - 40px);
        padding-bottom: 75px;
    }

    .about-story-content p {
        font-size: 1rem;
    }

    .about-story-content blockquote {
        padding: 24px 22px;
    }

    .about-story-actions {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ==================================================
   06. CONTACT PAGE
================================================== */
/* --------------------------------------------------
   Contact Layout
-------------------------------------------------- */
body.view-contact {
    background:
        linear-gradient(
            135deg,
            #f8f5ef 0%,
            #ffffff 52%,
            #eee5d7 100%
        );
}

/* Vùng nội dung chính */
body.view-contact main {
    width: 100%;
    max-width: 1200px;

    margin: 0 auto;
    padding:
        125px
        clamp(22px, 5vw, 65px)
        90px;
}

/* Ẩn tiêu đề và thông tin mặc định của Joomla */
body.view-contact main > .page-header,
body.view-contact .contact > .page-header,
body.view-contact .contact-name,
body.view-contact .contact-category,
body.view-contact .contact-address,
body.view-contact .contact-webpage,
body.view-contact .icons,
body.view-contact .contact > h1,
body.view-contact .contact > h2 {
    display: none !important;
}

/* Hai cột */
body.view-contact .contact {
    display: grid;
    grid-template-columns:
        minmax(270px, 0.8fr)
        minmax(440px, 1.2fr);

    grid-template-areas:
        "intro form";

    align-items: start;
    gap: clamp(45px, 7vw, 90px);

    width: 100%;
}

/* --------------------------------------------------
   Left Column — Let's Connect
-------------------------------------------------- */
body.view-contact .contact-miscinfo {
    grid-area: intro;

    position: sticky;
    top: 115px;

    margin: 0;
    padding: 0;

    background: transparent;
}

/* Ẩn tiêu đề Miscellaneous Information */
body.view-contact .contact-miscinfo > h3,
body.view-contact .contact-miscinfo .page-header,
body.view-contact .contact-miscinfo dt {
    display: none !important;
}

body.view-contact .contact-miscinfo dl,
body.view-contact .contact-miscinfo dd {
    margin: 0;
    padding: 0;
}

body.view-contact .contact-intro {
    padding: 12px 0;
}

body.view-contact .contact-intro .section-label {
    margin-bottom: 12px;
}

body.view-contact .contact-intro h1 {
    margin: 0 0 22px;

    color: #171717;
    font-size: clamp(2.8rem, 5vw, 4.8rem);
    font-weight: 700;
    line-height: 0.98;
    letter-spacing: -0.035em;
}

body.view-contact .contact-intro p {
    margin: 0 0 18px;

    color: #555;
    font-size: 1.05rem;
    line-height: 1.8;
}

/* Social links */
body.view-contact .contact-social,
body.view-contact .contact-quick-links {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;

    margin-top: 28px;
}

body.view-contact .contact-social a,
body.view-contact .contact-quick-links a {
    color: #8d642b;
    font-weight: 700;
    text-decoration: none;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

body.view-contact .contact-social a:hover,
body.view-contact .contact-quick-links a:hover {
    color: var(--tn-gold);
    transform: translateX(3px);
}

/* --------------------------------------------------
   Right Column — Contact Form
-------------------------------------------------- */
body.view-contact .contact-form {
    grid-area: form;

    width: 100%;
    max-width: 680px;

    margin: 0;
    padding: clamp(28px, 4vw, 46px);

    border: 1px solid rgba(160, 120, 65, 0.18);
    border-radius: 20px;

    background: rgba(255, 255, 255, 0.96);

    box-shadow:
        0 24px 65px rgba(0, 0, 0, 0.11);
}

/* Ẩn tiêu đề mặc định */
body.view-contact .contact-form > h3,
body.view-contact .contact-form legend {
    display: none !important;
}

/* Tiêu đề riêng */
body.view-contact .contact-form::before {
    content: "Send Me a Message";

    display: block;

    margin: 0 0 8px;

    color: #171717;
    font-size: 1.85rem;
    font-weight: 700;
    text-align: center;
}

body.view-contact .contact-form::after {
    content: "I’ll get back to you as soon as possible.";

    display: block;

    margin: -2px 0 28px;

    color: #777;
    font-size: 0.92rem;
    text-align: center;
}

/* Form spacing */
body.view-contact .contact-form .control-group {
    margin-bottom: 17px;
}

body.view-contact .contact-form label {
    display: block;

    margin-bottom: 7px;

    color: #2a2a2a;
    font-size: 0.9rem;
    font-weight: 700;
}

/* Input fields */
body.view-contact .contact-form input[type="text"],
body.view-contact .contact-form input[type="email"],
body.view-contact .contact-form textarea {
    width: 100%;

    border: 1px solid #d8d2c8;
    border-radius: 9px;

    background: #fff;
    color: #171717;

    font-size: 0.98rem;

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

body.view-contact .contact-form input[type="text"],
body.view-contact .contact-form input[type="email"] {
    min-height: 46px;
    padding: 10px 13px;
}

/* Message nhỏ gọn */
body.view-contact .contact-form textarea {
    min-height: 145px !important;
    height: 145px;

    padding: 12px 13px;
    resize: vertical;
}

body.view-contact .contact-form input:focus,
body.view-contact .contact-form textarea:focus {
    border-color: var(--tn-gold);
    outline: 0;

    box-shadow:
        0 0 0 4px rgba(216, 170, 87, 0.14);
}

/* Send button */
body.view-contact .contact-form .btn-primary,
body.view-contact .contact-form button[type="submit"] {
    display: block;

    width: 100%;
    min-height: 48px;

    margin-top: 10px;
    padding: 12px 25px;

    border: 0;
    border-radius: 999px;

    background: #102b5c;
    color: #fff;

    font-size: 0.98rem;
    font-weight: 700;

    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}

body.view-contact .contact-form .btn-primary:hover,
body.view-contact .contact-form button[type="submit"]:hover {
    background: var(--tn-gold);
    color: #111;

    transform: translateY(-2px);
}

/* --------------------------------------------------
   Contact — Tablet
-------------------------------------------------- */
@media (max-width: 900px) {

    body.view-contact .contact {
        grid-template-columns: 1fr;
        grid-template-areas:
            "intro"
            "form";

        gap: 42px;
    }

    body.view-contact .contact-miscinfo {
        position: static;
        max-width: 680px;
        margin: 0 auto;
    }

    body.view-contact .contact-form {
        margin: 0 auto;
    }
}

/* --------------------------------------------------
   Contact — Phone
-------------------------------------------------- */
@media (max-width: 600px) {

    body.view-contact main {
        padding:
            95px
            16px
            60px;
    }

    body.view-contact .contact {
        gap: 32px;
    }

    body.view-contact .contact-intro h1 {
        font-size: 2.8rem;
    }

    body.view-contact .contact-intro p {
        font-size: 1rem;
    }

    body.view-contact .contact-form {
        padding: 27px 20px;
        border-radius: 15px;
    }

    body.view-contact .contact-form::before {
        font-size: 1.5rem;
    }

    body.view-contact .contact-form textarea {
        min-height: 125px !important;
        height: 125px;
    }
}

/* ==================================================
   07. FOOTER
================================================== */
.container-footer {
    margin: 0;
    padding: 0;
    background: #0b0b0b;
}

.tn-footer {
    width: 100%;
    padding:
        70px
        clamp(24px, 6vw, 80px)
        28px;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(216, 170, 87, 0.12),
            transparent 34%
        ),
        #0b0b0b;

    color: #fff;
}

.tn-footer-inner {
    display: grid;
    grid-template-columns:
        minmax(260px, 1.6fr)
        minmax(150px, 0.7fr)
        minmax(170px, 0.8fr);

    gap: clamp(40px, 7vw, 95px);

    width: 100%;
    max-width: 1400px;

    margin: 0 auto;
    padding-bottom: 50px;
}


/* Footer logo */

.tn-footer-brand {
    max-width: 460px;
}

.tn-footer-logo {
    display: block;

    width: 230px;
    max-width: 100%;
    height: auto;

    margin-bottom: 22px;
}

.tn-footer-tagline {
    max-width: 420px;

    margin: 0;

    color: #bcbcbc;
    font-size: 1rem;
    line-height: 1.75;
}


/* Footer headings */

.tn-footer h3 {
    margin: 0 0 20px;

    color: var(--tn-gold-light);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}


/* Footer links */

.tn-footer-nav,
.tn-footer-social {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.tn-footer-nav a,
.tn-footer-social a {
    position: relative;

    margin-bottom: 12px;

    color: #ddd;
    font-size: 0.96rem;
    text-decoration: none;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

.tn-footer-nav a:hover,
.tn-footer-social a:hover {
    color: var(--tn-gold-light);
    transform: translateX(4px);
}


/* Bottom area */

.tn-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;

    width: 100%;
    max-width: 1400px;

    margin: 0 auto;
    padding-top: 25px;

    border-top: 1px solid rgba(255, 255, 255, 0.11);
}

.tn-footer-bottom p {
    margin: 0;

    color: #888;
    font-size: 0.82rem;
    line-height: 1.6;
}

.tn-footer-quote {
    text-align: right;
    font-style: italic;
}


/* Tablet */

@media (max-width: 900px) {

    .tn-footer-inner {
        grid-template-columns: 1.5fr 1fr 1fr;
        gap: 40px;
    }

    .tn-footer-logo {
        width: 205px;
    }
}


/* Phone */

@media (max-width: 650px) {

    .tn-footer {
        padding:
            55px
            22px
            26px;
    }

    .tn-footer-inner {
        grid-template-columns: 1fr;
        gap: 38px;

        padding-bottom: 38px;
    }

    .tn-footer-logo {
        width: 200px;
    }

    .tn-footer-bottom {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .tn-footer-quote {
        text-align: left;
    }
}

/* ==================================================
   08. ACCESSIBILITY
================================================== */
@media (prefers-reduced-motion: reduce) {

    .container-header,
    .hero-btn,
    .container-header .mod-menu > li > a,
    .container-header .mod-menu > li > a::after {
        transition: none;
    }
}

/* ==================================================
   09. CHANGE LOG
================================================== */
/*
   2026-07-11
   - Reorganized user.css into clearly labeled sections.
   - Preserved existing selectors, values, and responsive behavior.
   - Grouped Albums, Homepage, Contact, and Footer rules.
*/