/* core.bundle.css - gop tu: legacy-bootstrap-custom, style, quote-popup, footer-subscribe, footer-redesign, megamenu, header-redesign (giu dung thu tu goc de khong doi cascade) */
/* Site-specific rules that were hand-edited directly into css/bootstrap.css
   (mixed into the vendor file instead of style.css). Extracted so they keep
   working regardless of which Bootstrap version ($bs5) is active. */

div#news_detail table,
div.portfolio-content table { margin:0 auto }
div#news_detail p,
div#news_detail ul,
div#news_detail ol,
div.portfolio-content p,
div.portfolio-content ul { margin-bottom:20px; }
div#news_detail ul,
div.portfolio-content ul { padding-left:30px }
div#news_detail ul li,
div#news_detail ol li,
div.portfolio-content ul li { margin-bottom:12px }
.pd-landing-page #news_detail h2 {font-size: 1.75rem}
#news_detail h2,
.portfolio-content h2 { font-size:1.25rem;font-weight:700;line-height:1.4; letter-spacing:-0.029em }
#news_detail h3,
#news_detail h4,
#news_detail h5,
.portfolio-content h3,
.portfolio-content h4,
.portfolio-content h5 { font-weight:700;font-size:1.125rem;margin-bottom: 20px; letter-spacing: -0.029em}
h2 strong, h3 strong, h4 strong { font-family:Inter;font-weight:700; }

