/* Menu tablet fix */
@media (max-width: 1440px) {
    .nav-inner {
        gap: 16px;
    }
    .menu {
        gap: 16px;
        flex-wrap: wrap;
    }
}
@media (max-width: 1280px) {
    .nav-user {
        display: none;
    }
}
@media (max-width: 992px) {
    .lightbox {
        padding: 24px;
    }
}

/* ============================================================
   Modal bài viết: vùng cuộn nằm ở .article-content
   ============================================================ */

/* .news-modal .modal-card đang là overflow:hidden (để bo góc cắt gọn), nên nếu
   không chuyển vùng cuộn vào trong thì bài dài bị cắt mất và không đọc tiếp
   được. Card thành flex column: ảnh hero giữ nguyên, phần chữ nhận hết chiều
   cao còn lại và tự cuộn. */
/* .news-modal .modal-card {
    display: flex;
    flex-direction: column;
}
.news-modal .article-hero {
    flex: 0 0 auto;
} */
/* .article-content img{
    max-width: 100%;
    height: auto;
}
.news-modal .article-content {
    flex: 1 1 auto;
    /* Bắt buộc: flex item mặc định min-height:auto nên không co nhỏ hơn nội
       dung, thiếu dòng này thì overflow-y không bao giờ kích hoạt. */
/* min-height: 0; */
/* overflow-y: auto; */
/* Đọc hết bài rồi vuốt tiếp thì không kéo theo trang nền phía sau. */
/* overscroll-behavior: contain; */
/* } */

/* ============================================================
   Menu mobile (hamburger)
   ============================================================ */

/* Nút hamburger chỉ tồn tại ở khổ mà .menu bị ẩn (≤760px). */
.nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    padding: 0;
    border: 1px solid rgba(169, 43, 53, 0.18);
    border-radius: 14px;
    background: #fff;
    color: var(--red);
    cursor: pointer;
    place-items: center;
    transition: 0.22s ease;
}
.nav-toggle:hover {
    border-color: rgba(169, 43, 53, 0.4);
}

/* Ba vạch: vạch giữa là chính element, hai vạch ngoài là ::before/::after. */
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition:
        transform 0.24s ease,
        opacity 0.18s ease;
}
.nav-toggle-bars::before,
.nav-toggle-bars::after {
    content: "";
    position: absolute;
}
.nav-toggle-bars {
    position: relative;
}
.nav-toggle-bars::before {
    transform: translateY(-6px);
}
.nav-toggle-bars::after {
    transform: translateY(6px);
}

