/* Minification failed. Returning unminified contents.
(8,21): run-time error CSS1039: Token not allowed after unary operator: '-web-ecosystem-content'
(13,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(14,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27,15): run-time error CSS1039: Token not allowed after unary operator: '-web-space-2'
(28,19): run-time error CSS1039: Token not allowed after unary operator: '-web-space-3'
(28,38): run-time error CSS1039: Token not allowed after unary operator: '-web-container-pad'
(29,22): run-time error CSS1039: Token not allowed after unary operator: '-web-gray-900'
(30,17): run-time error CSS1039: Token not allowed after unary operator: '-web-white'
(31,21): run-time error CSS1039: Token not allowed after unary operator: '-web-text-sm'
(32,23): run-time error CSS1039: Token not allowed after unary operator: '-web-text-sm-lh'
(37,29): run-time error CSS1039: Token not allowed after unary operator: '-web-radius-sm'
(39,25): run-time error CSS1039: Token not allowed after unary operator: '-web-text-xs'
(43,21): run-time error CSS1039: Token not allowed after unary operator: '-web-white'
(50,25): run-time error CSS1039: Token not allowed after unary operator: '-web-radius-sm'
(51,22): run-time error CSS1039: Token not allowed after unary operator: '-web-gray-900'
(52,17): run-time error CSS1039: Token not allowed after unary operator: '-web-white'
(53,21): run-time error CSS1039: Token not allowed after unary operator: '-web-text-xs'
(60,22): run-time error CSS1039: Token not allowed after unary operator: '-web-space-8'
(62,35): run-time error CSS1039: Token not allowed after unary operator: '-web-rule'
(66,17): run-time error CSS1039: Token not allowed after unary operator: '-kv-heading'
(71,34): run-time error CSS1039: Token not allowed after unary operator: '-web-header-h'
(71,56): run-time error CSS1039: Token not allowed after unary operator: '-web-space-4'
(78,15): run-time error CSS1039: Token not allowed after unary operator: '-web-space-8'
(98,19): run-time error CSS1039: Token not allowed after unary operator: '-web-space-6'
(104,15): run-time error CSS1039: Token not allowed after unary operator: '-web-space-8'
(110,22): run-time error CSS1039: Token not allowed after unary operator: '-web-space-12'
(116,15): run-time error CSS1039: Token not allowed after unary operator: '-web-space-4'
(116,34): run-time error CSS1039: Token not allowed after unary operator: '-web-space-6'
(117,22): run-time error CSS1039: Token not allowed after unary operator: '-web-space-6'
(124,15): run-time error CSS1039: Token not allowed after unary operator: '-web-space-4'
(124,34): run-time error CSS1039: Token not allowed after unary operator: '-web-space-6'
(125,22): run-time error CSS1039: Token not allowed after unary operator: '-web-space-6'
(131,15): run-time error CSS1039: Token not allowed after unary operator: '-web-space-6'
(132,22): run-time error CSS1039: Token not allowed after unary operator: '-web-space-6'
(138,15): run-time error CSS1039: Token not allowed after unary operator: '-web-space-6'
(157,15): run-time error CSS1039: Token not allowed after unary operator: '-web-space-3'
(158,23): run-time error CSS1039: Token not allowed after unary operator: '-web-space-4'
(162,21): run-time error CSS1039: Token not allowed after unary operator: '-web-display-xs'
(169,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(216,15): run-time error CSS1039: Token not allowed after unary operator: '-web-space-6'
(217,22): run-time error CSS1039: Token not allowed after unary operator: '-web-space-6'
(233,15): run-time error CSS1039: Token not allowed after unary operator: '-web-space-2'
(254,21): run-time error CSS1039: Token not allowed after unary operator: '-web-text-sm'
(255,23): run-time error CSS1039: Token not allowed after unary operator: '-web-text-sm-lh'
(256,17): run-time error CSS1039: Token not allowed after unary operator: '-web-news-title'
(262,26): run-time error CSS1039: Token not allowed after unary operator: '-web-gray-100'
(267,22): run-time error CSS1039: Token not allowed after unary operator: '-web-primary'
(268,17): run-time error CSS1039: Token not allowed after unary operator: '-web-white'
(278,17): run-time error CSS1039: Token not allowed after unary operator: '-kv-page-off'
(290,17): run-time error CSS1039: Token not allowed after unary operator: '-kv-page-arrow'
(291,21): run-time error CSS1039: Token not allowed after unary operator: '-web-text-sm'
(297,21): run-time error CSS1039: Token not allowed after unary operator: '-web-primary'
(302,17): run-time error CSS1039: Token not allowed after unary operator: '-kv-page-off'
(307,22): run-time error CSS1039: Token not allowed after unary operator: '-web-space-6'
(308,19): run-time error CSS1039: Token not allowed after unary operator: '-web-space-12'
(308,39): run-time error CSS1039: Token not allowed after unary operator: '-web-space-6'
(309,29): run-time error CSS1039: Token not allowed after unary operator: '-web-border'
(310,25): run-time error CSS1039: Token not allowed after unary operator: '-web-radius-card'
(311,22): run-time error CSS1039: Token not allowed after unary operator: '-web-gray-50'
(316,21): run-time error CSS1039: Token not allowed after unary operator: '-web-text-xl'
(317,23): run-time error CSS1039: Token not allowed after unary operator: '-web-text-xl-lh'
(319,17): run-time error CSS1039: Token not allowed after unary operator: '-web-gray-900'
(324,18): run-time error CSS1039: Token not allowed after unary operator: '-web-space-3'
(324,42): run-time error CSS1039: Token not allowed after unary operator: '-web-space-6'
(325,21): run-time error CSS1039: Token not allowed after unary operator: '-web-text-md'
(326,23): run-time error CSS1039: Token not allowed after unary operator: '-web-text-md-lh'
(327,17): run-time error CSS1039: Token not allowed after unary operator: '-web-gray-600'
(363,65): run-time error CSS1039: Token not allowed after unary operator: '-rv-d'
(366,25): run-time error CSS1030: Expected identifier, found '.'
(366,56): run-time error CSS1031: Expected selector, found ')'
(366,56): run-time error CSS1025: Expected comma or open brace, found ')'
(371,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(375,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(378,36): run-time error CSS1030: Expected identifier, found '.'
(378,79): run-time error CSS1031: Expected selector, found ')'
(378,79): run-time error CSS1025: Expected comma or open brace, found ')'
(386,65): run-time error CSS1039: Token not allowed after unary operator: '-rv-d'
(388,54): run-time error CSS1030: Expected identifier, found '.'
(388,85): run-time error CSS1031: Expected selector, found ')'
(388,85): run-time error CSS1025: Expected comma or open brace, found ')'
(391,79): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(392,79): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(397,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(398,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(399,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(400,70): run-time error CSS1039: Token not allowed after unary operator: '-rv-d'
(400,97): run-time error CSS1039: Token not allowed after unary operator: '-rv-i'
(413,19): run-time error CSS1039: Token not allowed after unary operator: '-web-space-4'
(413,38): run-time error CSS1039: Token not allowed after unary operator: '-web-space-6'
(417,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(425,19): run-time error CSS1039: Token not allowed after unary operator: '-web-space-8'
(455,25): run-time error CSS1039: Token not allowed after unary operator: '-web-text-xl'
(460,26): run-time error CSS1039: Token not allowed after unary operator: '-web-space-8'
 */
