/*************** VOUCHERSAN – KIEU CHU BAI VIET ***************
 * Nham vao HTML thuong nen moi bai deu duoc ap dung,
 * khong can them class vao noi dung.
 * Hai bo mau .hlv-post (Highlands) va .spf-post (ShopeeFood)
 * nam ben duoi va de len tren bo nay.
 ***************************************************************/

/* Flatsome van in ra khoi chia se ke ca khi chua chon mang xa hoi nao trong
   Customizer, de lai mot duong ke va mot div rong chiem cho. An khi rong;
   neu sau nay bat icon chia se thi khoi tu hien lai. */
.blog-share:has(.share-icons:empty) {
    display: none;
}

.blog-share .share-icons:empty {
    display: none;
}

/* Mau "to giay": nen trang xam nhat, bai viet nam tren nen trang.
   Chi ap dung o bai viet don le nen trang chu va archive khong bi anh huong. */

body.single-post,
body.single-post #wrapper,
body.page:not(.home),
body.page:not(.home) #wrapper {
    background-color: #f2f5f8;
}

/* Header bai viet: breadcrumb, chip chuyen muc, H1, dong meta.
   Khong dung anh dai dien lam nen vi banner cua VoucherSan da in san ten
   thuong hieu — de H1 len tren se thanh chong chu. */

/* Ca bai viet la MOT to giay: header, than bai, hop tac gia va bai lien quan
   deu nam trong .article-inner. Truoc day header troi tren nen xam roi cach
   mot khoang trong moi toi khoi noi dung, doc ra nhu hai thanh phan roi rac. */

/* Flatsome mac dinh dat noi dung trong cot large-10 (~900px tren row 1080px).
   Mo rong het 12 cot de thu hep khoang trang hai ben. */
.single-post .large-10.col,
body.page:not(.home) .large-10.col {
    flex-basis: 100%;
    max-width: 100%;
}

.single-post .article-inner {
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 32px -22px rgba(15, 23, 42, 0.22);
    overflow: hidden;
}

.single-post .entry-header {
    margin-bottom: 0;
    border-bottom: 1px solid #eef1f5;
}

.single-post .entry-header-text {
    padding: 0;
}

/* Padding ngang dat o day de moi khoi ben trong deu thang hang */
.single-post .entry-content {
    margin-top: 0;
    padding: 26px clamp(16px, 5vw, 74px) 40px;
}

/* Trang tinh khong co .article-inner, nen chinh .vs-article lam to giay. */
body.page:not(.home) .vs-article {
    padding: 40px clamp(16px, 5vw, 74px) 44px;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 32px -22px rgba(15, 23, 42, 0.22);
}

/* Padding ngang trung khop voi .vs-article ben duoi de chu header va chu
   than bai thang cung mot duong doc. */
.vs-post-header {
    padding: 34px clamp(16px, 5vw, 74px) 24px;
    text-align: left;
}

.vs-post-header__crumbs {
    margin-bottom: 14px;
    color: #8a94a3;
    font-size: 13px;
    line-height: 1.6;
}

.vs-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vs-crumbs__item {
    display: inline-flex;
    align-items: center;
    margin: 0;
    list-style: none;
}

.vs-crumbs__item + .vs-crumbs__item::before {
    content: "›";
    margin: 0 8px;
    color: #c3cad4;
}

.vs-crumbs__item a {
    color: #6b7482;
    text-decoration: none;
    transition: color 0.15s ease;
}

.vs-crumbs__item a:hover {
    color: #d9541a;
}

.vs-crumbs__item--hien-tai {
    color: #99a2ad;
}

.vs-post-header__cat {
    display: inline-block;
    margin-bottom: 14px;
    padding: 5px 13px;
    border-radius: 999px;
    background: #fff1e8;
    color: #d9541a;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.vs-post-header__cat:hover {
    background: #ffe2d0;
    color: #d9541a;
}

.single-post .vs-post-header__title {
    margin: 0;
    color: #17202e;
    /* Voi be ngang chu ~900px sau khi mo rong cot, co 30px cho phep tieu de
       toi ~60 ky tu nam gon mot dong. Tren 60 ky tu van se xuong dong. */
    font-size: clamp(24px, 1.6vw + 12px, 30px);
    font-weight: 800;
    line-height: 1.16;
    letter-spacing: -0.022em;
    text-align: left;
    text-transform: none;
    /* Khong dung text-wrap: balance o day. Voi tieu de dai no ep hai dong bang
       nhau khien dong dau bo trong mot khoang lon, doc ra roi rac. De xuong
       dong tu nhien thi dong dau chay het be ngang. */
    text-wrap: pretty;
}

/* Anh dai dien dau bai, chi xuat hien o bai khong co anh trong noi dung */