/* Mở menu -> ba vạch gập thành dấu X. */
.nav-toggle[aria-expanded="true"] .nav-toggle-bars {
    background: transparent;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before {
    transform: translateY(0) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after {
    transform: translateY(0) rotate(-45deg);
}

/* .nav (z-index:50) tạo stacking context riêng, nên panel nằm bên trong luôn bị
   .float-actions (z-index:90) đè lên dù z-index của panel là bao nhiêu. Nâng cả
   thanh nav khi menu mở — vẫn thấp hơn lightbox (120) và modal (170). */
.nav:has(.mobile-menu.open) {
    z-index: 100;
}

/* Panel thả xuống ngay dưới thanh nav. .nav là position:sticky nên nó chính là
   containing block: dùng top:100% và calc(...-100%) để bám đúng chiều cao nav,
   không phải hardcode con số vốn khác nhau giữa các breakpoint. */
.mobile-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 60;
    height: calc(100vh - 100%);
    height: calc(100dvh - 100%);
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Nền đục hoàn toàn: panel phủ kín màn hình nên không có gì cần lộ qua, mà
       backdrop-filter còn dính lỗi WebKit làm hỏng clip của thẻ cha trên iOS. */
    background: #fffafa;
    border-bottom: 1px solid rgba(169, 43, 53, 0.08);
}
.mobile-menu.open {
    display: block;
    animation: mobileMenuIn 0.22s ease;
}
@keyframes mobileMenuIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
}
.mobile-menu-inner {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 18px 14px 32px;
}
.mobile-menu-links {
    display: grid;
}
.mobile-menu-links a {
    padding: 15px 10px;
    border-bottom: 1px solid rgba(169, 43, 53, 0.09);
    color: #171314;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.mobile-menu-links a:active {
    color: var(--red);
}
.mobile-menu-actions {
    display: grid;
    gap: 12px;
    padding: 0 10px;
}
.mobile-menu-actions .btn {
    width: 100%;
    height: 48px;
    font-size: 14px;
}
.mobile-menu-user {
    color: var(--red);
    padding: 0 10px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

@media (max-width: 760px) {
    .nav-toggle {
        display: grid;
    }
    /* .nav-inner là space-between; không có margin này thì logo bị đẩy ra giữa
       thanh nav. Đẩy toàn bộ khoảng trống về sau logo để cụm hamburger + logo
       dính sát mép trái, CTA vẫn nằm bên phải. */
    .nav-inner .brand-logo {
        margin-right: auto;
    }
    /* Ở khổ này thanh nav chỉ còn chỗ cho logo + CTA chính + hamburger.
       Nút đăng nhập/đăng xuất đã được đưa vào trong panel menu. */
    .actions .btn-outline,
    .actions .nav-logout,
    .actions .nav-user {
        display: none;
    }
}

/* Trên tablet/desktop .menu luôn hiển thị nên panel không bao giờ được mở. */
@media (min-width: 1279px) {
    .mobile-menu,
    .mobile-menu.open {
        display: none;
    }
}

/* ============================================================
   Fix vuốt ngang (cuộn ngang) trên tablet / iPad
   ============================================================ */

/* 1. Chặn cuộn ngang ở cấp trang.
   overflow-x:clip cắt phần tràn mà KHÔNG tạo scroll container, nên nav
   position:sticky và html{scroll-behavior:smooth} vẫn chạy bình thường.
   Safari < 16 chưa có `clip` nên để `hidden` làm fallback bên ngoài. */
html {
    overflow-x: hidden;
}
@supports (overflow: clip) {
    html {
        overflow-x: clip;
    }
}

/* 2. Chặn iOS "nối" cú vuốt ngang từ rail tin tức ra toàn trang khi rail đã chạm
   mép (overscroll chaining khiến cả trang bị kéo/nảy ngang trên Safari).
   Chỉ đặt trên rail, KHÔNG đặt trên html/body — đặt ở đó sẽ vô hiệu luôn cử chỉ
   vuốt-để-quay-lại của trình duyệt. */
.news-slider {
    overscroll-behavior-x: contain;
}

/* 3. Ô grid mặc định có min-width:auto = min-content, nên một từ/URL dài từ CMS
   sẽ đẩy cả lưới rộng hơn viewport. Cho phép các ô co lại. */
.gallery > *,
.steps > *,
.info-grid > *,
.rules-grid > *,
.prizes > *,
.faq > *,
.field-grid > *,
.ranking-list > *,
.news-slider > *,
.footer-inner > * {
    min-width: 0;
}

/* 4. Cột giữa của dòng xếp hạng phải co được, kèm cắt chữ như bản mobile. */
.rank-item {
    grid-template-columns: 42px 58px minmax(0, 1fr) auto;
}
.rank-title,
.rank-meta {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 5. Chuỗi dài không có khoảng trắng (URL, mã dự án, tên file) trong nội dung
   do CMS nhập. `anywhere` — khác `break-word` — còn thu nhỏ cả min-content nên
   mới thực sự cứu được flex/grid. */
.h2,
.title,
.lead,
.intro,
.desc,
.caption,
.meta,
.news-title,
.news-desc,
.article-title,
.article-dek,
.article-body,
.faq summary,
.faq p,
.step p,
.info-card p,
.rule-card p,
.prize p,
.footer-company p,
.footer-links a {
    overflow-wrap: anywhere;
}

/* Ảnh/bảng/nhúng trong bài viết cũng là nội dung CMS, không được vượt khung. */
.article-body img,
.article-body iframe,
.article-body video,
.article-body table,
.article-body pre {
    max-width: 100%;
    height: auto;
}

/* 6. Tablet: các khối có min-width cứng là thủ phạm chính ở 768px.
   Cho phép xuống dòng thay vì đẩy ngang. */
@media (max-width: 1024px) {
    .section-head {
        flex-wrap: wrap;
    }
    .section-head > *:first-child {
        min-width: 0;
        flex: 1 1 320px;
    }
    /* Bộ lọc khu đô thị đang khoá cứng 292px, ở 768px không còn đủ chỗ. */
    .gallery-filter {
        width: min(292px, 100%);
        min-width: 0;
    }
    .ranking-head {
        flex-wrap: wrap;
    }
    .ranking-controls {
        /* grid-template-columns: minmax(0, 1fr) minmax(0, 320px) !important; */
    }
    .ranking-tabs,
    .ranking-project-wrap {
        min-width: 0;
    }
    .pills {
        max-width: 100%;
    }
}

/* 7. Thanh nav: hai nút trong .actions là nowrap và KHÔNG được co (co lại thì
   chữ trong nút tràn ra ngoài). Áp lực chỗ hẹp phải do .menu gánh — nó đã có
   flex-wrap:wrap ở trên, chỉ cần cho phép co xuống dưới min-content. */
@media (max-width: 1440px) {
    .menu {
        min-width: 0;
    }
    .menu a {
        overflow-wrap: anywhere;
    }
    .actions {
        flex: 0 0 auto;
    }
    /* Tên người dùng dài sau khi đăng nhập là thứ duy nhất còn nong rộng được nav. */
    .nav-user {
        max-width: 140px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
/* 8. Logo footer giờ do CMS upload nên kích thước không còn cố định như file
   SVG nhúng cứng của template (189×120). Khoá chiều cao để ảnh nào cũng nằm
   gọn, giữ nguyên tỉ lệ. */
.footer-company .footer-logo {
    height: 120px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    margin-bottom: 14px;
}
.footer-company .footer-logo {
    width: 112px !important;
    margin-bottom: 16px !important;
}
/* Logo có gắn link (CMS: "Link cho logo") thì bọc thêm thẻ <a>. Cho nó ôm sát
   ảnh để vùng bấm đúng bằng logo, không kéo dài hết chiều ngang cột. */
.footer-company .footer-logo-link {
    display: inline-block;
    line-height: 0;
}
.news-desc,
.news-card.featured .news-desc {
    margin: 0 0 10px !important;
}
@media (max-width: 768px) {
    .share-row .btn {
        padding: 8px 16px;
    }
    .lightbox-info {
        padding: 32px 16px;
    }
}
/* 10. Nút "Copy link bài viết" trong popup tin tức.

   Đứng ngay dưới dòng meta (ngày · thương hiệu) nên kéo lên sát vạch kẻ của
   .article-meta thay vì để nguyên khoảng 32px của nó — nếu không nút trôi vào
   giữa khoảng trắng, trông như lạc khỏi phần đầu bài. */
.article-share-tools {
    display: flex;
    margin: -18px 0 24px;
}
.article-copy-link {
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid rgba(169, 43, 53, 0.22);
    background: #fff;
    color: var(--red);
    font:
        800 13px/1 "BT Beau Sans",
        system-ui,
        sans-serif;
    cursor: pointer;
    transition: 0.2s ease;
}
.article-copy-link:hover,
.article-copy-link:focus-visible {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
}

/* 11. Cảnh báo ở đầu form gửi ảnh dự thi (vd. đã gửi đủ 3 bài).

   Không thuộc ô nhập nào nên không dùng được .field-error — cần một dải nổi
   ngay trên đầu form để người gửi thấy trước khi cuộn qua các ô. */
.contest-form .form-error {
    margin: 0 0 22px;
    padding: 14px 18px;
    border-radius: 16px;
    border: 1px solid rgba(169, 43, 53, 0.24);
    background: #fff3f3;
    color: var(--red);
    font-weight: 700;
    font-size: 14px;
}

/* 12. Lớp "Xem hình đầy đủ" mở từ lightbox.

   Ảnh trong lightbox là object-fit:cover nên bị cắt cạnh; lớp này hiện trọn
   khung hình gốc, co theo màn hình chứ không cắt. z-index 160 để nằm trên
   lightbox (120) và nút đóng của nó (130), vẫn dưới toast (200) — toast báo
   copy link chỉ bắn ra từ lớp bên dưới nên không bị che. */
.full-image-viewer {
    position: fixed;
    inset: 0;
    z-index: 160;
    background: rgba(16, 12, 13, 0.94);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
}
.full-image-viewer.open {
    display: flex;
}
.full-image-viewer img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.45);
}
.full-image-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--ink);
    font-size: 22px;
    line-height: 42px;
    cursor: pointer;
    transition: 0.2s ease;
}
.full-image-close:hover,
.full-image-close:focus-visible {
    background: #fff;
    transform: scale(1.05);
}
@media (max-width: 760px) {
    .full-image-viewer {
        padding: 60px 12px 24px;
    }
    .full-image-close {
        top: 14px;
        right: 14px;
        width: 36px;
        height: 36px;
        font-size: 20px;
        line-height: 36px;
    }
}