.product-content a,
.portfolio-content a { color: #1250dc }
#news_detail .blogpost-article-body blockquote p,
.pf-faq-answer-inner blockquote p,
#news_detail .product-content blockquote p {margin-bottom: 0}
#news_detail .blogpost-article-body blockquote,
.product-content blockquote,
.pf-faq-answer-inner blockquote,
.portfolio-content blockquote { position: relative; clear: both; margin: 24px 0; padding: 24px 30px; overflow: hidden; background: linear-gradient(135deg, rgba(255, 251, 235, 0.9) 0%, rgba(255, 255, 255, 0.98) 58%, rgba(255, 247, 237, 0.9) 100%); border: 1px solid #fde7bf; border-radius: 8px; }
#news_detail .blogpost-article-body blockquote:after,
.pf-faq-answer-inner blockquote:after,
.product-content blockquote:after,
.portfolio-content blockquote:after { content: ""; position: absolute; left: 15%; right: 20%; top: 0; height: 3px; border-radius: 999px; background: linear-gradient(90deg, #fc8405, rgba(249, 115, 22, 0)); }
#news_detail .blogpost-article-body blockquote:before,
.pf-faq-answer-inner blockquote:before,
.product-content blockquote:before,
.portfolio-content blockquote:before { padding-top: 15px; content: "\201C"; position: absolute; top: -18px; right: 22px; left: auto; color: rgba(249, 115, 22, 0.12); font-family: Georgia, "Times New Roman", serif; font-size: 6rem; font-weight: 700; line-height: 1; opacity: 1; pointer-events: none; }
.product-content ul li,
.portfolio-content ul li { list-style:none; }
.product-content ul li:before,
.portfolio-content ul li:before { content:"֎";color:#0f75bc;display:inline-block;width:25px;margin-left:-25px; }
.product-content img,
.portfolio-content img { width:100% !important;height:100% !important; }

/* ====== H2-H6/P/UL/OL cho .product-content — lay dung NGUYEN BAN style hien
   dang ap dung cho .blogpost-article-body (layout_blogpost.php), tuc la
   ket qua CUOI CUNG sau khi cong don ca rule #news_detail o TREN (chung voi
   .product-content, vi .product-content cung nam trong #news_detail o
   layout_product.php) LAN rule rieng cua .blogpost-article-body trong
   css/toc.css (dong bo lai giao dien mo ta san pham voi bai viet blog).
   Can tien to "#news_detail " de thang specificity voi #news_detail h2/h3/h4/h5
   ngay phia tren (id+type, 1-0-1) — dung y het cach toc.css da lam cho
   .blogpost-article-body (xem comment trong css/toc.css). rieng UL: ghi de
   lai ve bullet mac dinh (disc), bo bullet "֎" rieng cua .product-content o
   ngay phia tren, cho dung "nguyen ban" UL cua blogpost (khong tuy bien bullet). */
#news_detail .product-content { counter-reset: bp-h2-counter; line-height: 1.6; }
#news_detail .product-content h2,
#news_detail .product-content h3,
#news_detail .product-content h4 { scroll-margin-top: 100px; font-weight: 700; line-height:1.4 }
#news_detail .product-content h2 { margin-bottom: 20px; font-size: 1.5rem; font-weight: 700; line-height: 1.4; letter-spacing: -0.029em; counter-increment: bp-h2-counter; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
#news_detail .product-content h2::before {
    content: counter(bp-h2-counter, decimal-leading-zero) ".";
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    color: #ccc;
}
#news_detail .product-content h3 { font-size: 1.25rem; letter-spacing: -0.029em; margin-bottom: 20px; }
#news_detail .product-content h4 { font-size: 1rem; letter-spacing: -0.029em; margin-bottom: 20px; }
#news_detail .product-content h5 { font-weight: 700; font-size: 1.125rem; margin-bottom: 20px; letter-spacing: -0.029em; }
#news_detail .product-content p,
#news_detail .product-content ul,
#news_detail .product-content ol { margin-bottom: 20px; }
#news_detail .product-content ul { padding-left: 30px; }
#news_detail .product-content ul li,
#news_detail .product-content ol li { margin-bottom: 12px; }
#news_detail .product-content ul li { list-style: disc; }
#news_detail .product-content ul li::before { content: none; margin-left: 0; width: auto; }
.product-customer { margin: 48px 0; }
.title-product-customer { font-weight: 600; color: #4a4f63; }
.product-title-section { font-size: 1.75rem; font-weight: 700; margin: 0 0 24px; letter-spacing: -0.029em; }
@media (max-width: 767px) { .product-title-section { font-size: 1.5rem; } }
/* Vong ban nguyet mo dan (trang trong suot, chi co net vien mau xanh nhat)
   dat phia sau tieu de "...theo nganh nghe, chat lieu" (related-products-section,
   nhanh San pham/Bao gia chinh) — anh vuong 1399x1399 nhung noi dung (cac
   vong tron) chi nam o NUA TREN, nua duoi trong suot, nen KHONG stretch/co
   dinh ti le nhu .bg-blue-blur — chi can padding-top de danh cho khong tron
   phia tren tieu de, dung background-position:top center + 1 chieu rong co
   dinh (background-size chi set width, height "auto" tu giu dung ti le vuong
   goc, tranh vong tron bi bien thanh elip khi khung chua du cao).
   opacity dat tren ::before RIENG (khong dat thang len .bg-semicircle) — dat
   thang se lam mo LUON tieu de <h2> ben trong (opacity anh huong ca phan tu
   lan noi dung con, giong dung loi da gap voi filter tren .bg-blue-blur truoc
   day) — tach lop nen ra ngoai content that dung y het pattern da dung o do. */
.bg-semicircle { position: relative; isolation: isolate; padding: 96px 0 16px; text-align: center; }
.bg-semicircle::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: url("../images/bg-semicircle.png");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 900px auto;
    opacity: 0.4;
}
@media (max-width: 767px) {
    .bg-semicircle { padding-top: 64px; }
}
/* filter (blur...) tren chinh .bg-blue-blur se lam mo LUON ca noi dung/chu
   ben trong no (filter anh huong toan bo phan tu, khong rieng background) —
   day la ly do bi mo het content khi ap effect nay. Tach background+filter ra
   1 lop rieng (::before, dat lui z-index:-1) NAM PHIA SAU noi dung that,
   .bg-blue-blur lam stacking context rieng (isolation:isolate) de content
   (khong can them CSS gi) tu nhien ve phia truoc lop nay. inset am (-70px,
   hon 1 chut so voi blur 64px) + overflow:hidden tren .bg-blue-blur de
   bu vien mo/nhat o mep khi anh bi cat boi blur. */
.bg-blue-blur {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.bg-blue-blur::before {
    content: '';
    position: absolute;
    inset: -70px;
    z-index: -1;
    background: url("../images/blue-background.png");
    /* Anh nguon la 1 vignette mo mau xanh nhat o 4 goc, sang trang o giua-tren
       (xem lai neu can). background-size:cover + position:right bottom (gia tri
       goc) chi dung DEP khi khung gan dung ti le anh — khoi nay (.product-video-section)
       rat cao (>1000px, tuy so luong video), "cover" phong to anh len RAT nhieu
       de lap day chieu cao, khien vung hien ra bi ep het vao dung phan trang/
       glow o giua anh (khong con thay mau xanh 4 goc dau), nhin nhu mat hieu
       ung/toan mau trang. Doi sang 100% 100% (keo dan lap day dung khung,
       khong quan tam ti le) de LUON thay du 4 goc mau xanh cua anh bat ke
       khung cao/thap the nao — chap nhan duoc vi anh la gradient truu tuong,
       keo dan khong lam lo net "bien dang" nhu anh chup thuc te. */
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-attachment: scroll;
    /* Da thu opacity<1 va tang brightness (115-160%) de lam nhat mau/het
       "gon" o vung chuyen mau — khong an. Da thu them mask-image de lam mo
       dan (fade) rieng mep tren/duoi — nhung Chrome (va cac trinh duyet dung
       chung engine) KHONG the render dung ca filter (blur...) LAN mask-image
       cung luc tren 1 phan tu: ket hop 2 thuoc tinh nay lam bien mat toan bo
       mau nen (da kiem chung — bo mask-image di la mau hien lai ngay, giu
       mask-image thi mau mat het du filter van dung). Tra lai dung filter
       nguyen ban nguoi dung dua tu dau. */
    filter: brightness(105%) saturate(74%) hue-rotate(16deg) blur(64px);
    z-index: -2;
    opacity: 0.5;
}
/* Duong "gon" that su: overflow:hidden CAT PHANG ::before (dang bi blur, mo
   dan theo vignette) tai dung mep tren/duoi cua .bg-blue-blur — mau
   ngay tai lat cat do khong du gan trang de hoa lien mach voi nen trang cua
   noi dung ke tiep (vd ngay duoi nut "Xem them mau thiet ke"), tao 1 duong
   ranh gioi thay ro. KHONG the dung mask-image tren chinh ::before (xem
   comment tren — gay mat mau khi ket hop voi filter), nen dung 1 LOP RIENG
   thu 2 (::after, KHONG co filter nen khong bi loi tren) — 1 gradient trang
   dac -> trong suot ngay tai mep tren/duoi, "ve de" len dung cho ::before bi
   cat, cho no hoa dan vao mau trang cua noi dung xung quanh thay vi dut hang
   dot ngot. z-index -1 (giua ::before o -2 va noi dung that o tren cung). */
.bg-blue-blur::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(to bottom, #fff 0, transparent 50px, transparent calc(100% - 50px), #fff 100%);
}
div#pd-sec-video, div#pd-sec-designs, .related-products-container,.product-full-support  { padding: 48px 0; }
 div#pd-sec-faq,.product-description-section  { padding-top: 48px; }
 .inan-rating-container,.ps-slider-container{padding: 96px 0 48px;}
/*.inan-rating-container {
    background-image: linear-gradient(#eaeffa 0%, #ffffff 20%), linear-gradient(#b9d4fb 0%, rgb(255, 255, 255) 40%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    border-style: solid;
    border-color: transparent;
    border-radius: 16px;
    border-width: 2px;
    padding: 24px 16px;
}*/
/* Goc tren-trai cua radial-gradient (0% 0%) dat mau xanh DAM NHAT ngay tai
   diem bat dau (y=0) — section truoc do (product-description-section) nen
   trang trong suot, nen tao 1 buoc nhay mau tu "trang thuan" sang "xanh nhat"
   dung tai duong ranh gioi 2 section, nhin nhu 1 duong "gon". Khong dung
   filter tren phan tu nay (khac .bg-blue-blur) nen KHONG can pseudo-element
   rieng — chi can THEM 1 lop gradient trang->trong suot NUA vao dau danh
   sach background (lop dau tien = ve TREN CUNG), fade dan trong 80px dau,
   che dung buoc nhay mau ngay tai mep tren. */
.product-rating-section {
    background:
        linear-gradient(to bottom, #fff 0, transparent 80px),
        radial-gradient(circle at 0% 0%, rgba(191, 219, 254, 0.52), transparent 36%),
        linear-gradient(36deg, #ffffff 0%, #f7fbff 100%);
}

div#news_id img { width:100% !important;height:auto !important;display:block;border-radius:6px;border:10px solid #f4f4f4;margin:0; }
.sidebar-support-heading {
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -0.029em;
    margin-bottom: 16px !important;
}
a.tag:after { display:none; }
 a.mau_thiet_ke_btn { background-image: linear-gradient(315deg, #1250dc, #306de4); padding: 16px 48px; color: #fff !important; margin: 24px auto; display: block; text-align: center; width: fit-content; border-radius: 50px; transition: all .2s ease; }
.backhomebutton{display: inline-block; color: #fff; border-radius: 50px;    padding: 16px 48px;}
.error404 { display: flex; flex-direction: column; gap: 10px; align-items: center; padding:80px 0 }
.error404-hotline {color: #1250dc; font-weight: 600}
.error404 h2 { text-align: center; }
.online_row { padding:3px 0 3px 55px;margin:10px;border:1px dashed #293f7b;border-radius:39px 6px 6px 39px;font-size:0.875rem;line-height:1.4; }
.online_row a { font-size:0.875rem; }
.online_row a:hover { color:#f7941d; }
.vid-showcase.pf-showcase--catpage {
    padding-bottom: 60px;
}
div#pd-sec-video .vid-showcase.pf-showcase--catpage {
    padding-bottom: 0;
}
/* Employee avatar sprite (used by the consultant carousel + sidebar "online" list) */
@media (max-width: 991px) {
    .product-customer {    margin: 48px 0 0;}
    div#pd-sec-video, .inan-rating-container, .product-full-support{
    padding: 48px 0 0;}
    .ps-slider-container {padding-top: 48px}

}
/* Bo gioi han max-width mac dinh cua Bootstrap cho .container/.container-sm/
   .container-md/.container-lg/.container-xl/.container-xxl — chi giu lai 1
   nguong o >=1400px de noi dung khong keo dai vo han tren man hinh sieu rong,
   duoi 1400px thi container fluid theo dung chieu rong man hinh (padding trai/
   phai cua Bootstrap van giu nguyen, chi bo max-width). File nay luon duoc nap
   SAU bootstrap.css/bootstrap5.min.css (xem application/views/includes/template.php)
   nen thang the ma khong can !important. */
.container {
    max-width: 100%;
}
@media (min-width: 1400px) {
    .container {
        max-width: 1280px;
    }
}

/* Inter (variable font, wght 100-900) replaces SF Pro Display — see project
   memory: SF Pro's license doesn't permit general web embedding, and Inter has
   proper Vietnamese diacritic coverage via its dedicated subset file. All
   former "font-family: SF/SFMedium/SFSemiBold/SFBold" usages across this file
   have been renamed directly to Inter + an explicit font-weight, so only the
   Inter family needs to be registered here now. */

/* Kept solely because application/modules/invietdung/views/thankyousurvey.php
   (out of scope — must not be touched) still references 'SFSEMIBOLD' with no
   font-weight override of its own; this keeps that page's own text rendering
   unchanged now that the original SFProDisplay-Semibold.woff2 file is gone. */
@font-face {
    font-display: swap;
    font-family: SFSemiBold;
    src: url(/fonts/Inter-latin.woff2) format("woff2");
    font-weight: 600;
    font-style: normal;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-display: swap;
    font-family: SFSemiBold;
    src: url(/fonts/Inter-vietnamese.woff2) format("woff2");
    font-weight: 600;
    font-style: normal;
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
    font-display: swap;
    font-family: Inter;
    src: url(/fonts/Inter-latin.woff2) format("woff2");
    font-weight: 100 900;
    font-style: normal;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-display: swap;
    font-family: Inter;
    src: url(/fonts/Inter-vietnamese.woff2) format("woff2");
    font-weight: 100 900;
    font-style: normal;
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
    .chil_menu li, .fa_li, .mn_mb li {
    list-style: none;
}
 .title_box h3 {
    text-transform: uppercase;
}
 .f_col a, .filetree span.folder, .name_new {
    font-family: Inter; font-weight: 600;
}
 #info, .box_list p {
    margin-bottom: 10px;
}
 #online, #toTop {
    text-align: center;
}
 #toTop {
    cursor: pointer;
}
* {
    padding: 0;
    margin: 0;
}
table, table td p {
    font-size:1rem;
}
td {
    padding: 5px;
}
.table-content {
    overflow-x: auto;
    border-radius: 11px;
    scrollbar-width: thin;
    scrollbar-color: #005EDB #e5e9f5;
    border-style: solid;
    border-color: #005EDB;
    border-width: 39px 3px 3px 3px;
    margin-bottom: 20px;
}
.table-content table {
    display: table;
    overflow-x: visible;
    width: auto;

}
.table-content::-webkit-scrollbar { height: 8px; }
.table-content::-webkit-scrollbar-track { background: #e5e9f5; border-radius: 7px; }
.table-content::-webkit-scrollbar-thumb { background: #1250dc; border-radius: 7px; }
.table-content::-webkit-scrollbar-thumb:hover { background: #0d3ea8; }
.table-content table{    background: #fff;
    border-radius: 10px;
    min-width: 900px;}
/* <=3 cot: khong can cuon ngang, cho bang hien full chieu rong khung thay vi
   ep min-width 900px (gay thua khoang trang/cuon khong can thiet). */
.table-content table:not(:has(tr :nth-child(4))) {
    width: 100%;
    min-width: 0;
    table-layout: auto;
}
/* >3 cot: van giu min-width (can cuon ngang) nhung chia deu cac cot bang
   table-layout:fixed + width:100% — tranh tinh trang cot cuoi/khoang trang
   thua phia sau khi noi dung cac cot khong du lap day 900px. */
.table-content table:has(tr :nth-child(4)) {
    table-layout: fixed;
    width: 100%;
}
.table-content table td, .table-content table th {
    border: 1px solid #e0e5eb;
    padding: 12px;
}
.table-content table tr:nth-child(2) td:nth-child(1) {
    max-width: 200px;
}
.table-content table td p {
    margin-bottom: 0px !important;
}
.table-content a { color: #1250DC; }
/* Cot dau tien "dong bang" khi cuon ngang — sticky + nen dac de bao hieu con noi
   dung an ben duoi (giong pattern spreadsheet frozen column).
   Dung ::after (gradient) thay vi box-shadow that: box-shadow tren <td> render
   khong on dinh giua cac trinh duyet do co che ve rieng cua table cell, con
   pseudo-element la 1 khoi thuc su nen luon hien dung. */
.table-content table th:first-child,
.table-content table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: #fff;
}
.table-content table th:first-child::after,
.table-content table td:first-child::after {
    content: '';
    position: absolute;
    top: 0;
    right: -10px;
    bottom: 0;
    width: 10px;
    background: linear-gradient(to right, rgba(0, 0, 0, .08), rgba(0, 0, 0, 0));
    pointer-events: none;
}
/* Hang bi 1 rowspan cot-1 tu hang truoc che phu: o dau tien (DOM) cua hang
   nay THUC RA la cot hien thi thu 2, khong phai cot 1 that — :first-child
   (CSS thuan) khong biet dieu nay nen van gan nham sticky/nowrap/nen trang/
   gradient. JS (js/table-content-fix.js) danh dau .tc-rowspan-covered cho
   dung cac o nay de HUY sticky, tra ve o binh thuong. */
.table-content table td.tc-rowspan-covered,
.table-content table th.tc-rowspan-covered {
    position: static;
    background: transparent;
    white-space: normal;
}
.table-content table td.tc-rowspan-covered::after,
.table-content table th.tc-rowspan-covered::after {
    content: none;
}
div.zone_list {
    display: inline;
    float: left;
    padding-left: 5px;
    width: 180px;
}
.saleoff a {
    color: #e47911;
    font-size:1rem;
}
.ul_end {
    display: none;
}
 .chil_menu li a, .name_run {
    display: block;
}
.treeview li.collapsable {
    background-position: 0 -176px;
}
.treeview .hitarea {
    background: url(../images/treeview-default.gif) -80px -1px no-repeat;
    cursor: pointer;
    float: left;
    height: 16px;
    margin-left: -16px;
    width: 16px;
}
 #toTop {
    width: 100px;
}
.treeview ul {
    background-color: none;
}
.zone_list .saleoff a:hover {
    color: #000;
}
.zone_list .saleoff a, .zone_list a:hover {
    color: #e53838;
}
 .zone_list a {
    color: #36c;
}
.filetree li, .treeview li {
    padding: 3px 0 2px 16px;
}
.treeview li {
    background: url(../images/treeview-default-line.gif) no-repeat;
    margin: 0;
}
.treeview li.last {
    background-position: 0 -1766px;
}
.filetree span.folder {
    background: url(../images/folder.gif) no-repeat;
    font-size:0.875rem;
}
.filetree span.file, .filetree span.folder {
    display: block;
    padding: 1px 0 1px 20px;
}
.treeview, .treeview ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
a, body {
    color: #020b27;
}
a {
    text-decoration: none;
}
body {
    font-family: Inter, sans-serif;
    font-size:1rem;
    background-color: transparent;
    line-height: 1.5;
    letter-spacing: -0.019em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
button, input, optgroup, select, textarea {
    font-family: inherit;
    letter-spacing: inherit;
}
#news_detail,
.portfolio-content {
    padding: 0;
}
#time {
    font-size:0.75rem;
    color: #9b9b9b;
    padding-bottom: 2px;
}
 .name_run {
    font-size:1rem;
    font-family: Inter;
    font-weight: 600;
}
#comment textarea {
    height: 100px;
    width: 500px;
    padding: 4px;
}
#comment td {
    padding: 2px 5px;
}
#comment input[type=text] {
    width: 150px;
    padding: 2px;
    border: 1px solid #ccc;
    background: #fff;
}
#comment {
    width: 100%}
#left {
    width: 675px;
    margin-right: 25px;
    float: left;
}
#right {
    width: 300px;
    float: left;
}
 #txts {
    background: 0 0;
}
.name_run {
    color: #020b27;
    line-height: 25px;
}
#wap_top {
    background: #fff;
    box-shadow: rgba(0, 0, 0, .1) 0 0 20px;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 999;
}
.icon-zalo {
    background-position: -45px -82px;
    width: 26px;
    margin-right: 10px;
}
.icon-email, .icon-zalo {
    background-image: url(../images/sprite.png);
    height: 12px;
}
.icon-email {
    background-position: -124px -82px;
    width: 18px;
}
.icon-about {
    background-position: -208px 0;
    width: 19px;
    margin: 15px 3px 15px 15px;
}
.icon-about {
    background-image: url(../images/sprite.png);
    height: 15px;
}
.big_col, #top {
    max-width: 1280px;
    margin: 0 auto;
}
#top {
    position: relative;
    min-height: 79px;
    padding: 12px 10px;
}
.big_col {
    padding: 24px 10px;
    float: none;
}
.dichvuno1 .col-lg-4 {padding-left: 0; padding-right: 15px;}
p.meta_des_cat { margin-top: 20px; }
.cat-detail.col-lg-9 {
    padding-left: 0;
}
.dichvumoi {
    position: relative;
    top: 15px;
}
.dichvumoiimg {width: 100%;
    box-shadow: 0 8px 16px rgb(0 0 0 / 7%);
    border-radius: 6px;}
#f-carousel {
    margin: 50px -10px 10px;
    display: flex;
    flex-wrap: wrap;
}
#f-carousel .col-lg-4 {
    flex: 0 0 33.333%;
    flex-basis: calc(33.333% - 2%);
    margin: 1%;
    padding: 0;
}
#f-carousel .col-lg-3 {
    flex: 0 0 25%;
    flex-basis: calc(25% - 2%);
    margin: 1%;
    padding: 0;
    border-radius: 7px;
    box-shadow: 0 7px 7px rgb(0 0 0 / 3%);
}

