:root {
    --myna-cream: #FFF8E9;
    --myna-yellow: #FFC93C;
    --myna-yellow-dark: #F4B400;
    --myna-purple: #8B5CF6;
    --myna-purple-light: #F1EBFF;
    --myna-green: #22B573;
    --myna-red: #F16063;
    --myna-ink: #2E2A22;
    --myna-muted: #8A8371;
    --myna-card-radius: 18px;
    --myna-bottom-nav-height: 64px;
    --myna-item-nav-height: 68px;
    /* Centered app-column width — widened on tablet/desktop below so the
       phone-sized layout isn't stranded in a narrow strip on bigger screens. */
    --myna-app-max-width: 560px;
}

@media (min-width: 768px) {
    :root { --myna-app-max-width: 720px; }
}
@media (min-width: 1024px) {
    :root { --myna-app-max-width: 880px; }
}

* { box-sizing: border-box; }

body.myna-body {
    background: var(--myna-cream);
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--myna-ink);
    margin: 0;
}

.myna-app {
    max-width: var(--myna-app-max-width);
    margin: 0 auto;
    min-height: 100vh;
    background: var(--myna-cream);
    position: relative;
    /* Lets #myna-page's rotateY (smooth prev/next flip, see myna.js) read
       as a 3D turn instead of a flat horizontal squish. */
    perspective: 1200px;
}

#myna-page {
    backface-visibility: hidden;
}

.myna-app.has-bottom-nav {
    padding-bottom: calc(var(--myna-bottom-nav-height) + 16px);
}

h1, h2, h3, h4, .myna-heading {
    font-family: 'Baloo 2', 'Nunito', sans-serif;
    font-weight: 700;
    color: var(--myna-ink);
}

a { text-decoration: none; }

/* Buttons */
.myna-btn-yellow {
    background: var(--myna-yellow);
    border: none;
    color: var(--myna-ink);
    font-weight: 700;
    border-radius: 14px;
    padding: 12px 20px;
}
.myna-btn-yellow:hover { background: var(--myna-yellow-dark); color: var(--myna-ink); }

.myna-btn-purple {
    background: var(--myna-purple);
    border: none;
    color: #fff;
    font-weight: 700;
    border-radius: 14px;
    padding: 12px 20px;
}
.myna-btn-purple-outline {
    background: #fff;
    color: var(--myna-purple);
    border: 2px solid var(--myna-purple);
    font-weight: 700;
    border-radius: 14px;
    padding: 12px 20px;
}
.myna-btn-purple-outline:hover { background: var(--myna-purple-light); color: var(--myna-purple); }

/* Màn chi tiết bài học (redesign) */
.myna-round-btn {
    width: 44px; height: 44px; border-radius: 999px;
    background: #fff; color: var(--myna-ink);
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 10px rgba(46, 42, 34, 0.08);
    text-decoration: none; flex-shrink: 0; font-size: 17px;
}
.myna-lesson-hero-img {
    width: 100%;
    border-radius: 20px;
    object-fit: cover;
    display: block;
    box-shadow: 0 4px 14px rgba(46, 42, 34, 0.12);
}
/* Hero + thống kê. Màn NHỎ: ảnh FULL 100% (banner phía trên, giữ tỉ lệ tự
   nhiên), rồi tiêu đề + mô tả, cuối cùng là hàng thống kê. */