.lightbox-info h3 {
    line-height: 1.2;
}
.hero:before {
    background-image: var(--hero-bg) !important;
}
/* Mũi tên phân trang ‹ ›: khi disabled Blade render <span> (không phải <a>).
   a.page-btn trong landing.css chỉ flex-canh giữa cho thẻ <a>, span không nhận
   display:inline-flex align-items:center justify-content:center nên mũi tên bị
   lệch khỏi tâm chip tròn. Khai báo flex ngay tại .page-btn để cả 2 dạng canh giữa. */
.page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 42px;
    text-align: center;
}

/* 13. Phân trang tin tức (mỗi trang 4 bài): Blade in sẵn thuộc tính `hidden`
   cho thẻ ngoài trang hiện tại và landing.js bật/tắt thuộc tính đó khi bấm
   mũi tên. Nhưng landing.css đặt `.news-card,.news-card.featured{display:block
   !important}`, ghi đè luôn quy tắc [hidden]{display:none} của trình duyệt nên
   mọi bài đều hiện. Trả lại tác dụng cho `hidden`. */
.news-slider .news-card[hidden] {
    display: none !important;
}

/* 14. Thứ tự chồng lớp của các lớp phủ toàn màn hình.

   landing.css để .modal ở z-index:100, THẤP hơn .lightbox (120). Khách chưa
   đăng nhập mở ảnh dự thi rồi bấm ♥ thì modal đăng nhập bật lên ngay bên dưới
   lightbox — người dùng không thấy gì, tưởng nút hỏng. Nâng modal lên trên
   lightbox (120) và nút đóng của nó (130).

   Toast lên trên cùng: lời nhắc "Vui lòng đăng nhập để bình chọn" bắn ra sau
   khi đóng modal, lúc đó lightbox (120) hoặc lớp "Xem hình đầy đủ" (160) vẫn
   còn mở nên toast ở mức cũ (140) sẽ bị che. */