.single-post .vs-post-hero {
    margin: 0 0 4px;
    padding: 0 clamp(16px, 5vw, 74px);
    line-height: 0;
}

.single-post .vs-post-hero img {
    width: 100%;
    height: auto;
    border-radius: 14px;
}

.vs-post-header__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    color: #6b7482;
    font-size: 14px;
}

.vs-post-header__author {
    color: #17202e;
    font-weight: 600;
}

.vs-post-header__sep {
    color: #c3cad4;
}

@media only screen and (max-width: 48em) {

    /* Tren mobile bo han mau "to giay": man hinh hep khong con cho de mep the
       va nen xam co y nghia, de trang tron doc thoang hon. */
    body.single-post,
    body.single-post #wrapper,
    body.page:not(.home),
    body.page:not(.home) #wrapper {
        background-color: #ffffff;
    }

    .single-post .article-inner,
    body.page:not(.home) .vs-article {
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .single-post .page-wrapper,
    body.page:not(.home) .page-wrapper {
        padding-top: 6px;
        padding-bottom: 0;
    }

    .single-post .entry-content {
        padding-bottom: 22px;
    }

    .vs-post-header {
        padding: 14px 16px 16px;
    }

    .vs-post-header__crumbs {
        margin-bottom: 10px;
        font-size: 12px;
    }

    /* Cap cuoi cua breadcrumb lap lai chinh H1 ngay ben duoi va chiem tron
       mot dong tren man hep. An di, markup van con nen schema khong doi. */
    .vs-crumbs__item--hien-tai {
        display: none;
    }

    .single-post .vs-post-header__title {
        line-height: 1.2;
        letter-spacing: -0.024em;
    }

    .vs-post-header__meta {
        margin-top: 10px;
        font-size: 13px;
    }

    .single-post .entry-header {
        border-bottom: 0;
    }

    .single-post .vs-post-hero {
        padding: 0 16px;
    }

    .single-post .vs-post-hero img {
        border-radius: 10px;
    }

}

.vs-article {
    --vs-cam: #f26522;
    --vs-cam-dam: #d9541a;
    --vs-muc: #17202e;
    --vs-chu: #3d4655;
    --vs-nhat: #8a94a3;
    --vs-vien: #e7ebf0;

    /* Padding va nen do .entry-content va .article-inner lo, o day chi con
       kieu chu de tranh long the trong the. */
    color: var(--vs-chu);
    font-size: 17px;
    line-height: 1.75;
}

.vs-article > *:first-child {
    margin-top: 0;
}

/* Tieu de */

/* H1 chi xuat hien trong noi dung cac trang tinh, bai viet dung H1 cua theme. */
.vs-article h1 {
    margin: 0 0 0.5em;
    color: var(--vs-muc);
    font-size: 2em;
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: -0.015em;
    text-transform: none;
    text-wrap: pretty;
}

.vs-article h2 {
    margin: 1.9em 0 0.6em;
    padding-bottom: 0.32em;
    border-bottom: 3px solid #ffd9c2;
    color: var(--vs-muc);
    font-size: 1.5em;
    font-weight: 700;
    line-height: 1.32;
    letter-spacing: 0;
    text-transform: none;
    text-wrap: pretty;
}

.vs-article h3 {
    margin: 1.5em 0 0.5em;
    color: var(--vs-muc);
    font-size: 1.22em;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    text-wrap: pretty;
}

.vs-article h4 {
    margin: 1.3em 0 0.45em;
    color: var(--vs-muc);
    font-size: 1.06em;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: 0;
    text-transform: none;
}

/* Doan van */

.vs-article p {
    margin: 0.9em 0;
}

.vs-article strong,
.vs-article b {
    color: var(--vs-muc);
    font-weight: 700;
}

.vs-article a {
    color: var(--vs-cam-dam);
    text-decoration: underline;
    text-decoration-color: #ffcdab;
    text-underline-offset: 3px;
    transition: text-decoration-color 0.15s ease;
}

.vs-article a:hover {
    color: var(--vs-cam);
    text-decoration-color: var(--vs-cam);
}

/* Danh sach */

.vs-article ul,
.vs-article ol {
    margin: 0.9em 0;
    padding-left: 1.35em;
}

.vs-article ul {
    list-style: disc;
}

.vs-article ol {
    list-style: decimal;
}

.vs-article li {
    margin: 0.4em 0;
    padding-left: 0.2em;
}

.vs-article li::marker {
    color: var(--vs-cam);
}

.vs-article li > ul,
.vs-article li > ol {
    margin: 0.4em 0;
}

/* Trich dan */

.vs-article blockquote {
    margin: 1.4em 0;
    padding: 14px 20px;
    border: 0;
    border-left: 4px solid var(--vs-cam);
    border-radius: 0 8px 8px 0;
    background: #fff6ef;
    color: var(--vs-chu);
    font-size: 1em;
    font-style: normal;
}