#f-carousel .col-lg-3:hover a{
    color: #f7941d;
}
#f-carousel .col-lg-3:hover, .block_img.col-lg-4:hover {
    box-shadow: 0 6px 12px 0 rgba(0, 0, 0, .1);
    transition: .5s;
}
table.shopping-cart {
    font-size:0.875rem;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    max-width: 800px;
}
table.shopping-cart input {
    border: 1px solid #0f75bc;
    padding: 5px;
    border-radius: 5px;
    max-width: 68px!important;
    text-align: center;
}
table.shopping-cart th {
    font-family: Inter; font-weight: 600;
    border-top: 3px solid #0f75bc;
    padding: 10px 5px;
    color: #0f75bc;
}
table.shopping-cart td {
    border-bottom: 1px solid #ebebeb;
    padding: 15px 0;
}
table.shopping-cart td.pdelete, table.shopping-cart td.pprice, table.shopping-cart th.pprice {
    text-align: right;
}
.pdelete a, .pdelete a:hover {
    color: #c00;
    text-decoration: none;
    border: 0!important;
    font-size:1.5rem;
}
ul#shopping-cart-actions {
    list-style: none;
    text-align: center;
}
ul#shopping-cart-actions li {
    display: inline;
}
form#checkout-order-form input, form#checkout-order-form select {
    width: 100%}
span.message {
    color: #f7941d;
}
.pro-des {
    margin-top: 10px;
}
.related_news {
    padding: 0;
    margin-bottom: 30px;
}
.pro-pro.cattop {background: rgba(244, 244, 244, 0.39) !important;margin-bottom: 25px;}
.mt39 {margin-top: 39px;}
.m39 {margin: 39px 0px;}
.mt10 {margin-top: 10px;}
.mt50 {margin-top: 50px;}
p.subcaticon {
    font-size:0.875rem;
}
p.headcaticon {
    font-family: Inter;
    font-weight: 600;
}
.ivdicon.caticon {
    width: 48%;
}
.dichvuno1 a.title-new {font-size:1.125rem;}
.dichvuno1 {
    color: #606060; margin-top: 10px;
}
.pro-pro {
    background: #f4f4f4;
    margin: 15px 0;
    padding: 15px;
    border-radius: 5px;
    font-size:0.875rem;
}
a.btn.btn_xem_ngay_cat {
    background-color: #f7941d;
    color: #fff;
    width: 39%;
    line-height: 36px;
    font-size:1rem;
    display: inline-block;
    font-family: Inter;
    font-weight: 600;
}
.hotline_cat {
    border: 1px dashed #293f7b;
    width: calc(61% - 20px);
    display: inline-block;
    line-height: 47px;
    border-radius: 6px;
    margin-left: 20px;
    text-align: center;
}
.icon-pro-hai-long {
    background-image: url(../images/sprite.png);
    background-position: -265px 0;
    height: 60px;
    padding-left: 75px;
    background-repeat: no-repeat;
    padding-top: 10px;
    margin-bottom: 10px;
}
.icon-pro-ship {
    background-image: url(../images/sprite.png);
    background-position: -265px -58px;
    height: 60px;
    padding-left: 75px;
    background-repeat: no-repeat;
    padding-top: 5px;
}
.icon-pro-thiet-ke {
    background-image: url(../images/sprite.png);
    background-position: -265px -110px;
    height: 60px;
    padding-left: 75px;
    background-repeat: no-repeat;
    padding-top: 10px;
    margin-bottom: 10px;
}
.icon-pro-gia-tot {
    background-image: url(../images/sprite.png);
    background-position: -265px -167px;
    height: 60px;
    padding-left: 75px;
    background-repeat: no-repeat;
    padding-top: 10px;
    margin-bottom: 10px;
}
.col-nhanvien a {font-size:0.875rem;}
.col-nhanvien {padding:3px 0 3px 55px; font-size:0.875rem;}

#loadingoverlay {
    position: fixed;
    top: 0; left: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
    display: none;
    background: rgba(0,0,0,0.6);
}

.cv-spinner {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px #ddd solid;
    border-top: 4px #2e93e6 solid;
    border-radius: 50%;
    animation: sp-anime 0.8s infinite linear;
        margin-right: 15px;
}

@keyframes sp-anime {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(359deg);
    }
}

.title-product {
       font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.029em;;
}
.thongso {
    border: 1px solid #e5e9f0;
    border-radius: 6px;
    padding: 16px;
    margin-top: 10px;
}
.slide{
    box-shadow: 0 20px 20px rgb(0 0 0 / 5%);
    background: #fff;
    padding: 20px;
    border-radius: 6px;
    position: absolute;
    top: 50px;
    width: calc(100% - 20px);
}
.thongso table {
    font-size:0.875rem;
    margin: 0px 15px;
}
.thongso table tr td:first-child {white-space: nowrap;}
.product-content {
    background: #fff;
}
.portfolio-content {padding: 32px 0 0}
.portfolio-detail .product-content {
    border-radius: 0 0 6px 6px;
    padding: 40px 20px;
    max-width: 800px;
    margin: 1px auto;
}
/* Nut "Xem them"/"Thu gon" cho noi dung san pham (layout_product.php) — scope
   theo class rieng .pd-content-collapsible (KHONG phai bare .product-content)
   de khong anh huong .product-content dung chung o layout_article.php. */
.product-content.pd-content-collapsible {overflow: hidden; transition: max-height .4s ease;}
.product-content.pd-content-collapsible.pd-content-collapsed {position: relative;}
.product-content.pd-content-collapsible.pd-content-collapsed::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 130px;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 55%, #fff 100%);
    pointer-events: none;
    z-index: 3;
}
.pd-content-toggle-wrap {display: flex; justify-content: center; position: relative; z-index: 4; margin: -22px 0 24px;}
.pd-content-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    color: #fff;
    border-radius: 50px;
    padding: 16px 48px;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: background .2s, color .2s;
}
.pd-content-toggle:hover {background: #2f6fed; color: #fff;}
.pd-content-toggle i {font-size: 14px; transition: transform .25s;}
.pd-content-toggle.pd-content-expanded i {transform: rotate(180deg);}
.desc {
    padding: 15px;
}
.bgwhite {
    background: #fff;
}
#logo {
    float: left;
    padding-right: 10px;
}
#search {
    float: right;
}
#txts {
    padding: 5px 7px;
    border-radius: 4px;
    box-shadow: none;
    border: 1px solid #0f75bc;
    margin: 7px 0 0 15px;
    color: #fff;
}
.file {
    padding-top: 13px;
}
#hotline {
    top: 25px;
    right: 6px;
}
#menu {
    float: right;
}
#sky {
    -webkit-border-radius: 4px 4px 4px 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    behavior: url(dh.htc);
}
.fa_li img {
    top: 14px;
    left: 12px;
}
.fa_li {
    float: left;
    padding-bottom: 15px;
    position: relative;
}
.chil_menu {
    position: absolute;
    left: -100px;
}
.ivdicon {
    display: inline-block;
    vertical-align: middle;
}

.file {
    padding-left: 20px;
    width: 105px;
}
.chil_menu li a {
    color: #293f7b;
    margin: 5px 5px 5px 0;
    border-left: 2px solid #293f7b;
    padding-left: 10px;
    line-height: 16px;
}
.chil_menu li {
    width: 170px;
    display: inline-block;
}
.chil_menu li a:hover {
    border-left: 3px solid #f7941d;
}
.chil_menu {
    padding: 20px;
    top: 55px;
    z-index: 9;
    display: none;
    width: 386px;
    background: #fff;
    border-top: none;
    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, .27);
}
.right-yecaubaogia {
    background-color: #dcf1fd;
    box-shadow: 0 20px 20px rgb(0 0 0 / 5%);
    border-radius: 6px;
    padding: 200px 20px 20px;
    margin: 30px 0px 0px 10px;
    background-image: url(/images/nhan-vien-bao-gia.jpg);
    background-repeat: no-repeat;
    text-align: center;background-size: contain;
}
input#txtt, input#txtdt, textarea#txtnd {
    width: 100%;
    border-radius: 6px;
    border: 1px solid #ced4da;
        min-height: 39px;
}