.modal {
    z-index: 170;
}
.toast {
    z-index: 200;
}

.nav-user {
    font-weight: 800;
    font-size: 12px;
    color: var(--red);
    align-self: center;
    white-space: nowrap;
}
.nav-logout {
    margin: 0;
}
/* .close, .lb-close {font-family: unset !important } */

/* 15. Cuộn được nội dung trong mọi lớp phủ (modal / lightbox) trên mobile.

   landing.css để .modal là `position:fixed; inset:0; display:flex;
   align-items:center` nhưng KHÔNG có overflow, còn .modal-card thì không giới
   hạn chiều cao. Màn hình desktop đủ cao nên không ai thấy, nhưng trên iOS thẻ
   cao hơn màn hình sẽ tràn đều ra cả trên lẫn dưới và không có cách nào cuộn
   tới — nút "Gửi bài", nút đóng, phần cuối form đều mất luôn.

   Hai việc phải làm cùng lúc:

   1) Giới hạn thẻ trong khung nhìn rồi cho chính nó cuộn. Dùng `max-height:100%`
      chứ không dùng vh: lớp phủ là position:fixed inset:0 nên chiều cao của nó
      đã đúng bằng phần màn hình đang thấy, trong khi 1vh trên iOS Safari tính
      theo lúc thanh công cụ ẩn — đó là lý do 92vh/94vh của popup bài viết vẫn
      chui xuống dưới thanh địa chỉ.

   2) Đổi canh giữa từ align-items:center sang margin:auto. Với flexbox, phần
      tràn của item canh bằng align-items:center bị cắt ở mép trên và không
      cuộn ngược lên được; auto margin thì không.

   overscroll-behavior:contain để vuốt hết bài không kéo theo trang nền.
   -webkit-overflow-scrolling cho iOS cũ (<13) có quán tính khi cuộn. */
