/* =========================================================
   Viculinary — Blog
   File: wp-content/themes/viculinary-theme/blog.css
   Ngay: 18/08/2026

   File MOI. Khong sua style.css, khong sua mts-corrections.css.
   Moi gia tri o day lay tu chinh hai file do (xem chu thich).

   Token nguon (style.css :root):
     --primary-color #1a1a1a   --accent-color #a88d5f
     --text-color    #333333   --bg-color     #fdfbf7
     --secondary-color #e8e4db
     --font-heading  'Playfair Display', serif   (400, lh 1.1, ls -0.02em)
     --font-body     'Inter', sans-serif         (300, 16px, lh 1.7)
   Nhip doc (mts-corrections.css):
     --sp-xs .. --sp-xl  clamp(1.5rem,3vw,3rem) .. clamp(3.5rem,7vw,7rem)
   ========================================================= */


/* =========================================================
   0. Tien ich
   ========================================================= */
/* WordPress tu sinh <h2 class="screen-reader-text"> ben trong
   the_posts_pagination(). Theme nay chua co quy tac cho lop do,
   nen neu khong khai bao thi chu "Blog pagination" se hien ra
   giua trang. Dung ban chuan cua WordPress. */
.screen-reader-text {
    border: 0;
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}
.screen-reader-text:focus {
    background-color: #fff;
    clip-path: none;
    color: var(--primary-color);
    display: block;
    font-size: 0.875rem;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}


/* =========================================================
   1. Vo trang — chua duoi header fixed

   Header .site-header la position:fixed. Chieu cao do duoc
   tren live bang getBoundingClientRect():
       >  991px : 134.98px  (padding 2rem*2 = 64 + logo 70px)
       <= 991px : 109.98px  (padding 2rem*2 = 64 + logo 45px)

   Dung clamp(8.5rem, 6vw + 6rem, 11rem) chu KHONG dung
   clamp(...,11vw,...): voi 11vw thi o quang 1226px gia tri roi
   dung 135px, tuc la vua cham day header. Bieu thuc dang
   "6vw + 6rem" co gia tri nho nhat tren dai >991px la 155.5px
   (tai 992px) va tren dai <=991px bi chan duoi o 136px, nen
   khong co do rong nao bi hut.
   Da quet 320-1920px (1601 do rong): khong lan nao chong header.
   ========================================================= */
.vi-blog {
    background: var(--bg-color);
    padding: clamp(8.5rem, 6vw + 6rem, 11rem) 0 var(--sp-lg);
}
/* Khi bai viet co khoi "More from the Blog" (nen trang, co padding
   rieng) thi bo padding day cua main, neu khong se thua mot dai mau
   --bg-color duoi dai mau trang. Trinh duyet khong ho tro :has()
   chi thua khoang trong, khong vo bo cuc. */
.vi-blog:has(.vi-related) {
    padding-bottom: 0;
}

/* Container hep hon 1600px mac dinh — bam theo .services-overview
   (max-width 1200px) cho luoi, va 780px cho cot doc (.vi-intro__inner). */
.vi-blog__wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}
.vi-blog__column {
    max-width: 780px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* ---------- Dau trang: eyebrow + title + dan nhap ---------- */
.vi-blog__header {
    text-align: center;
    margin-bottom: var(--sp-md);
}
/* Eyebrow: sao chep nguyen tu span "01 / 05" tren the dich vu
   va tu h4 trong khoi editorial trang chu. */
.vi-eyebrow {
    display: block;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent-color);
    margin-bottom: 0.75rem;
}
.vi-eyebrow a:hover {
    color: var(--primary-color);
}
/* Cung thang do voi h1 cua page.php (.generic-page .page-title) */
.vi-blog__title {
    font-family: var(--font-heading);
    font-size: clamp(2.6rem, 6vw, 4.5rem);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--primary-color);
    margin: 0 0 1.25rem;
    text-wrap: balance;
    overflow-wrap: anywhere;
}
.vi-blog__lede {
    font-size: clamp(0.95rem, 3vw, 1.1rem);
    line-height: 1.8;
    font-weight: 300;
    color: #555;
    max-width: 640px;
    margin: 0 auto;
    text-align: center !important;
}
/* Gach accent 50x2 — motif co san tren front-page.php */
.vi-rule {
    width: 50px;
    height: 2px;
    background: var(--accent-color);
    margin: 1.75rem auto 0;
}