#online {
    background: url(../images/bg-onliner.png) top center no-repeat;
    height: 34px;
    margin: auto;
    padding: 8px 0 0;
}
#main_content {
    background: #eaeffa;
    padding-bottom: 20px;
}
#link_br {
    padding: 24px 0;
    font-size:0.875rem;
}
#news_id, .col-lg-3.right, .content_s {
   
    padding: 10px;
}
.content_s {
    display: flex;
    flex-wrap: wrap;
}
.box_list {
    background: url(../images/sha-f.png) top center no-repeat;
}
.box_list p {
    background: url(../images/page_white_database.png) 0 1px no-repeat;
    margin-left: 10px;
    padding-left: 25px;
    height: 17px;
    width: 210px;
    float: left;
}
 .box_list p a:hover {
    color: #e53838;
}
#info a {
    color: #d9e3ff;
}
.mn_mb {
    background: #293f7b;
    margin: 0 -10px;
    text-align: center;
}
.far_mnm ul li {
    display: inline-block;
    float: left;
    border: 1px dashed #293f7b;
    border-radius: 5px;
    margin: 5px;
}
.far_mnm ul, .mn_mb {
    display: none;
}
.far_mnm {
    background: url(../images/i.png) 95% 17px no-repeat;
}
.mn_mb li a {
    color: #fff;
    display: block;
    padding: 10px 0;
    font-weight: 400;
    text-transform: uppercase;
}
#info {
    color: #d9e3ff;
    font-size:0.875rem;
    line-height: 1.3;
}
.mn_mb li {
    border-top: 1px solid #3d5bad;
    border-bottom: 1px solid #1d2d57;
}
#info p {
    padding-bottom: 5px;
}
.box_list p a {
    color: #020b27;
}
#camket {
    background: url(../images/camket.png) top center no-repeat, url(../images/main_22.png) bottom center no-repeat;
    padding: 55px 0 36px;
}
.f_col img {
    float: left;
    width: 35px;
    margin-right: 5px;
}
.f_col a:hover {
    color: #000;
}
.f_col a {
    display: block;
    background: url(../images/Gnome-Emblem-Default-64.png) 0 5px no-repeat;
    padding-top: 7px;
    padding-bottom: 10px;
    padding-left: 27px;
    color: #595959;
    background-size: 22px;
}

 .name_new, .shor_run {
    color: #6b7280;
}
.f_col {
    padding-right: 10px;
    width: 20%;
    float: left;
    margin-top: 9px;
}
.shor_run {
    margin: 10px 0;
    font-size:0.875rem;
}
 .title_box h3 {
    color: #020b27;
}
.clear {
    clear: both;
    height: 36px;
}
.title_box {
    width: 100%;
    position: relative;
}
.title_box h1, .title_box h2, .title_box h3, h2.title_box {
    font-size:1.5rem;font-weight: 700; letter-spacing: -0.029em;margin: 0;
}
.top_mb {
    display: none;
}
.cc_mb {
    display: none;
}
.cc_mb .f_col {
    width: auto!important;
    height: 200px;
}
.cc_mb {
    height: 50px;
}
.content-cat {
    display: flex;
    flex-wrap: wrap;
    background: #fff;
    padding: 10px;
    box-shadow: 0 20px 20px rgb(0 0 0 / 5%);
    border-radius: 6px;
}
.content-portfolio {
    display: flex;
    flex-wrap: wrap;
    margin: 50px -10px;
}
.thumb-portfolio {
    width: 100%;
    border-radius: 6px 6px 0 0;
}
.thumb-portfolio:before {
    content: "";
    width: 100%;
    min-height: 200px;
    background: -webkit-linear-gradient(0deg,rgba(0,0,0,1),rgba(0,0,0,0) 68%,rgba(0,0,0,0));
    background: linear-gradient(0deg,rgba(41,63,123,1),rgba(41,63,123,0) 68%,rgba(41,63,123,0));
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    transition: all .3s;
}
.content-portfolio .block_img.col-lg-4 {
    flex: 0 0 33.33%;
    flex-basis: calc(33.33% - 2%);
    border: 1px solid #ececec;
    border-radius: 10px;
    margin: 1%;
    padding: 0;
    background: rgba(41,63,123,1);
}
a.title-new.title-portfolio {
    color: #fff;
}
 .content-cat .block_img.col-lg-4 {
    flex: 0 0 33.33%;
    flex-basis: calc(33.33% - 2%);
    border: 1px solid #ececec;
    border-radius: 0 0 10px 10px;
    margin: 1%;
    padding: 0;
}
.des-item {
    padding: 15px;
}
p#name_new a {
    line-height: 1.5;
    font-size:1rem;
}
p#shor_n {
    margin-top: 10px;
    color: #606060;
}
img.thumb-cat {
    width: 100%}
.btn_yeucaubaogia span {    display: block;
    font-family: Inter;
    font-size:0.875rem;
    font-weight: 400;}
.nodata {
    background: #fff;
    box-shadow: 0 20px 20px rgb(0 0 0 / 5%);
    text-align: center;
    padding: 39px 0;
    border-radius: 6px;
}
.product-content a img,
.portfolio-content a img {
    border-top: 10px solid #ff0000;
}
.product-content table a img,
.portfolio-content table a img {
    border-top: 0px
}
.portfolio-banner:before {
    content: '';
    position: absolute;
       top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: -webkit-linear-gradient(0deg,rgba(41,63,123,0.79),rgba(41,63,123,0.79) 42%,rgba(41,63,123,1));
    background: linear-gradient(0deg,rgba(41,63,123,0.79),rgba(41,63,123,0.79) 42%,rgba(41,63,123,1));
    }
.head-portfolio {
    position: absolute;
    color: #bbbbbb;
    text-align: center;
    top: 30%;
    left: 0;
    width: 100%;
}
.head-portfolio h1 {
    color: #fff;
    font-size:1.25rem;
    font-family: Inter;
    font-weight: 600;
    margin-top: 10px;
    line-height: 1.5;
    text-transform: none;
}
.head-portfolio a {
    color: #bbbbbb;
}
.thumb-cat {
    margin: 10px 10px 0px;
    border-radius: 6px;
}
.bg_head_portfolio {min-height: 239px;
    background-repeat: no-repeat !important;
    background-position: center right !important;
    background-size: contain !important;
    margin-top: -80px;
    border-bottom-right-radius: 160px;}
.top_head_portfolio {height: 100%;
    padding-top: 39px;}
.title_portfolio_head h1 {font-size:1.125rem; font-weight: 600; font-family: Inter; margin: 10px 0px;}
@media (max-width:991px) {
 .cc_pc {
    display: none;
}
.cc_mb {
    display: block;
}
#menu, #top {
    display: none;
}
.top_mb {
    position: -webkit-sticky;
    position: sticky;
    background: #fff;
    box-shadow: rgba(0, 0, 0, .1) 0 0 20px;
    z-index: 999;
    top: 0;
}
#wap_top {
    height: auto;
}
 .top_mb {
    display: block;
}
}

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

.dichvuno1 .col-lg-4 { position: absolute; top: 55px; width: 215px; margin-left: 20px; z-index: 1; }
.pro-pro.cattop{margin-top: 35px; padding:25px 0 25px 240px; }
.dichvumoihead { margin-left: 245px; }
.dichvuno1 .col-lg-8 {width: 100%; padding: 0}
#f-carousel .col-lg-3 {
    flex: 0 0 33.333%;
    flex-basis: calc(33.333% - 2%);
}
#info {
    text-align: center;
}
 #info {
    width: 100%}
#camket, .block_img {
    margin-bottom: 10px;
}
.f_col {
    width: auto;
}
.box_list {
    background: 0 0;
}

}@media only screen and (max-width:767px) {
    .pro-des .col-lg-4 {
    width: 100%;
}
    .pro-des .col-lg-5 {
    width: 100%;
}
div#pro-image {
    margin-top: 15px;
}
    .pro-pro.cattop { margin-top: 139px; padding: 20px; }
    .dichvuno1 .col-lg-4 {margin-left: 0px;}
    .dichvumoihead { margin-left: 225px; }
.box_list p {
    width: 172px;
}
#news_detail img,
.portfolio-content img {
    width: 100%!important;
    height: auto!important;
}

    #f-carousel .col-lg-3,#f-carousel .col-lg-4, .content-portfolio .block_img.col-lg-4 {    flex: 0 0 50%;
    flex-basis: calc(50% - 2%);}
    .content-portfolio {margin: 79px -10px 10px;}

}@media (max-width:640px) {
     .content-cat .block_img.col-lg-4 {
    flex: 0 0 50%;
    flex-basis: calc(50% - 2%);
}
.online_row {
    width: calc(50% - 20px);
}
}@media only screen and (max-width:600px) {
    .bg_head_portfolio {width: 100%;
    margin-top: 10px;}
    .top_head_portfolio .col-lg-8 {width: 100%;}
     a.mau_thiet_ke_btn {width: 79%;}
    .ivdicon.caticon {width: 100%;}
    .dichvuno1 .col-lg-4 {width: 150px;}
    .dichvumoihead {
    margin-left: 160px;
}
.pro-pro.cattop { margin-top: 55px;}
a.btn.btn_xem_ngay_cat {width: 100%;}
.hotline_cat {width: 100%; margin-left: 0; margin-top: 10px;}
}@media only screen and (max-width:480px) {
    .thumb-portfolio, .thumb-portfolio:before {min-height: 32vw !important;}
    .portfolio-detail #news_detail,
    .portfolio-detail .portfolio-content {margin-top: 0px;}
    .dichvuno1 .col-lg-4 {position: relative; width: 100%; top: 0; text-align: center; padding: 0; z-index: 0;}
    .dichvumoihead {    margin-left: 0;
    margin-top: 20px;
    padding: 10px 0;}
    .pro-pro.cattop {margin-top: 0; padding: 10px 0 0;}
#f-carousel  {margin: 79px -10px 10px;}

}@media (max-width:425px) {
     .content-cat .block_img.col-lg-4 {
    flex: 100%}

img.thumb-cat {
    height: auto;
}
.online_row {
    width: calc(100% - 20px);
}
}

.slide-col-nv {width: fit-content;
    margin: 0 auto;
}
.col-centered {
    float: none;
    margin: 0 auto;
}


        /* ----- BẮT ĐẦU PHẦN CSS CHO CTA-POST ----- */

        /* Khối chứa các nút CTA bên trái */
        
        /* Khối chứa hình ảnh bên phải */
        
        /* ----- CSS MỚI CHO CÁC NÚT CTA BÊN TRONG KHỐI XANH ----- */

        /* ----- GIAO DIỆN CHO MÀN HÌNH NHỎ HƠN 768px (hoặc tùy chỉnh) ----- */
.product-content img,
.portfolio-content img {border-radius: 8px}

.hdr-clearfix {clear:both}
.mm-trigger-li {margin-right:8px}

/* Facebook Messenger chat widget positioning */
#ar-fb-chat{display: none;}
#ar-fb-chat.active{display: block;}

/* Shared SVG icon helpers — replaces Font Awesome (fa-star/fa-spinner/fa-eye),
   which was never actually loaded on the site (icons were rendering blank). */