.myna-lesson-top {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "img" "text" "stats";
    gap: 12px;
}
.myna-lesson-top__img { grid-area: img; }
.myna-lesson-top__text { grid-area: text; min-width: 0; }
.myna-lesson-top__stats { grid-area: stats; }
/* Màn nhỏ: ảnh full-width, cao theo tỉ lệ tự nhiên (không ép vuông/cắt). */
.myna-lesson-top__img .myna-lesson-hero-img { aspect-ratio: auto; height: auto; }
/* Màn RỘNG (≥768px): ảnh vuông cột trái, tiêu đề+mô tả+thống kê cột phải. */
@media (min-width: 768px) {
    .myna-lesson-top {
        grid-template-columns: 38% 1fr;
        grid-template-areas: "img text" "img stats";
        align-items: start;
        gap: 10px 22px;
    }
    .myna-lesson-top__img .myna-lesson-hero-img { aspect-ratio: 1 / 1; }
    .myna-lesson-top__text { align-self: center; }
}
.myna-stat-card {
    background: #fff; border-radius: 16px; padding: 12px 8px;
    box-shadow: 0 2px 10px rgba(46, 42, 34, 0.06);
}
.myna-stat-card__icon { font-size: 20px; margin-bottom: 4px; }
.myna-stat-card__value { font-weight: 800; font-size: 22px; color: var(--myna-ink); line-height: 1.05; }
.myna-stat-card__label { font-size: 12px; color: var(--myna-muted); }
.myna-stat-card__sub { font-size: 10px; color: var(--myna-muted); margin-top: 6px; line-height: 1.35; }
.myna-lesson-tip {
    background: #FFF7E6; border-radius: 14px; padding: 12px 16px;
    display: flex; align-items: center; gap: 10px;
    color: var(--myna-ink); font-size: 14px;
}
.myna-lesson-tip i { color: var(--myna-yellow-dark); font-size: 18px; }
.myna-lesson-tip b { color: var(--myna-purple); }
/* Nút "Bắt đầu học" neo ở đáy khi cuộn qua nút inline */
.myna-sticky-cta {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1035;
    width: 100%;
    max-width: var(--myna-app-max-width);
    margin: 0 auto;
    padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--myna-cream);
    box-shadow: 0 -4px 16px rgba(46, 42, 34, 0.1);
    animation: myna-sticky-cta-in 0.2s ease;
}
@keyframes myna-sticky-cta-in {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

/* ===== Bài luyện nghe (redesign) ===== */
.myna-listen-hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
@media (min-width: 768px) {
    .myna-listen-hero { grid-template-columns: 1fr 1fr; align-items: stretch; }
}
.myna-listen-hero__img {
    width: 100%;
    border-radius: 18px;
    object-fit: cover;
    display: block;
    aspect-ratio: 16 / 10;
    box-shadow: 0 4px 14px rgba(46, 42, 34, 0.12);
}
.myna-listen-card {
    background: #fff;
    border-radius: 18px;
    padding: 16px;
    box-shadow: 0 2px 10px rgba(46, 42, 34, 0.06);
    display: flex;
    flex-direction: column;
}
.myna-listen-card__head {
    display: flex; align-items: center; gap: 10px;
    font-weight: 800; font-size: 18px; color: var(--myna-purple);
}
.myna-listen-card__ear {
    width: 36px; height: 36px; border-radius: 999px;
    background: var(--myna-purple-light); color: var(--myna-purple);
    display: inline-flex; align-items: center; justify-content: center; font-size: 16px;
}
.myna-listen-card__desc { color: var(--myna-muted); font-size: 14px; margin-top: 8px; line-height: 1.4; }
.myna-listen-card__stats {
    display: flex; gap: 8px; margin-top: 12px;
    background: var(--myna-cream); border-radius: 14px; padding: 12px 8px;
}
.myna-listen-card__stats > div {
    flex: 1; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.myna-listen-card__stats i { font-size: 16px; }
.myna-listen-card__stats b { font-size: 18px; color: var(--myna-ink); }
.myna-listen-card__stats span { font-size: 11px; color: var(--myna-muted); }
.myna-listen-tip {
    background: var(--myna-purple-light); border-radius: 12px; padding: 10px 14px;
    display: flex; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--myna-ink);
}
.myna-listen-tip i { color: var(--myna-purple); font-size: 16px; }
.myna-listen-done {
    background: #FFF7E6; border-radius: 16px; padding: 14px 16px;
    display: flex; align-items: flex-start; gap: 12px;
    box-shadow: 0 2px 10px rgba(46, 42, 34, 0.06);
}
.myna-listen-done__face { font-size: 32px; color: var(--myna-yellow-dark); line-height: 1.1; }
/* Màn NHỎ: text 1 hàng bên trên, nút full-width 1 hàng bên dưới (icon vẫn ở
   đầu, cạnh trái). Màn RỘNG (>=520px): text + nút nằm ngang. */
.myna-listen-done__body { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.myna-listen-done__action .btn { width: 100%; }
@media (min-width: 520px) {
    .myna-listen-done { align-items: center; }
    .myna-listen-done__body { flex-direction: row; align-items: center; gap: 12px; }
    .myna-listen-done__action .btn { width: auto; }
}
/* Nút play tròn (phát/tạm dừng cả bài luyện nghe) */
.myna-listen-play {
    width: 64px; height: 64px; border-radius: 999px;
    background: var(--myna-purple); color: #fff; border: none;
    font-size: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 20px rgba(139, 92, 246, 0.4);
    cursor: pointer;
    transition: transform 0.1s ease;
}
.myna-listen-play:active { transform: scale(0.94); }
.myna-listen-play i { margin-left: 3px; } /* căn quang học tam giác play */
.myna-listen-play.is-playing i { margin-left: 0; }
.myna-btn-purple:hover { background: #7c4ce0; color: #fff; }

.myna-link { color: var(--myna-purple); font-weight: 600; }

/* Cards */
.myna-card {
    background: #fff;
    border-radius: var(--myna-card-radius);
    box-shadow: 0 4px 16px rgba(46, 42, 34, 0.06);
    padding: 16px;
}

/* Guest header (landing / auth pages) */
.myna-guest-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
}
.myna-guest-header__brand {
    font-family: 'Baloo 2', sans-serif;
    font-weight: 800;
    font-size: 24px;
    color: var(--myna-ink);
}
.myna-guest-header__actions { display: flex; align-items: center; gap: 8px; }
.myna-guest-header__brand-logo { height: 32px; width: auto; object-fit: contain; }

/* App header (inner pages, back button) */
.myna-app-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
}
.myna-app-header__back {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: #fff;
    color: var(--myna-ink);
    box-shadow: 0 2px 8px rgba(46, 42, 34, 0.08);
}
.myna-app-header__titles { flex: 1; text-align: center; }
.myna-app-header__title { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 18px; }
.myna-app-header__subtitle { font-size: 12px; color: var(--myna-muted); }
.myna-app-header__extra { min-width: 36px; text-align: right; }

/* Item detail screen skips the title bar entirely (see lesson_items/show.blade.php)
   to save vertical space for the exercise itself — just this close button,
   right-aligned, in its place. */
.myna-item-close {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: #fff;
    color: var(--myna-ink);
    box-shadow: 0 2px 8px rgba(46, 42, 34, 0.08);
    flex-shrink: 0;
}

/* Leaves room at the bottom for the fixed prev/next nav (.myna-item-nav)
   so it never covers the card content. */
.myna-item-content {
    padding-bottom: calc(var(--myna-item-nav-height) + 12px);
}

/* Scales with the viewport instead of a fixed pixel height, so it
   shrinks automatically on short screens instead of forcing a scroll. */
.myna-item-avatar {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: auto;
    max-width: 100%;
    border-radius: 14px;
    height: clamp(64px, 20vh, 180px);
    height: clamp(64px, 20dvh, 180px);
}

/* Prev/next nav on the item detail screen — fixed to the bottom of the
   app column (not the raw viewport, same centering trick as
   .myna-bottom-nav) so learners always reach it without scrolling,
   regardless of how tall the content above happens to be. */
.myna-item-nav {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 100%;
    max-width: var(--myna-app-max-width);
    height: var(--myna-item-nav-height);
    padding: 12px 16px;
    background: var(--myna-cream);
    box-shadow: 0 -4px 16px rgba(46, 42, 34, 0.06);
    z-index: 55;
    box-sizing: border-box;
}

/* Bottom tab nav */
.myna-bottom-nav {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 100%;
    max-width: var(--myna-app-max-width);
    height: var(--myna-bottom-nav-height);
    background: #fff;
    transition: transform 0.25s ease;
    display: flex;
    box-shadow: 0 -4px 16px rgba(46, 42, 34, 0.08);
    z-index: 50;
}
/* Slid off-screen while scrolling down (see myna.js) — keeps the
   horizontal centering transform (translateX) and adds the vertical
   slide on top of it, rather than replacing it. */
.myna-bottom-nav.is-scroll-hidden {
    transform: translateX(-50%) translateY(100%);
}
.myna-bottom-nav__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--myna-muted);
    font-size: 11px;
    font-weight: 600;
    border: none;
    background: none;
    font-family: inherit;
    padding: 0;
    cursor: pointer;
}
.myna-bottom-nav__item:focus { outline: none; }
.myna-bottom-nav__item i { font-size: 18px; }
.myna-bottom-nav__item.is-active { color: var(--myna-yellow-dark); }
.myna-bottom-nav__item span { white-space: nowrap; }
/* With 5 items, a narrow phone gets too cramped for labels — drop to
   icons only there and enlarge the icons a touch to fill the space. */
@media (max-width: 400px) {
    .myna-bottom-nav__item span { display: none; }
    .myna-bottom-nav__item i { font-size: 21px; }
}

/* Progress bars */
.myna-progress {
    height: 8px;
    background: #F0EBDA;
    border-radius: 999px;
    overflow: hidden;
}
.myna-progress__bar {
    height: 100%;
    background: var(--myna-yellow-dark);
    border-radius: 999px;
}
.myna-progress__bar.is-purple { background: var(--myna-purple); }
.myna-progress__bar.is-green { background: var(--myna-green); }

/* Circular progress ring (lesson card completion %) */
.myna-progress-ring {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: conic-gradient(var(--myna-yellow-dark) calc(var(--percent, 0) * 1%), #F0EBDA 0);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.myna-progress-ring__inner {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: var(--myna-ink);
}

/* Stat tiles */
.myna-stat {
    text-align: center;
}
.myna-stat__value {
    font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 20px;
    min-height: 30px; display: flex; align-items: center; justify-content: center;
}
.myna-stat__value--sm { font-size: 13px; line-height: 1.2; }
.myna-stat__label { font-size: 11px; color: var(--myna-muted); }

/* Lesson list rows */
/* ---- Facebook-style lesson feed (home "Bài học phổ biến") ---- */
/* ---- Home two-column layout (feed + right "Lộ trình phổ biến" sidebar).
   Phones/small tablets: single column, sidebar hidden. From lg up: the home
   app column widens and a sticky sidebar is anchored on the right. ---- */
.myna-home-aside { display: none; }
/* The feed column never exceeds 680px (centered when it's the only column). */
.myna-home-main { max-width: 680px; margin-left: auto; margin-right: auto; }

@media (min-width: 992px) {
    /* Widen the whole home column via the shared width var — this also
       stretches the fixed bottom-nav (footer), which reads the same var, so
       header + content + footer all span the full width (incl. the right
       sidebar column). Width = feed (680) + gap (20) + sidebar (320). */
    .myna-home { --myna-app-max-width: 1020px; }
    .myna-home-layout {
        display: flex;
        align-items: flex-start;
        gap: 20px;
    }
    .myna-home-main { flex: 1 1 auto; min-width: 0; }
    .myna-home-aside {
        display: block;
        flex: 0 0 320px;
        width: 320px;
        position: sticky;
        top: 12px;
        align-self: flex-start;
        padding: 16px 16px 0 0;
    }
}

.myna-side-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 1px 8px rgba(0,0,0,.04);
}
.myna-side-card + .myna-side-card { margin-top: 16px; }
.myna-side-card__head { padding: 14px 16px 10px; }
.myna-side-list { padding-bottom: 6px; }
.myna-side-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    text-decoration: none;
    color: var(--myna-ink);
}
.myna-side-item:hover { background: var(--myna-cream); }
.myna-side-item__img {
    width: 64px; height: 64px;
    border-radius: 14px;
    object-fit: cover;
    flex-shrink: 0;
}
.myna-side-item__body { min-width: 0; }
.myna-side-item__name {
    font-weight: 700;
    font-size: 14px;
    line-height: 1.25;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.myna-side-item__meta { font-size: 12px; color: var(--myna-muted); }

.myna-feed { display: flex; flex-direction: column; gap: 14px; }
.myna-feed-post {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 1px 8px rgba(0,0,0,.04);
}
.myna-feed-post__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px 10px;
}
.myna-feed-post__avatar { flex-shrink: 0; }
.myna-feed-post__avatar img {
    width: 44px; height: 44px;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}
