/* /blog (+ tin-tuc, tai-nguyen, tuyen-dung, centers): bo cuc tap chi (Kinfolk / Cereal / It's Nice That). View: blog.blade.php + blog-modules.blade.php,
   the: components/colorme/ui/post-story, JS: public/js/blog-list.js. Nam tren cm-ui.css, chi dung token mau (sang/toi).
   Ngoai le co chu co chu dich: trong ngu canh tap chi, ten bao va tieu de bai bia lon (44-72px), tieu de khoi 20-24px; chu than va meta van nho (13-15px).
   Khong chu in hoa nho, khong chu gradient. Khoang trang lon GIUA cac khoi, khong de trong BEN TRONG khoi. */

.cm-ui .cm-mag { --mag-gap: 32px; --mag-mod: 72px; --mag-radius: 6px; }
@media (max-width: 767.98px) { .cm-ui .cm-mag { --mag-gap: 20px; --mag-mod: 40px; } }

/* ---------- Dau bao ---------- */
.cm-ui .cm-mast { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 40px; padding-bottom: 24px; border-bottom: 2px solid var(--cm-text); }
.cm-ui .cm-mast__text { flex: 1 1 420px; min-width: 0; }
.cm-ui .cm-mast__title { margin: 0; font-size: 44px; font-weight: var(--cm-fw-heading); line-height: 1; letter-spacing: -0.04em; color: var(--cm-text); }
@media (min-width: 768px) { .cm-ui .cm-mast__title { font-size: 72px; } }
.cm-ui .cm-mast__sub { margin: 14px 0 0; max-width: 52ch; color: var(--cm-muted); font-size: var(--cm-fs-body); line-height: var(--cm-lh-body); }
.cm-ui .cm-mast__search { flex: 0 1 300px; }
@media (max-width: 767.98px) { .cm-ui .cm-mast__search { flex-basis: 100%; } }

/* ---------- Hang chu de: chu yen lang, 1 dong; dien thoai cuon ngang (mo canh), tu 768 phan thua vao "Thêm" ---------- */
.cm-ui .cm-btabs { position: relative; display: flex; align-items: stretch; border-bottom: 1px solid var(--cm-line); }
.cm-ui .cm-btabs__list { display: flex; gap: 24px; flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; list-style: none;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.cm-ui .cm-btabs__list::-webkit-scrollbar { display: none; }
.cm-ui .cm-btabs__list > li { flex: 0 0 auto; }
.cm-ui .cm-btabs.is-overflow:not(.at-start):not(.at-end) .cm-btabs__list { -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 56px), transparent); }
.cm-ui .cm-btabs.is-overflow.at-start:not(.at-end) .cm-btabs__list { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); }
.cm-ui .cm-btabs.is-overflow.at-end:not(.at-start) .cm-btabs__list { -webkit-mask-image: linear-gradient(to right, transparent, #000 40px); mask-image: linear-gradient(to right, transparent, #000 40px); }
.cm-ui .cm-btabs__tab { position: relative; display: inline-flex; align-items: center; gap: 4px; height: 48px; padding: 0; border: 0; background: none;
    color: var(--cm-muted); font-size: var(--cm-fs-body); font-weight: var(--cm-fw-regular); white-space: nowrap; cursor: pointer; }
.cm-ui .cm-btabs__tab:hover { color: var(--cm-text); }
.cm-ui .cm-btabs__tab[aria-current], .cm-ui .cm-btabs__more-btn.is-current { color: var(--cm-text); font-weight: var(--cm-fw-semibold); }
.cm-ui .cm-btabs__tab[aria-current]::after, .cm-ui .cm-btabs__more-btn.is-current::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--cm-text); }
.cm-ui .cm-btabs__tab:focus-visible { outline-offset: -2px; }
.cm-ui .cm-btabs__more { position: relative; flex: 0 0 auto; margin-left: 24px; }
.cm-ui .cm-btabs__chev { width: 16px; height: 16px; transition: transform .2s ease; }
.cm-ui .cm-btabs__more-btn[aria-expanded="true"] .cm-btabs__chev { transform: rotate(180deg); }
.cm-ui .cm-btabs__menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; min-width: 220px; max-height: min(60vh, 420px); overflow: auto;
    margin: 0; padding: 6px; list-style: none; border-radius: 12px; background: var(--cm-elevated); box-shadow: var(--cm-shadow-2); }
.cm-ui .cm-btabs__menu a { display: flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 8px; color: var(--cm-text); font-size: var(--cm-fs-small); white-space: nowrap; }
.cm-ui .cm-btabs__menu a:hover, .cm-ui .cm-btabs__menu a:focus-visible { background: var(--cm-surface-2); }
.cm-ui .cm-btabs__menu a[aria-current] { font-weight: var(--cm-fw-semibold); }
@media (max-width: 767.98px) {
    .cm-ui .cm-btabs { margin-inline: calc(var(--bs-gutter-x, 1.5rem) * -.5); padding-inline: calc(var(--bs-gutter-x, 1.5rem) * .5); }
    .cm-ui .cm-btabs__more { display: none !important; }
}