.ivd-icon{display:inline-block;vertical-align:middle;}
.ivd-star{display:inline-block;vertical-align:middle;color:#f7941d;}
.ivd-star-half{position:relative;display:inline-block;width:16px;height:16px;vertical-align:middle;color:#f7941d;}
.ivd-star-half svg{position:absolute;top:0;left:0;}
.ivd-star-half-fg{clip-path:inset(0 50% 0 0);}
.ivd-spin{animation:ivd-spin .8s linear infinite;}
@keyframes ivd-spin{to{transform:rotate(360deg);}}

/* Quiet the focus outline on mouse click (BS3's theme did this via
   outline-offset:-2px; BS5 dropped it), keep it for real keyboard/
   screen-reader focus via :focus-visible so accessibility isn't lost. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
.btn:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}
/* Yêu cầu báo giá — standalone popup, no framework dependency (matches the
   consultant-carousel decision: works identically on BS3 and BS5 pages). */
.ivd-quote-overlay{position:fixed;inset:0;z-index:99990;display:none;align-items:center;justify-content:center;background:rgba(20,26,51,.55);padding:20px;overflow-y:auto;}
.ivd-quote-overlay.active{display:flex;}
.ivd-quote-modal{position:relative;background:linear-gradient(rgb(165, 212, 255) 0%, rgb(255, 255, 255) 150px);border-radius:12px;max-width:440px;width:100%;max-height:92vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.25);padding:32px 24px;}
.ivd-quote-close{position:absolute;top:38px;right:24px;background:none;border:none;font-size:26px;line-height:1;color:#8a94ad;cursor:pointer;padding:4px 8px; background: #fff; border-radius: 50%;}
.ivd-quote-close:hover{color:#1250dc;}
.ivd-quote-sub-title {color:#4a4f63; font-size:0.875rem;margin-bottom: 24px; }
.ivd-quote-logo{display:block;max-height:35px;    margin-bottom: 20px;}
.ivd-quote-title { margin-bottom: 6px; font-size: 1.25rem; font-weight: 700; position: relative; }
.ivd-quote-field{margin-bottom:14px;}
.ivd-quote-field label{display:block;margin-bottom:6px; font-size: 0.875rem}
.ivd-quote-required{color:#e53838;}
.ivd-quote-optional{color:#4a4f63;font-weight:400;font-size:0.75rem;}
.ivd-quote-field input,.ivd-quote-field textarea{width:100%;box-sizing:border-box;border:1px solid #dfe3ee;border-radius:6px;padding:10px 12px;font-size:16px;font-family:inherit;color:#333;transition:border-color .15s;}
.ivd-quote-field input:focus,.ivd-quote-field textarea:focus{outline:none;border-color:#1250dc;}
.ivd-quote-field textarea{resize:vertical;min-height:70px;}

.ivd-quote-hp{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden;}

.ivd-quote-error{display:none;background:#FEF3F2;color:#D92D20;border-radius:6px;padding:9px 12px;font-size:0.875rem;margin-bottom:12px;}
.ivd-quote-error.active{display:block;}

.ivd-quote-submit-btn { width: 100%; color: #fff; border: none; border-radius: 50px; padding: 16px 48px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: opacity .15s; font-size:0.875rem; font-weight:600 }
.ivd-quote-submit-btn:disabled{opacity:.65;cursor:not-allowed;}
.ivd-quote-spinner{display:none;width:16px;height:16px;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;animation:ivd-quote-spin .7s linear infinite;}
.ivd-quote-submit-btn.loading .ivd-quote-spinner{display:inline-block;}
.ivd-quote-submit-btn.loading .ivd-quote-submit-label{opacity:.7;}
@keyframes ivd-quote-spin{to{transform:rotate(360deg);}}

.ivd-quote-callnow{margin-top:20px;}
.ivd-quote-callnow__divider{display:flex;align-items:center;gap:10px;margin:0 0 16px;color:#4a4f63;font-size:0.875rem;text-align:center;}
.ivd-quote-callnow__divider::before,.ivd-quote-callnow__divider::after{content:'';flex:1;border-top:1px dashed #d8dce3;}
.ivd-quote-callnow__list{display:flex;gap:12px;}
.ivd-quote-callnow__item{flex:1;display:flex;align-items:center;gap:10px;}
.ivd-quote-callnow__icon{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:1.5px solid #1250dc;color:#1250dc;font-size:16px;flex-shrink:0;}
.ivd-quote-callnow__text{display:flex;flex-direction:column;min-width:0;}
.ivd-quote-callnow__row-label{font-size:0.75rem;color:#6b7280;}
.ivd-quote-hotline{color:#1250dc;font-weight:700;text-decoration:none;font-size:0.875rem;white-space:nowrap;}
@media(max-width:576px){
    .ivd-quote-callnow__item{flex-direction:column;text-align:center;}
}

.ivd-quote-panel{display:none;}
.ivd-quote-panel.active{display:block;}
.ivd-quote-panel--success{text-align:center;padding:10px 0;}
.ivd-quote-check{width:64px;height:64px;line-height:64px;border-radius:50%;background:#e8f8ef;color:#1fa856;font-size:32px;margin:0 auto 18px;}
.ivd-quote-thanks{margin-bottom:24px;}
.ivd-quote-done-btn{background:#1250dc;color:#fff;border:none;border-radius:6px;padding:11px 32px;font-size:14px;font-weight:600;cursor:pointer;}
.ivd-quote-done-btn:hover{background:#1f2f5c;}

/* Trigger button, used by [quote_button] shortcode + any element with class js-quote-trigger */
.ivd-quote-trigger-btn{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(90deg,#f7941d,#f26522);color:#fff;border:none;border-radius:6px;padding:10px 20px;font-size:14px;font-weight:700;cursor:pointer;text-decoration:none;}
.ivd-quote-trigger-btn:hover{opacity:.9;color:#fff;}

@media(max-width:480px){
    .ivd-quote-modal{padding:26px 18px 20px;border-radius:10px;}
    .ivd-quote-title{font-size:19px;}
}

/* Bao gia nhung trong bai viet ([quote_form] shortcode) — the bo tron nen xanh
   xam nhat, shadow "step" (khong blur) lech xuong-phai kieu the chong the, dau
   ngoac kep lon nhat lam hoa tiet goc trai tren. */
.ivd-quote-inline-wrap { position: relative; background: #eaeffa; border-radius: 20px; padding: 44px 20px 20px; margin: 32px 0; box-shadow: 6px 6px 0 0 #cbd7f1; }
.ivd-quote-inline-wrap::before{content:'\201C';position:absolute;top:4px;left:20px;font-size:4.5rem;font-weight:800;line-height:1;color:#d7dee6;font-family:Georgia,'Times New Roman',serif;pointer-events:none;}
.ivd-quote-inline-wrap .ivd-quote-form,
.ivd-quote-inline-wrap .ivd-quote-inline-success{position:relative;z-index:1;}
.ivd-quote-inline-title{position:relative;z-index:1;margin:0 0 6px;font-size:1.5rem;font-weight:700; letter-spacing: -0.029em;}
.ivd-quote-inline-subtitle{position:relative;z-index:1;margin:0 0 20px;font-size:0.875rem;color:#4a4f63;}
@media(max-width:480px){
    .ivd-quote-inline-wrap{padding:38px 20px 24px;border-radius:16px;box-shadow:6px 6px 0 0 #d7dee6;}
    .ivd-quote-inline-wrap::before{font-size:3.5rem;left:16px;}
    .ivd-quote-inline-title{font-size:19px;}
}

/* Footer "Đăng ký nhận ưu đãi" — full-width banner, nam tren cung footer. */
.ivd-footer-newsletter{background:#005EDB;padding:28px 0;}
.ivd-fsub-card{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.ivd-fsub-left{display:flex;align-items:flex-start;gap:14px;flex:1;min-width:260px;}
.ivd-fsub-icon{flex-shrink:0;width:48px;height:48px;border-radius:12px;background:rgba(255,255,255,.16);color:#fff;display:flex;align-items:center;justify-content:center;}
.ivd-fsub-icon svg{width:24px;height:24px;}
.ivd-fsub-title{margin:0 0 4px;font-weight:600;color:#fff;}
.ivd-fsub-desc{margin:0;font-size:0.875rem;color:#cfe0fb;line-height:1.5;}

.ivd-fsub-form{display:flex;flex-shrink:0;flex-wrap:wrap;}
.ivd-fsub-hp{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden;}
.ivd-fsub-input{width:260px;box-sizing:border-box;border:none;border-radius:8px 0 0 8px;background:#fff;padding:12px 16px;font-size:16px;color:#1a2033;font-family:inherit;}
.ivd-fsub-input::placeholder{color:#9aa1ad;}
.ivd-fsub-input:focus{outline:none;box-shadow:0 0 0 2px rgba(255,255,255,.5);}
.ivd-fsub-btn{border:none;border-radius:0 8px 8px 0;background:#eaeffa;color:var(--ivd-brand,#005EDB);font-size:0.875rem;font-weight:600;padding:12px 26px;cursor:pointer;white-space:nowrap;transition:opacity .15s;}
.ivd-fsub-btn:hover{opacity:.85;}
.ivd-fsub-btn:disabled{opacity:.6;cursor:not-allowed;}

.ivd-fsub-msg{flex-basis:100%;font-size:0.875rem;margin-top:2px;display:none;}
.ivd-fsub-msg.active{display:block;}
.ivd-fsub-msg.success{color:#b8f5cf;}
.ivd-fsub-msg.error{color:#ffd1d1;}

@media(max-width:991px){
    .ivd-fsub-card{flex-direction:column;align-items:stretch;}
    .ivd-fsub-form{width:100%;}
    .ivd-fsub-input{width:auto;flex:1;min-width:0;}
}

/* Footer main content (info / consultant team / policy menu) + bottom bar. */

/* Footer dung chung class .big_col (giong moi khoi noi dung khac tren site) de
   dong bo width 1280px thay vi .container Bootstrap (chi 1130px). .big_col von
   co padding-top/margin-bottom danh cho cac block trang chu nen can reset lai
   cho dung ngu canh footer (cac section da tu quan ly khoang cach doc rieng). */
.ivd-footer-newsletter > .container.big_col,
.ivd-footer-main > .container.big_col,
.ivd-footer-bottom > .container.big_col {
    padding-top: 0;
    margin-bottom: 0;
}

.ivd-footer-main {
    background: #fff;
    padding: 48px 0 32px;
}

.ivd-footer-heading {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    margin: 0 0 18px;
    position: relative;
}

.ivd-footer-heading--social,
.ivd-footer-heading--policy {
    margin-top: 16px;
}

.ivd-footer-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
}

.ivd-footer-col--info    { flex: 1 1 340px; max-width: calc(33.333% - 22px); }
.ivd-footer-col--consult { flex: 2 1 480px; max-width: calc(50% - 22px); }
.ivd-footer-col--menu    { flex: 1 1 180px; max-width: calc(16.667% - 21px); }

/* ---- Cot 1: Thong tin doanh nghiep ---- */
.ivd-info-block {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}
.ivd-info-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #e8f0fe;
    color: var(--ivd-brand, #005EDB);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}
.ivd-info-block strong {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 4px;
}
.ivd-info-block p {
    margin: 0;
    font-size: 0.875rem;
    color: #6b7280;
    line-height: 1.5;
}
.ivd-info-block p a {
    color: inherit;
    text-decoration: none;
}
.ivd-info-block p a:hover {
    color: #1250DC;
}
.ivd-info-icon--zalo svg { width: 22px; height: 22px; display: block; }

.ivd-social-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.ivd-social-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #e5e7eb;
    color: var(--ivd-brand, #005EDB);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    transition: background 0.15s, color 0.15s;
}
.ivd-social-btn:hover {
    background: var(--ivd-brand, #005EDB);
    color: #fff;
}

/* ---- Cot giua: Doi ngu tu van ---- */
.ivd-consult-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.ivd-consult-card {
    flex: 0 0 calc(33.333% - 11px);
    box-sizing: border-box;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 20px 14px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: box-shadow 0.2s, border-color 0.2s;
}
.ivd-consult-card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    border-color: var(--ivd-brand, #005EDB);
}
/* Anh dai dien lay tu cot online.anh_dai_dien (upload/chon thu vien trong
   module Ho tro truc tuyen), render bang <img> that trong PHP — KHONG con
   dung sprite anh chung + background-position dinh toa do tay theo tung ID
   nhu truoc nua. CSS o day chi con lo khung tron/kich thuoc/can giua, khong
   con logic "chon dung anh" nao ca. */
.ivd-consult-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #edf6ff;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.375rem;
    color: #9aa4b2;
    flex-shrink: 0;
}
.ivd-consult-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    padding: 3px;
    border-radius: 50%;
}
.ivd-consult-name {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 8px;
}
.ivd-consult-phone {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    color: #6b7280;
    text-decoration: none;
    margin-bottom: 16px;
}
.ivd-consult-phone:hover { color: var(--ivd-brand, #005EDB); text-decoration: none; }
.ivd-consult-phone i { color: var(--ivd-brand, #005EDB); font-size: 1rem; }
.ivd-consult-zalo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #e8f0fe;
    color: #0068ff;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 20px;
    text-decoration: none;
    transition: background 0.15s;
}
.ivd-consult-zalo:hover { background: #d6e6fe; color: #0068ff; text-decoration: none; }

/* ---- Cot phai: Ve chung toi + Huong dan & Chinh sach ---- */
.ivd-footer-links {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
}
.ivd-footer-links li { margin-bottom: 12px; }
.ivd-footer-links a {
    font-size: 0.875rem;
    text-decoration: none;
    transition: color 0.15s;
}
.ivd-footer-links a:hover { color: #1250dc; text-decoration: none; }

/* ---- Cot phai: toggle bang <details>/<summary>, khong can JS ---- */
.ivd-footer-toggle summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ivd-footer-toggle summary::-webkit-details-marker { display: none; }
.ivd-footer-toggle summary::marker { content: ""; }
.ivd-footer-caret {
    flex-shrink: 0;
    font-size: 1rem;
    color: #6b7280;
    transition: transform 0.2s;
}
.ivd-footer-toggle[open] .ivd-footer-caret { transform: rotate(180deg); }

/* ---- Footer bottom ---- */
.ivd-footer-bottom {
    background: #fff;
    padding: 18px 0;
}
.ivd-footer-bottom > .container {
    border-top: 1px solid #e5e7eb;
    padding-top: 18px;
}
.ivd-footer-bottom__inner {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    margin-top: 15px;
}
.ivd-footer-bct { flex-shrink: 0; display: block; }
.ivd-footer-bct img { display: block; height: 56px; width: auto; }
.ivd-footer-logo-mobi { flex-shrink: 0; display: block; width: auto; }
.ivd-footer-copyright {
    font-size: 0.875rem;
    color: #6b7280;
    line-height: 1.6;
}
.ivd-footer-copyright a {
    color: inherit; font-weight: 600;
}
.ivd-footer-copyright a:hover { color: var(--ivd-brand, #005EDB); }

/* ---- Responsive ---- */
@media (min-width: 992px) {
    .ivd-footer-toggle summary { pointer-events: none; cursor: default; }
    .ivd-footer-toggle .ivd-footer-caret { display: none; }
}
@media (max-width: 991px) {
    .ivd-footer-col--info,
    .ivd-footer-col--consult,
    .ivd-footer-col--menu {
        max-width: 100%;
        flex-basis: 100%;
    }
    .ivd-footer-toggle .ivd-footer-links { margin-top: 12px; }
    .ivd-footer-toggle summary {padding: 15px 0; border-bottom: 1px solid #e5e7eb; margin: 0;}
}
@media (max-width: 575px) {
    .ivd-consult-grid { gap: 10px; }
    .ivd-consult-card { flex: 0 0 calc(50% - 5px); }
    .ivd-footer-bottom__inner { flex-direction: column; align-items: flex-start; text-align: left; }
}

/* =================================================================
   MEGA MENU – Frontend Styles
   ================================================================= */

/* ---- Trigger Button ---- */
.mm-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    background: #005EDB;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size:0.875rem;
    font-weight: 500;
    font-family: Inter, -apple-system, sans-serif;
    transition: background 0.2s, transform 0.1s;
    user-select: none;
    line-height: 1.4;
    text-decoration: none;
}
.mm-trigger:hover { background: #0048ad; color: #fff; text-decoration: none; }
.mm-trigger:active { transform: scale(0.98); }
.mm-trigger-icon { font-size:1rem; line-height: 1; }

/* ---- Overlay ---- */
#mm-overlay {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0; /* overridden by JS to start below header */
    background: rgba(0, 0, 0, 0.45);
    z-index: 9998;
    opacity: 0;
    transition: opacity 0.25s ease;
}
#mm-overlay.is-visible { display: block; }
#mm-overlay.is-active  { opacity: 1; }

/* ---- Wrapper: dropdown on all screen sizes ---- */
#mega-menu-wrapper {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: #fff;
    border-top: 3px solid var(--ivd-brand, #005EDB);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14);
    z-index: 9999;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    max-height: 80vh;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #9ca3af #e5e7eb;
}
#mega-menu-wrapper::-webkit-scrollbar { width: 4px; }
#mega-menu-wrapper::-webkit-scrollbar-button { display: none; }
#mega-menu-wrapper::-webkit-scrollbar-track { background: #e5e7eb; }
#mega-menu-wrapper::-webkit-scrollbar-thumb { background: #9ca3af; border-radius: 0; }
#mega-menu-wrapper::-webkit-scrollbar-thumb:hover { background: #6b7280; }
#mega-menu-wrapper.is-open    { display: block; }
#mega-menu-wrapper.is-visible { opacity: 1; transform: translateY(0) !important; }

/* Desktop: constrain to container, centered, rounded */
@media (min-width: 992px) {
    #mega-menu-wrapper {
        left: 50%;
        right: auto;
        width: min(1280px, calc(100% - 40px));
        transform: translateX(-50%) translateY(-8px);
        border-radius: 0 0 10px 10px;
        margin-top: 0;
    }
    #mega-menu-wrapper.is-visible {
        transform: translateX(-50%) translateY(0) !important;
    }
}

/* ---- Inner container ---- */
.mega-menu-inner {
    padding: 24px 20px;
    max-width: 1280px;
    margin: 0 auto;
}

/* ---- Mobile close button ---- */
#mm-mobile-close {
    display: none;
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--ivd-brand, #005EDB);
    color: #fff;
    padding: 13px 18px;
    font-size:0.875rem;
    font-weight: 500;
    cursor: pointer;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    border: none;
    width: 100%;
    text-align: left;
    font-family: Inter, sans-serif;
}

/* ---- Block spacing ---- */
.mm-block { margin-bottom: 15px; }
.mm-block:last-child { margin-bottom: 0; }

/* ---- Block title ---- */
.mm-block__title {
    font-size:0.875rem;
    font-weight: 600;
    color: var(--ivd-brand, #005EDB);
    text-transform: uppercase;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e7eb;
}

/* ---- More link ---- */
.mm-more-link {
    display: inline-block;
    margin-top: 12px;
    font-size:0.875rem;
    color: #1250dc;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.15s;
}
.mm-more-link:hover { color: #0d46c8; text-decoration: underline; }

/* ---- Banner ---- */
.mm-banner-list {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.mm-banner-item {
    flex: 1;
    min-width: 0;
    display: block;
    border-radius: 6px;
    overflow: hidden;
    transition: opacity 0.2s;
}
.mm-banner-item:hover { opacity: 0.9; }
.mm-banner-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
}

/* ---- Category Grid ---- */
.mm-cat-grid.row { margin: 0 -6px; }
.mm-cat-item { padding: 0 6px; margin-bottom: 10px; }
.mm-cat-item a {
    display: block;
    padding: 10px 8px;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.2s;
    border: 1px solid transparent;
}
.mm-cat-item a:hover { background: #f3f4f6; border-color: #e5e7eb; color: #1250dc; text-decoration: none; }
.mm-cat-img {
    width: 100%;
    height: 72px;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 6px;
    display: block;
}
.mm-cat-name {
    display: block;
    font-size:0.75rem;
    font-weight: 500;
    text-align: center;
    line-height: 1.3;
}

/* ---- Icon Grid ---- */
.mm-icon-grid.row { margin: 0 -6px; }
.mm-icon-item { padding: 0 6px; margin-bottom: 10px; }
.mm-icon-item a {
    display: block;
    padding: 12px 8px;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.2s;
    text-align: center;
}
.mm-icon-item a:hover { background: #f3f4f6; text-decoration: none; }
.mm-icon-wrap {
    display: block;
    font-size:1.75rem;
    margin-bottom: 6px;
    line-height: 1;
}
.mm-icon-wrap svg {
    width: 1.25em;
    height: 1.25em;
    display: block;
    margin: 0 auto;
}
.mm-icon-label {
    display: block;
    font-size:0.875rem;
    font-weight: 500;
    line-height: 1.3;
}

/* ---- Product Grid ---- */
.mm-product-grid {
    margin-bottom: -10px; /* offset item bottom margin */
}
.mm-product-item {
    margin-bottom: 10px;
    padding-left: 6px;
    padding-right: 6px;
    display: flex;
}
.mm-product-img {
    margin: 10px;
}
.mm-product-item a {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-decoration: none;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    transition: box-shadow 0.2s, border-color 0.2s;
    background: linear-gradient(rgba(255, 255, 255, 0.2) 0%, #fff 100%);
}
.mm-product-item a:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.1); border-color: var(--ivd-brand, #005EDB); text-decoration: none; color: #333; }
.mm-product-img img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
    border-radius: 6px;
}
.mm-product-name {
    padding: 8px 8px 4px 10px;
    font-size:0.875rem;
    font-weight: 500;
    line-height: 1.4;
    min-height: 2.8em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mm-product-rating {
    padding: 2px 8px 4px;
    font-size:0.6875rem;
    color: #f5a623;
    white-space: nowrap;
}
.mm-rating-val {
    color: #888;
    font-size:0.6875rem;
    vertical-align: middle;
}
.mm-product-price {
    padding: 0 8px 4px;
    font-size:0.6875rem;
    color: #555;
}
.mm-price-val {
    font-weight: 600;
    color: #c0392b;
}
.mm-product-desc {
    padding: 0 8px 6px;
    font-size:0.6875rem;
    color: #777;
    line-height: 1.4;
}
.mm-product-btn {
    display: block;
    margin: 4px 8px 8px;
    padding: 5px 10px;
    background: var(--ivd-brand, #005EDB);
    color: #fff;
    border-radius: 4px;
    font-size:0.6875rem;
    text-align: center;
    font-weight: 500;
}

/* ---- Article List ---- */
.mm-article-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}
.mm-article-item a {
    display: flex;
    gap: 10px;
    text-decoration: none;
    padding: 8px;
    border-radius: 6px;
    transition: background 0.2s;
    align-items: flex-start;
}
.mm-article-item a:hover { background: #f3f4f6; text-decoration: none; color: #333; }
.mm-article-img {
    width: 68px;
    height: 48px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}
.mm-article-body { flex: 1; min-width: 0; }
.mm-article-title {
    font-size:0.875rem;
    font-weight: 500;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mm-article-desc {
    font-size:0.6875rem;
    color: #888;
    margin-top: 4px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- Template Grid ---- */
.mm-template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
}
.mm-template-item a {
    display: block;
    text-decoration: none;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.mm-template-item a:hover { border-color: var(--ivd-brand, #005EDB); box-shadow: 0 4px 12px rgba(0,94,219,0.12); text-decoration: none; }
.mm-template-item img {
    width: 100%;
    height: 90px;
    object-fit: cover;
    display: block;
}
.mm-template-name {
    padding: 6px;
    font-size:0.6875rem;
    font-weight: 500;
    text-align: center;
    line-height: 1.3;
}

/* ---- HTML Block ---- */
.mm-html-content { font-size:0.875rem; line-height: 1.6; }

/* ---- Empty state ---- */
.mm-empty-state {
    text-align: center;
    padding: 30px;
    color: #999;
    font-size:0.875rem;
}

/* ---- Divider item in nav ---- */
.mm-nav-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px 6px;
    font-size:0.75rem;
    color: #6b7280;
    margin-top: 4px;
    white-space: nowrap;
}
.mm-nav-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}
.mm-nav-divider:first-child { margin-top: 0; }

/* ---- Link item in nav ---- */
.mm-nav-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    font-size:0.875rem;
    font-weight: 500;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.mm-nav-link:hover {
    background: #f3f4f6;
    color: #1250dc;
    border-left-color: var(--ivd-brand, #005EDB);
    text-decoration: none;
}

/* ---- Layout nav-only (no panels) ---- */
.mm-layout--nav-only .mm-nav-col { border-right: none; }

/* ---- Icon image in icon grid ---- */
.mm-icon-img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 4px;
    display: block;
    margin: 0 auto;
}

/* ---- Two-column layout: Menu Cha (nav) + Block content ---- */
.mm-layout {
    display: flex;
    min-height: 200px;
}
.mm-nav-col {
    width: 200px;
    flex-shrink: 0;
    border-right: 1px solid #e5e7eb;
}
.mm-nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 16px;
    font-size:0.875rem;
    font-weight: 500;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    user-select: none;
}
.mm-nav-item:hover {
    background: #f3f4f6;
    color: #1250dc;
    border-left-color: #e5e7eb;
}
.mm-nav-item.is-active {
    background: #f3f4f6;
    color: var(--ivd-brand, #005EDB);
    font-weight: 500;
    border-left-color: var(--ivd-brand, #005EDB);
}
.mm-nav-caret {
    margin-left: auto;
    font-size:1rem;
    opacity: 0.35;
    flex-shrink: 0;
    transition: opacity 0.15s;
}
.mm-nav-item.is-active .mm-nav-caret,
.mm-nav-item:hover .mm-nav-caret { opacity: 0.75; }
/* Tu 768px tro len (ca tablet lan desktop): submenu mo kieu flyout sang ben
   canh (2 cot nav+content, xem @media min-width:768px ben duoi) nen caret
   phai chi PHAI, khong phai xuong. Icon goc van la 1 glyph duy nhat
   (ph-caret-down, PHP render) — chi xoay bang CSS thay vi doi class theo
   breakpoint. Duoi 768px (mobile that su) giu nguyen huong xuong mac dinh
   cua glyph — xem @media max-width:767px ben duoi de biet hanh vi xoay
   180deg khi mo accordion. */
@media (min-width: 768px) {
    .mm-nav-caret { transform: rotate(-90deg); }
}
.mm-content-col {
    flex: 1;
    min-width: 0;
    padding: 16px 20px;
}
.mm-panel { display: none; }
.mm-panel.is-active { display: block; }
.mm-panel-empty {
    color: #aaa;
    font-size:0.875rem;
    padding: 20px 0;
    text-align: center;
}

/* ---- Tablet/Desktop (2-column row layout): only .mm-content-col scrolls,
   .mm-nav-col stays fixed in place while browsing a long panel ---- */
@media (min-width: 768px) {
    #mega-menu-wrapper { overflow: hidden; }
    .mega-menu-inner {
        display: flex;
        flex-direction: column;
        max-height: 80vh;
        overflow: hidden;
        box-sizing: border-box;
    }
    .mm-layout { flex: 1; min-height: 0; }
    .mm-nav-col { overflow-y: auto; }
    .mm-content-col {
        overflow-y: auto;
        min-height: 0;
        scrollbar-width: thin;
        scrollbar-color: #9ca3af #e5e7eb;
    }
    .mm-content-col::-webkit-scrollbar { width: 4px; }
    .mm-content-col::-webkit-scrollbar-button { display: none; }
    .mm-content-col::-webkit-scrollbar-track { background: #e5e7eb; }
    .mm-content-col::-webkit-scrollbar-thumb { background: #9ca3af; border-radius: 0; }
    .mm-content-col::-webkit-scrollbar-thumb:hover { background: #6b7280; }
}

/* ---- Visibility control ---- */
@media (min-width: 992px)  { .mm-hide-desktop { display: none !important; } }
@media (min-width: 768px) and (max-width: 991px) { .mm-hide-tablet { display: none !important; } }
@media (max-width: 767px)  { .mm-hide-mobile  { display: none !important; } }

/* ---- Tablet: full-width dropdown, two-column layout ---- */
@media (max-width: 991px) {
    .mega-menu-inner { padding: 12px; }
    .mm-template-grid { grid-template-columns: repeat(3, 1fr); }
    .mm-article-list { grid-template-columns: 1fr; }
}

/* ---- Mobile: accordion layout ---- */
@media (max-width: 767px) {
    #mm-mobile-close { display: flex; }

    /* Full-screen overlay: de len ca header, top:0 tuyet doi. */
    #mega-menu-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        max-height: none;
    }

    .mm-layout { flex-direction: column; }

    .mm-nav-col {
        width: 100%;
        border-right: none;
        padding: 0;
    }

    /* Hide the desktop content column — panels shown inline via JS */
    .mm-content-col { display: none !important; }

    .mm-nav-item {
        border-left: none;
        padding: 12px 0px;
        font-size:0.875rem;
    }
    .mm-nav-item:hover { background: transparent; color: #333; border-left-color: transparent; }
    .mm-nav-item.is-active { background: transparent; color: #333; font-weight: 500; border-left-color: transparent; }
    .mm-nav-item.is-open {
       
        color: var(--ivd-brand, #005EDB);
        font-weight: 500;
       
    }

    .mm-nav-caret {
        display: block;
        opacity: 0.5;
        transition: transform 0.2s;
        transform: rotate(0deg);
    }
    .mm-nav-item.is-open .mm-nav-caret { transform: rotate(180deg); opacity: 1; }

    /* Inline accordion panel (JS-injected after nav item) */
    .mm-acc-panel {
        display: none;
        padding: 14px 16px 16px;
        background: #f3f4f6;
       border-radius: 8px;
    }
    .mm-acc-panel.is-open { display: block; }

    .mm-nav-link {
        border-left: none;
        font-size:0.875rem;
        padding: 12px 0;
    }
    .mm-nav-divider { padding: 8px 0px; font-size:0.75rem; }

    /* Item ngay truoc 1 divider (hoac cuoi danh sach) thi khong can border-bottom
       rieng nua, tranh bi trung/doi net voi divider ben duoi. */
    
}

/* Position context for dropdown */
#wap_top { position: relative; }

/* Header (logo/danh muc/search/hotline/zalo/bao gia) + Thanh cam ket.
   Lives inside #wap_top (already position:sticky in style.css) so the
   whole bar sticks on scroll at every breakpoint, matching prior behavior. */

:root {
    --ivd-brand: #005EDB;
}

.ivd-header {
    background: #fff;
}

.ivd-header__inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 14px 10px;
}

.ivd-header #logo {
    float: none;
    padding: 0;
    flex: 0 0 auto;
    line-height: 0;
}

.ivd-header #logo img {
    max-height: 44px;
    width: auto;
}

/* ---- "Danh muc" trigger (button itself is .mm-trigger, from megamenu.css) ---- */
.ivd-header .mm-trigger {
    flex: 0 0 auto;
    white-space: nowrap;
    height: 44px;
    box-sizing: border-box;
    border-radius: 8px;
}

/* ---- Search (module hien co, khong doi noi dung ben trong) ---- */
.ivd-header #search {
    float: none;
    flex: 1 1 auto;
    min-width: 0;
}

.ivd-header #search_top {
    display: flex;
    width: 100%;
}

.ivd-header #txts {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: 44px;
    box-sizing: border-box;
    margin: 0;
    padding: 0 16px;
    border: 1px solid #d9dde3;
    border-right: none;
    border-radius: 8px 0 0 8px;
    box-shadow: none;
    color: #1a2033;
    font-size: 16px;
}

.ivd-header #txts:focus {
    outline: none;
    border-color: var(--ivd-brand);
}

.ivd-header #txts.ivd-search-placeholder {
    color: #9aa1ad;
}

.ivd-header .ivd-search-btn {
    flex: 0 0 auto;
    width: 48px;
    height: 44px;
    box-sizing: border-box;
    background: var(--ivd-brand);
    border: none;
    border-radius: 0 8px 8px 0;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.25rem;
}

.ivd-header .ivd-search-btn:hover {
    background: #0048ad;
}

/* ---- Hotline / Zalo / Bao gia nhanh ---- */
.ivd-header__actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 0 0 auto;
}

.ivd-header__action {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 0;
    color: #1a2033;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    text-align: left;
    font-family: inherit;
}

.ivd-header__action:hover {
    color: var(--ivd-brand);
    text-decoration: none;
}

.ivd-header__action i {
    font-size: 1.5rem;
    color: var(--ivd-brand);
}

.ivd-header__action-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.ivd-header__action-label {
    font-size: 0.75rem;
    font-weight: 500;
}

.ivd-header__action-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1250dc;
}

.ivd-header__divider {
    width: 1px;
    align-self: stretch;
    background: #ececec;
}

/* ---- Thanh cam ket ---- */
.ivd-commit-bar {
    background: #fff;
    border-top: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
}

.ivd-commit-bar__inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    padding: 15px 10px;
    gap:12px;
}

.ivd-commit-item {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
}

.ivd-commit-item i {
    font-size: 1.125rem;
    color: var(--ivd-brand);
    flex: 0 0 auto;
}

.ivd-commit-item span {
    font-size: 0.875rem;
    line-height: 1.3;
    font-weight: 500;
}

.ivd-commit-divider {
    width: 1px;
    align-self: stretch;
    margin: 4px 0;
    background: #ececec;
    flex: 0 0 auto;
}

/* ---- Below xl (<1200px): compact logo, icon-only "Danh muc" ---- */
@media (max-width: 1199px) {
    /* aspect-ratio khop dung logo_mobi.png (51x39) — logo.png (223x50) da co
       width/height cung' HTML (header.php) de chong CLS o >=1199px, nhung
       tu breakpoint nay anh doi qua content:url() nen ty le khac han, can
       khai bao lai rieng de trinh duyet danh dung cho truoc khi anh tai xong. */
    .ivd-header #logo img { content: url(../images/logo_mobi.png); aspect-ratio: 51 / 39; }
}

/* ---- Tu lg tro len (>=992px): khi cuon, ghim header co dinh tren cung.
   Layout giu nguyen 1 hang (du cho tat ca), chi doi vi tri thanh fixed. ---- */
@media (min-width: 992px) {
    .ivd-header.is-scrolled {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 999;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }
    /* .ivd-header roi khoi flow cua #wap_top (fixed) nen an luon Thanh cam ket
       (sibling ngay sau) de tranh no bi #wap_top (sticky) day len de len header. */
    .ivd-header.is-scrolled + .ivd-commit-bar { display: none; }
    /* Trang chi tiet San pham co rieng .pd-section-nav (thanh tab dieu huong
       section) dinh NGAY DUOI header khi scroll — bo shadow o day, chuyen
       sang shadow o day .pd-section-nav (xem css/product-section-nav.css) de
       tranh 2 lop shadow chong nhau/lo lien mach giua header va thanh tab. */
    body.pd-page:not(.pd-landing-page) .ivd-header.is-scrolled {
        box-shadow: none;
    }
}

/* ---- Below lg (<992px): Hotline/Zalo/Bao gia chi con icon, an Thanh cam ket ---- */
@media (max-width: 991px) {
    .ivd-header__action-text { display: none; }
    .ivd-commit-bar { display: none; }
}

/* ---- Below lg (<=991px), moi kich thuoc man hinh nho: 2 hang.
   Hang 1: Danh muc (icon) - Logo (giua) - Nut Hotline/Zalo/Bao gia.
   Hang 2: Form tim kiem, rieng 1 hang.
   Khi cuon qua het chieu cao hang 1 (JS them class .is-scrolled len .ivd-header):
   Logo an di, Search chuyen len chiem cho giua hang 1, hang 2 bien mat. ---- */
@media (max-width: 991px) {
    .ivd-header__inner {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "trigger logo actions"
            "search  search  search";
        row-gap: 10px;
        column-gap: 12px;
        padding: 10px;
    }
    .ivd-header .mm-trigger-text { display: none; }
    .ivd-header .mm-trigger  { grid-area: trigger; padding: 8px 12px; }
    .ivd-header #logo        { grid-area: logo; justify-self: center; }
    .ivd-header #logo img    { max-height: 32px; }
    .ivd-header #search      { grid-area: search; }
    .ivd-header__actions     { grid-area: actions; gap: 10px; }

    .ivd-header.is-scrolled {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 999;
    }
    .ivd-header.is-scrolled .ivd-header__inner {
        grid-template-areas: "trigger search";
        grid-template-columns: auto 1fr;
    }
    .ivd-header.is-scrolled #logo { display: none; }
    .ivd-header.is-scrolled .ivd-header__actions { display: none; }

    /* Ket qua tim kiem full-viewport luc sticky: dinh vi theo viewport
       (khong dua vao #search lam containing block nua) de chac chan tran
       het chieu rong bat ke #search tinh toan the nao. --ivd-header-h
       do bang JS (header-sticky.js) = chieu cao thuc te cua header luc fixed. */
    .ivd-header.is-scrolled #search_dd,
    .ivd-header.is-scrolled #search_popup {
        position: fixed;
        top: var(--ivd-header-h, 60px);
        left: 10px;
        right: 10px;
        width: auto;
        min-width: 0;
        margin-top: 0;
    }
}

/* ---- arcontactus (nut lien he noi + popup danh sach nhan vien tu van) —
   thay the plugin jQuery "AR Contact Us" cu (css/jquery.contactus.min.css,
   khong con nap nua). Nut + 2 vong pulse TAI TAO DUNG timing cua hieu ung
   cu (@keyframes arcontactus-pulse: scale 0->1, opacity 1->0, 2s infinite,
   lech pha .5s) — day la CSS thuan, GPU-composited, khac voi setInterval
   600ms JS cua plugin cu (nguon ton tai nguyen chinh, da bo hoan toan).
   Rule nam trong core.bundle.css (file DUY NHAT dang thuc su duoc
   template.php <link>) thay vi css/style.css (KHONG duoc tai o dau, xem
   ghi chu trong template.php). ---- */
.ivd-contact-fab {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 100000;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    /* Khong con background mau rieng — anh images/contact-button.png da tu
       ve du mau/thiet ke (vong tron cam-xanh Zalo/Hotline), gan them mau
       nen se bi thua/de lo vien vuong sau vong tron neu anh co goc trong
       suot. */
    background: none;
    padding: 0;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.375rem;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}
.ivd-contact-fab img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.ivd-contact-fab__pulse {
    position: absolute;
    inset: -7px;
    border-radius: 50%;
    background: var(--ivd-brand, #005EDB);
    opacity: 0;
    transform: scale(0);
    animation: ivd-contact-pulse 2s infinite;
}
.ivd-contact-fab__pulse:nth-of-type(2) { animation-delay: .5s; }
@keyframes ivd-contact-pulse {
    0%   { transform: scale(0); opacity: 1; }
    50%  { opacity: .5; }
    100% { transform: scale(1); opacity: 0; }
}
/* Popup dung LAI nguyen khung .ivd-quote-overlay/.ivd-quote-modal/
   .ivd-quote-close (css nay, dinh nghia o tren cho form bao gia) — theo
   dung yeu cau "phai giong id=ivd-quote-overlay, style cung giong nhau".
   KHONG ghi de max-width rieng — dung dung 440px cua .ivd-quote-modal,
   giong het form bao gia (bo override 560px cu theo yeu cau "bo max-width"). */
/* ---- Luoi 4 muc lien he nhanh (.ivd-contact-quick) — hoc dung cach thiet
   ke cua .lp-consult-hero__benefit (css/product-landingpage-content.css,
   icon + khoi chu 2 dong nhan/gia-tri) nhung VIET MOI class rieng vi file
   do chi nap o trang Landingpage san pham, khong global. Noi dung/link
   COPY Y HET tu khoi .lp-consult-hero__benefits o bai 2324 (Goi ngay/Zalo
   Official/Messenger/Gui email — du lieu that cua cong ty, khong bia). ---- */
.ivd-contact-quick {
    /* margin-top KHONG con can nua — da them logo (.ivd-quote-logo, dung
       chung markup voi popup bao gia) phia tren, ban than logo da co
       margin-bottom:20px de tranh bi nut dong (.ivd-quote-close) de len,
       giong het cach form bao gia goc lam. */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
}
.ivd-contact-quick__item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid #e5e9f0;
    border-radius: 8px;
    padding: 12px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ivd-contact-quick__item:hover {
    border-color: var(--ivd-brand, #005EDB);
    box-shadow: 0 4px 14px rgba(0, 94, 219, .12);
    text-decoration: none;
    color: inherit;
}
.ivd-contact-quick__icon {
    flex: 0 0 auto;
    display: flex;
    font-size: 1.375rem;
    color: var(--ivd-brand, #005EDB);
}
.ivd-contact-quick__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.ivd-contact-quick__label {
    font-size: 0.75rem;
    font-weight: 500;
    color: #4a4f63;
}
.ivd-contact-quick__value {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--ivd-brand, #005EDB);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* ---- Dai phan cach "Hoac..." thay cho tieu de h3 cu — 2 doan gach ngang
   dut hai ben + chu o giua, tu ve moi (khong co san trong code). ---- */
.ivd-contact-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    color: #4a4f63;
    font-size: 0.875rem;
    text-align: center;
}
.ivd-contact-divider::before,
.ivd-contact-divider::after {
    content: '';
    flex: 1;
    border-top: 1px dashed #d8dce3;
}
.ivd-contact-popup__viewport { position: relative; }
/* 1 DONG DUY NHAT (khong con 2 hang nhu ban .pd-consult-track goc) — dung
   flex + flex-basis tinh theo --ivd-contact-popup-cols, giong dung ky
   thuat cua .lp-multi-col-carousel__track (css/product-landingpage-content.css)
   thay vi grid 2 hang truoc do. */
.ivd-contact-popup__track {
    --ivd-contact-popup-cols: 2;
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 4px 2px;
    scrollbar-width: none;
}
.ivd-contact-popup__track::-webkit-scrollbar { display: none; }
.ivd-contact-popup__track .ivd-consult-card {
    flex: 0 0 calc((100% - (var(--ivd-contact-popup-cols) - 1) * 12px) / var(--ivd-contact-popup-cols));
    scroll-snap-align: start;
    min-width: 0;
    padding: 16px 12px;
}
.ivd-contact-popup__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: var(--text-main, #1f2937);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    z-index: 3;
    transition: opacity .15s ease;
}
.ivd-contact-popup__nav:hover { background: #005EDB; color: #fff; }
.ivd-contact-popup__nav.is-hidden { display: none; }
.ivd-contact-popup__nav--prev { left: -14px; }
.ivd-contact-popup__nav--next { right: -14px; }
.ivd-contact-popup__dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
}
.ivd-contact-popup__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #dbe0e6;
    cursor: pointer;
    transition: background .15s ease, width .15s ease;
}
.ivd-contact-popup__dot.is-active {
    background: #005EDB;
    width: 16px;
    border-radius: 4px;
}
@media (max-width: 575px) {
    .ivd-contact-fab { right: 14px; bottom: 14px; }
    /* Tu van 1:1 giu 2 cot cho toi man rat nho (<375px, xem media query
       duoi) — khong con ve 1 cot ngay tu 575px nhu truoc nua. */
    .ivd-contact-quick { gap: 8px; }
    .ivd-contact-quick__item { padding: 10px; }
}
/* Man rat nho (<375px, vd iPhone SE 320/360px) — ca luoi lien he nhanh
   lan carousel tu van 1:1 deu rut ve 1 cot/1 the mot lan de tranh vo layout
   do khong gian qua hep. */
@media (max-width: 374px) {
    .ivd-contact-quick {
        grid-template-columns: 1fr;
    }
    .ivd-contact-popup__track {
        --ivd-contact-popup-cols: 1;
    }
}