/* =========================================================
   2. Luoi bai viet

   Bam theo cach site dang trinh bay bo suu tap duy nhat hien co
   (khoi "Our Services" tren front-page.php):
       wrapper : display:flex; flex-wrap:wrap; justify-content:center; gap:2rem
       the     : flex:1 1 300px; max-width:350px; flex-direction:column; gap:1.5rem
       anh     : aspect-ratio 4/5; object-fit:cover; boc .hover-zoom-wrap
   ========================================================= */
.vi-blog__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.vi-blog-card {
    flex: 1 1 300px;
    max-width: 350px;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;            /* cho phep chu xuong dong trong flex item */
}
.vi-blog-card__media-wrap {
    width: 100%;
}
.vi-blog-card__media {
    display: block;
    width: 100%;
    background: var(--secondary-color);
}
.vi-blog-card__media img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
}
/* O anh du phong khi bai chua co anh dai dien: giu dung khung 4/5
   de hang the khong bi lech. */
.vi-blog-card__media--empty {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    background: var(--secondary-color);
}
.vi-blog-card__body {
    padding: 0 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-width: 0;
}
.vi-blog-card__meta {
    font-family: var(--font-body);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent-color);
    display: block;
    margin-bottom: 0.5rem;
    overflow-wrap: anywhere;
}
.vi-blog-card__meta span + span::before {
    content: "\00a0/\00a0";
    color: var(--accent-color);
}
.vi-blog-card__title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--primary-color);
    margin: 0 0 1rem;
    /* Tieu de dai: khong tran ra ngoai the. Da thu voi mot tieu de
       150 ky tu va mot tu don 92 ky tu khong dau cach, quet
       320-900px: khong tran, khong day rong tai lieu. */
    overflow-wrap: anywhere;
    text-wrap: pretty;
    hyphens: none;
}
.vi-blog-card__title a:hover {
    color: var(--accent-color);
}
/* Correction 27/07/2026 da bo justify cho .services-overview .service-card p
   ("chu gian cach do justify"). Ap dung cung cach cho the bai viet. */
.vi-blog-card__excerpt {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #555;
    margin: 0 0 1.5rem;
    text-align: left !important;
    hyphens: none;
    overflow-wrap: break-word;
}
/* Nut "Read Article": sao chep tu nut "Explore Service" tren the dich vu,
   cong chieu cao toi thieu 44px (WCAG 2.5.5) nhu Correction 14.
   Da do bang offsetWidth/offsetHeight tren 1601 do rong 320-1920:
   khong lan nao duoi 44. */
.vi-blog-card__link {
    border: 1px solid var(--accent-color);
    padding: 0.85rem 1.5rem;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 1px;
    margin-top: auto;
    color: var(--accent-color);
    transition: all 0.3s ease;
    align-self: center;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.vi-blog-card__link:hover,
.vi-blog-card__link:focus-visible {
    background: var(--accent-color);
    color: #fff;
}
.vi-blog-card__link:focus-visible,
.vi-blog-card__title a:focus-visible,
.vi-eyebrow a:focus-visible,
.vi-back-link:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 3px;
}


/* =========================================================
   3. Trang thai rong (chua co bai nao)
   ========================================================= */