.modal {
    align-items: flex-start;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.modal > .modal-card {
    margin: auto;
    max-height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* Popup bài viết đang khoá 92vh/94vh bằng !important nên phải ghi đè đúng mức.
   Ở mobile nó là dạng bottom sheet (align-items:flex-end + margin:0 !important)
   nên hai quy tắc trên không phá bố cục đó. */
.news-modal .modal-card {
    max-height: 100% !important;
}

/* Lightbox ảnh dự thi: ≤768px thẻ xếp dọc (ảnh 54vh + khối thông tin) nhưng
   .lightbox-card là max-height:92vh + overflow:hidden, nên phần mô tả và hàng
   nút ♥ / chia sẻ / copy link bị cắt cụt. (Quy tắc vá trước đây gõ nhầm thành
   `oveflow` nên trình duyệt bỏ qua.) overflow-x vẫn là hidden để giữ bo góc. */
.lightbox-card {
    max-height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* 16. Lớp phủ "Đang tải ảnh…" của lưới ảnh dự thi.

   gallery.blade.php luôn in sẵn .gallery-loading, còn landing.js chỉ bật/tắt
   class .is-loading trên #galleryResults — phần ẩn/hiện là việc của CSS. Bộ
   quy tắc đó chỉ tồn tại trong resources/css/landing.css, mà trang lại nạp
   public/css/landing.css (hai file đã lệch nhau), nên trên site không có lấy
   một dòng .gallery-loading nào: cái div thành block thường, hiện vĩnh viễn —
   chữ "Đang tải ảnh…" không bao giờ mất, kể cả khi chưa lọc gì. Spinner cũng
   không thấy vì <span> rỗng không có kích thước.

   Chép lại nguyên bộ quy tắc gốc vào file đang được phục vụ. */
.gallery-results {
    position: relative;
    min-height: 120px;
}
.gallery-loading {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: rgba(255, 250, 250, 0.78);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border-radius: 28px;
}
.gallery-results.is-loading .gallery-loading {
    display: flex;
}
.gallery-results.is-loading #galleryResultsInner {
    opacity: 0.32;
    pointer-events: none;
}
#galleryResultsInner {
    transition: opacity 0.2s ease;
}
.gallery-loading-text {
    font-size: 13px;
    font-weight: 800;
    color: var(--red);
    letter-spacing: 0.02em;
}
.gallery-spinner {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 3px solid rgba(169, 43, 53, 0.16);
    border-top-color: var(--red);
    animation: gallerySpin 0.7s linear infinite;
}
@keyframes gallerySpin {
    to {
        transform: rotate(360deg);
    }
}
@media (prefers-reduced-motion: reduce) {
    .gallery-spinner {
        animation-duration: 2s;
    }
    #galleryResultsInner {
        transition: none;
    }
}

.faq ul {
    padding-left: 40px;
    margin: 10px 0 0;
}
.faq p,
.faq li {
    color: var(--muted);
    font-size: 14.5px;
}
/* 17. Trạng thái "đã bình chọn" của nút ♥ (thẻ ảnh + nút trong lightbox).

   Quy tắc .voted / #lbVote.voted chỉ nằm trong resources/css/landing.css — file
   không được nạp — nên trên site nút đã bình chọn trông y hệt nút chưa bình
   chọn, khách không biết mình đã bấm hay chưa. Chép sang file đang phục vụ và
   làm rõ hẳn trạng thái: nền đỏ đặc, tim trắng.

   Nút không còn thuộc tính disabled (để bấm lại còn báo được "đã bình chọn
   rồi"), nên trạng thái phải nhìn thấy được chứ không dựa vào :disabled. */