.market-preview-bar[hidden],
.market-empty[hidden] {
    display: none;
}

.news-hot-block,
.news-page-layout {
    max-width: var(--web-ecosystem-content);
    margin-inline: auto;
}

.news-page-container {
    --kv-heading: #002249;
    --kv-page-arrow: #677484;
    --kv-page-off: #C2C7CE;
}

/* CÔNG CỤ DUYỆT nội bộ, chỉ hiện với `?nhap=1`. Khi port sang Razor thì bỏ hẳn
      cả khối markup lẫn khối CSS này — trạng thái draft sẽ do CMS lo.
      Nền gray-900 + chữ trắng = 17.4:1. Chọn màu trung tính thay vì đỏ/vàng để
      KHÔNG phải thêm token màu mới (project đang nợ 20 màu chưa có token). */
.market-preview-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--web-space-2);
    padding: var(--web-space-3) var(--web-container-pad);
    background: var(--web-gray-900);
    color: var(--web-white);
    font-size: var(--web-text-sm);
    line-height: var(--web-text-sm-lh);
}

    .market-preview-bar code {
        padding: 1px 6px;
        border-radius: var(--web-radius-sm);
        background: rgba(255, 255, 255, .14);
        font-size: var(--web-text-xs);
    }

    .market-preview-bar a {
        color: var(--web-white);
        text-decoration: underline;
    }