.cm-ui .cm-mag__result { margin: 32px 0 0; color: var(--cm-muted); }
.cm-ui .cm-blog__empty { padding-top: 48px; }

/* ---------- Khoi (module): ngan bang 1 duong ke manh + khoang trang lon ---------- */
.cm-ui .cm-mag__more { display: contents; }
.cm-ui .cm-mod { padding: var(--mag-mod) 0; border-top: 1px solid var(--cm-line); }
.cm-ui .cm-mag__flow > .cm-mod:first-child { border-top: 0; padding-top: 40px; }
.cm-ui .cm-mag__result + .cm-mag__flow > .cm-mod:first-child { padding-top: 24px; }

/* the chung */
.cm-ui .cm-story { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.cm-ui .cm-story__media { display: block; border-radius: var(--mag-radius); background: var(--cm-surface-2); aspect-ratio: 16 / 9; } /* moi the 16:9 = ti le anh bia cua bai (chu, 07/10/2026: anh 16:9 bi cat mat chu o the 4:3) */
.cm-ui .cm-story__body { min-width: 0; }
.cm-ui .cm-story__kicker { margin: 0 0 8px; font-size: var(--cm-fs-small); line-height: 1.4; color: var(--cm-muted); }
.cm-ui .cm-story__title { margin: 0; font-size: 20px; font-weight: var(--cm-fw-heading); line-height: 1.25; letter-spacing: -0.015em; color: var(--cm-text); text-wrap: balance; }
.cm-ui .cm-story__title a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.cm-ui .cm-story__dek { margin: 12px 0 0; max-width: 60ch; color: var(--cm-muted); font-size: var(--cm-fs-body); line-height: var(--cm-lh-body);
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.cm-ui .cm-story__meta { margin: 12px 0 0; font-size: var(--cm-fs-small); line-height: 1.4; color: var(--cm-muted); }
.cm-ui .cm-story__meta a:hover { color: var(--cm-text); }

/* bia: anh 2:1 rong, tieu de lon 8/12 | tom tat + meta 4/12 */
.cm-ui .cm-story--cover { gap: 28px; }
.cm-ui .cm-story--cover .cm-story__title { font-size: 32px; line-height: 1.1; letter-spacing: -0.03em; }
@media (min-width: 992px) {
    .cm-ui .cm-story--cover .cm-story__body { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: var(--mag-gap); align-items: start; }
    .cm-ui .cm-story--cover .cm-story__kicker { grid-column: 1; }
    .cm-ui .cm-story--cover .cm-story__title { grid-column: 1; font-size: 52px; line-height: 1.06; }
    .cm-ui .cm-story--cover .cm-story__body { grid-template-rows: auto auto 1fr; }
    .cm-ui .cm-story--cover .cm-story__kicker { grid-row: 1; }
    .cm-ui .cm-story--cover .cm-story__title { grid-row: 2 / span 2; }
    .cm-ui .cm-story--cover .cm-story__dek { grid-column: 2; grid-row: 2; align-self: start; margin: 0; padding-top: 8px; -webkit-line-clamp: 5; }
    .cm-ui .cm-story--cover .cm-story__meta { grid-column: 2; grid-row: 3; align-self: start; }
}

/* 3-up: anh 4:3 */
.cm-ui .cm-mod--trio { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px var(--mag-gap); }
@media (min-width: 768px) { .cm-ui .cm-mod--trio { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 2-up lech: lon 8/12 (anh 3:2) + nho 4/12 (anh doc 4:5) */
.cm-ui .cm-mod--duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px var(--mag-gap); align-items: start; }
@media (min-width: 768px) { .cm-ui .cm-mod--duo { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); } .cm-ui .cm-mod--duo.is-single { grid-template-columns: minmax(0, 8fr); } }
.cm-ui .cm-story--l .cm-story__title { font-size: 24px; letter-spacing: -0.02em; }
/* the nho cao bang the lon: anh doc giãn het chieu cao con lai -> 2 cot ket thuc cung dong, khong de trong ben trong khoi */
@media (min-width: 768px) {
    .cm-ui .cm-mod--duo { align-items: stretch; }
    .cm-ui .cm-story--s { height: 100%; }
}

/* bai ngang rong: anh 7/12 + chu 5/12 can giua doc; xen ke trai/phai */
@media (min-width: 768px) {
    .cm-ui .cm-story--feature { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 48px; align-items: center; }
    .cm-ui .cm-story--feature.is-reverse { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
    .cm-ui .cm-story--feature.is-reverse .cm-story__media { order: 2; }
}
.cm-ui .cm-story--feature .cm-story__title { font-size: 24px; letter-spacing: -0.02em; }

/* Doc nhieu: chi chu, so lon; tieu de 4/12 | danh sach 8/12 */
.cm-ui .cm-mod--popular { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px var(--mag-gap); }
@media (min-width: 992px) { .cm-ui .cm-mod--popular { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
.cm-ui .cm-popular__title { margin: 0; font-size: 24px; font-weight: var(--cm-fw-heading); line-height: 1.2; letter-spacing: -0.02em; color: var(--cm-text); }
.cm-ui .cm-popular__sub { margin: 8px 0 0; max-width: 32ch; color: var(--cm-muted); font-size: var(--cm-fs-body); }
.cm-ui .cm-popular__list { margin: 0; padding: 0; list-style: none; }
.cm-ui .cm-popular__item { display: grid; grid-template-columns: 40px 120px minmax(0, 1fr); align-items: center; gap: 16px; padding: 18px 0; border-top: 1px solid var(--cm-line); }
.cm-ui .cm-popular__item:first-child { border-top: 0; padding-top: 0; }
.cm-ui .cm-popular__num { color: var(--cm-muted); font-size: 32px; font-weight: var(--cm-fw-heading); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; text-align: right; }
.cm-ui .cm-popular__thumb { display: block; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--cm-surface-2); }
.cm-ui .cm-popular__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.cm-ui .cm-popular__item:hover .cm-popular__thumb img { transform: scale(1.04); }
.cm-ui .cm-popular__link { display: block; line-height: 24px !important; }
.cm-ui .cm-popular__link { color: var(--cm-text); font-size: 18px; font-weight: var(--cm-fw-heading); line-height: 1.35; letter-spacing: -0.01em; text-wrap: balance; }
.cm-ui .cm-popular__link:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.cm-ui .cm-popular__meta { display: block; margin-top: 6px; font-size: var(--cm-fs-small); color: var(--cm-muted); }
@media (max-width: 767.98px) { .cm-ui .cm-popular__item { grid-template-columns: 28px 88px minmax(0, 1fr); gap: 12px; } .cm-ui .cm-popular__num { font-size: 24px; } .cm-ui .cm-popular__link { font-size: 15px; line-height: 1.35 !important; } }

/* goi y khoa hoc: 1 dai yen lang (icon khoa hoc that: App\Support\CourseIcon), giu ?suggestion=ads-blogs */
.cm-ui .cm-bpromo { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 4px 20px; align-items: center; padding: 28px 32px; border-radius: 12px; background: var(--cm-surface-2); color: var(--cm-text); }
.cm-ui .cm-bpromo__icon { width: 56px; height: 56px; border-radius: 14px; object-fit: cover; }
.cm-ui .cm-bpromo__body { min-width: 0; }
.cm-ui .cm-bpromo__name { display: block; font-size: 20px; font-weight: var(--cm-fw-heading); line-height: 1.3; letter-spacing: -0.015em; }
.cm-ui .cm-bpromo__line { display: block; margin-top: 4px; font-size: var(--cm-fs-small); color: var(--cm-muted); }
.cm-ui .cm-bpromo__cta { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 18px; border-radius: var(--cm-radius);
    background: var(--cm-inverse); color: var(--cm-on-inverse); font-size: var(--cm-fs-small); font-weight: var(--cm-fw-semibold); white-space: nowrap; }
.cm-ui .cm-bpromo:hover .cm-bpromo__cta { background: var(--cm-inverse-hover); }
.cm-ui .cm-bpromo__cta .icon { font-size: 16px; }
@media (max-width: 575.98px) {
    .cm-ui .cm-bpromo { grid-template-columns: 48px minmax(0, 1fr); padding: 20px; }
    .cm-ui .cm-bpromo__icon { width: 48px; height: 48px; }
    .cm-ui .cm-bpromo__name { font-size: 17px; }
    .cm-ui .cm-bpromo__cta { grid-column: 1 / -1; margin-top: 12px; }
}

/* ---------- Viec lam TopCV (blog-jobs.blade.php), 1 khoi trong nhip ---------- */
.cm-ui .cm-bjobs__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.cm-ui .cm-bjobs__title { margin: 0; font-size: 24px; font-weight: var(--cm-fw-heading); letter-spacing: -0.02em; color: var(--cm-text); }
.cm-ui .cm-bjobs__all { color: var(--cm-muted); font-size: var(--cm-fs-small); }
.cm-ui .cm-bjobs__all:hover { color: var(--cm-text); }
.cm-ui .cm-bjobs__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .cm-ui .cm-bjobs__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px var(--mag-gap); } }
.cm-ui .cm-bjob { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px 10px; margin: 0 -10px; border-radius: 12px; color: var(--cm-text); }
.cm-ui .cm-bjob:hover { background: var(--cm-surface-2); }
/* logo cong ty: o nen trang co dinh (anh thuong hieu, nhieu logo chu den tren nen trong suot) */
.cm-ui .cm-bjob__logo { flex: 0 0 48px; width: 48px; height: 48px; overflow: hidden; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--cm-line); }
.cm-ui .cm-bjob__logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.cm-ui .cm-bjob__body { min-width: 0; }
.cm-ui .cm-bjob__title, .cm-ui .cm-bjob__meta { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-ui .cm-bjob__title { font-weight: var(--cm-fw-semibold); line-height: 1.4; }
.cm-ui .cm-bjob__meta { font-size: var(--cm-fs-small); color: var(--cm-muted); }

/* ---------- Khung xuong khi tai trang tiep (cung hinh khoi 3-up) ---------- */
.cm-ui .cm-mod.is-skeleton { pointer-events: none; }
.cm-ui .cm-skel { display: block; border-radius: 4px; background: var(--cm-skeleton); }
.cm-ui .cm-mod.is-skeleton .cm-story__media { background: var(--cm-skeleton); }
.cm-ui .cm-skel--kicker { width: 28%; height: 12px; margin-bottom: 12px; }
.cm-ui .cm-skel--title { width: 94%; height: 18px; margin-bottom: 8px; }
.cm-ui .cm-skel--title2 { width: 66%; height: 18px; margin-bottom: 16px; }
.cm-ui .cm-skel--meta { width: 40%; height: 12px; }
.cm-ui .cm-mod.is-skeleton .cm-skel, .cm-ui .cm-mod.is-skeleton .cm-story__media {
    background-image: linear-gradient(90deg, transparent 0, var(--cm-surface-2) 50%, transparent 100%); background-size: 200% 100%; background-repeat: no-repeat;
    animation: cm-blog-shimmer 1.4s ease-in-out infinite; }
@keyframes cm-blog-shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }

/* cuoi luong: sentinel + "Thử lại"; link rel=next an (crawl duoc), hien thanh nut khi khong co JS */
.cm-ui .cm-feed__end { min-height: 1px; }
.cm-ui .cm-feed__next { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cm-ui .cm-feed__retry { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 32px 0; border-top: 1px solid var(--cm-line); color: var(--cm-muted); }
.cm-ui .cm-feed__retry button { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border: 0; border-radius: var(--cm-radius);
    background: var(--cm-surface-2); color: var(--cm-text); font-size: var(--cm-fs-small); font-weight: var(--cm-fw-semibold); cursor: pointer; }
.cm-ui .cm-feed__retry button:hover { background: var(--cm-surface-3); }
html:not(.js-blog-infinite) .cm-ui .cm-feed__next { position: static !important; width: auto; height: 48px; clip: auto; display: flex; align-items: center; justify-content: center;
    margin-top: 24px; border-radius: var(--cm-radius); background: var(--cm-surface-2); font-size: var(--cm-fs-small); font-weight: var(--cm-fw-semibold); }

@media (prefers-reduced-motion: reduce) {
    .cm-ui .cm-mod.is-skeleton .cm-skel, .cm-ui .cm-mod.is-skeleton .cm-story__media { animation: none; background-image: none; }
    .cm-ui .cm-btabs__chev { transition: none; }
}

/* Quang cao khoa hoc dang the doc (o doc khoi 2-up): anh 4:3 tren, noi dung + 2 nut duoi, cao bang the lon */
.cm-ui .cm-bad { display: flex; flex-direction: column; height: 100%; border-radius: 20px; overflow: hidden; background: var(--cm-surface); border: 1px solid var(--cm-line); }
.cm-ui .cm-bad__art { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.cm-ui .cm-bad__art img { position: absolute; inset: 8% 6% 0; width: 88%; height: 92%; object-fit: contain; object-position: 50% 100%; transition: transform .4s ease; }
.cm-ui .cm-bad:hover .cm-bad__art img { transform: translateY(-4px); }
.cm-ui .cm-bad__art--one img { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.cm-ui .cm-bad:hover .cm-bad__art--one img { transform: scale(1.03); }
.cm-ui .cm-bad__tag { position: absolute; top: 12px; left: 12px; z-index: 2; height: 26px; padding: 0 10px; border-radius: 999px; background: rgba(255, 255, 255, .94); color: #101828; font-size: 12px; font-weight: 700; line-height: 26px; }
.cm-ui .cm-bad__body { display: flex; flex-direction: column; gap: 12px; flex: 1; padding: 18px 20px 20px; }
.cm-ui .cm-bad__name { display: flex; align-items: center; gap: 10px; color: var(--cm-text); text-decoration: none; font-size: 19px; line-height: 1.25; }
.cm-ui .cm-bad__name b { font-weight: var(--cm-fw-heading); }
.cm-ui .cm-bad__name:hover b { text-decoration: underline; text-underline-offset: 3px; }
.cm-ui .cm-bad__desc { margin: 0; color: var(--cm-text-2); font-size: 14px; line-height: 1.55; }
.cm-ui .cm-bad__usps { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--cm-text); }
.cm-ui .cm-bad__usps li { display: flex; align-items: center; gap: 8px; }
.cm-ui .cm-bad__usps .icon { width: 16px; height: 16px; color: var(--cm-muted); }
.cm-ui .cm-bad__ctas { display: grid; gap: 8px; margin-top: auto; padding-top: 4px; }
.cm-ui .cm-bad__btn { display: flex; align-items: center; justify-content: center; height: 44px; border-radius: 12px; background: var(--cm-surface-2); color: var(--cm-text); font-size: 14.5px; font-weight: 700; text-decoration: none; }
.cm-ui .cm-bad__btn:hover { color: var(--cm-text); filter: brightness(.97); }
.cm-ui .cm-bad__btn--grad { background: var(--cm-grad); color: var(--cm-on-grad, #fff); }
.cm-ui .cm-bad__btn--grad:hover { color: var(--cm-on-grad, #fff); filter: brightness(1.05) saturate(1.05); }

/* ---- /blog kieu dong doc nhu trang chu Medium (config/blog_list.php, chu 13/10/2026). .cm-med nam cung .cm-mag. ----
   Dau trang gon (ten nho + o tim), hang chu de, roi 1 cot bai (toi da 728px) + cot phai 328px dinh khi cuon (tu 992px). */
.cm-ui .cm-med .cm-mast { align-items: center; padding-bottom: 16px; border-bottom: 0; }
.cm-ui .cm-med .cm-mast__title { font-size: 28px; line-height: 1.2; letter-spacing: -0.02em; }
@media (min-width: 768px) { .cm-ui .cm-med .cm-mast__title { font-size: 32px; } }
.cm-ui .cm-med .cm-mast__sub { margin-top: 6px; font-size: var(--cm-fs-small); }
.cm-ui .cm-med__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 64px; }
@media (min-width: 992px) { .cm-ui .cm-med__grid { grid-template-columns: minmax(0, 728px) minmax(0, 328px); justify-content: space-between; } }
.cm-ui .cm-med__main { min-width: 0; }
.cm-ui .cm-med .cm-mag__result { margin: 24px 0 0; }

/* dong bai */
.cm-ui .cm-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 24px; padding: 28px 0; border-bottom: 1px solid var(--cm-line); }
@media (min-width: 768px) { .cm-ui .cm-row { gap: 12px 56px; padding: 32px 0; } }
.cm-ui .cm-row__body { min-width: 0; }
.cm-ui .cm-row__by { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0 0 12px; font-size: 13px; line-height: 1.4; color: var(--cm-muted); }
.cm-ui .cm-row__author { display: inline-flex; align-items: center; gap: 8px; color: var(--cm-text); font-weight: var(--cm-fw-regular); }
/* o vuong bo goc, khong cat tron: tac gia hay gap nhat la tai khoan ColorME va logo luon la o vuong do nguyen ban */
.cm-ui .cm-row__author img, .cm-ui .cm-row__author .cm-ci { width: 24px !important; height: 24px !important; border-radius: 5px !important; object-fit: cover; flex: 0 0 auto; background: var(--cm-surface-2); }
.cm-ui a.cm-row__author:hover span, .cm-ui a.cm-row__cat:hover { text-decoration: underline; }
.cm-ui .cm-row__cat { color: var(--cm-text); }
.cm-ui .cm-row__title { margin: 0; font-size: 20px; font-weight: var(--cm-fw-heading); line-height: 1.25; letter-spacing: -0.016em; color: var(--cm-text); text-wrap: balance;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
@media (min-width: 768px) { .cm-ui .cm-row__title { font-size: 24px; line-height: 1.25; -webkit-line-clamp: 2; } }
.cm-ui .cm-row__title a { color: inherit; }
.cm-ui .cm-row__dek { margin: 8px 0 0; color: var(--cm-muted); font-size: 16px; line-height: 1.45; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
@media (max-width: 767.98px) { .cm-ui .cm-row__dek { font-size: 14px; } }
.cm-ui .cm-row__meta { display: flex; align-items: center; gap: 16px; margin: 16px 0 0; font-size: 13px; line-height: 1.4; color: var(--cm-muted); }
.cm-ui .cm-row__views { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.cm-ui .cm-row__views .icon { width: 16px; height: 16px; }
.cm-ui .cm-row__media { display: block; width: 112px; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; background: var(--cm-surface-2); }
@media (min-width: 768px) { .cm-ui .cm-row__media { width: 176px; } }
.cm-ui .cm-row__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-ui .cm-row__cta { display: inline-flex; align-items: center; gap: 6px; color: var(--cm-text); font-weight: var(--cm-fw-semibold); }
.cm-ui .cm-row__cta .icon { width: 16px; height: 16px; }
.cm-ui .cm-med .is-skeleton .cm-row { pointer-events: none; }
.cm-ui .cm-med .is-skeleton .cm-skel { display: block; }

/* cot phai */
.cm-ui .cm-med__rail { display: none; }
@media (min-width: 992px) {
    .cm-ui .cm-med__rail { display: block; border-left: 1px solid var(--cm-line); padding-left: 40px; margin-left: -24px; }
    .cm-ui .cm-med__sticky { position: sticky; top: 88px; padding: 32px 0 40px; max-height: calc(100vh - 88px); overflow-y: auto; scrollbar-width: none; }
    .cm-ui .cm-med__sticky::-webkit-scrollbar { display: none; }
    .cm-ui .cm-med__inline { display: none; }
}
.cm-ui .cm-rail__sec + .cm-rail__sec { margin-top: 40px; }
.cm-ui .cm-rail__title { margin: 0 0 16px; font-size: 16px; font-weight: var(--cm-fw-semibold); line-height: 1.25; color: var(--cm-text); }
.cm-ui .cm-rail__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 20px; }
.cm-ui .cm-rail__list a { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; color: var(--cm-text); font-size: 16px; font-weight: var(--cm-fw-heading); line-height: 1.25; letter-spacing: -0.01em; }
.cm-ui .cm-rail__list a:hover { text-decoration: underline; }
.cm-ui .cm-rail__list span { display: block; margin-top: 6px; font-size: 13px; color: var(--cm-muted); }
.cm-ui .cm-rail__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cm-ui .cm-rail__chips a { display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; border-radius: 999px; background: var(--cm-surface-2); color: var(--cm-text); font-size: 14px; white-space: nowrap; }
.cm-ui .cm-rail__chips a:hover, .cm-ui .cm-rail__chips a[aria-current] { background: var(--cm-text); color: var(--cm-surface); }
.cm-ui .cm-rail__sec--promo .cm-bpromo { margin: 0; }
/* "Đọc nhiều" chen giua dong bai: chi duoi 992px (desktop da co cot phai) */
.cm-ui .cm-med__inline { padding: 28px 0; border-bottom: 1px solid var(--cm-line); }
.cm-ui .cm-rail__sec--promo .cm-bpromo { grid-template-columns: 48px minmax(0, 1fr); gap: 4px 14px; padding: 20px; }
.cm-ui .cm-rail__sec--promo .cm-bpromo__cta { grid-column: 1 / -1; justify-self: start; margin-top: 10px; }

/* ---- /blog kieu "trang nhat toi gian" (config/blog_list.php 'front', chu 13/10/2026: toi gian, bang dau 2-3 cot co 1 bai chinh, roi nhieu bai noi tiep).
   .cm-front nam cung .cm-mag. Bang dau: [bai chinh] [3 bai chi chu] [Đọc nhiều]; duoi: dong doc (.cm-row) mot cot o giua. Duong ke manh, khong mau nhan. ---- */
.cm-ui .cm-front .cm-mast { align-items: center; padding-bottom: 16px; border-bottom: 0; }
.cm-ui .cm-front .cm-mast__title { font-size: 28px; line-height: 1.2; letter-spacing: -0.02em; }
@media (min-width: 768px) { .cm-ui .cm-front .cm-mast__title { font-size: 32px; } }
.cm-ui .cm-front .cm-mast__sub { margin-top: 6px; font-size: var(--cm-fs-small); }
.cm-ui .cm-fst__label { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: 0 0 10px; font-size: 13px; line-height: 1.4; color: var(--cm-muted); }
.cm-ui .cm-fst__label > * + *::before { content: "·"; margin-right: 8px; }
.cm-ui .cm-fst__label span { color: var(--cm-text); }
.cm-ui .cm-fst__title { margin: 0; font-weight: var(--cm-fw-heading); color: var(--cm-text); text-wrap: balance; }
.cm-ui .cm-fst__title a { color: inherit; }
.cm-ui .cm-fst__dek { margin: 10px 0 0; color: var(--cm-muted); line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.cm-ui .cm-fst__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--cm-surface-2); border-radius: 6px; }
.cm-ui .cm-fst__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-ui .cm-front__top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px 0; padding: 32px 0 40px; border-bottom: 1px solid var(--cm-line); }
.cm-ui .cm-fst--lead .cm-fst__media { margin-bottom: 20px; }
.cm-ui .cm-fst--lead .cm-fst__title { font-size: 28px; line-height: 1.15; letter-spacing: -0.025em; }
.cm-ui .cm-fst--lead .cm-fst__dek { font-size: 17px; -webkit-line-clamp: 3; }
.cm-ui .cm-front__next { display: grid; align-content: start; }
.cm-ui .cm-fst--line { display: grid; grid-template-columns: minmax(0, 1fr) 104px; align-items: start; gap: 0 16px; padding: 20px 0; border-top: 1px solid var(--cm-line); }
.cm-ui .cm-fst--line .cm-fst__media { margin-top: 4px; border-radius: 4px; }
.cm-ui .cm-fst--line:first-child { padding-top: 0; border-top: 0; }
.cm-ui .cm-fst--line .cm-fst__label { margin-bottom: 8px; }
.cm-ui .cm-fst--line .cm-fst__title { font-size: 19px; line-height: 1.28; letter-spacing: -0.014em; }
.cm-ui .cm-fst--line .cm-fst__dek { margin-top: 6px; font-size: 14.5px; -webkit-line-clamp: 2; }
.cm-ui .cm-front__head { margin: 0 0 8px; font-size: 16px; font-weight: var(--cm-fw-semibold); line-height: 1.25; color: var(--cm-text); }
.cm-ui .cm-front__rank { margin: 0; padding: 0; list-style: none; }
.cm-ui .cm-front__rank li { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: baseline; padding: 12px 0; }
.cm-ui .cm-front__rank li + li { border-top: 1px solid var(--cm-line); }
.cm-ui .cm-front__rank span { font-size: 15px; font-weight: var(--cm-fw-semibold); color: var(--cm-muted); font-variant-numeric: tabular-nums; }
.cm-ui .cm-front__rank a { color: var(--cm-text); font-size: 15.5px; font-weight: var(--cm-fw-semibold); line-height: 1.35; letter-spacing: -0.005em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.cm-ui .cm-front__rank a:hover, .cm-ui .cm-fst__title a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 768px) {
    .cm-ui .cm-front__top { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 40px 48px; }
    .cm-ui .cm-front__side { grid-column: 1 / -1; }
    .cm-ui .cm-fst--lead .cm-fst__title { font-size: 34px; }
}
@media (min-width: 1100px) {
    .cm-ui .cm-front__top { grid-template-columns: minmax(0, 1.72fr) minmax(0, 1fr) minmax(0, .86fr); gap: 0 48px; padding: 40px 0 48px; }
    .cm-ui .cm-front__side { grid-column: auto; }
    .cm-ui .cm-fst--lead .cm-fst__title { font-size: 38px; line-height: 1.12; }
}
/* cac bai noi tiep: dong doc mot cot, can giua */
.cm-ui .cm-front__list { max-width: 760px; margin: 0 auto; }
.cm-ui .cm-front .cm-med__inline { display: none; }

/* ---- /blog "trang nhat": dien thoai (chu 13/10/2026, kem 2 anh chup man hinh: "enhance mobile experience") ----
   Gon hon theo chieu doc: tieu de nho lai, bo tom tat o cac bai phu, "Đọc nhiều" thanh 1 hang the vuot ngang thay vi 5 dong dai, khoang trang deu. */
@media (max-width: 767.98px) {
    .cm-ui .cm-front .cm-mast { padding-bottom: 12px; }
    .cm-ui .cm-front .cm-mast__sub { display: none; }
    .cm-ui .cm-front__top { gap: 0; padding: 20px 0 8px; border-bottom: 0; }
    .cm-ui .cm-front .cm-story.cm-fst--lead { gap: 0; }
    .cm-ui .cm-fst--lead .cm-fst__media { margin: 0 -12px 16px; border-radius: 0; }
    .cm-ui .cm-fst--lead .cm-fst__title { font-size: 24px; line-height: 1.2; letter-spacing: -0.02em; }
    .cm-ui .cm-fst--lead .cm-fst__dek { margin-top: 8px; font-size: 15px; -webkit-line-clamp: 2; }
    .cm-ui .cm-front__lead { padding-bottom: 20px; border-bottom: 1px solid var(--cm-line); }
    .cm-ui .cm-fst--line, .cm-ui .cm-fst--line:first-child { grid-template-columns: minmax(0, 1fr) 112px; align-items: center; gap: 0 14px; padding: 16px 0; border-top: 0; border-bottom: 1px solid var(--cm-line); }
    .cm-ui .cm-fst--line .cm-fst__label { margin-bottom: 6px; font-size: 12.5px; }
    .cm-ui .cm-fst--line .cm-fst__title { font-size: 17px; line-height: 1.3; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
    .cm-ui .cm-fst--line .cm-fst__dek { display: none; }
    .cm-ui .cm-fst--line .cm-fst__media { margin-top: 0; }
    /* Doc nhieu: hang the vuot ngang, tran 2 le */
    .cm-ui .cm-front__side { margin: 0 -12px; padding: 20px 0 20px; border-bottom: 8px solid var(--cm-surface-2); }
    .cm-ui .cm-front__head { margin: 0 12px 12px; font-size: 15px; }
    .cm-ui .cm-front__rank { display: flex; gap: 10px; padding: 0 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .cm-ui .cm-front__rank::-webkit-scrollbar { display: none; }
    .cm-ui .cm-front__rank li, .cm-ui .cm-front__rank li + li { flex: 0 0 72%; max-width: 280px; display: block; padding: 14px 16px 16px; border: 0; border-radius: 14px; background: var(--cm-surface-2); scroll-snap-align: start; }
    .cm-ui .cm-front__rank span { display: block; margin-bottom: 6px; font-size: 13px; }
    .cm-ui .cm-front__rank span::before { content: "#"; }
    .cm-ui .cm-front__rank a { font-size: 15.5px; -webkit-line-clamp: 3; }
    /* cac bai noi tiep */
    .cm-ui .cm-front .cm-row { gap: 0 14px; padding: 18px 0; }
    .cm-ui .cm-front .cm-row__by { margin-bottom: 8px; font-size: 12.5px; }
    .cm-ui .cm-front .cm-row__author img, .cm-ui .cm-front .cm-row__author .cm-ci { width: 20px !important; height: 20px !important; }
    .cm-ui .cm-front .cm-row__title { font-size: 17px; line-height: 1.3; -webkit-line-clamp: 3; }
    .cm-ui .cm-front .cm-row__dek { display: none; }
    .cm-ui .cm-front .cm-row__meta { margin-top: 10px; font-size: 12.5px; }
    .cm-ui .cm-front .cm-row__media { width: 112px; }
    .cm-ui .cm-front .cm-row--ad .cm-row__dek { display: -webkit-box; -webkit-line-clamp: 2; font-size: 14px; }
}

/* Chu 13/10/2026 "the big idea of layout is ok but you need more optimizing on this to make it cleaner": bang dau gon hon -
   tieu de nho lai, cot 2 bo tom tat bi cat, anh nho cung co + can giua, cot Đọc nhiều tach bang 1 duong ke, bo goc thong nhat 10px */
.cm-ui .cm-front .cm-fst__media { border-radius: 10px; }
.cm-ui .cm-front .cm-fst__label { margin-bottom: 8px; font-size: 12.5px; letter-spacing: .01em; }
.cm-ui .cm-front .cm-fst__label span { font-weight: var(--cm-fw-semibold); }
.cm-ui .cm-front .cm-fst--lead .cm-fst__media { margin-bottom: 18px; }
.cm-ui .cm-front .cm-fst--lead .cm-fst__dek { margin-top: 10px; font-size: 16px; line-height: 1.55; -webkit-line-clamp: 2; max-width: 60ch; }
.cm-ui .cm-front .cm-fst--line { grid-template-columns: minmax(0, 1fr) 124px; align-items: center; gap: 0 18px; padding: 18px 0; }
.cm-ui .cm-front .cm-fst--line:first-child { padding-top: 0; }
.cm-ui .cm-front .cm-fst--line .cm-fst__media { margin-top: 0; aspect-ratio: 16 / 9; border-radius: 8px; }
.cm-ui .cm-front .cm-fst--line .cm-fst__title { font-size: 17px; line-height: 1.34; letter-spacing: -0.01em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-wrap: pretty; }
.cm-ui .cm-front .cm-fst--line .cm-fst__dek { display: none; }
.cm-ui .cm-front .cm-front__head { margin-bottom: 4px; font-size: 13px; letter-spacing: .01em; color: var(--cm-muted); }
.cm-ui .cm-front .cm-front__rank li { grid-template-columns: 26px minmax(0, 1fr); padding: 13px 0; }
.cm-ui .cm-front .cm-front__rank span { font-size: 14px; font-weight: var(--cm-fw-medium, 500); }
.cm-ui .cm-front .cm-front__rank a { font-size: 15px; font-weight: var(--cm-fw-medium, 500); line-height: 1.4; letter-spacing: 0; -webkit-line-clamp: 2; }
@media (min-width: 768px) {
    .cm-ui .cm-front .cm-fst--lead .cm-fst__title { font-size: 30px; line-height: 1.16; }
}
@media (min-width: 1100px) {
    .cm-ui .cm-front .cm-front__top { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, .78fr); gap: 0 40px; padding: 32px 0 44px; }
    .cm-ui .cm-front .cm-fst--lead .cm-fst__title { font-size: 32px; line-height: 1.16; letter-spacing: -0.022em; }
    .cm-ui .cm-front .cm-front__side { padding-left: 32px; border-left: 1px solid var(--cm-line); }
    .cm-ui .cm-front .cm-front__next { grid-template-rows: repeat(3, auto); }
}
@media (max-width: 767px) {
    .cm-ui .cm-front .cm-fst--lead .cm-fst__media { border-radius: 0; }
    .cm-ui .cm-front .cm-fst--line, .cm-ui .cm-front .cm-fst--line:first-child { grid-template-columns: minmax(0, 1fr) 116px; padding: 16px 0; }
    .cm-ui .cm-front .cm-front__head { margin: 0 12px 12px; }
    .cm-ui .cm-front .cm-front__rank li, .cm-ui .cm-front .cm-front__rank li + li { padding: 14px 16px 16px; }
    .cm-ui .cm-front .cm-front__rank a { -webkit-line-clamp: 3; }
}
@media (min-width: 1100px) and (max-width: 1439px) {
    .cm-ui .cm-front .cm-front__top { gap: 0 32px; }
    .cm-ui .cm-front .cm-fst--line { grid-template-columns: minmax(0, 1fr) 100px; gap: 0 14px; }
    .cm-ui .cm-front .cm-fst--line .cm-fst__title { font-size: 16px; -webkit-line-clamp: 4; }
    .cm-ui .cm-front .cm-fst--lead .cm-fst__title { font-size: 29px; }
    .cm-ui .cm-front .cm-front__side { padding-left: 24px; }
    .cm-ui .cm-front .cm-front__rank a { -webkit-line-clamp: 3; }
}
@media (min-width: 1440px) { .cm-ui .cm-front .cm-fst--line .cm-fst__title { -webkit-line-clamp: 4; } }