/*
 * iChuDu Publisher – Frontend CSS v2.0
 * ichudu.com | Màu brand: gradient #00c8d7 → #00b5a3
 * Fix: TOC layout, ảnh 1 hàng, lightbox, dịch vụ cân đều, sao vàng
 */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* ══════════════════════════════════════════════
   DESIGN TOKENS
══════════════════════════════════════════════ */
:root {
    /* iChuDu brand */
    --ic:        #00b5a3;
    --ic-dark:   #007d71;
    --ic-light:  #e0f7f5;
    --ic-border: #a7e8e3;
    --ic-mid:    #c8f0ec;
    --ic-grad:   linear-gradient(135deg, #00c8d7 0%, #00b5a3 100%);
    --ic-shadow: rgba(0,181,163,.20);

    /* Neutral */
    --text:      #1c1c1c;
    --text2:     #444;
    --text3:     #888;
    --border:    #e2e2e2;
    --bg-page:   #f6fffe;
    --bg-card:   #ffffff;
    --star:      #f5a623;   /* sao vàng Google */
    --radius:    12px;
    --font:      'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ══════════════════════════════════════════════
   BASE
══════════════════════════════════════════════ */
.topaz-article,
.entry-content {
    font-family: var(--font) !important;
    font-size:   15px;
    line-height: 1.82;
    color:       var(--text);
}
.topaz-article p,
.entry-content p {
    margin: 0 0 14px;
}

/* ══════════════════════════════════════════════
   GHI ĐÈ THEME (ichudu-theme / .content-detail-post)
   Theme ép mọi <strong> thành block width:75% margin:auto  → vỡ layout topaz.
   Và vẽ 1 đường kẻ dọc trang trí (::before) chạy qua nội dung.
   Khôi phục <strong> về inline + tắt đường kẻ trong bài topaz.
══════════════════════════════════════════════ */
.topaz-article strong,
.topaz-article b {
    display:    inline  !important;
    width:      auto    !important;
    max-width:  none    !important;
    margin:     0       !important;
    padding:    0       !important;
    float:      none    !important;
    text-align: inherit !important;
}
.content-detail-post:has(.topaz-article)::before { display: none !important; }

/* Reset chung: gỡ mọi style thừa mà theme áp lên heading / list / img / link
   bên trong bài topaz (viền, nền, float, căn giữa, đường kẻ trang trí…). */
.topaz-article h2,
.topaz-article h3,
.topaz-article h4 {
    border:      none !important;
    background:  none !important;
    box-shadow:  none !important;
    float:       none !important;
    width:       auto !important;
    max-width:   none !important;
    text-align:  left !important;
    font-family: var(--font) !important;
}
.topaz-article h2::before,
.topaz-article h3::before,
.topaz-article h2::after,
.topaz-article h3::after { content: none !important; display: none !important; }

.topaz-article ul,
.topaz-article ol { background: none !important; }

.topaz-article img {
    border:     none !important;
    box-shadow: none !important;
    max-width:  100% !important;
    height:     auto;
}
.topaz-article a { box-shadow: none !important; }

/* ══════════════════════════════════════════════
   MỤC LỤC (TOC)
   Nền trắng, số tròn teal, sao vàng, không thụt
══════════════════════════════════════════════ */
.toc-section {
    background:    #ffffff;
    border:        1px solid var(--ic-border);
    border-top:    3px solid var(--ic);
    border-radius: var(--radius);
    padding:       18px 20px 14px;
    margin:        0 0 28px;
    box-shadow:    0 2px 12px rgba(0,0,0,.05);
}
.toc-inner {}

.toc-label {
    font-size:   13px;
    font-weight: 700;
    color:       var(--ic-dark);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin:      0 0 12px;
    display:     flex;
    align-items: center;
    gap:         7px;
}
.toc-label::before { content: '☰'; font-size: 15px; }

/* ── List reset tuyệt đối ── */
ol.toc-list,
ul.toc-list,
.toc-list {
    list-style:   none !important;
    padding:      0    !important;
    margin:       0    !important;
    counter-reset: none;
}
ol.toc-list li,
ul.toc-list li,
.toc-list li {
    list-style:   none   !important;
    padding:      0      !important;
    margin:       0      !important;
    text-indent:  0      !important;
    display:      flex   !important;
    align-items:  center !important;
    gap:          0      !important;
    border-bottom: 1px solid #f0f0f0;
    min-height:   36px;
}
.toc-list li:last-child { border: none !important; }
.toc-list li::before,
.toc-list li::after  { display: none !important; content: '' !important; }
.toc-list li::marker { content: '' !important; }

/* Số tròn */
.toc-num {
    display:         inline-flex !important;
    align-items:     center !important;
    justify-content: center !important;
    flex-shrink:     0;
    width:           24px;
    height:          24px;
    background:      var(--ic-grad);
    color:           #fff;
    border-radius:   50%;
    font-size:       11px;
    font-weight:     700;
    line-height:     1;
    margin-right:    10px;
    margin-left:     0 !important;
}

/* Link tên địa điểm */
.toc-list a {
    flex:            1;
    color:           var(--text) !important;
    text-decoration: none !important;
    font-size:       13.5px;
    font-weight:     600;
    padding:         6px 0;
    overflow:        hidden;
    text-overflow:   ellipsis;
    white-space:     nowrap;
}
.toc-list a:hover { color: var(--ic-dark) !important; text-decoration: underline !important; }

/* Điểm đánh giá đặt cuối — nổi bật.
   Lưu ý: text đã chứa sẵn ký tự ★ (vd "5.0★ (1071)") nên KHÔNG thêm ::before
   để tránh hiển thị 2 sao. Ta tô vàng cho ký tự ★ có sẵn qua màu chữ tổng thể. */
.toc-rating {
    display:      inline-flex;
    align-items:  center;
    gap:          3px;
    flex-shrink:  0;
    margin-left:  10px;
    font-size:    12.5px;
    font-weight:  700;
    color:        var(--star);
    white-space:  nowrap;
}

/* ══════════════════════════════════════════════
   INTRO BOX
══════════════════════════════════════════════ */
.intro-wrap  { margin-bottom: 28px; }
.intro-box {
    background:  var(--ic-light);
    border-left: 4px solid var(--ic);
    border-radius: 0 8px 8px 0;
    padding:     15px 18px;
    font-size:   14.5px;
    line-height: 1.78;
    color:       var(--text2);
}

/* ══════════════════════════════════════════════
   SECTION HEADING
══════════════════════════════════════════════ */
.sec-head { margin-bottom: 24px; }
.sec-head h2 {
    font-size:   21px   !important;
    font-weight: 700    !important;
    color:       var(--text) !important;
    margin:      0 0 6px !important;
    padding:     0      !important;
    border:      none   !important;
    background:  none   !important;
    line-height: 1.35   !important;
}
.sec-head p { font-size: 13px; color: var(--text3); margin: 0; }

/* ══════════════════════════════════════════════
   CARDS LIST
══════════════════════════════════════════════ */
.cards {
    display:        flex;
    flex-direction: column;
    gap:            24px;
    margin-bottom:  40px;
}

article.card,
.card {
    background:    var(--bg-card) !important;
    border:        1px solid var(--border) !important;
    border-radius: 14px !important;
    overflow:      hidden;
    box-shadow:    0 2px 18px rgba(0,0,0,.07) !important;
    padding:       0 !important;
    margin:        0 !important;
    transition:    box-shadow .2s;
}
article.card:hover,
.card:hover {
    box-shadow: 0 4px 28px rgba(0,0,0,.11) !important;
}

/* ── Card header ── */
.card-header {
    display:     flex;
    align-items: flex-start;
    gap:         12px;
    padding:     16px 16px 0;
}

/* Rank badge */
.rank {
    min-width:  32px;
    height:     32px;
    background: linear-gradient(135deg, #5f6b7a, #3d4753);
    color:      #fff;
    border-radius: 9px;
    display:    flex;
    align-items:     center;
    justify-content: center;
    font-weight: 800;
    font-size:   15px;
    flex-shrink: 0;
    box-shadow:  0 2px 7px rgba(0,0,0,.14);
}
/* Hạng 1 – vàng gold */
.rank.r1 {
    background: linear-gradient(135deg, #ffd54f, #ff8f00);
    box-shadow: 0 2px 9px rgba(255,143,0,.38);
}
/* Hạng 2 – bạc */
.rank.r2 {
    background: linear-gradient(135deg, #e8e8e8, #9e9e9e);
    color:      #4a4a4a;
    box-shadow: 0 2px 8px rgba(120,120,120,.30);
}
/* Hạng 3 – đồng */
.rank.r3 {
    background: linear-gradient(135deg, #e8b17a, #b5773c);
    box-shadow: 0 2px 8px rgba(160,110,60,.32);
}

.title-block { flex: 1; min-width: 0; }

.card-name {
    font-size:   16px !important;
    font-weight: 700  !important;
    color:       var(--text) !important;
    margin:      0 0 3px !important;
    line-height: 1.3 !important;
}
.card-addr {
    font-size:   12px;
    color:       var(--text3);
    margin:      0 0 5px;
    display:     flex;
    align-items: center;
    gap:         4px;
}
.stars-row {
    display:     flex;
    align-items: center;
    gap:         4px;
    font-size:   13px;
}
/* ★★★★★ màu vàng */
.stars    { color: var(--star); font-size: 15px; letter-spacing: 1.5px; }
.snum     { font-weight: 700; color: #333; font-size: 13.5px; }
.rcnt     { color: var(--text3); font-size: 12px; }

/* ══════════════════════════════════════════════
   CARD IMAGES — 1 HÀNG NGANG
   Mobile: 1 cột | Click → lightbox
══════════════════════════════════════════════ */
.card-imgs {
    display:        flex   !important;
    flex-direction: row    !important;
    flex-wrap:      nowrap !important;
    gap:            2px;
    margin:         12px 0 0;
    overflow:       hidden;
}
.card-imgs img {
    flex:        1 1 0%   !important;
    width:       0        !important;
    min-width:   0        !important;
    height:      130px    !important;
    object-fit:  cover    !important;
    display:     block    !important;
    cursor:      zoom-in;
    background:  linear-gradient(135deg, #eaf7f5, #d5efeb);
    transition:  opacity .18s, transform .2s;
}
.card-imgs img:hover {
    opacity:   .88;
    transform: scale(1.03);
}
.card-imgs img { margin: 0 !important; }
.card-imgs img:first-child { border-top-left-radius:  6px; }
.card-imgs img:last-child  { border-top-right-radius: 6px; }

/* ══════════════════════════════════════════════
   LIGHTBOX
══════════════════════════════════════════════ */
#wpp-lightbox {
    display:         none;
    position:        fixed;
    inset:           0;
    z-index:         999999;
    background:      rgba(0,0,0,.93);
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
}
#wpp-lightbox.open { display: flex; }

#wpp-lb-img {
    max-width:   90vw;
    max-height:  78vh;
    object-fit:  contain;
    border-radius: 8px;
    box-shadow:  0 8px 60px rgba(0,0,0,.6);
    display:     block;
    user-select: none;
}
#wpp-lb-bar {
    display:     flex;
    align-items: center;
    gap:         16px;
    margin-top:  18px;
}
.wpp-lb-btn {
    background:  rgba(255,255,255,.10);
    border:      1px solid rgba(255,255,255,.22);
    border-radius: 8px;
    color:       #fff;
    padding:     7px 22px;
    font-size:   24px;
    line-height: 1;
    cursor:      pointer;
    transition:  background .16s;
    font-family: sans-serif;
    user-select: none;
}
.wpp-lb-btn:hover { background: rgba(0,200,215,.30); }
#wpp-lb-close {
    position:    absolute;
    top:         16px;
    right:       20px;
    background:  none;
    border:      none;
    color:       rgba(255,255,255,.8);
    font-size:   32px;
    cursor:      pointer;
    line-height: 1;
    transition:  color .15s;
}
#wpp-lb-close:hover { color: #fff; }
#wpp-lb-counter {
    color:       rgba(255,255,255,.6);
    font-size:   13px;
    font-family: sans-serif;
    min-width:   52px;
    text-align:  center;
    user-select: none;
}

/* ══════════════════════════════════════════════
   CARD BODY — Nội dung dịch vụ CÂN ĐỀU
══════════════════════════════════════════════ */
.card-body {
    padding: 14px 16px 18px;
}
.card-desc {
    font-size:   14.5px;
    color:       #333;
    line-height: 1.8;
    margin:      0 0 10px;
}
.card-desc:last-child { margin: 0; }

/* ══════════════════════════════════════════════
   DỊCH VỤ NỔI BẬT (.hl) — style giống site gốc:
   thẻ bo tròn, nền dịu, mỗi mục có tick tròn xanh,
   nhãn in đậm màu tối, thụt lề treo (hanging indent).
══════════════════════════════════════════════ */
.hl {
    background:    #f5f9f8;
    border:        1px solid #e7efec;
    border-radius: 12px;
    padding:       16px 20px 14px;
    margin:        16px 0;
}
.hl-title {
    font-size:      12.5px;
    font-weight:    700;
    color:          var(--ic-dark);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin:         0 0 12px;
}

/* List reset */
.hl ul,
.hl ol {
    list-style: none !important;
    padding:    0    !important;
    margin:     0    !important;
    display:    block;
}
.hl li {
    position:      relative     !important;
    display:       block        !important;
    padding:       8px 0 8px 32px !important;
    margin:        0            !important;
    border:        none         !important;
    font-size:     14.5px       !important;
    line-height:   1.72         !important;
    color:         var(--text)  !important;
}
.hl li::marker { content: '' !important; }
.hl li::after  { display: none !important; }

/* Tick tròn xanh ở đầu mỗi mục */
.hl li::before {
    content:         '✓'    !important;
    display:         flex   !important;
    position:        absolute;
    left:            0;
    top:             9px;
    width:           21px;
    height:          21px;
    align-items:     center;
    justify-content: center;
    background:      var(--ic-grad);
    color:           #fff;
    border-radius:   50%;
    font-size:       12px;
    font-weight:     700;
    line-height:     1;
    box-shadow:      0 1px 4px var(--ic-shadow);
}

/* Nhãn in đậm màu tối (không teal) — giống site gốc */
.hl li > strong:first-child,
.hl li > b:first-child,
.hl li strong,
.hl li b {
    color:       var(--text) !important;
    font-weight: 700 !important;
}

/* ── Contact block ── */
.contact-block {
    background:    var(--ic-light);
    border:        1px solid var(--ic-border);
    border-radius: 8px;
    padding:       12px 14px;
    margin-top:    14px;
}
.contact-title {
    font-weight: 700;
    font-size:   13px;
    color:       var(--ic-dark);
    margin:      0 0 9px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.contact-grid { display: flex; flex-direction: column; gap: 7px; }
.ci           { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; }
.ci-icon      { font-size: 15px; flex-shrink: 0; margin-top: 1px; }
.ci-label     { color: var(--text3); font-size: 12px; white-space: nowrap; }
.ci-val       { font-weight: 600; color: var(--text); word-break: break-word; }
.ci-val.website { color: var(--ic-dark); }

/* CTA button */
.card-cta { margin-top: 14px; }
.btn-map {
    display:         inline-flex;
    align-items:     center;
    gap:             7px;
    background:      var(--ic-grad);
    color:           #fff !important;
    border:          none;
    border-radius:   8px;
    padding:         10px 20px;
    font-size:       13.5px;
    font-weight:     700;
    text-decoration: none !important;
    transition:      opacity .18s, transform .18s;
    box-shadow:      0 3px 12px var(--ic-shadow);
    letter-spacing:  .01em;
}
.btn-map:hover {
    opacity:   .9;
    transform: translateY(-1px);
    box-shadow: 0 5px 18px var(--ic-shadow);
}

/* ══════════════════════════════════════════════
   FAQ
══════════════════════════════════════════════ */
.faq-section {
    background:    var(--bg-page);
    border:        1px solid var(--ic-border);
    border-radius: 14px;
    padding:       24px 24px 26px;
    margin:        32px 0;
}
.faq-inner {}
.faq-section h2 {
    font-size:   19px !important;
    font-weight: 700  !important;
    color:       var(--text) !important;
    margin:      0 0 16px !important;
    padding:     0 !important;
    border:      none !important;
    background:  none !important;
}
.faq-item {
    border-bottom: 1px solid var(--border);
    padding:       13px 0;
}
.faq-item:last-child { border: none; }
.faq-q {
    font-weight: 700;
    font-size:   15px;
    color:       var(--text);
    margin:      0 0 7px;
    display:     flex;
    align-items: center;
    gap:         12px;
}
.faq-a {
    font-size:   14px;
    color:       var(--text2);
    line-height: 1.8;
    margin:      0;
    padding-left: 0;
}

/* ── ACCORDION (bật khi có JS, class .faq-js do frontend.js thêm) ──
   Không JS: mọi câu trả lời vẫn hiển thị đầy đủ (tốt cho SEO). */
.faq-section.faq-js .faq-q {
    cursor:          pointer;
    user-select:     none;
    margin:          0;
    display:         flex !important;
    flex-wrap:       nowrap !important;
    align-items:     flex-start;
    justify-content: flex-start;
}
/* Chữ câu hỏi chiếm phần còn lại, đẩy dấu + ra sát mép phải */
.faq-section.faq-js .faq-q > * { min-width: 0; }
/* Dấu + CỐ ĐỊNH ở cuối dòng, thẳng cột — dù câu hỏi dài hay ngắn.
   margin-left:auto đẩy + về mép phải; width cố định để canh cột chính xác. */
.faq-section.faq-js .faq-q::after {
    content:       '+';
    margin-left:   auto !important;
    padding-left:  14px;
    width:         18px;
    text-align:    center;
    flex:          0 0 auto !important;
    font-size:     24px;
    font-weight:   400;
    line-height:   1.3;
    color:         var(--ic);
    transform:     rotate(0deg);
    transition:    transform .25s ease;
}
.faq-section.faq-js .faq-item.open > .faq-q::after { transform: rotate(45deg); }

/* Trạng thái gập: ẩn mượt câu trả lời */
.faq-section.faq-js .faq-a {
    max-height:  0;
    overflow:    hidden;
    opacity:     0;
    margin-top:  0;
    transition:  max-height .32s ease, opacity .25s ease, margin-top .25s ease;
}
.faq-section.faq-js .faq-item.open > .faq-a {
    max-height:  800px;
    opacity:     1;
    margin-top:  8px;
}
.faq-section.faq-js .faq-q:hover { color: var(--ic); }

/* ══════════════════════════════════════════════
   CRITERIA GRID
══════════════════════════════════════════════ */
.criteria-section { margin: 32px 0; }
.criteria-inner {}
.criteria-section h2 {
    font-size:   19px !important;
    font-weight: 700  !important;
    color:       var(--text) !important;
    margin:      0 0 7px !important;
    padding:     0 !important;
    border:      none !important;
    background:  none !important;
}
.criteria-section p,
.criteria-inner p {
    font-size:   14px;
    color:       var(--text2);
    margin-bottom: 16px;
}
.crit-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
    gap:                   12px;
}
.crit {
    background:    var(--bg-card);
    border:        1px solid var(--ic-border);
    border-radius: 10px;
    padding:       16px 13px;
    text-align:    center;
    transition:    box-shadow .18s, transform .18s;
}
.crit:hover {
    box-shadow: 0 3px 14px var(--ic-shadow);
    transform:  translateY(-2px);
}
.crit-icon { font-size: 26px; margin-bottom: 8px; }
.crit-t    { font-weight: 700; font-size: 13px; color: var(--ic-dark); margin-bottom: 5px; }
.crit-d    { font-size: 12px; color: var(--text3); line-height: 1.55; }

/* ══════════════════════════════════════════════
   FOOTER NOTE
══════════════════════════════════════════════ */
.ta-footer {
    background:    var(--ic-light);
    border:        1px solid var(--ic-border);
    border-radius: 10px;
    padding:       16px 20px;
    font-size:     14px;
    color:         var(--text2);
    line-height:   1.75;
    margin-top:    32px;
}
.ta-footer p { margin: 0 0 10px; }
/* Ghi chú nhỏ cuối bài (disclaimer) */
.ta-footer .fn,
.fn {
    display:       block;
    margin:        12px 0 0 !important;
    padding-top:   11px;
    border-top:    1px dashed var(--ic-border);
    font-size:     12.5px;
    font-style:    italic;
    line-height:   1.6;
    color:         var(--text3);
}

/* ══════════════════════════════════════════════
   REVIEW BLOCK "Khách hàng nói gì"  (bổ sung – trước đây thiếu)
══════════════════════════════════════════════ */
.rv { margin: 14px 0; }
.rv-title {
    font-size:      13px;
    font-weight:    700;
    color:          var(--ic-dark);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin:         0 0 8px;
}
.rv-q {
    background:    var(--ic-light);
    border-left:   3px solid var(--ic);
    border-radius: 0 8px 8px 0;
    padding:       12px 16px;
    font-size:     14px;
    font-style:    italic;
    line-height:   1.72;
    color:         var(--text2);
}
.rv-q p { margin: 0; }
.rv-author {
    display:     block;
    font-style:  normal;
    font-weight: 600;
    font-size:   12.5px;
    color:       var(--text3);
    text-align:  right;
    margin:      8px 0 0 !important;
}

/* ══════════════════════════════════════════════
   AN TOÀN: style text lẻ khi CHƯA được bọc <p>
   (bài cũ, hoặc host thiếu DOMDocument) — hiển thị đúng dù wpautop không tạo <p>
══════════════════════════════════════════════ */
.sec-head       { font-size: 13px; color: var(--text3); }
.faq-inner      { font-size: 14px; color: var(--text2); }
.criteria-inner { font-size: 14px; color: var(--text2); }

/* ══════════════════════════════════════════════
   RESPONSIVE MOBILE (≤ 640px)
══════════════════════════════════════════════ */
@media (max-width: 640px) {
    /* Ảnh → 1 cột dọc */
    .card-imgs {
        flex-direction: column !important;
    }
    .card-imgs img {
        width:  100%   !important;
        height: 200px  !important;
        flex:   none   !important;
    }
    .crit-grid { grid-template-columns: 1fr 1fr; }
    .toc-list a { font-size: 13px; }
    .card-name  { font-size: 15px !important; }
    .faq-section { padding: 16px 14px; }
    .card-header { padding: 13px 13px 0; }
    .card-body   { padding: 12px 13px 16px; }
    .hl          { padding: 10px 12px; }
    .toc-section { padding: 14px 14px 10px; }
}

/* ══════════════════════════════════════════════════════════════════
   ⚠ VÔ HIỆU HOÁ RULE PHÁ LAYOUT CỦA THEME ICHUDU (BẮT BUỘC)
   Theme đặt ở style.css:
       .content-detail-post p, ul, h1..h6, .toc { width:75%; margin:auto }
   => mọi đoạn văn / list / tiêu đề trong bài bị co còn 75% và CĂN GIỮA,
      gây thụt thò, lệch trái–phải, căn giữa lung tung khi xuất bản.
   Khối dưới ép full-width + canh trái cho toàn bộ .topaz-article bằng
   !important (luôn thắng vì rule theme không dùng !important), rồi khôi
   phục lại đúng những phần cố ý căn giữa / phải.
══════════════════════════════════════════════════════════════════ */
.topaz-article p,
.topaz-article ul,
.topaz-article ol,
.topaz-article h1,
.topaz-article h2,
.topaz-article h3,
.topaz-article h4,
.topaz-article h5,
.topaz-article h6,
.topaz-article div {
    width:        auto !important;
    max-width:    none !important;
    margin-left:  0    !important;
    margin-right: 0    !important;
    float:        none !important;
    text-align:   left !important;
}

/* Khôi phục canh giữa / phải cho thành phần cố ý (specificity cao hơn) */
.topaz-article .rv-author           { text-align: right  !important; }
.topaz-article .crit,
.topaz-article .crit-icon,
.topaz-article .crit-t,
.topaz-article .crit-d              { text-align: center !important; }

/* Ép lại khối "Thông tin liên hệ" để theme không kéo lệch phải */
.topaz-article .contact-grid {
    display:        flex   !important;
    flex-direction: column !important;
    gap:            7px    !important;
}
.topaz-article .ci {
    display:        flex      !important;
    flex-direction: row       !important;
    align-items:    flex-start !important;
    gap:            8px       !important;
    text-align:     left      !important;
}
.topaz-article .ci > div {
    flex:        1 1 auto !important;
    margin:      0        !important;
    text-align:  left     !important;
}

/* Đảm bảo list / grid trong bài không bị co 75% */
.topaz-article .hl ul,
.topaz-article .hl ol,
.topaz-article .toc-list,
.topaz-article .crit-grid { margin: 0 !important; }
.topaz-article .stars-row,
.topaz-article .card-header { width: auto !important; }

/* ===== Căn giữa ảnh chèn tay trong trình soạn thảo ===== */
/* Classic editor: ảnh có class alignnone / aligncenter / wp-image-xxx */
img.aligncenter,
img.alignnone,
img[class*="wp-image-"] {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
}
/* Block editor (Gutenberg): ảnh nằm trong figure.wp-block-image */
figure.wp-block-image {
    text-align: center !important;
}
figure.wp-block-image > img {
    display: inline-block !important;
}
/* Chú thích ảnh (caption) căn giữa theo ảnh */
.wp-caption,
figure.wp-block-image figcaption {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

/* ===== Sao đánh giá: giữ "4.9 / 5" cùng dòng, chỉ chữ dài mới xuống dòng ===== */
.stars-row {
    flex-wrap: nowrap;          /* không đẩy nguyên cụm xuống */
    align-items: flex-start;
}
.stars,
.snum {
    white-space: nowrap !important;  /* ★★★★★ và 4.9 không bị cắt đôi */
    flex-shrink: 0;
}
.rcnt {
    min-width: 0;               /* cho phép co lại và tự ngắt theo từ */
    white-space: normal;
}