.news-draft {
    display: inline-block;
    padding: 0 6px;
    border-radius: var(--web-radius-sm);
    background: var(--web-gray-900);
    color: var(--web-white);
    font-size: var(--web-text-xs);
    line-height: 18px;
    font-weight: 600;
    text-transform: uppercase;
}

.news-heading {
    margin: 0 0 var(--web-space-8);
    padding: 12px 0 11px;
    border-bottom: 1px solid var(--web-rule);
    font-size: 30px;
    line-height: 36px;
    font-weight: 700;
    color: var(--kv-heading);
}

.news-block,
.news-hot-block {
    scroll-margin-top: calc(var(--web-header-h) + var(--web-space-4));
}

/* Hero trang tin: giu nguyen 2 cot (bai lon trai + 2 bai doc phai). */
.news-hot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 344px;
    gap: var(--web-space-8);
    align-items: start;
}
    .news-hot .news-title {
        min-height:fit-content !important
    }

    .news-hot-side {
        display: grid;
        gap: 30px;
    }

/* Khoi hot NAM TRONG news-page-layout (section chuyen muc Layout==0):
   1 bai lon full-width o tren, 2 bai nho canh nhau o duoi. */
.news-page-layout .news-hot {
    grid-template-columns: minmax(0, 1fr);
}

    .news-page-layout .news-hot-side {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--web-space-6);
    }

.news-page-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 344px;
    gap: var(--web-space-8);
    align-items: start;
    margin-top: 20px;
}

.news-block + .news-block {
    margin-top: var(--web-space-12);
}

.news-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--web-space-4) var(--web-space-6);
    margin-top: var(--web-space-6);
}

/* Section danh mục kiểu lưới: luôn 1 hàng (3 cột = 3 bài), không xuống dòng. */
.news-archive--row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--web-space-4) var(--web-space-6);
    margin-top: var(--web-space-6);
}

/* Section "Tất cả bài viết": 1 bài 1 hàng, hình trái - nội dung phải. */
.news-archive--list {
    display: grid;
    gap: var(--web-space-6);
    margin-top: var(--web-space-6);
}

.news-card--row {
    display: grid;
    grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
    gap: var(--web-space-6);
    align-items: stretch;
}

    .news-card--row .news-title {
        min-height: auto;
        font-size:20px
    }

    .news-card--row .news-media {
        aspect-ratio: auto;
        height: 100%;
    }

    .news-card--row .news-body {
        padding-top: 0;
    }

.news-card--lead .news-body {
    gap: var(--web-space-3);
    padding-top: var(--web-space-4);
}

.news-card--lead .news-title {
    font-size: var(--web-display-xs);
    line-height: 36px;
    font-weight: 700;
    min-height: 0;
}

.news-card--side {
    --news-media-ratio: 344 / 180;
}

    .news-card--side .news-title {
        min-height: 0;
    }

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    /* 🪤 ĐIỂM DỪNG **KHÔNG** CHÉP THEO SỐ CỦA FIGMA — chép thẳng là SAI, đã đo.
          Bản xuất ghi `linear-gradient(94.94deg, rgb(5,23,78) 19.138%,
          rgb(44,71,158) 27.408%)`. Nhưng gradient của Figma lưu bằng MA TRẬN toạ độ
          tuyệt đối; bộ chuyển đổi quy ra % theo hộp phần tử, và với hộp hẹp (344 và
          139px) thì dải chuyển rơi vào GIỮA dòng chữ.
     
          ✅ Đo bản render Figma của đúng 2 node này (789:12927 tiêu đề, 789:13229
          nhãn sidebar) — lọc pixel mực rồi lấy trung bình theo lát ngang:
              tiêu đề  #253b82 #2e489a #2e499f #2e499f #2e499f #2e499f
              nhãn     #2b438f #2f499f #2c479e
          Tức chữ đọc ra gần như MỘT màu `--web-primary`, chỉ ngả navy ở MÉP TRÁI.
     
          Dò lại trên bản dựng với 5 bộ điểm dừng, cùng phép đo đó:
              19.138%/27.408%  nhãn #1f316b  <- lệch 36/255, thấy rõ 2 tông
              0%/15%           nhãn #2b418a  <- lệch **5/255** so với Figma ✅
              0%/6%            nhãn #304897  <- đã mất hẳn phần navy
          Chốt **0% -> 15%**. Đây là ưu tiên BẢN RENDER hơn con số xuất ra, đúng bài
          học T8: số đúng theo một chiều đo vẫn có thể sai theo chiều đang nhìn.
          `-webkit-text-fill-color` đi kèm theo đúng khuôn `.section-title-accent`
          (components.css) — thiếu nó thì một số WebKit cũ vẫn tô màu đặc đè lên. */
    .news-card--side .news-title a {
        background-image: linear-gradient(95deg, var(--web-primary-900) 0%, var(--web-primary) 15%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }

    @media (hover: hover) and (pointer: fine) and (min-width: 1025px) {
        .news-card--side:hover .news-title a {
            background-image: linear-gradient(var(--web-primary), var(--web-primary));
        }
    }
}