.vs-article blockquote p:last-child {
    margin-bottom: 0;
}

/* Anh */

.vs-article img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

.vs-article figure {
    margin: 1.4em 0;
}

.vs-article figcaption,
.vs-article .wp-caption-text {
    margin-top: 0.5em;
    color: var(--vs-nhat);
    font-size: 0.85em;
    text-align: center;
}

/* Bang */

.vs-article .vs-table-scroll {
    margin: 1.4em 0;
    overflow-x: auto;
}

.vs-article table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: 0.94em;
}

.vs-article table th,
.vs-article table td {
    padding: 10px 13px;
    border: 1px solid var(--vs-vien);
    text-align: left;
    vertical-align: top;
}

.vs-article table th {
    background: #fff4ec;
    color: var(--vs-cam-dam);
    font-weight: 700;
}

.vs-article table tbody tr:nth-child(even) td {
    background: #fafbfc;
}

/* Ma nguon va duong ke */

.vs-article code {
    padding: 2px 6px;
    border-radius: 5px;
    background: #f4f6f8;
    color: #b23a12;
    font-size: 0.9em;
}

.vs-article hr {
    margin: 2em 0;
    border: 0;
    border-top: 1px solid var(--vs-vien);
}

@media only screen and (max-width: 549px) {

    .vs-article {
        font-size: 16px;
    }

    .single-post .entry-content {
        padding: 20px 16px 30px;
    }

    .single-post .article-inner {
        border-radius: 12px;
    }

    body.page:not(.home) .vs-article {
        padding: 26px 16px 30px;
        border-radius: 12px;
    }

    /* Font he thong cho tieu de tren man hinh nho.
       Truoc day quy tac nay khong scope nen anh huong toan site. */
    .vs-article h2,
    .vs-article h3,
    .vs-article h4 {
        font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    }

    .vs-article table th,
    .vs-article table td {
        padding: 8px 10px;
    }

}


/*** BO MAU HIGHLANDS ***/

.hlv-post{
  --hlv-red:#B12029;
  --hlv-red-dark:#8E1620;
  --hlv-cream:#FBF5EC;
  --hlv-brown:#3B2A20;
  --hlv-gold:#C99B4A;
  --hlv-line:#EAD9C3;
  color:var(--hlv-brown);
  line-height:1.75;
  font-size:17px;
  max-width:820px;
  margin:0 auto;
}
.hlv-post *, .hlv-post *::before, .hlv-post *::after{box-sizing:border-box;}
 
.hlv-post h2.hlv-h2{
  font-size:1.5em !important;
  color:var(--hlv-red-dark) !important;
  margin:2.2em 0 .6em !important;
  padding:0 0 .35em !important;
  border-bottom:3px solid var(--hlv-gold);
  line-height:1.3 !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  text-wrap:pretty;
}
.hlv-post h3.hlv-h3{
  color:var(--hlv-brown) !important;
  margin:1.6em 0 .5em !important;
  padding:0 !important;
  line-height:1.35 !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  text-wrap:pretty;
}
.hlv-post p{margin:.9em 0 !important;padding:0 !important;}
.hlv-post ul.hlv-ul{margin:.9em 0 !important;padding:0 0 0 1.4em !important;list-style:disc !important;}
.hlv-post ul.hlv-ul li{margin:.45em 0 !important;padding:0 !important;list-style:disc !important;}
.hlv-post strong{color:var(--hlv-red-dark);}
 
/* ---- Hộp intro ---- */
.hlv-post .hlv-lead{
  background:var(--hlv-cream);
  border:1px solid var(--hlv-line);
  border-left:6px solid var(--hlv-red);
  border-radius:10px;
  padding:20px 24px !important;
  margin:1.2em 0 1.8em !important;
}
.hlv-post .hlv-lead p{margin:.6em 0 !important;}
 
/* ---- Nút CTA ---- */
.hlv-post .hlv-cta{text-align:center;margin:1.6em 0 !important;}
.hlv-post a.hlv-btn{
  display:inline-block !important;
  background:var(--hlv-red) !important;
  color:#fff !important;
  font-weight:700 !important;
  font-size:1.02em !important;
  padding:14px 34px !important;
  border-radius:999px !important;
  text-decoration:none !important;
  border:none !important;
  box-shadow:0 4px 14px rgba(177,32,41,.35) !important;
  line-height:1.4 !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  transition:transform .15s ease, background .15s ease;
}
.hlv-post a.hlv-btn:hover{background:var(--hlv-red-dark) !important;transform:translateY(-2px);}
.hlv-post a.hlv-btn--ghost{
  background:#fff !important;
  color:var(--hlv-red) !important;
  border:2px solid var(--hlv-red) !important;
  box-shadow:none !important;
}
.hlv-post a.hlv-btn--ghost:hover{background:var(--hlv-cream) !important;}
 