.vi-blog__empty {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
    padding: var(--sp-sm) 0 var(--sp-md);
}
.vi-blog__empty p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
    text-align: center !important;
    margin: 0 0 2rem;
}
/* Dai "Back to Blog" duoi trang luu tru / tim kiem: dung lai vo
   .vi-blog__empty nhung khong can dem tren, vi ngay phia tren no
   da co luoi the hoac doan trang thai rong. Truoc day day la mot
   style="" noi dong trong archive.php — theme nay da co lich su
   dinh bay voi cac selector [style*="..."] trong mts-corrections,
   nen tot nhat khong them inline style moi. */
.vi-blog__empty--footer {
    padding-top: 0;
}


/* =========================================================
   4. Phan trang

   Vung cham toi thieu 44x44 (WCAG 2.5.5) — cung nguong ma
   Correction 14 (13/08/2026) da dat cho nut hamburger.
   ========================================================= */
.vi-blog__pagination {
    margin-top: var(--sp-md);
    text-align: center;
}
.vi-blog__pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}
.vi-blog__pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 0.75rem;
    border: 1px solid rgba(0, 0, 0, 0.15);
    font-family: var(--font-body);
    font-size: 0.8rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--primary-color);
    background: transparent;
    transition: all 0.3s ease;
}
.vi-blog__pagination .page-numbers:hover,
.vi-blog__pagination .page-numbers:focus-visible {
    border-color: var(--accent-color);
    color: var(--accent-color);
}
.vi-blog__pagination .page-numbers.current {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--bg-color);
}
.vi-blog__pagination .page-numbers.dots {
    border-color: transparent;
    min-width: 24px;
}
.vi-blog__pagination .page-numbers:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}


/* =========================================================
   5. Bai viet don
   ========================================================= */
.vi-post__header {
    text-align: center;
    margin-bottom: var(--sp-sm);
}
.vi-post__title {
    font-family: var(--font-heading);
    font-size: clamp(2.1rem, 4.5vw, 3.6rem);
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -0.025em;
    color: var(--primary-color);
    margin: 0 0 1.25rem;
    /* Tieu de dai la truong hop de vo nhat: cho phep ngat trong tu
       neu can, va can bang so tu giua cac dong. */
    overflow-wrap: anywhere;
    text-wrap: balance;
    hyphens: none;
}
.vi-post__meta {
    font-family: var(--font-body);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #888;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.5rem 1rem;
}
.vi-post__meta a {
    color: var(--accent-color);
}
.vi-post__meta a:hover {
    color: var(--primary-color);
}

/* Anh dai dien: full-bleed trong khung 1200px, ti le 3/2 —
   dung ti le cua bo banner-* trong Media Library (2000x1333). */
.vi-post__featured {
    margin: 0 0 var(--sp-sm);
}
.vi-post__featured img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
}
.vi-post__featured figcaption {
    font-size: 0.8rem;
    color: #888;
    text-align: center;
    margin-top: 0.75rem;
    letter-spacing: 0.3px;
}

/* ---------- Than bai ----------
   Bam theo .page-content trong page.php:
   font-size 1.15rem, line-height 1.9, color #444, weight 300. */
.vi-post__body {
    font-size: 1.15rem;
    line-height: 1.9;
    color: #444;
    font-weight: 300;
}
.vi-post__body > * {
    margin-bottom: 1.6rem;
}
.vi-post__body > *:last-child {
    margin-bottom: 0;
}

/* =========================================================
   CAN LE TRAI CHO THAN BAI — quyet dinh co so do, 18/08/2026.

   style.css dat "p { text-align: justify }" cho toan site, va
   mts-corrections tra ve left khi <= 768px. Tren desktop thi
   than bai se bi justify.

   Do tren bai that (/menu-engineering.../), cot 716px, man 1920,
   613 khoang trang giua tu, do bang Range.getClientRects():
       justify : min 5.19  p50 6.25  p90 7.61  p99 11.52  max 11.53
       left    : min 5.19  p50 5.19  p90 5.20  p99 5.20   max 5.20
   Tuc la khoang trang gian toi 2,2 lan be rong tu nhien -> dung
   "rivers" ma khach da phan anh o Correction 27/07/2026 ("chu gian
   cach do justify") tren cac the trang chu.

   Cot 716px hep hon nhieu so voi cac khoi chu cua About/Home, nen
   hieu ung nang hon. Vi vay than bai can le trai o MOI do rong,
   dong nhat voi huong da chot 27/07 va voi quy tac <=768px co san.

   MUON QUAY LAI JUSTIFY: xoa "text-align" trong khoi nay.

   overflow-wrap: mot tu dai khong dau cach (thuc te: mot duong dan
   dan vao bai) day rong ca tai lieu. Do duoc voi mot token 90 ky tu:
   o 320-700px tai lieu phinh tu 320 -> 787px, thanh cuon ngang xuat
   hien tren dien thoai. Voi break-word: het, quet lai 320-1920 sach.
   ========================================================= */