.myna-feed-post__headmeta { min-width: 0; flex: 1; }
.myna-feed-post__title {
    display: block;
    font-family: var(--myna-font-head, inherit);
    font-weight: 700;
    color: var(--myna-ink);
    font-size: 15px;
    line-height: 1.25;
    text-decoration: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.myna-feed-post__sub {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 10px;
    font-size: 12px;
    color: var(--myna-muted, #8a8a8a);
    margin-top: 2px;
}
.myna-feed-post__sub i { margin-right: 2px; }
.myna-feed-post__lvl {
    background: var(--myna-purple-light);
    color: var(--myna-purple);
    font-weight: 700;
    border-radius: 6px;
    padding: 1px 7px;
    font-size: 11px;
}
.myna-feed-post__route {
    color: var(--myna-purple);
    font-weight: 700;
    text-decoration: none;
}
.myna-feed-post__route:hover { text-decoration: underline; }
/* Facebook-style photo collage — every tile is itself 1:1, so the square
   source images show in full (no cropping) whatever the layout, and the
   block height flexes with the post width via the tiles' aspect-ratio. */
.myna-feed-post__gallery {
    position: relative;
    display: grid;
    gap: 2px;
    background: #fff;
    /* Cho phép ảnh hero dùng cqw = % chiều rộng khối gallery cho max-height. */
    container-type: inline-size;
}
.myna-feed-post__photo {
    display: block;
    position: relative;
    overflow: hidden;
    background: var(--myna-cream, #f5f1e8);
    aspect-ratio: 1 / 1;              /* mặc định: ô vuông (cao = rộng) */
}
.myna-feed-post__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;   /* cắt giữ phần TRÊN của ảnh, không căn giữa */
    display: block;
}

/* Ảnh HERO = ảnh đầu ở layout 1/3/4 (và 5+ dùng chung layout 4): chiều cao
   TỰ NHIÊN theo ảnh, chỉ bị chặn trên; ảnh ngang hiển thị đủ, ảnh dọc bị cắt. */
.myna-gallery-1 .myna-feed-post__photo,
.myna-gallery-3 .myna-feed-post__photo:nth-child(1),
.myna-gallery-4 .myna-feed-post__photo:nth-child(1) {
    aspect-ratio: auto;
}
.myna-gallery-1 .myna-feed-post__photo img,
.myna-gallery-3 .myna-feed-post__photo:nth-child(1) img,
.myna-gallery-4 .myna-feed-post__photo:nth-child(1) img {
    height: auto;
}
/* 1 ảnh: cao ≤ chiều rộng (không vượt hình vuông). */
.myna-gallery-1 .myna-feed-post__photo img { max-height: 100cqw; }
/* Hero của 3/4/5+: cao ≤ 70% chiều rộng. */
.myna-gallery-3 .myna-feed-post__photo:nth-child(1) img,
.myna-gallery-4 .myna-feed-post__photo:nth-child(1) img { max-height: 70cqw; }

.myna-gallery-1 { grid-template-columns: 1fr; }
.myna-gallery-2 { grid-template-columns: 1fr 1fr; }

/* 3–4 (và 5+ dùng chung layout 4) chia lưới 6 cột: 1 hàng chứa được 2 nửa
   (span 3) hoặc 3 phần ba (span 2). Ô nhỏ vuông quyết định chiều cao hàng. */
.myna-gallery-3,
.myna-gallery-4 { grid-template-columns: repeat(6, 1fr); }

/* 3 ảnh: hero 100% trên, 2 ảnh 50% vuông dưới */
.myna-gallery-3 .myna-feed-post__photo:nth-child(1) { grid-column: span 6; }
.myna-gallery-3 .myna-feed-post__photo:nth-child(2),
.myna-gallery-3 .myna-feed-post__photo:nth-child(3) { grid-column: span 3; }

/* 4 ảnh (và 5+): hero 100% trên, 3 ảnh 33.33% vuông dưới (ô cuối phủ "+N" nếu dư) */
.myna-gallery-4 .myna-feed-post__photo:nth-child(1) { grid-column: span 6; }
.myna-gallery-4 .myna-feed-post__photo:nth-child(n+2) { grid-column: span 2; }
.myna-feed-post__more {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.45);
    color: #fff;
    font-size: 26px;
    font-weight: 800;
}
.myna-feed-post__ring {
    position: absolute;
    bottom: 10px; right: 10px;
    box-shadow: 0 0 0 3px #fff;
    z-index: 2;
}
.myna-feed-post__body { padding: 10px 14px 4px; }
.myna-feed-post__translate { font-weight: 600; color: var(--myna-ink); font-size: 14px; }
.myna-feed-post__desc {
    font-size: 13px;
    color: var(--myna-muted, #8a8a8a);
    margin-top: 2px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.myna-feed-post__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px 12px;
    border-top: 1px solid rgba(0,0,0,.05);
    margin-top: 6px;
}
.myna-feed-post__acts { display: flex; align-items: center; gap: 2px; }
.myna-feed-post__act {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 0;
    padding: 6px 8px;
    border-radius: 10px;
    color: var(--myna-muted, #8a8a8a);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}
.myna-feed-post__act:hover { background: var(--myna-cream, #f5f1e8); }
.myna-feed-post__act.is-active { color: #e0245e; }
.myna-feed-post__act.is-active i { color: #e0245e; }
.myna-feed-post__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--myna-yellow, #FFC93C);
    color: var(--myna-ink);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 999px;
}

/* Facebook-style "link copied" toast */
.myna-toast {
    position: fixed;
    left: 50%;
    bottom: calc(var(--myna-bottom-nav-height) + 20px);
    transform: translateX(-50%) translateY(16px);
    z-index: 1080;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: min(92vw, 420px);
    padding: 12px 14px;
    background: #242526;
    color: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0,0,0,.35);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.myna-toast.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.myna-toast__img {
    width: 40px; height: 40px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}
.myna-toast__check { color: #22c55e; font-size: 20px; flex-shrink: 0; }
.myna-toast__msg { flex: 1; font-weight: 600; font-size: 14px; }
.myna-toast__close {
    background: transparent;
    border: 0;
    color: rgba(255,255,255,.7);
    font-size: 16px;
    padding: 4px;
    cursor: pointer;
    flex-shrink: 0;
}
.myna-toast__close:hover { color: #fff; }

.myna-lesson-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #fff;
    border-radius: var(--myna-card-radius);
    margin-bottom: 12px;
}
.myna-lesson-row.is-locked { opacity: .55; }
.myna-lesson-row__icon {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--myna-purple-light);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
    color: var(--myna-purple);
    flex-shrink: 0;
}
.myna-lesson-row__body { flex: 1; min-width: 0; }
.myna-lesson-row__title { font-weight: 700; }
.myna-lesson-row__desc { font-size: 12px; color: var(--myna-muted); }
.myna-lesson-row__status { flex-shrink: 0; }

/* Ảnh hàng giàu (lộ trình + bài học): chiếm ~1/3 bề rộng hàng, co giãn theo cột
   app (--myna-app-max-width). Wrapper giữ 1/3, ảnh fill 100% và vuông
   (aspect-ratio), bo góc theo % tự tỉ lệ. max-width để không quá lớn ở desktop. */
/* .myna-topic-row = "hàng giàu" dùng CHUNG cho lộ trình (/learning-paths) và bài
   học (/lessons, Yêu thích): căn nội dung từ TOP thay vì giữa — vì ảnh 1/3 cao,
   text + action bar nhiều dòng nên căn giữa sẽ lệch. Không đụng .myna-lesson-row
   thường (nếu có nơi khác dùng). */
.myna-lesson-row.myna-topic-row {
    align-items: flex-start;
}
/* Font co giãn theo màn hình: ảnh 1/3 (to), text lớn dần lấp đầy 2/3 cho cân đối,
   đỡ trống trên màn rộng. */
.myna-topic-row .myna-lesson-row__title {
    font-size: clamp(15px, 1.4vw + 10px, 22px);
    line-height: 1.3;
    margin-bottom: 2px;
}
.myna-topic-row .myna-lesson-row__desc {
    font-size: clamp(12px, 0.8vw + 9px, 15px);
    line-height: 1.45;
}
/* Action bar (tim + chia sẻ + Học ngay) trong hàng lộ trình: canh mép trái với
   text (bỏ thụt lề ngang của .myna-feed-post__actions), KHÔNG kẻ vạch ngăn. */
.myna-feed-post__actions.myna-topic-actions {
    padding: 8px 0 0;
    margin-top: 8px;
    flex-wrap: wrap;
    gap: 8px;
    border-top: none;
}
.myna-topic-avatar-wrap {
    flex: 0 0 33.333%;
    max-width: 280px;
}
.myna-topic-avatar {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 18%;
    display: block;
}

/* Hàng lộ trình/bài học CÓ action bar (tim/chia sẻ/Học ngay): dùng grid để
   action bar nằm ở cột 2/3 (màn rộng) HOẶC full-width DƯỚI ảnh + text (màn nhỏ,
   khi cột 2/3 quá chật). Ảnh (cột trái) trải cả 2 hàng. Hàng skill (chỉ có nút
   tim ở __status, không có .myna-topic-actions) không dùng grid này. */
.myna-topic-row:has(> .myna-topic-actions) {
    display: grid;
    grid-template-columns: min(33.333%, 280px) 1fr;
    grid-template-areas:
        "img  body"
        "img  actions";
    column-gap: 12px;
    row-gap: 0;
    align-items: start;
}
.myna-topic-row:has(> .myna-topic-actions) > .myna-topic-avatar-wrap { grid-area: img; }
.myna-topic-row:has(> .myna-topic-actions) > .myna-lesson-row__body   { grid-area: body; }
.myna-topic-row:has(> .myna-topic-actions) > .myna-topic-actions      { grid-area: actions; }

@media (max-width: 480px) {
    .myna-topic-row:has(> .myna-topic-actions) {
        grid-template-areas:
            "img  body"
            "actions actions";
    }
}

/* Vocabulary carousel cards */
.myna-vocab-card {
    background: #fff;
    border-radius: 14px;
    padding: 12px;
    box-shadow: 0 2px 10px rgba(46, 42, 34, 0.06);
}
.myna-vocab-card img { width: 100%; border-radius: 10px; height: auto; display: block; }

/* Horizontal-scroll rows (see myna.js' wheel/drag-to-scroll handling) */
[data-hscroll] { cursor: grab; }
[data-hscroll].is-dragging { cursor: grabbing; user-select: none; }

/* Big colorful variant of the app-header title — used on the
   listening-practice (single-paragraph lesson) page, where the header
   title is the page's only heading. */
.myna-app-header__title--hero {
    font-size: 24px;
    line-height: 1.2;
    color: var(--myna-purple);
}

/* Lộ trình (topic) page — Duolingo-style winding path of lesson nodes.
   Each node is offset horizontally via an inline translateX (see
   topics/show.blade.php), so the column itself stays centered. */
.myna-path {
    display: block;
    padding-top: 8px;
}
/* One chặng (stage) = one coloured section. --stage-color / --stage-color-dark
   are set inline per section (see topics/show.blade.php) and inherited by all
   nodes + the banner below. */
.myna-path-stage { display: block; width: 100%; }
.myna-path-stage__nodes {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 26px;
    /* Extra top room so the "Bắt đầu/Tiếp tục" bubble (absolute, -34px above
       the current node, +bounce) clears the sticky banner instead of being
       painted over by it. */
    padding: 44px 0 8px;
}
/* Coloured chặng title banner — STICKS to the top while its section is in
   view, and is pushed away (replaced) by the next chặng's banner on scroll.
   The cream padding block behind it hides nodes scrolling underneath. */
/* Banner + danh sách bài (collapse) nằm chung 1 khối STICKY, để danh sách luôn
   "neo" ngay dưới banner kể cả khi đã cuộn xuống trong chặng (giống dropdown
   chặng trên app). Nền cream để khối ghim che gọn các node phía sau. */
.myna-path-stage__header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--myna-cream);
}
.myna-path-stage__banner {
    background: var(--myna-cream);
    padding: 8px 0;
}
.myna-path-stage__banner-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    border: 0;
    cursor: pointer;
    background: var(--stage-color, var(--myna-purple));
    border-radius: 16px;
    padding: 10px 16px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
    color: #fff;
    transition: transform 0.08s ease, filter 0.12s ease;
}
.myna-path-stage__banner-inner:active { transform: scale(0.99); filter: brightness(0.96); }
.myna-path-stage__labels { flex: 1; min-width: 0; }
.myna-path-stage__label {
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.8px;
    color: rgba(255, 255, 255, 0.72);
}
.myna-path-stage__title {
    font-family: 'Baloo 2', 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.2;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.myna-path-stage__sep { width: 1px; height: 34px; background: rgba(255, 255, 255, 0.25); }
.myna-path-stage__icon { font-size: 20px; color: #fff; }
.myna-path-stage__chevron {
    font-size: 13px; color: #fff; margin-left: 10px;
    transition: transform 0.2s ease;
}
.myna-path-stage__banner-inner:not(.collapsed) .myna-path-stage__chevron { transform: rotate(180deg); }

/* Inline collapse listing a chặng's lessons — opens right under the banner.
   Rows: cover image, English title, Vietnamese title, heart. */
.myna-stage-list {
    position: relative;
    z-index: 4;
}
.myna-stage-list__inner {
    margin: 6px 0 2px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(46, 42, 34, 0.12);
    padding: 6px 8px;
    /* Danh sách dài: giới hạn chiều cao + cuộn trong, để khối sticky (banner +
       list) không chiếm hết màn hình. */
    max-height: 55vh;
    overflow-y: auto;
}
.myna-stage-list__row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 6px;
}
.myna-stage-list__row + .myna-stage-list__row { border-top: 1px solid #f5f1e8; }
.myna-stage-list__link {
    display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0;
    text-decoration: none;
}
.myna-stage-list__link.is-locked { pointer-events: none; opacity: 0.6; }
.myna-stage-list__thumb {
    width: 48px; height: 48px; flex-shrink: 0;
    border-radius: 12px; overflow: hidden; background: var(--myna-cream);
}
.myna-stage-list__thumb img { width: 100%; height: 100%; object-fit: cover; }
.myna-stage-list__titles { display: flex; flex-direction: column; min-width: 0; }
.myna-stage-list__en {
    font-weight: 700; font-size: 14.5px; color: var(--myna-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.myna-stage-list__vi {
    font-size: 12px; color: var(--myna-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.myna-stage-list__lock { width: 34px; text-align: center; color: #b3ac9f; }

/* Nút "về bài đang học" — cố định góc phải dưới, ẩn khi bài đang học đã ở trong
   khung nhìn (bật .is-visible qua JS). */
.myna-path-jump {
    position: fixed;
    right: 16px;
    bottom: calc(var(--myna-bottom-nav-height, 0px) + 20px);
    width: 52px;
    height: 52px;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: #fff;
    border: 2px solid #e2ddd3;
    color: #1cb0f6;
    font-size: 20px;
    box-shadow: 0 4px 12px rgba(46, 42, 34, 0.18);
    z-index: 1030;
}
.myna-path-jump.is-visible { display: flex; }
.myna-path-jump:active { transform: translateY(2px); }

/* "Học theo lộ trình" — thẻ nổi bật 1 lộ trình cho người mới. */
.myna-path-spotlight {
    display: flex;
    gap: 14px;
    align-items: stretch;
    padding: 14px;
    border-radius: 20px;
    background: linear-gradient(135deg, #eafbe2 0%, #ffffff 60%);
    border: 2px solid #cdeec0;
    box-shadow: 0 4px 14px rgba(88, 204, 2, 0.12);
    color: var(--myna-ink);
    transition: transform 0.1s ease, box-shadow 0.15s ease;
}
.myna-path-spotlight:active { transform: scale(0.99); }
.myna-path-spotlight__media { position: relative; flex-shrink: 0; }
.myna-path-spotlight__media img {
    width: 96px; height: 96px; object-fit: cover; border-radius: 16px;
}
.myna-path-spotlight__badge {
    position: absolute; top: -8px; left: -8px;
    background: #58cc02; color: #fff;
    font-size: 10px; font-weight: 800;
    padding: 3px 8px; border-radius: 999px;
    box-shadow: 0 2px 6px rgba(63, 148, 1, 0.4);
    white-space: nowrap;
}
.myna-path-spotlight__body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.myna-path-spotlight__title {
    font-family: 'Baloo 2', 'Nunito', sans-serif;
    font-weight: 700; font-size: 17px; line-height: 1.25; color: var(--myna-ink);
}
.myna-path-spotlight__desc {
    font-size: 12.5px; color: var(--myna-muted); margin-top: 2px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.myna-path-spotlight__meta {
    font-size: 12px; font-weight: 700; color: #3f9401; margin-top: 6px;
}
.myna-path-spotlight__meta i { margin-right: 4px; }
.myna-path-spotlight__cta {
    align-self: flex-start; margin-top: auto;
    display: inline-flex; align-items: center; gap: 6px;
    background: #58cc02; color: #fff;
    font-weight: 800; font-size: 13px;
    padding: 7px 16px; border-radius: 999px;
    box-shadow: 0 3px 0 #3f9401;
    margin-top: 10px;
}

.myna-path-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 200px;
    position: relative;
}
.myna-path-node__circle {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #fff;
    /* The Duolingo "3D coin" look: a darker rim at the bottom. */
    box-shadow: 0 6px 0 rgba(0, 0, 0, 0.18);
    margin-bottom: 10px;
}
/* Open / quiz / done all wear the chặng's colour; only locked stays grey
   (fallbacks keep the old per-state colours if a section has no --stage-color). */
.myna-path-node--open .myna-path-node__circle { background: var(--stage-color, var(--myna-purple)); box-shadow: 0 6px 0 var(--stage-color-dark, #6d3fd4); }
.myna-path-node--quiz .myna-path-node__circle { background: var(--stage-color, var(--myna-yellow)); color: #fff; box-shadow: 0 6px 0 var(--stage-color-dark, var(--myna-yellow-dark)); }
.myna-path-node--done .myna-path-node__circle { background: var(--stage-color, var(--myna-green)); box-shadow: 0 6px 0 var(--stage-color-dark, #3d9c40); }
.myna-path-node--locked .myna-path-node__circle { background: #e2ddd3; color: #b3ac9f; box-shadow: 0 6px 0 #cfc9bc; }
.myna-path-node--locked { cursor: default; }
.myna-path-node:not(.myna-path-node--locked):active .myna-path-node__circle {
    transform: translateY(4px);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.18);
}

/* Segmented progress ring around an in-progress node — 2 semicircle
   segments, one per lesson phase (học / kiểm tra), filled by ratio. */
.myna-path-node__ring {
    position: absolute;
    top: -11px;
    left: -11px;
    width: 94px;
    height: 94px;
    pointer-events: none;
}
.myna-path-node__ring path {
    fill: none;
    stroke-width: 6;
    stroke-linecap: round;
}
.myna-path-node__ring-bg { stroke: #e2ddd3; }
.myna-path-node__ring-fill { stroke: var(--stage-color-dark, var(--myna-green)); }

.myna-path-node__percent {
    position: absolute;
    bottom: -6px;
    right: -10px;
    background: #fff;
    color: var(--stage-color-dark, var(--myna-yellow-dark));
    font-size: 10px;
    font-weight: 800;
    border-radius: 10px;
    padding: 1px 6px;
    box-shadow: 0 1px 4px rgba(46, 42, 34, 0.2);
}
.myna-path-node__title {
    font-weight: 700;
    color: var(--myna-ink);
    font-size: 14px;
    line-height: 1.25;
}
.myna-path-node--locked .myna-path-node__title { color: var(--myna-muted); }
.myna-path-node__subtitle {
    font-size: 12px;
    color: var(--myna-muted);
}
.myna-path-node__bubble {
    position: absolute;
    top: -34px;
    background: #fff;
    color: var(--stage-color-dark, var(--myna-purple));
    font-weight: 800;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 12px;
    padding: 5px 12px;
    box-shadow: 0 2px 8px rgba(46, 42, 34, 0.15);
    animation: myna-path-bounce 1.4s ease-in-out infinite;
    z-index: 2;
    white-space: nowrap;
}
.myna-path-node__bubble::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -5px;
    transform: translateX(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    background: #fff;
}
@keyframes myna-path-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
}

/* Sentence rows */
.myna-sentence-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #F6F2FF;
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 10px;
    position: relative;
}

/* Audio play/slow buttons keep a fixed footprint so swapping the icon
   (play ↔ pause ↔ loading spinner) or the "Nx" label ↔ pause icon never
   resizes the button or shifts its neighbours. Buttons that set their own
   inline width (the big 44px lesson-play, the tiny 28px per-sentence one)
   keep it — inline styles win over these. */
.btn.rounded-circle[data-audio-url],
.btn.rounded-circle[data-play-audio],
.btn.rounded-circle[data-vi-toggle] {
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.btn[data-playback-rate] {
    min-width: 46px;
    height: 34px;
    padding-top: 0;
    padding-bottom: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.myna-sentence-row__play {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--myna-purple);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    border: none;
}

/* Listening-practice sentence sync (see mynaSetupSentenceSync in myna.js) —
   highlights whichever sentence pair the audio is currently reading. */
.myna-sync-sentence {
    border-radius: 8px;
    padding: 4px 8px;
    margin: 0 -8px;
    transition: background-color 0.25s ease, color 0.25s ease;
}
.myna-sync-sentence--active {
    background: var(--myna-yellow);
    box-shadow: 0 2px 6px rgba(46, 42, 34, 0.08);
}
.myna-sync-sentence--active .fw-bold {
    color: var(--myna-red);
}

/* Topic tiles */
.myna-topic-tile {
    background: #fff;
    border-radius: 16px;
    padding: 14px;
    text-align: center;
}
.myna-topic-tile__icon { font-size: 26px; margin-bottom: 6px; }

/* Speak practice */
.myna-speak-box {
    background: var(--myna-purple-light);
    border-radius: var(--myna-card-radius);
    padding: 20px;
    text-align: center;
}
.myna-speak-mic {
    width: 84px; height: 84px;
    border-radius: 50%;
    background: var(--myna-purple);
    color: #fff;
    border: none;
    font-size: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.myna-speak-mic.is-recording { animation: myna-pulse 1s infinite; background: var(--myna-red); }
.myna-speak-mic.is-processing { background: var(--myna-muted); }
.myna-speak-mic:disabled { background: var(--myna-muted); opacity: .6; }
/* Item detail screen (see lesson_items/show.blade.php) needs the whole
   exercise — card, mic, back/next nav — to fit one screen without
   scrolling, so its mic is smaller than the default size used elsewhere. */
.myna-speak-mic--sm { width: 56px; height: 56px; font-size: 20px; }

/* Pronunciation-practice score colors (see mynaSetupSpeakPractice in myna.js) */
.myna-speak-score--good { color: var(--myna-green); }
.myna-speak-score--ok { color: var(--myna-yellow-dark); }
.myna-speak-score--bad { color: var(--myna-red); }

@keyframes myna-pulse {
    0% { box-shadow: 0 0 0 0 rgba(241, 96, 99, .5); }
    70% { box-shadow: 0 0 0 14px rgba(241, 96, 99, 0); }
    100% { box-shadow: 0 0 0 0 rgba(241, 96, 99, 0); }
}

.myna-skill-tile {
    background: #fff;
    border-radius: 16px;
    padding: 14px 5px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.myna-skill-tile__icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--myna-purple-light);
    color: var(--myna-purple);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 8px;
    font-size: 18px;
}
.myna-skill-tile__icon.is-green  { background: #E3F8ED; color: var(--myna-green); }
.myna-skill-tile__icon.is-orange { background: #FFEEDB; color: #F2994A; }
.myna-skill-tile__icon.is-pink   { background: #FCE4EA; color: #EB5F8A; }
.myna-skill-tile__desc { font-size: 10px; color: var(--myna-muted); }
@media (max-width: 576px) {
    /* 4 tiles per row leaves very little width on ordinary phones — the
       small description line just wraps/crowds the tile, so drop it and
       keep icon + title only. */
    .myna-skill-tile__desc { display: none; }
}

.myna-stat__icon {
    width: 32px; height: 32px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 6px;
    font-size: 14px;
}
.myna-stat__icon.is-purple { background: var(--myna-purple-light); color: var(--myna-purple); }
.myna-stat__icon.is-yellow { background: #FFF3D6; color: var(--myna-yellow-dark); }
.myna-stat__icon.is-green  { background: #E3F8ED; color: var(--myna-green); }
.myna-stat__icon.is-blue   { background: #E3EEFF; color: #3B82F6; }

.myna-favorite-btn {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: none;
    background: #fff;
    color: var(--myna-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(46, 42, 34, 0.08);
}
.myna-favorite-btn.is-active { color: var(--myna-red); }
.myna-favorite-btn:disabled { opacity: .6; }

.myna-personal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(46, 42, 34, 0.35);
    z-index: 1040;
    display: none;
}
.myna-personal-backdrop.is-open { display: block; }

.myna-personal-popover {
    /* right/bottom are set inline in JS, anchored to the trigger button's
       actual position, since the app column is centered and narrower than
       the viewport on wide screens. */
    position: fixed;
    width: 260px;
    max-height: 70vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(46, 42, 34, 0.22);
    z-index: 1045;
    display: none;
}
.myna-personal-popover.is-open { display: block; }

.myna-personal-sheet__header {
    display: flex;
    align-items: center;
    padding: 16px;
}
.myna-avatar-circle {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--myna-purple-light);
    color: var(--myna-purple);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
    overflow: hidden;
}
.myna-avatar-circle img { width: 100%; height: 100%; object-fit: cover; }

/* Profile page's own (bigger, editable) avatar — see profile/show.blade.php */
.myna-avatar-circle--lg {
    width: 96px; height: 96px;
    font-size: 32px;
    margin: 0 auto 12px;
}
.myna-avatar-edit-btn {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%) translateX(28px);
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--myna-purple);
    color: #fff;
    border: 2px solid #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
}

/* Crop modal — Cropper.js needs the source image to have real layout
   dimensions to size its canvas correctly. */
.myna-crop-image-wrap {
    max-height: 60vh;
    background: #000;
}
.myna-crop-image-wrap img { display: block; max-width: 100%; }

/* "+" tile at the end of the reference-image row (see lessons/generate
   .blade.php) — looks like one of the image slots so it reads as "add
   another" rather than a generic file-picker button. */
.myna-image-add-tile {
    width: 64px; height: 64px;
    border: 2px dashed var(--myna-muted);
    border-radius: 8px;
    background: transparent;
    color: var(--myna-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.myna-image-add-tile:hover { border-color: var(--myna-purple); color: var(--myna-purple); }
.myna-personal-sheet__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    color: var(--myna-ink);
    text-decoration: none;
    border: none;
    background: none;
    font-size: 15px;
}
.myna-personal-sheet__item:hover { background: rgba(0,0,0,0.03); }

.myna-search-header {
    padding: 16px;
    background: #fff;
}
.myna-search-input {
    background: #fff;
    /* Visible border — the old borderless cream input blended into the
       cream page and many users couldn't tell there was a search box. */
    border: 1.5px solid rgba(46, 42, 34, 0.22);
    border-radius: 999px;
    padding: 0 18px;
    height: 46px;
}
.myna-search-input:focus {
    background: #fff;
    border-color: var(--myna-yellow);
    box-shadow: 0 0 0 2px var(--myna-yellow);
}
.myna-search-recent-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.myna-help-item {
    border: none;
    border-radius: 14px !important;
    overflow: hidden;
    margin-bottom: 8px;
    box-shadow: 0 2px 8px rgba(46, 42, 34, 0.05);
}
.myna-help-item .accordion-button {
    font-weight: 600;
    color: var(--myna-ink);
    background: #fff;
    box-shadow: none;
}
.myna-help-item .accordion-button:not(.collapsed) {
    background: var(--myna-purple-light);
    color: var(--myna-purple);
}
.myna-help-item .accordion-button:focus { box-shadow: none; }
.myna-help-item .accordion-body { background: #fff; font-size: 14px; }

.myna-card:has(input:checked) {
    outline: 3px solid var(--myna-yellow-dark);
}
.myna-option-current {
    box-shadow: 0 0 0 2px var(--myna-green) inset;
}
.myna-current-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--myna-green);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    line-height: 1.4;
}
.myna-current-badge--inline {
    position: static;
    flex-shrink: 0;
}
.myna-current-badge--muted {
    background: var(--myna-muted);
}
.myna-option-coming-soon {
    opacity: 0.55;
}

.myna-favorite-tabs {
    display: flex;
    gap: 8px;
    border-bottom: none;
    flex-wrap: nowrap;
    overflow-x: auto;
}
.myna-favorite-tabs .nav-link {
    border: none;
    border-radius: 999px;
    padding: 8px 16px;
    font-weight: 600;
    font-size: 13px;
    color: var(--myna-muted);
    background: #fff;
    white-space: nowrap;
}
.myna-favorite-tabs .nav-link.active {
    background: var(--myna-purple);
    color: #fff;
}

/* Second-level filter (Tất cả / Đang học / Của tôi) inside the "Học tập"
   top tabs — a right-aligned <select>-looking dropdown (real HTML dropdown,
   not a <select>), so nested tabs read as a filter rather than a tab row. */
.myna-filter-select {
    /* Đồng bộ với ô tìm: cùng chiều cao 46px, cùng viền + bo tròn pill. */
    border: 1.5px solid rgba(46, 42, 34, 0.22);
    background: #fff;
    color: var(--myna-ink);
    font-weight: 600;
    font-size: 13px;
    border-radius: 999px;
    padding: 0 16px;
    min-width: 130px;
    height: 46px;
    text-align: left;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.myna-filter-select.dropdown-toggle::after {
    margin-left: auto;
    color: var(--myna-muted);
}
.myna-filter-dropdown .dropdown-menu {
    border: 1px solid var(--myna-border, #E4DFD2);
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(46, 42, 34, 0.12);
    padding: 6px;
    min-width: 150px;
}
.myna-filter-dropdown .dropdown-item {
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    padding: 8px 12px;
    color: var(--myna-ink);
}
.myna-filter-dropdown .dropdown-item:active,
.myna-filter-dropdown .dropdown-item.active {
    background: var(--myna-purple);
    color: #fff;
}
.myna-filter-dropdown .dropdown-item:hover {
    background: var(--myna-purple-light);
    color: var(--myna-ink);
}

.myna-period-pill {
    border-radius: 999px;
    padding: 6px 16px;
    font-weight: 600;
    font-size: 13px;
    color: var(--myna-muted);
    background: #F3EFE3;
    text-decoration: none;
}
.myna-period-pill.active {
    background: var(--myna-yellow-dark);
    color: #fff;
}
.myna-rank-row--me {
    background: var(--myna-purple-light);
    border-radius: 10px;
    margin: 0 -8px;
    padding-left: 8px;
    padding-right: 8px;
}

/* Floating feedback button — anchored to the right edge of the centered
   .myna-app column, not the raw viewport, so it stays flush with the app
   content on wide desktop screens instead of drifting to the far right of
   the browser window. */
.myna-feedback-fab {
    position: fixed;
    right: max(16px, calc(50% - (var(--myna-app-max-width) / 2) + 16px));
    bottom: calc(var(--myna-bottom-nav-height) + 16px);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: var(--myna-purple);
    color: #fff;
    font-size: 18px;
    box-shadow: 0 6px 16px rgba(139, 92, 246, 0.4);
    z-index: 60;
}

.myna-feedback-stars {
    font-size: 26px;
    color: #D8D2C2;
    letter-spacing: 4px;
}
.myna-feedback-stars i { cursor: pointer; }
.myna-feedback-stars i.is-active { color: var(--myna-yellow-dark); }

/* Lesson/topic tile media row (image + title/subtitle side by side) —
   used inside a 2-column grid, so on small phones the column is too
   narrow to fit an 84px image next to two lines of text comfortably.
   Stack image above text there instead of squeezing them side by side.
   576px covers ordinary phone widths (iPhone SE through Pro Max etc.),
   not just unusually narrow devices. */
@media (max-width: 576px) {
    .myna-tile-media-row {
        flex-direction: column;
        align-items: center !important;
        text-align: center;
    }
    .myna-tile-media-row > .flex-grow-1 {
        padding-right: 0 !important;
        width: 100%;
    }
    /* Khi xếp dọc trong lưới 2 cột: ảnh to FULL-WIDTH, khung 3/2, cắt phần DƯỚI
       (giữ phần trên) thay vì ô vuông 84px. Vòng % nằm trong ảnh (bám mép). */
    .myna-tile-media-row > .myna-tile-media {
        width: 100%;
    }
    .myna-tile-media-row > .myna-tile-media img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 3 / 2;
        object-fit: cover;
        object-position: top;
    }
}

.myna-feedback-modal { border-radius: var(--myna-card-radius); }

.quiz-choice-btn.quiz-choice-correct {
    background: var(--myna-green);
    border-color: var(--myna-green);
    color: #fff;
}
.quiz-choice-btn.quiz-choice-wrong {
    background: var(--myna-red);
    border-color: var(--myna-red);
    color: #fff;
    opacity: 0.7;
}

.quiz-spell-slot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 42px;
    border-bottom: 3px solid var(--myna-muted);
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
}
.quiz-spell-slots.quiz-spell-correct .quiz-spell-slot { border-color: var(--myna-green); color: var(--myna-green); }
.quiz-spell-slots.quiz-spell-wrong .quiz-spell-slot { border-color: var(--myna-red); color: var(--myna-red); }
.quiz-spell-slot--hint { opacity: 0.35; }
.quiz-spell-tile { text-transform: uppercase; min-width: 44px; }

/* Ảnh đề bài (image_choice): 1 ảnh vuông + lựa chọn từ bên dưới. */
.quiz-image-prompt {
    width: 60%;
    max-width: 200px;
    aspect-ratio: 1 / 1;
    object-fit: contain; /* thấy TOÀN BỘ ảnh, không cắt xén */
    background: #f6f3ec;
    border-radius: 16px;
}

/* Câu hỏi "nối" (audio_match / image_match): 2 cột, chạm để chọn/nối. */
.quiz-match-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
    align-items: stretch; /* ô text cao bằng ô ảnh cùng hàng */
}
.quiz-match-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    padding: 8px;
    border: 2px solid rgba(46, 42, 34, 0.12);
    border-radius: 14px;
    background: #fff;
    font-weight: 700;
    color: var(--myna-ink);
    cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.quiz-match-cell img {
    max-width: 100%;
    max-height: 96px;
    object-fit: contain; /* thấy TOÀN BỘ ảnh, không cắt xén */
    border-radius: 10px;
}
.quiz-match-cell.is-selected {
    border-color: var(--myna-yellow-dark);
    box-shadow: 0 0 0 3px rgba(244, 180, 0, 0.25);
}
.quiz-match-cell.is-matched {
    border-color: var(--myna-green);
    background: #eaf7ef;
    color: var(--myna-green);
    opacity: 0.65;
    cursor: default;
}
.quiz-match-cell.quiz-match-wrong {
    border-color: var(--myna-red);
    background: #fdecef;
}

/* Post-lesson quiz result screen — confetti burst for a great score */
.quiz-confetti-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}
.quiz-confetti-piece {
    position: absolute;
    top: -24px;
    animation: quiz-confetti-fall 1.6s ease-in forwards;
}
@keyframes quiz-confetti-fall {
    0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(340px) rotate(360deg); opacity: 0; }
}

/* Pháo giấy mưa toàn màn hình khi trả lời đúng: từ đỉnh rơi xuống cuối màn */
.quiz-confetti-fullscreen {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 70;
}
.quiz-confetti-fullscreen .quiz-confetti-piece {
    animation: quiz-confetti-rain 2.6s linear forwards;
}
@keyframes quiz-confetti-rain {
    0%   { transform: translateY(-40px) rotate(0deg); opacity: 1; }
    100% { transform: translateY(100vh) rotate(360deg); opacity: 0.85; }
}

/* Banner kết quả đúng/sai (kiểu Duolingo): bám đáy, full-width, trượt lên */
.quiz-result-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: var(--myna-app-max-width);
    margin: 0 auto;
    z-index: 60;
    text-align: left;
    color: #fff;
    border-radius: 20px 20px 0 0;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
    animation: quiz-banner-up 0.3s ease-out;
}
.quiz-result-banner.is-correct { background: #22B573; }
.quiz-result-banner.is-wrong   { background: #F16063; }
.quiz-result-head { font-weight: 800; font-size: 18px; display: flex; align-items: center; gap: 8px; }
.quiz-result-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 999px;
    background: #fff; color: inherit; font-size: 15px; font-weight: 900;
}
.quiz-result-banner.is-correct .quiz-result-icon { color: #22B573; }
.quiz-result-banner.is-wrong   .quiz-result-icon { color: #F16063; }
.quiz-result-answer { font-weight: 800; font-size: 16px; margin-top: 6px; }
.quiz-result-translate { font-size: 13px; opacity: 0.9; margin-top: 2px; }
/* Nút Tiếp tục nằm TRONG banner: nền trắng, chữ theo màu banner */
.quiz-result-continue {
    width: 100%;
    margin-top: 12px;
    background: #fff;
    border: none;
    font-weight: 800;
    border-radius: 12px;
    padding: 10px;
}
.quiz-result-banner.is-correct .quiz-result-continue { color: #22B573; }
.quiz-result-banner.is-wrong   .quiz-result-continue { color: #F16063; }
.quiz-result-continue:hover { background: #f3f3f3; }
@keyframes quiz-banner-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

/* Lộ trình: card thông tin bài NEO ngay dưới node (mũi tên chỉ lên node) */
.myna-lesson-card {
    position: relative;
    width: 100%;
    margin: 10px 0 6px;
    background: var(--stage-color, #58CC02);
    color: #fff;
    border-radius: 18px;
    padding: 16px 18px 18px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    animation: myna-lesson-card-in 0.22s ease-out;
}
.myna-lesson-card__arrow {
    position: absolute;
    top: -9px;
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid var(--stage-color, #58CC02);
}
.myna-lesson-card__title { font-weight: 800; font-size: 18px; }
.myna-lesson-card__meta { opacity: 0.85; font-size: 14px; margin-top: 4px; }
.myna-lesson-card__vi { opacity: 0.9; font-size: 14px; margin-top: 2px; }
.myna-lesson-card__bar {
    height: 8px; border-radius: 999px; overflow: hidden;
    background: rgba(255, 255, 255, 0.28); margin-top: 12px;
}
.myna-lesson-card__bar span { display: block; height: 100%; background: #fff; border-radius: 999px; }
.myna-lesson-card__btn {
    display: block; width: 100%; margin-top: 14px;
    background: #fff; color: var(--stage-color, #58CC02);
    border: none; border-radius: 14px; padding: 12px;
    font-weight: 800; font-size: 15px; text-align: center; text-decoration: none; cursor: pointer;
}
.myna-lesson-card__btn[disabled] { opacity: 0.7; cursor: default; color: #fff; background: rgba(255, 255, 255, 0.3); }
.myna-lesson-card__note { opacity: 0.85; font-size: 12px; margin-top: 8px; }
@keyframes myna-lesson-card-in {
    from { transform: translateY(-6px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

/* Combo (đúng liên tiếp): huy hiệu nảy giữa-trên màn hình, màu tăng dần */
.quiz-combo {
    position: fixed;
    top: 22%;
    left: 50%;
    z-index: 1090;
    padding: 12px 26px;
    border-radius: 999px;
    background: var(--combo-color, #FF9600);
    color: #fff;
    font-weight: 900;
    font-size: 24px;
    white-space: nowrap;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
    pointer-events: none;
    animation: quiz-combo-in 1.2s ease forwards;
}
@keyframes quiz-combo-in {
    0%   { transform: translateX(-50%) scale(0.3); opacity: 0; }
    15%  { transform: translateX(-50%) scale(1.15); opacity: 1; }
    30%  { transform: translateX(-50%) scale(1); opacity: 1; }
    80%  { transform: translateX(-50%) scale(1); opacity: 1; }
    100% { transform: translateX(-50%) scale(1) translateY(-16px); opacity: 0; }
}
/* Chớp "sét" cho combo cao: nháy 2 lần (trắng → màu combo) phủ toàn màn */
.quiz-lightning {
    position: fixed;
    inset: 0;
    z-index: 1085;
    pointer-events: none;
    animation: quiz-lightning 0.56s ease forwards;
}
@keyframes quiz-lightning {
    0%   { background: #fff; opacity: 0.7; }
    12%  { opacity: 0; }
    24%  { background: var(--bolt-color, #fff); opacity: 0.6; }
    40%  { opacity: 0; }
    60%  { background: #fff; opacity: 0.35; }
    100% { opacity: 0; }
}

/* Bottom sheet xác nhận thoát bài học / bài kiểm tra (mascot + 2 nút) */
.myna-exit-sheet {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
}
.myna-exit-sheet__card {
    position: relative;
    width: 100%;
    max-width: var(--myna-app-max-width);
    background: #8B5CF6;
    color: #fff;
    text-align: center;
    border-radius: 28px 28px 0 0;
    padding: 72px 24px calc(24px + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%);
    transition: transform 0.3s ease;
}
.myna-exit-sheet.is-open .myna-exit-sheet__card { transform: translateY(0); }
.myna-exit-sheet__mascot {
    position: absolute;
    top: -64px;
    left: 50%;
    transform: translateX(-50%);
    width: 128px;
    height: 128px;
    object-fit: contain;
}
.myna-exit-sheet__title { font-weight: 800; font-size: 20px; }
.myna-exit-sheet__msg { color: rgba(255, 255, 255, 0.82); font-size: 14px; margin-top: 8px; line-height: 1.4; }
.myna-exit-sheet__actions { display: flex; gap: 12px; margin-top: 22px; }
.myna-exit-sheet__actions button {
    flex: 1;
    border: none;
    border-radius: 16px;
    padding: 14px;
    font-weight: 800;
    font-size: 15px;
    cursor: pointer;
}
.myna-exit-sheet__leave { background: transparent; color: #fff; }
.myna-exit-sheet__stay { background: #F1EBFF; color: #8B5CF6; }

/* Lắc khi trả lời sai */
.quiz-shake { animation: quiz-shake 0.5s ease; }
@keyframes quiz-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-9px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-6px); }
    80% { transform: translateX(4px); }
}

/* Dropdown chuông thông báo (kiểu Facebook) trên trang chủ */
.myna-noti-wrap { position: relative; }
.myna-noti-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 340px;
    max-width: 92vw;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 10px 34px rgba(0,0,0,.18);
    z-index: 1060;
    overflow: hidden;
}
.myna-noti-panel[hidden] { display: none; }
.myna-noti-panel__head {
    padding: 12px 14px; font-weight: 800; color: var(--myna-ink);
    border-bottom: 1px solid rgba(0,0,0,.06);
}
.myna-noti-panel__list { max-height: 60vh; overflow-y: auto; }
.myna-noti-item {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 10px 14px; text-decoration: none;
    border-bottom: 1px solid rgba(0,0,0,.04);
}
.myna-noti-item:hover { background: #faf7ef; }
.myna-noti-item.is-unread { background: var(--myna-cream); }
.myna-noti-item__icon {
    width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.myna-noti-item__icon img { width: 100%; height: 100%; object-fit: cover; }
.myna-noti-item__body { min-width: 0; flex: 1; width: 100%; }
/* Tiêu đề + mô tả: tối đa 2 dòng, quá thì "…" (line-clamp), rộng 100%. */
.myna-noti-item__title {
    color: var(--myna-ink); font-weight: 500; line-height: 1.35; font-size: 14px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; overflow-wrap: anywhere;
}
.myna-noti-item.is-unread .myna-noti-item__title { font-weight: 800; }
.myna-noti-item__excerpt {
    font-size: 12px; color: var(--myna-muted); line-height: 1.35; margin-top: 1px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; overflow-wrap: anywhere;
}
.myna-noti-item__time { font-size: 11px; color: var(--myna-muted); margin-top: 2px; }
.myna-noti-panel__more {
    display: block; text-align: center; padding: 12px;
    font-weight: 700; color: var(--myna-purple); text-decoration: none;
    border-top: 1px solid rgba(0,0,0,.06);
}
.myna-noti-panel__loading, .myna-noti-panel__empty {
    padding: 24px; text-align: center; color: var(--myna-muted); font-size: 13px;
}

/* Xem lại chi tiết một lần làm bài kiểm tra (quiz.attempt) */
.myna-quiz-review {
    background: #fff;
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 10px;
    border-left: 4px solid #e2ddd3;
    box-shadow: 0 1px 4px rgba(46, 42, 34, 0.06);
}
.myna-quiz-review.is-ok { border-left-color: var(--myna-green); }
.myna-quiz-review.is-wrong { border-left-color: #ff4b4b; }
.myna-quiz-review__no {
    flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
    background: var(--myna-cream); color: var(--myna-muted);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
}
.myna-quiz-review__prompt { font-weight: 600; color: var(--myna-ink); line-height: 1.35; }