/* ---- Thẻ voucher dạng vé ---- */
.hlv-post .hlv-coupons{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:16px !important;
  margin:1.4em 0 !important;
  padding:0 !important;
}
@media(max-width:640px){
  .hlv-post .hlv-coupons{grid-template-columns:1fr !important;}
}
.hlv-post .hlv-coupon{
  display:flex !important;
  align-items:stretch !important;
  border:1.5px solid var(--hlv-line) !important;
  border-radius:12px !important;
  overflow:hidden !important;
  background:#fff !important;
  box-shadow:0 2px 10px rgba(59,42,32,.07) !important;
  margin:0 !important;
  min-height:0 !important;
}
.hlv-post .hlv-coupon__value{
  flex:0 0 104px !important;
  background:var(--hlv-red) !important;
  color:#fff !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  padding:14px 8px !important;
  margin:0 !important;
  border-right:2px dashed rgba(255,255,255,.55) !important;
}
.hlv-post .hlv-coupon__value .hlv-big{
  display:block;font-size:1.5em !important;font-weight:800 !important;
  line-height:1.15 !important;color:#fff !important;margin:0 !important;
}
.hlv-post .hlv-coupon__value .hlv-small{
  display:block;font-size:.72em !important;opacity:.9;
  color:#fff !important;margin:2px 0 0 !important;line-height:1.3 !important;
}
.hlv-post .hlv-coupon__body{
  padding:12px 14px !important;margin:0 !important;
  flex:1 !important;display:flex !important;flex-direction:column !important;
}
.hlv-post .hlv-coupon__body p{margin:0 !important;}
.hlv-post p.hlv-coupon__title{
  font-weight:700 !important;font-size:.98em !important;
  margin:0 0 4px !important;color:var(--hlv-brown) !important;line-height:1.4 !important;
}
.hlv-post p.hlv-coupon__cond{
  font-size:.82em !important;color:#7A6A5B !important;
  margin:0 0 10px !important;flex:1;line-height:1.5 !important;
}
.hlv-post a.hlv-coupon__btn{
  align-self:flex-start !important;
  display:inline-block !important;
  background:var(--hlv-gold) !important;
  color:#fff !important;
  font-size:.85em !important;
  font-weight:700 !important;
  padding:7px 16px !important;
  border-radius:999px !important;
  border:none !important;
  text-decoration:none !important;
  line-height:1.4 !important;
  text-transform:none !important;
  transition:background .15s ease;
}
.hlv-post a.hlv-coupon__btn:hover{background:#A87E33 !important;}
 
/* ---- Các bước hướng dẫn (div-based, không dùng ol/li) ---- */
.hlv-post .hlv-steps{margin:1.4em 0 !important;padding:0 !important;}
.hlv-post .hlv-step{
  position:relative !important;
  padding:14px 18px 14px 66px !important;
  background:var(--hlv-cream) !important;
  border:1px solid var(--hlv-line) !important;
  border-radius:10px !important;
  margin:0 0 12px !important;
  list-style:none !important;
}
.hlv-post .hlv-step__num{
  position:absolute !important;left:16px !important;top:16px !important;
  width:36px !important;height:36px !important;border-radius:50% !important;
  background:var(--hlv-red) !important;color:#fff !important;
  font-weight:800 !important;font-size:1.05em !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  margin:0 !important;padding:0 !important;
}
.hlv-post .hlv-step__title{
  display:block;font-weight:700 !important;
  color:var(--hlv-red-dark) !important;margin:0 0 2px !important;
}
.hlv-post .hlv-step p{margin:0 !important;}
 
/* ---- Hộp lưu ý ---- */
.hlv-post .hlv-note{
  background:#FFF7E8 !important;
  border:1px solid #F0D9A8 !important;
  border-left:6px solid var(--hlv-gold) !important;
  border-radius:10px !important;
  padding:16px 20px !important;
  margin:1.2em 0 !important;
}
.hlv-post .hlv-note--warn{
  background:#FDF0F0 !important;border-color:#F2C6C6 !important;
  border-left-color:var(--hlv-red) !important;
}
.hlv-post .hlv-note p{margin:.5em 0 !important;}
 
/* ---- FAQ accordion ---- */
.hlv-post .hlv-faq{margin:1.2em 0 !important;}
.hlv-post .hlv-faq details{
  border:1px solid var(--hlv-line) !important;
  border-radius:10px !important;
  margin:0 0 10px !important;
  padding:0 !important;
  background:#fff !important;
  overflow:hidden;
}
.hlv-post .hlv-faq summary{
  cursor:pointer;
  padding:14px 44px 14px 18px !important;
  margin:0 !important;
  font-weight:700 !important;
  color:var(--hlv-brown) !important;
  list-style:none !important;
  position:relative;
  outline:none;
}
.hlv-post .hlv-faq summary::-webkit-details-marker{display:none;}
.hlv-post .hlv-faq summary::marker{content:"";}
.hlv-post .hlv-faq summary::after{
  content:"+";
  position:absolute;right:18px;top:50%;transform:translateY(-50%);
  font-size:1.4em;color:var(--hlv-red);font-weight:400;
}
.hlv-post .hlv-faq details[open] summary::after{content:"−";}
.hlv-post .hlv-faq details[open] summary{background:var(--hlv-cream) !important;}
.hlv-post .hlv-faq .hlv-faq-a{padding:4px 18px 14px !important;}
.hlv-post .hlv-faq .hlv-faq-a p{margin:.5em 0 !important;}
 
/* ---- Khối group cộng đồng ---- */
.hlv-post .hlv-groups{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:16px !important;
  margin:1.4em 0 !important;
  padding:0 !important;
}
@media(max-width:640px){
  .hlv-post .hlv-groups{grid-template-columns:1fr !important;}
}
.hlv-post .hlv-group{
  background:var(--hlv-cream) !important;
  border:1.5px solid var(--hlv-line) !important;
  border-radius:12px !important;
  padding:22px 20px !important;
  margin:0 !important;
  text-align:center !important;
}
.hlv-post .hlv-group .hlv-icon{font-size:2em;line-height:1;margin:0 0 8px;}
.hlv-post .hlv-group .hlv-group__name{
  display:block;font-weight:700 !important;
  margin:.2em 0 .4em !important;color:var(--hlv-red-dark) !important;
  font-size:1.05em !important;text-transform:none !important;
}
.hlv-post .hlv-group p{font-size:.9em !important;margin:.4em 0 1em !important;color:#7A6A5B !important;}
/* ============================================================
   BỔ SUNG: Bảng mã giảm giá cho bài .hlv-post
   Dán thêm vào cuối stylesheet hlv hiện có (Simple Custom CSS and JS)
   ============================================================ */
.hlv-post .hlv-tablewrap{
  overflow-x:auto !important;
  border-radius:12px !important;
  border:1.5px solid var(--hlv-line) !important;
  margin:1.4em 0 !important;
  box-shadow:0 2px 10px rgba(59,42,32,.07) !important;
}
.hlv-post table.hlv-table{
  width:100% !important;
  border-collapse:collapse !important;
  margin:0 !important;
  font-size:.92em !important;
  background:#fff !important;
  border:none !important;
}
.hlv-post table.hlv-table th{
  background:var(--hlv-red) !important;
  color:#fff !important;
  font-weight:700 !important;
  text-align:left !important;
  padding:12px 14px !important;
  border:none !important;
  white-space:nowrap;
}
.hlv-post table.hlv-table td{
  padding:11px 14px !important;
  border:none !important;
  border-top:1px solid var(--hlv-line) !important;
  vertical-align:top !important;
  color:var(--hlv-brown) !important;
}
.hlv-post table.hlv-table tbody tr:nth-child(even) td{background:var(--hlv-cream) !important;}
.hlv-post table.hlv-table td.hlv-td-code{
  font-family:Consolas,Menlo,monospace !important;
  font-weight:700 !important;
  color:var(--hlv-red-dark) !important;
  white-space:nowrap;
}
/* ============================================================
   BỔ SUNG: Bảng mã giảm giá cho bài .hlv-post
   Dán thêm vào cuối stylesheet hlv hiện có (Simple Custom CSS and JS)
   ============================================================ */
.hlv-post .hlv-tablewrap{
  overflow-x:auto !important;
  border-radius:12px !important;
  border:1.5px solid var(--hlv-line) !important;
  margin:1.4em 0 !important;
  box-shadow:0 2px 10px rgba(59,42,32,.07) !important;
}
.hlv-post table.hlv-table{
  width:100% !important;
  border-collapse:collapse !important;
  margin:0 !important;
  font-size:.92em !important;
  background:#fff !important;
  border:none !important;
}
.hlv-post table.hlv-table th{
  background:var(--hlv-red) !important;
  color:#fff !important;
  font-weight:700 !important;
  text-align:left !important;
  padding:12px 14px !important;
  border:none !important;
  white-space:nowrap;
}
.hlv-post table.hlv-table td{
  padding:11px 14px !important;
  border:none !important;
  border-top:1px solid var(--hlv-line) !important;
  vertical-align:top !important;
  color:var(--hlv-brown) !important;
}
.hlv-post table.hlv-table tbody tr:nth-child(even) td{background:var(--hlv-cream) !important;}
.hlv-post table.hlv-table td.hlv-td-code{
  font-family:Consolas,Menlo,monospace !important;
  font-weight:700 !important;
  color:var(--hlv-red-dark) !important;
  white-space:nowrap;
}

/* ---- Mã code bấm-để-copy trong bài hlv (dùng chung JS .spf-code có sẵn) ---- */
.hlv-post .spf-code{
  position:relative;
  display:inline-block !important;
  font-family:Consolas,Menlo,monospace !important;
  font-weight:700 !important;
  font-size:.95em !important;
  color:var(--hlv-red-dark) !important;
  background:var(--hlv-cream) !important;
  border:1.5px dashed var(--hlv-red) !important;
  border-radius:8px !important;
  padding:5px 12px !important;
  cursor:pointer;
  -webkit-user-select:none;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  transition:background .15s ease;
}
.hlv-post .spf-code:hover{background:#F5E8D8 !important;}
.hlv-post .spf-code::before{
  content:"📋";
  font-size:.85em;margin-right:6px;
}
.hlv-post .spf-code.spf-copied{border-color:#2E9E5B !important;}
.hlv-post .spf-code.spf-copied::after{
  content:"✓ Đã chép mã";
  position:absolute;left:0;top:0;width:100%;height:100%;
  background:#2E9E5B;color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:.9em;font-weight:700;font-family:inherit;
  border-radius:6px;white-space:nowrap;
  z-index:10;
}
.hlv-post p.hlv-coupon__code{margin:0 0 10px !important;}


/*** BO MAU SHOPEEFOOD ***/

.spf-post{
  --spf-orange:#EE4D2D;
  --spf-dark:#C7351B;
  --spf-cream:#FFF6F0;
  --spf-ink:#3A2A22;
  --spf-gold:#F79E1B;
  --spf-line:#FFD8C7;
  color:var(--spf-ink);
  line-height:1.75;
  font-size:17px;
  max-width:820px;
  margin:0 auto;
}
.spf-post *, .spf-post *::before, .spf-post *::after{box-sizing:border-box;}

.spf-post h2.spf-h2{
  font-size:1.5em !important;
  color:var(--spf-dark) !important;
  margin:2.2em 0 .6em !important;
  padding:0 0 .35em !important;
  border-bottom:3px solid var(--spf-gold);
  line-height:1.3 !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  text-wrap:pretty;
}
.spf-post h3.spf-h3{
  color:var(--spf-ink) !important;
  margin:1.6em 0 .5em !important;
  padding:0 !important;
  line-height:1.35 !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  text-wrap:pretty;
}
.spf-post p{margin:.9em 0 !important;padding:0 !important;}
.spf-post strong{color:var(--spf-dark);}
.spf-post img.spf-hero{border-radius:12px;height:auto;max-width:100%;}
.spf-post img{max-width:100% !important;height:auto !important;border-radius:10px;}
.spf-post .wp-caption{max-width:100% !important;}
.spf-post .wp-caption-text{font-size:.85em !important;color:#7A6A5B !important;text-align:center !important;margin:.5em 0 0 !important;}

/* ---- Hộp intro ---- */
.spf-post .spf-lead{
  background:var(--spf-cream);
  border:1px solid var(--spf-line);
  border-left:6px solid var(--spf-orange);
  border-radius:10px;
  padding:20px 24px !important;
  margin:1.2em 0 1.8em !important;
}
.spf-post .spf-lead p{margin:.6em 0 !important;}

/* ---- Hộp lưu ý ---- */
.spf-post .spf-note{
  background:#FFF7E8 !important;
  border:1px solid #F0D9A8 !important;
  border-left:6px solid var(--spf-gold) !important;
  border-radius:10px !important;
  padding:16px 20px !important;
  margin:1.2em 0 !important;
}
.spf-post .spf-note--warn{
  background:#FDF0F0 !important;border-color:#F2C6C6 !important;
  border-left-color:var(--spf-orange) !important;
}
.spf-post .spf-note p{margin:.5em 0 !important;}

/* ---- Lưới thẻ thương hiệu ---- */
.spf-post .spf-cards{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:16px !important;
  margin:1.4em 0 !important;
  padding:0 !important;
}
@media(max-width:640px){
  .spf-post .spf-cards{grid-template-columns:1fr !important;}
}
.spf-post .spf-card{
  border:1.5px solid var(--spf-line) !important;
  border-radius:12px !important;
  background:#fff !important;
  box-shadow:0 2px 10px rgba(58,42,34,.07) !important;
  padding:16px 18px !important;
  margin:0 !important;
  display:flex !important;
  flex-direction:column !important;
}
.spf-post .spf-card p{margin:0 !important;}
.spf-post p.spf-card__name{
  font-weight:800 !important;font-size:1.02em !important;
  color:var(--spf-dark) !important;margin:0 0 4px !important;line-height:1.4 !important;
}
.spf-post p.spf-card__deal{
  font-size:.88em !important;color:#7A6A5B !important;
  margin:0 0 12px !important;flex:1;line-height:1.5 !important;
}
.spf-post a.spf-card__btn{
  align-self:flex-start !important;
  display:inline-block !important;
  background:var(--spf-orange) !important;
  color:#fff !important;
  font-size:.88em !important;
  font-weight:700 !important;
  padding:8px 18px !important;
  border-radius:999px !important;
  border:none !important;
  text-decoration:none !important;
  line-height:1.4 !important;
  text-transform:none !important;
  box-shadow:0 3px 10px rgba(238,77,45,.3) !important;
  transition:background .15s ease, transform .15s ease;
}
.spf-post a.spf-card__btn:hover{background:var(--spf-dark) !important;transform:translateY(-2px);}

/* ---- Thẻ mã giảm giá dạng vé ---- */
.spf-post .spf-coupons{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:16px !important;
  margin:1.4em 0 !important;
  padding:0 !important;
}
@media(max-width:640px){
  .spf-post .spf-coupons{grid-template-columns:1fr !important;}
}
.spf-post .spf-coupon{
  display:flex !important;
  align-items:stretch !important;
  border:1.5px solid var(--spf-line) !important;
  border-radius:12px !important;
  overflow:hidden !important;
  background:#fff !important;
  box-shadow:0 2px 10px rgba(58,42,34,.07) !important;
  margin:0 !important;
  min-height:0 !important;
}
.spf-post .spf-coupon__value{
  flex:0 0 104px !important;
  background:var(--spf-orange) !important;
  color:#fff !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  padding:14px 8px !important;
  margin:0 !important;
  border-right:2px dashed rgba(255,255,255,.55) !important;
}
.spf-post .spf-coupon__value .spf-big{
  display:block;font-size:1.4em !important;font-weight:800 !important;
  line-height:1.15 !important;color:#fff !important;margin:0 !important;
}
.spf-post .spf-coupon__value .spf-small{
  display:block;font-size:.72em !important;opacity:.9;
  color:#fff !important;margin:2px 0 0 !important;line-height:1.3 !important;
}
.spf-post .spf-coupon__body{
  padding:12px 14px !important;margin:0 !important;
  flex:1 !important;display:flex !important;flex-direction:column !important;
  align-items:flex-start !important;
}
.spf-post .spf-coupon__body p{margin:0 !important;}
.spf-post p.spf-coupon__cond{
  font-size:.82em !important;color:#7A6A5B !important;
  margin:6px 0 0 !important;flex:1;line-height:1.5 !important;
}

/* Mã code — bấm để sao chép */
.spf-post .spf-code{
  position:relative;
  display:inline-block !important;
  font-family:Consolas,Menlo,monospace !important;
  font-weight:700 !important;
  font-size:.95em !important;
  color:var(--spf-dark) !important;
  background:var(--spf-cream) !important;
  border:1.5px dashed var(--spf-orange) !important;
  border-radius:8px !important;
  padding:5px 12px !important;
  cursor:pointer;
  -webkit-user-select:none;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  transition:background .15s ease;
}
.spf-post .spf-code:hover{background:#FFE9DE !important;}
.spf-post .spf-code::before{
  content:"📋";
  font-size:.85em;margin-right:6px;
}
.spf-post .spf-code.spf-copied{border-color:#2E9E5B !important;}
.spf-post .spf-code.spf-copied::after{
  content:"✓ Đã chép mã";
  position:absolute;left:0;top:0;width:100%;height:100%;
  background:#2E9E5B;color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:.9em;font-weight:700;font-family:inherit;
  border-radius:6px;white-space:nowrap;
  z-index:10;
}

/* ---- Bảng ưu đãi ngân hàng ---- */
.spf-post .spf-tablewrap{
  overflow-x:auto !important;
  border-radius:12px !important;
  border:1.5px solid var(--spf-line) !important;
  margin:1.4em 0 !important;
  box-shadow:0 2px 10px rgba(58,42,34,.07) !important;
}
.spf-post table.spf-table{
  width:100% !important;
  border-collapse:collapse !important;
  margin:0 !important;
  font-size:.92em !important;
  background:#fff !important;
  border:none !important;
}
.spf-post table.spf-table th{
  background:var(--spf-orange) !important;
  color:#fff !important;
  font-weight:700 !important;
  text-align:left !important;
  padding:12px 14px !important;
  border:none !important;
  white-space:nowrap;
}
.spf-post table.spf-table td{
  padding:11px 14px !important;
  border:none !important;
  border-top:1px solid var(--spf-line) !important;
  vertical-align:top !important;
  color:var(--spf-ink) !important;
}
.spf-post table.spf-table tbody tr:nth-child(even) td{background:var(--spf-cream) !important;}
.spf-post table.spf-table td.spf-td-brand{font-weight:700 !important;color:var(--spf-dark) !important;white-space:nowrap;}
.spf-post table.spf-table td.spf-td-money{font-weight:700 !important;white-space:nowrap;}


/*************** VOUCHERSAN – LIEN KET CHEO TRONG BAI ***************
 * Khoi dan sang bai cung chu de, dat giua than bai.
 * Khac voi khoi "Bai viet lien quan" cuoi bai o cho no co ngu canh:
 * doc den doan nao thi goi y dung bai lien quan den doan do.
 ********************************************************************/

.vs-article .vs-xref {
    margin: 26px 0;
    padding: 14px 18px;
    border: 1px solid #ffe2d0;
    border-left: 3px solid #f26522;
    border-radius: 4px 10px 10px 4px;
    background: #fffaf6;
}

.vs-article .vs-xref p {
    margin: 0;
    color: #55606f;
    font-size: 15.5px;
    line-height: 1.75;
}

.vs-article .vs-xref a {
    border-bottom: 1px solid rgba(217, 84, 26, 0.32);
    color: #d9541a;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.15s ease;
}

.vs-article .vs-xref a:hover {
    border-bottom-color: #d9541a;
    text-decoration: none;
}

/* Bai su kien da ket thuc: giu trung tinh, khong dung mau cam
   de nguoi doc khong nham la uu dai dang chay. */

.vs-article .vs-xref--het-han {
    margin: 0 0 26px;
    border-color: #e3e8ef;
    border-left-color: #9aa5b4;
    background: #f7f9fb;
}

.vs-article .vs-xref--het-han p {
    color: #64707f;
    font-size: 15px;
}

@media only screen and (max-width: 48em) {

    .vs-article .vs-xref {
        margin: 20px 0;
        padding: 12px 14px;
    }

    .vs-article .vs-xref--het-han {
        margin: 0 0 20px;
    }

    .vs-article .vs-xref p {
        font-size: 14.5px;
    }

}

/*************** VOUCHERSAN – NUT SAO CHEP MA ***************
 * Ghi de .spf-code cua ca hai bo mau (.spf-post va .hlv-post).
 * Dat CUOI cung trong build de thang do thu tu, khong sua truc tiep
 * art/hlv.css va art/spf.css — day la ban sao duy nhat con lai
 * sau khi go plugin custom-css-js.
 *
 * Doi voi bai voucher, day la nut duoc bam nhieu nhat trang.
 * Truoc: cao 28px, icon emoji 📋 mo o co nho.
 * Sau:  cao 40px (dat nguong cham 40px cua WCAG), icon SVG net o moi
 *       do phan giai va an theo mau chu.
 ************************************************************/

.spf-post .spf-code,
.hlv-post .spf-code {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 132px;
    min-height: 40px;
    padding: 8px 16px !important;
    border-width: 2px !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    letter-spacing: 0.04em;
    line-height: 1.2 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}

.spf-post .spf-code:hover,
.hlv-post .spf-code:hover {
    box-shadow: 0 4px 10px -3px rgba(15, 23, 42, 0.22);
    transform: translateY(-1px);
}

.spf-post .spf-code:active,
.hlv-post .spf-code:active {
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.1);
    transform: translateY(0);
}

/* Hai bo mau deu dat vertical-align:top cho o bang. Khi the ma cao 40px,
   chu o cac cot con lai bi dinh len dinh hang. Chi can canh giua o dung
   nhung hang thuc su co the ma, cac bang khac giu nguyen top. */

.hlv-post table.hlv-table tr:has(.spf-code) td,
.spf-post table.spf-table tr:has(.spf-code) td {
    vertical-align: middle !important;
}

/* Icon hai o vuong chong nhau — bieu tuong "sao chep" pho thong.
   Dung mask nen icon an theo color cua tung bo mau, khong can ve lai. */

.spf-post .spf-code::before,
.hlv-post .spf-code::before {
    content: "";
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin: 0 !important;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E") no-repeat center;
    -webkit-mask-size: contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
    opacity: 0.75;
}

.spf-post .spf-code:hover::before,
.hlv-post .spf-code:hover::before {
    opacity: 1;
}

/* Trang thai da chep: doi icon sang dau tich, phu kin the. */

.spf-post .spf-code.spf-copied::before,
.hlv-post .spf-code.spf-copied::before {
    opacity: 0;
}

.spf-post .spf-code.spf-copied::after,
.hlv-post .spf-code.spf-copied::after {
    border-radius: 8px !important;
    font-size: 14px !important;
    letter-spacing: 0;
}

@media only screen and (max-width: 48em) {

    .spf-post .spf-code,
    .hlv-post .spf-code {
        min-width: 118px;
        min-height: 38px;
        padding: 7px 13px !important;
        font-size: 14.5px !important;
    }

    .spf-post .spf-code::before,
    .hlv-post .spf-code::before {
        width: 16px;
        height: 16px;
    }

}