.vi-post__body p,
.vi-post__body li,
.vi-post__body dd {
    text-align: left !important;
    hyphens: none;
    overflow-wrap: break-word;
}

.vi-post__body h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.7rem, 3vw, 2rem);   /* = h3 khoi editorial trang chu */
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--primary-color);
    margin-top: 3rem;
    margin-bottom: 1.25rem;
    text-wrap: pretty;
    overflow-wrap: anywhere;
}
.vi-post__body h3 {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent-color);
    margin-top: 2.5rem;
    margin-bottom: 0.75rem;
    line-height: 1.5;
    overflow-wrap: break-word;
}
.vi-post__body a:not(.vi-btn) {
    color: var(--accent-color);
    border-bottom: 1px solid rgba(168, 141, 95, 0.4);
    transition: border-color 0.3s ease;
}
.vi-post__body a:not(.vi-btn):hover {
    border-bottom-color: var(--accent-color);
}
.vi-post__body ul,
.vi-post__body ol {
    padding-left: 1.4rem;
}
.vi-post__body li {
    margin-bottom: 0.55rem;   /* = .rich-text-formatted li trong mts-corrections */
}
.vi-post__body img,
.vi-post__body figure img {
    width: 100%;
    height: auto;
    display: block;
}
.vi-post__body figure {
    margin: var(--sp-xs) 0;
}
.vi-post__body figcaption {
    font-size: 0.8rem;
    color: #888;
    text-align: center !important;
    margin-top: 0.75rem;
    line-height: 1.6;
}
.vi-post__pages {
    font-size: 0.8rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #888;
}

/* Ghi chu ban nhap cuoi ba bai mau. Lam mo va tach ra bang mot
   duong ke de khong ai nham no la noi dung that.
   Khi khach thay bang bai that thi xoa doan <em> do di. */
.vi-draft-note {
    font-size: 0.85rem !important;
    line-height: 1.7;
    color: #999;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    padding-top: 1.25rem;
    margin-top: var(--sp-xs);
}

/* Trich dan noi bat — motif gach accent 2px cua site,
   Playfair italic 400 (da nam trong lenh tai font cua theme). */
.vi-post__body blockquote,
.vi-pullquote {
    border-left: 2px solid var(--accent-color);
    padding: 0.25rem 0 0.25rem 2rem;
    margin: var(--sp-xs) 0;
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.25rem, 2.4vw, 1.6rem);
    line-height: 1.5;
    color: var(--primary-color);
}
.vi-post__body blockquote p,
.vi-pullquote p {
    text-align: left !important;
    margin: 0 0 0.75rem;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}
.vi-post__body blockquote p:last-child,
.vi-pullquote p:last-child {
    margin-bottom: 0;
}
.vi-pullquote cite,
.vi-post__body blockquote cite {
    display: block;
    font-family: var(--font-body);
    font-style: normal;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent-color);
    margin-top: 1rem;
}