.news-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--web-space-6);
    margin-top: var(--web-space-6);
}

    .news-pagination:empty {
        display: none;
    }

/* 🪤 `list-style: none` là BẮT BUỘC ở đây — `css/base.css` chỉ reset `ul`, KHÔNG
      reset `ol`. Đo được trên trình duyệt thật: dải phân trang hiện ra
      "1. [1] . 2 ›" vì Chrome vẫn vẽ marker của `<ol>` dù các `<li>` là flex item.
      Dùng `<ol>` chứ không `<ul>` là có chủ đích: số trang CÓ thứ tự. */
.news-page-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--web-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

    .news-page-list li {
        display: flex;
    }

.news-page-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: none;
    font-family: inherit;
    font-size: var(--web-text-sm);
    line-height: var(--web-text-sm-lh);
    color: var(--web-news-title);
    cursor: pointer;
}

@media (hover: hover) and (pointer: fine) and (min-width: 1025px) {
    .news-page-cell:hover {
        background: var(--web-gray-100);
    }
}

.news-page-cell--current {
    background: var(--web-primary);
    color: var(--web-white);
    cursor: default;
}

.news-page-gap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--kv-page-off);
}

.news-page-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--kv-page-arrow);
    font-size: var(--web-text-sm);
    cursor: pointer;
}

@media (hover: hover) and (pointer: fine) and (min-width: 1025px) {
    .news-page-arrow:hover:not([disabled]) {
        color: var(--web-primary);
    }
}

.news-page-arrow[disabled] {
    color: var(--kv-page-off);
    cursor: default;
}

.market-empty {
    margin-top: var(--web-space-6);
    padding: var(--web-space-12) var(--web-space-6);
    border: 1px dashed var(--web-border);
    border-radius: var(--web-radius-card);
    background: var(--web-gray-50);
    text-align: center;
}

.market-empty-title {
    font-size: var(--web-text-xl);
    line-height: var(--web-text-xl-lh);
    font-weight: 600;
    color: var(--web-gray-900);
}

.market-empty-desc {
    max-width: 520px;
    margin: var(--web-space-3) auto var(--web-space-6);
    font-size: var(--web-text-md);
    line-height: var(--web-text-md-lh);
    color: var(--web-gray-600);
}

/* Figma `div.news-col-right` (789:13210): rộng **344**, khe giữa 2 khối **32**.
      Chỉ 2 thứ: ô banner 344×180 và hộp "BÀI VIẾT LIÊN QUAN".
      🔻 B51 — BỎ bộ lọc chủ đề, 2 danh sách "Mới nhất", và "Nguồn đang theo dõi"
      của B49 (Designer chốt "theo Figma nguyên văn").
   
      🔺 26/08/2026 — TOÀN BỘ CSS CỦA MỤC NÀY ĐÃ CHUYỂN SANG `css/components.css` §9
      (rule W6) khi `tin-tuc-chi-tiet.html` thành trang THỨ HAI dựng cùng cột phụ đó.
      Chuyển đi: `.news-side` · `.news-side-banner` · `.news-side-title` (+ khối
      `@supports` gradient) · `.news-side-icon` · `.news-side-list` · `.news-side-link`
      · `.news-side-box[hidden]` (trước ở mục 0a).
      🔺 26/08 — danh sách gợi ý của trang này đổi từ CHỮ TRƠN sang HÀNG CÓ ẢNH (110×66
      + tiêu đề + ngày), Designer chốt sau khi duyệt bố cục đó ở trang chi tiết bài
      viết. `.news-side-link` vì thế ĐÃ GỠ HẲN khỏi components.css (0 chỗ dùng); vỏ hàng
      mới là họ `.news-side-item*` cũng ở components.css §9. Markup do
      `js/pages/tin-tuc.js` dựng.
      🎯 Kèm 12 thumbnail 220×132 ở `assets/images/topics/thumbs/` — 1116 KB -> 75,6 KB.
      ⚠ Đường dẫn `url()` của `.news-side-icon` ĐÃ ĐỔI `../../../Public/vietasoft/assets/` -> `../assets/`
      theo tầng file mới. Đo lại sau khi chuyển: **0 pixel đổi** ở 1920/1536/1366/375.
      Ở LẠI đây: override responsive của riêng trang này (cuối file) — 2 trang nhả
      cột phụ ở 2 mốc khác nhau nên phần đó KHÔNG chung được.
   
      🎯 Ô banner là asset dùng chung với trang chi tiết:
      `assets/images/banners/gihotech-chuoi-sieu-thi.png`. Trang chi tiết vì thế
      **0 asset banner mới**.
      ⚠ [CẦN XÁC NHẬN] đích click: Figma không ghi, tạm trỏ trang Sản phẩm vì banner
      quảng cáo đúng dòng sản phẩm bán lẻ/siêu thị. */