.heart {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
    border: 1px solid rgba(169, 43, 53, 0.14);
    cursor: pointer;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}
.heart:hover {
    background: #fff;
    transform: translateY(-1px);
}
.heart.voted,
.heart.voted:hover {
    background: var(--red);
    border-color: transparent;
    color: #fff;
    transform: none;
    /* Bấm nữa cũng không thêm phiếu, con trỏ không nên hứa hẹn điều đó. */
    cursor: default;
}

/* #lbVote là .btn.btn-primary (đã đỏ), nên trạng thái voted dùng tông đỏ đậm
   hơn kèm dấu ✓ để phân biệt được với nút chưa bấm. */
#lbVote.voted,
#lbVote.voted:hover {
    background: var(--red2);
    border-color: transparent;
    color: #fff;
    cursor: default;
}
#lbVote.voted::after {
    content: " ✓";
}

/* Nảy một cái ngay lúc bấm. landing.js chỉ gắn .just-voted trong refreshVoteUi
   nên nút vào trang đã ở trạng thái voted thì đứng yên, không nảy hàng loạt. */
.heart.just-voted,
#lbVote.just-voted {
    animation: votedPop 0.32s ease;
}
@keyframes votedPop {
    40% {
        transform: scale(1.18);
    }
}
@media (prefers-reduced-motion: reduce) {
    .heart.just-voted,
    #lbVote.just-voted {
        animation: none;
    }
}

/* Chân trang in nhiều email kèm ghi chú mục đích trên cùng một dòng:
   "Email: info@... (Thông tin chung) | corpcomms@... (Hỗ trợ ...)".
   Dấu "|" ngăn cách cần khoảng thở và nhạt hơn chữ để không cướp sự chú ý. */
.footer-emails .footer-email-sep {
    padding: 0 2px;
    opacity: 0.65;
}

/* Ảnh mồi của lưới #gallery khi cuộc thi chưa có bài dự thi nào được duyệt.
   Mượn .photo-card nên thừa hưởng cả `cursor:pointer` và hiệu ứng zoom khi
   hover — cả hai đều mời người dùng bấm vào, mà ảnh mồi thì không bấm được. */
.photo-card-placeholder {
    cursor: default;
}
.photo-card-placeholder:hover img {
    transform: none;
}

.news-arrow {
    font-family: Arial, Helvetica, sans-serif !important;
}

.btn {
    padding: 9px 14px;
}
@media (min-width: 1024px) and (max-width: 1366px) {
    .actions .btn {
        padding: 11px 17px !important;
        font-size: 12.5px !important;
    }
}

@media (min-width: 1537px) {
    .menu {
        gap: 21px !important;
    }
}

@media (max-width: 1280px) {
    .nav-toggle {
        display: grid;
    }
    .menu {
        display: none;
    }
    /* .actions .btn-outline,
    .actions .nav-logout,
    .actions .nav-user {
        display: block;
    } */
}

.btn-heart {
    padding-left: 20px;
    padding-right: 20px;
}

/* Bình chọn đã bị loại bỏ khỏi UI: .heart giờ chỉ hiển thị số, không còn là
   nút bấm được, nên bỏ con trỏ tay và hiệu ứng hover mời bấm. */
.heart-display {
    cursor: default;
}
.heart-display:hover {
    background: rgba(255, 255, 255, 0.88);
    transform: none;
}
.btn-voted {
    position: absolute;
    top: 16px;
    right: 64px;
    z-index: 2;
    font-size: 12px;
        padding: 5px 10px;
}
.btn-voted.voted {
        background: var(--red);
    border-color: transparent;
    color: #fff;
}
.caption {
    font-weight: 800;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.customize-position {
    display: flex; 
    align-items:center;
    justify-content: center;
    gap: 4px;
    position: absolute;
    top: 16px;
    right: 16px;
}
.customize-position .heart , 
.customize-position .btn-voted {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    
}