/* =========================================================
   Luoi anh trong bai (bai dang nhieu anh).

   BAY DA DINH — sua 18/08/2026.
   wpautop() chen mot <br> giua moi cap <img> nam tren hai dong
   khac nhau trong noi dung bai. Trong mot grid container, MOI
   con trong luong deu la mot grid item — ke ca <br>. Do duoc
   tren bai that "Notes from a Banquet Floor, in Pictures":

       khoi 3 anh: con = IMG,BR,IMG,BR,IMG -> 3 cot, anh nam tren
                   2 HANG, hang duoi thung mot o
       khoi 2 anh: con = IMG,BR,IMG        -> anh / o trong / anh

   Tuc la dung bai duoc dat ten "in Pictures" lai la bai vo bo cuc.
   An <br> di thi ca hai khoi ve dung mot hang (do lai: imgRows
   2 -> 1). Sua o CSS chu khong sua o noi dung, vi khach sua bai
   trong trinh soan thao thi wpautop se chen lai <br> ngay.
   ========================================================= */
.vi-post__gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.25rem;
    margin: var(--sp-xs) 0;
}
.vi-post__gallery img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
}
.vi-post__gallery br {
    display: none;
}


/* =========================================================
   5b. THANH PHAN NOI DUNG CO BAN — them 18/08/2026.

   Ly do: theme khong he co quy tac nao cho bang, hr, chu thich
   anh kieu co, code, danh sach dinh nghia, hay h4/h5/h6 ben trong
   bai viet. Do that tren live TRUOC khi viet khoi nay
   (getComputedStyle, cot 716px, than bai 18.4px):

       h4    28.8px    (gan bang h2 -> mat thu bac)
       h5    15.27px   NHO HON chu thuong 18.4px
       h6    12.33px   NHO HON chu thuong 18.4px
       h4/h5/h6 margin-top = 0  -> dinh vao doan phia tren
       hr    margin-top = 0     -> dinh vao chu
       table width 31.53px, border-collapse: separate,
             th/td padding 0, khong duong ke  -> khong doc duoc
       .wp-caption-text  18.4px, can trai, #444
             -> chu thich anh trong y het mot doan van

   Khach se soan bai trong trinh soan thao khoi cua WordPress,
   nen bang, chu thich, trich dan, danh sach deu co the xuat hien.
   Neu khong co khoi nay, mot cai bang dan vao se vo, va trong
   giong nhu loi cua trang blog moi chu khong phai cua theme.

   Do lai SAU khi ap (cung dieu kien):
       h4 21.6px / mt 36px   h5 16.8px / mt 32px
       h6 12.8px in hoa (nhan nho co y, giong eyebrow cua site)
       hr mt 48px, ke 1px rgba(0,0,0,.12)
       table 716px, border-collapse: collapse, th/td padding 11.2/14.4
       .wp-caption-text 12.8px, can giua, #888
   ========================================================= */

/* ---------- h4 / h5 / h6 ----------
   Thang do giam dan. h4 va h5 khong bao gio nho hon chu thuong;
   h6 co y de nho + in hoa, dung nhu mot nhan (giong .vi-eyebrow),
   khong phai mot tieu de doan. */
.vi-post__body h4 {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--primary-color);
    margin-top: 2.25rem;
    margin-bottom: 0.75rem;
    text-wrap: pretty;
    overflow-wrap: break-word;
}
.vi-post__body h5 {
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: var(--primary-color);
    margin-top: 2rem;
    margin-bottom: 0.5rem;
    overflow-wrap: break-word;
}
.vi-post__body h6 {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #777;
    margin-top: 1.75rem;
    margin-bottom: 0.5rem;
    line-height: 1.5;
    overflow-wrap: break-word;
}

/* ---------- Duong ke ngang ---------- */
.vi-post__body hr,
.vi-post__body .wp-block-separator {
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    height: 0;
    margin: var(--sp-xs) auto;
    width: 100%;
}
.vi-post__body .wp-block-separator.is-style-dots {
    border-top: 0;
}

/* ---------- Bang ----------
   Bang rong hon cot thi cuon ngang trong khung cua no, khong day
   rong ca trang. */