@media (prefers-reduced-motion: no-preference) {
    .news-hot-block > .news-heading {
        animation: web-in .8s cubic-bezier(.22, 1, .36, 1) both;
    }

    .news-hot-block .news-card {
        animation: web-in .8s cubic-bezier(.22, 1, .36, 1) var(--rv-d, 100ms) both;
    }

    .news-hot-block :is(.news-thumb, .news-thumb--empty) {
        animation: web-settle 1.4s cubic-bezier(.22, 1, .36, 1) var(--rv-d, 100ms) both;
    }

    .news-hot-side li:nth-child(1) .news-card {
        --rv-d: 200ms;
    }

    .news-hot-side li:nth-child(2) .news-card {
        --rv-d: 290ms;
    }

    .news-hot-side.is-hot-wait :is(.news-card, .news-thumb, .news-thumb--empty) {
        animation-play-state: paused;
    }

    /* Trang chuyên mục không có khối hot nên card cột chính không được animation
       ở trên — thêm entrance tương đương, scope riêng để giữ nguyên trang News.
       Card infinite-scroll append sau cũng fade-in theo cùng rule. */
    .page-chuyen-muc .news-page-main .news-block .news-card {
        animation: web-in .8s cubic-bezier(.22, 1, .36, 1) var(--rv-d, 100ms) both;
    }
    .page-chuyen-muc .news-page-main .news-block :is(.news-thumb, .news-thumb--empty) {
        animation: web-settle 1.4s cubic-bezier(.22, 1, .36, 1) var(--rv-d, 100ms) both;
    }
    .page-chuyen-muc .news-page-main .news-block .news-card:nth-child(3n+2) { --rv-d: 190ms; }
    .page-chuyen-muc .news-page-main .news-block .news-card:nth-child(3n+3) { --rv-d: 280ms; }
}

@media screen and (prefers-reduced-motion: no-preference) {
    .news-side-box.web-rv.is-in .news-side-list li {
        --rv-x: 16px;
        --rv-y: 0;
        --rv-s: 1;
        animation: web-in .6s cubic-bezier(.22, 1, .36, 1) calc(var(--rv-d, 0ms) + 200ms + var(--rv-i, 0) * 60ms) both;
    }
}


@media (max-width: 1200px) {
    .news-page-layout,
    .news-hot {
        grid-template-columns: minmax(0, 1fr);
    }

    .news-hot-side {
        grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
        gap: var(--web-space-4) var(--web-space-6);
    }

    .news-card--side {
        --news-media-ratio: 25 / 12;
    }

    .news-side {
        position: static;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
        align-items: start;
        gap: var(--web-space-8);
    }
}

@media (max-width: 768px) {
    .news-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .news-heading {
        text-align:center
    }

    .news-page-layout .news-hot-side {
        grid-template-columns: minmax(0, 1fr);
    }

    .news-archive--row {
        grid-template-columns: minmax(0, 1fr);
    }

    .news-card--row {
        grid-template-columns: minmax(0, 1fr);
    }

        .news-card--row .news-media {
            min-height: 0;
        }

    .news-card--lead .news-title {
        font-size: var(--web-text-xl);
        line-height: 28px;
    }

    .news-block + .news-block {
        margin-top: var(--web-space-8);
    }
}