.vi-post__body figure.wp-block-table,
.vi-post__body .wp-block-table {
    overflow-x: auto;
    max-width: 100%;
    margin: var(--sp-xs) 0;
    -webkit-overflow-scrolling: touch;
}
.vi-post__body table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: var(--sp-xs) 0;
    text-align: left;
}
.vi-post__body figure.wp-block-table table,
.vi-post__body .wp-block-table table {
    margin: 0;
    min-width: 100%;
}
.vi-post__body caption {
    caption-side: bottom;
    font-size: 0.8rem;
    color: #888;
    text-align: center;
    padding-top: 0.75rem;
}
.vi-post__body th,
.vi-post__body td {
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    text-align: left;
    vertical-align: top;
    overflow-wrap: break-word;
}
.vi-post__body th {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--accent-color);
    border-bottom-color: var(--accent-color);
    white-space: nowrap;
}
.vi-post__body tbody tr:last-child th,
.vi-post__body tbody tr:last-child td {
    border-bottom: 0;
}

/* ---------- Chu thich anh kieu co (trinh soan thao cu) ----------
   .wp-block-image figcaption da duoc quy tac figcaption o tren bat.
   .wp-caption-text thi khong, vi no la the <p>. */
.vi-post__body .wp-caption {
    max-width: 100%;
    margin: var(--sp-xs) 0;
}
.vi-post__body .wp-caption img {
    width: 100%;
    height: auto;
}
.vi-post__body .wp-caption-text,
.vi-post__body .wp-element-caption {
    font-size: 0.8rem !important;
    line-height: 1.6;
    color: #888;
    text-align: center !important;
    margin: 0.75rem 0 0;
}

/* ---------- Danh sach dinh nghia ---------- */
.vi-post__body dl {
    margin: var(--sp-xs) 0;
}
.vi-post__body dt {
    font-family: var(--font-body);
    font-weight: 500;
    color: var(--primary-color);
    margin-top: 1.1rem;
    overflow-wrap: break-word;
}
.vi-post__body dd {
    margin-left: 1.4rem;
    margin-bottom: 0.5rem;
}

/* ---------- Code ----------
   Khong phai noi dung chinh cua site am thuc, nhung neu co thi
   dong dai phai cuon trong khoi, khong day rong cot. */
.vi-post__body code,
.vi-post__body kbd {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.88em;
    background: rgba(0, 0, 0, 0.04);
    padding: 0.15em 0.4em;
    border-radius: 2px;
    overflow-wrap: break-word;
}
.vi-post__body pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85rem;
    line-height: 1.7;
    background: rgba(0, 0, 0, 0.04);
    padding: 1.25rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: var(--sp-xs) 0;
    white-space: pre;
    min-width: 0;
    max-width: 100%;
}
.vi-post__body pre code {
    background: transparent;
    padding: 0;
    font-size: inherit;
}

/* ---------- Nhung (video, ban do) ---------- */
.vi-post__body iframe,
.vi-post__body embed,
.vi-post__body object,
.vi-post__body video {
    max-width: 100%;
}
.vi-post__body .wp-block-embed__wrapper {
    position: relative;
}

/* ---------- Bo suu tap cua trinh soan thao khoi ---------- */
.vi-post__body .wp-block-gallery {
    margin: var(--sp-xs) 0;
}
.vi-post__body .wp-block-gallery img {
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

/* ---------- Lop can le cua WordPress ---------- */
.vi-post__body .aligncenter {
    margin-left: auto;
    margin-right: auto;
    display: block;
}
.vi-post__body .alignleft {
    float: left;
    margin: 0.35rem 1.5rem 1rem 0;
    max-width: 50%;
}
.vi-post__body .alignright {
    float: right;
    margin: 0.35rem 0 1rem 1.5rem;
    max-width: 50%;
}
.vi-post__body .alignwide,
.vi-post__body .alignfull {
    /* Cot doc chi 780px; khong cho khoi "rong"/"tran vien" pha khoi
       cot, vi se lech han so voi phan con lai cua bai. */
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.vi-post__body::after {
    content: "";
    display: table;
    clear: both;
}
@media (max-width: 600px) {
    .vi-post__body .alignleft,
    .vi-post__body .alignright {
        float: none;
        margin: var(--sp-xs) 0;
        max-width: 100%;
    }
}


/* ---------- Chan bai ---------- */
.vi-post__footer {
    margin-top: var(--sp-sm);
    padding-top: var(--sp-xs);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
}
.vi-post__terms {
    font-family: var(--font-body);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #888;
    margin: 0;
    text-align: left !important;
    line-height: 1.9;
    overflow-wrap: break-word;
}
.vi-post__terms a {
    color: var(--accent-color);
}
.vi-post__terms a:hover {
    color: var(--primary-color);
}
.vi-back-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--primary-color);
    border-bottom: 1px solid var(--accent-color);
    white-space: nowrap;
}
.vi-back-link:hover {
    color: var(--accent-color);
}

/* Dieu huong bai truoc / bai sau */
.vi-post__nav {
    margin-top: var(--sp-sm);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
}
.vi-post__nav a {
    display: block;
    border: 1px solid rgba(0, 0, 0, 0.12);
    padding: 1.5rem;
    min-height: 44px;
    transition: border-color 0.3s ease;
}
.vi-post__nav a:hover {
    border-color: var(--accent-color);
}
.vi-post__nav a:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}
.vi-post__nav .label {
    display: block;
    font-family: var(--font-body);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent-color);
    margin-bottom: 0.5rem;
}
.vi-post__nav .headline {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.1rem;
    line-height: 1.35;
    color: var(--primary-color);
    overflow-wrap: anywhere;
    text-wrap: pretty;
}
.vi-post__nav .next {
    text-align: right;
}

/* Khoi "More from the Blog" — nen trang de tach khoi than bai,
   giong cach site doi nen giua cac section (#fdfbf7 / #fff / #111). */
.vi-related {
    background: #fff;
    padding: var(--sp-md) 0;
    margin-top: var(--sp-md);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.vi-related__title {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 3.5vw, 2.5rem);
    font-weight: 400;
    text-align: center;
    color: var(--primary-color);
    margin: 0 0 var(--sp-xs);
    text-wrap: balance;
}


/* =========================================================
   6. Mobile

   768px: khop voi nguong ma mts-corrections dung cho
   ".site-main p { text-align: left }".
   ========================================================= */
@media (max-width: 991px) {
    .vi-blog__wrap,
    .vi-blog__column {
        padding: 0 1.5rem;
    }
}

/* Giua 480 va 768 site xep the dich vu thanh 2 cot
   (mts-corrections, media 480-991). Lam giong voi the bai viet. */
@media (min-width: 480px) and (max-width: 768px) {
    .vi-blog-card {
        flex: 0 1 calc(50% - 1rem);
        max-width: calc(50% - 1rem);
    }
}

@media (max-width: 768px) {
    .vi-blog {
        padding-bottom: var(--sp-sm);
    }
    .vi-blog-card__body {
        padding: 0;
    }
    .vi-post__body {
        font-size: 1.05rem;
        line-height: 1.85;
    }
    .vi-post__body blockquote,
    .vi-pullquote {
        padding-left: 1.25rem;
    }
    .vi-post__body th,
    .vi-post__body td {
        padding: 0.55rem 0.7rem;
        font-size: 0.9rem;
    }
    .vi-post__footer {
        flex-direction: column;
        align-items: flex-start;
    }
    .vi-post__nav .next {
        text-align: left;
    }
    .vi-post__featured img {
        aspect-ratio: 4 / 3;
    }
}

@media (max-width: 479px) {
    .vi-blog-card {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/* Neu nguoi dung tat hieu ung: khong bao gio de noi dung o opacity 0. */
@media (prefers-reduced-motion: reduce) {
    .vi-blog .animate-on-scroll,
    .vi-related .animate-on-scroll {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}