/*
 * CSS bo sung cho frontend. Nap SAU theme Altech nen ghi de duoc ma khong
 * phai sua bat ky file nao trong public/frontend.
 *
 * Menu nhieu cap: theme Altech dung nav#menu ul.dropdown voi ul long nhau,
 * da ho tro san nhieu cap. Neu Giai doan 2 can chinh them (vd mo submenu tren
 * mobile) thi bo sung o day.
 */

.w-100 {
    width: 100%;
}
.noi-dung-trang-tinh {
    padding-bottom: 40px;
}

.thanhtoandon {
    padding: 30px 0;
}
.thanhtoandon .khoi-thanh-toan {
    background: #f7f8fa;
    padding: 20px;
    border-radius: 10px;
}
.noi-dung-trang-tinh p {
    font-size: 16px;
    line-height: 25px;
}
.khoi-thu-gon div {
    margin-bottom: 10px;
}
.khoi-thu-gon h3 {
    margin-bottom: 5px;
    margin-top: 5px;
}
.thanhtoandon .khoi-thanh-toan h4 {
    color: #1faf6c;
    font-size: 17px;
    border-left: 3px solid;
    padding-left: 10px;
}
.entry-content.noi-dung-trang-tinh ul li {
    font-size: 16px;
    margin-bottom: 4px;
}
p.so-tien-can-tra {
    color: #c92f2f;
    font-weight: 800;
    font-size: 18px;
}
.thanhtoandon ul {
    padding: 0;
}
.thanhtoandon ul li {
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
}
button.nut-sao-chep {
    border: none;
    background: none;
}
/*
 * Icon TikTok ve bang SVG.
 *
 * Theme di kem Font Awesome 4.7 (2016) - ban do khong co fa-tiktok, va cung
 * khong nang cap duoc vi CSS goc cua theme la bat kha xam pham. SVG inline
 * tranh duoc ca hai van de, chi can chinh kich thuoc cho khop icon font
 * dang nam canh no.
 */
.social-icons .icon-tiktok,
.social-icons li .icon-tiktok {
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
}

/*
 * Nut xo menu con tren mobile.
 *
 * Tren desktop (>= 1200px) menu con mo bang hover san cua theme nen khong can
 * nut - an di, va bam vao muc cha se di thang toi trang cua muc do.
 *
 * Tu 1199px tro xuong theme chuyen sang menu hamburger. Ban goc ve mui ten
 * bang :after CUA CHINH the <a>, nen khong the cham rieng mui ten. O day an
 * mui ten do va thay bang mot <button> that nam canh the <a>: cham chu = vao
 * trang cha, cham mui ten = xo menu con.
 */
.ttm-submenu-toggle {
    display: none;
}

@media all and (max-width: 1199px) {
    /* Hai selector: cap 1 va cac cap con - phai du manh de de len rule goc
       trong responsive.css (dong 615, 626) va main.css (dong 1456). */
    #site-header-menu #site-navigation .menu ul.dropdown li.has-submenu > a:after,
    #site-header-menu #site-navigation .menu ul.dropdown > li > ul li.has-submenu > a:after {
        content: none;
    }

    #site-header-menu #site-navigation .menu .ttm-submenu-toggle {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 2;
        width: 48px;
        height: 48px;
        padding: 0;
        border: 0;
        background: none;
        color: inherit;
        font-size: 20px;
        line-height: 48px;
        text-align: center;
        cursor: pointer;
    }

    #site-header-menu #site-navigation .menu .ttm-submenu-toggle .fa {
        display: inline-block;
        transition: transform 0.2s ease;
    }

    #site-header-menu #site-navigation .menu .ttm-submenu-toggle[aria-expanded="true"] .fa {
        transform: rotate(180deg);
    }
}

/*
 * Nut "Liên hệ" noi + bang lien he
 * (partial frontend/partials/nut_chat_noi.blade.php).
 *
 * Ghim goc duoi ben phai, NGAY TREN nut #totop cua theme (main.css dong 1849:
 * fixed, right 34px, bottom 34px, cao 40px khi hien). Bottom 84px = 34 + 40 +
 * 10px cach. Khong bam theo trang thai cua #totop: nut do co chieu cao 0 khi an
 * nen neu tinh dong se nhay len nhay xuong luc khach cuon trang.
 *
 * z-index 998 - thap hon #totop (999) mot bac: hai khoi khong dung nhau, nhung
 * neu sau nay co ai doi vi tri thi nut "len dau trang" van la cai noi len tren.
 */
.khoi-lien-he {
    position: fixed;
    right: 34px;
    bottom: 84px;
    z-index: 998;
}

.nut-lien-he {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 10px 18px;
    border: 0;
    border-radius: 24px;
    background: #2fa84f;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.nut-lien-he:hover,
.nut-lien-he:focus {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32);
}

.nut-lien-he .fa {
    font-size: 18px;
}

/* Bang xo len TREN nut, can le phai theo nut de khong tran ra ngoai man hinh. */
.bang-lien-he {
    display: none;
    position: absolute;
    right: 0;
    bottom: calc(100% + 12px);
    min-width: 250px;
    padding: 14px 16px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
}

.khoi-lien-he.dang-mo .bang-lien-he {
    display: block;
}

/* Mui ten nho tro xuong nut, dat lech phai cho khop tam nut. */
.bang-lien-he:after {
    content: "";
    position: absolute;
    right: 28px;
    top: 100%;
    border: 8px solid transparent;
    border-top-color: #fff;
}

.bang-lien-he-tieu-de {
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e9ecef;
    color: #212529;
    font-size: 14px;
    font-weight: 600;
}

.dong-nhan-vien {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 7px 0;
}

.dong-nhan-vien + .dong-nhan-vien {
    border-top: 1px solid #f1f3f5;
}

.ten-nhan-vien {
    color: #495057;
    font-size: 14px;
    white-space: nowrap;
}

.cac-kenh {
    display: flex;
    gap: 8px;
}

.nut-chat {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: #fff;
    font-size: 15px;
    line-height: 1;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.nut-chat:hover,
.nut-chat:focus {
    color: #fff;
    transform: scale(1.12);
}

.nut-chat .icon-chat {
    width: 18px;
    height: 18px;
}

.nut-chat-messenger {
    /* Dai mau chinh hang cua Messenger - de phan biet voi Zalo, hai mau xanh
       don sac se nhin gan nhu nhau. */
    background: linear-gradient(200deg, #00b2ff 0%, #006aff 40%, #a033ff 72%, #ff5280 88%, #ff7061 100%);
}

.nut-chat-zalo {
    background: #0068ff; /* Trung mau chu "Zalo" trong SVG cua partial */
}

.nut-chat-dien-thoai {
    background: #2fa84f;
}

/*
 * Nhan hien khi ro chuot, day len TREN icon (bang da sat le phai man hinh nen
 * khong con cho tha nhan sang ben). Chi bat tren thiet bi CO con tro that: tren
 * cam ung :hover dinh lai sau khi cham, nhan se treo tren man hinh.
 */
.nut-chat:after {
    content: attr(data-nhan);
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    padding: 5px 10px;
    border-radius: 4px;
    background: rgba(33, 37, 41, 0.92);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

@media (hover: hover) {
    .nut-chat:hover:after,
    .nut-chat:focus:after {
        opacity: 1;
        visibility: visible;
    }
}

/* Man hinh nho: lui sat le hon de khong che noi dung. */
@media all and (max-width: 767px) {
    .khoi-lien-he {
        right: 16px;
        bottom: 90px;
    }

    .nut-lien-he {
        padding: 9px 15px;
        font-size: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nut-lien-he,
    .nut-chat,
    .nut-chat:after {
        transition: none;
    }

    .nut-lien-he:hover,
    .nut-lien-he:focus,
    .nut-chat:hover,
    .nut-chat:focus {
        transform: none;
    }
}

/*
 * Tieu de khoi doi tac o trang chu (home.blade.php: h2.doitac).
 *
 * Class 'doitac' khong co trong theme - chu du an tu them nen truoc do no chay
 * theo style h2 mac dinh: chu to va dinh sat me tren, lech han so voi dai logo
 * ben canh.
 *
 * Can giua theo CHIEU DOC bang cach cho h2 cao bang cot chua no roi flex-center:
 * .row cua Bootstrap la flex nen .col-md-3 da tu keo cao bang .col-md-9, chi
 * thieu buoc do chieu cao do xuong cho chinh the h2.
 */
.our-partner-section .doitac {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    margin: 0;
    font-size: 24px;
    line-height: 1.4;
    text-align: center;
}

/* Duoi 768px hai cot xep chong len nhau: bo chieu cao ep va them khoang cach
   voi dai logo ngay ben duoi. */
@media all and (max-width: 767px) {
    .our-partner-section .doitac {
        font-size: 18px;
        margin-top: 15px;
    }
}

/*
 * Dai logo doi tac o mobile: 3 logo tren mot hang (so luong do daiLogoDoiTac()
 * trong menu-custom.js dat, khong dat duoc bang CSS vi owl carousel gan chieu
 * rong thang vao the).
 *
 * Le 13px moi ben cua theme tinh cho 6 logo tren man rong. Giu nguyen o man hep
 * thi 26px le an gan mot phan tu be rong moi o - logo con lai qua nho de nhin.
 */
@media all and (max-width: 767px) {
    .our-partner-section .client-box.ttm-box-view-boxed-logo .ttm-client-logo-tooltip {
        margin-left: 8px;
        margin-right: 8px;
    }

    .our-partner-section .client-box.ttm-box-view-boxed-logo {
        padding: 20px 0;
    }
}

/*
 * Khoi quy trinh: buoc khong co anh thi ve vong tron co so buoc.
 *
 * Bon anh mau cua theme (step-one..four.jpg) nam trong so 5 anh BI THIEU cua bo
 * theme, nen phan lon buoc se khong co anh cho toi khi chu du an tu tai len.
 * Vong tron nay giu dung 185px cua .ttm-box-image img (shortcodes.css dong
 * 1819-1820) de cac buoc van thang hang, va de mui ten noi giua cac buoc
 * (.ttm-box-image:before, dat right: -95px co dinh) van dung cho.
 */
.ttm-processbox-wrapper .ttm-box-image.khong-anh {
    width: 185px;
    height: 185px;
    margin: auto;
    border-radius: 50%;
    background-color: #f7f8fa;
    box-shadow: 0 0 9px 0 rgba(24, 35, 51, .09);

    /* Theme dat .ttm-box-image la inline-block; doi sang flex de can giua con
       so. Khong dung line-height vi so co hai chu so va co the xuong dong. */
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ttm-processbox-wrapper .ttm-box-image.khong-anh .so-buoc {
    font-size: 56px;
    font-weight: 700;
    line-height: 1;
    color: #1e2637;
}

/*
 * O bai viet: cat tieu de con 2 dong, mo ta con 3 dong, thua thi ra dau "...".
 *
 * Vi sao can: tieu de va tom tat do admin go, dai ngan khong deu nhau. Khong
 * chan thi mot bai co tieu de dai lam the do cao han cac the ben canh, dai
 * carousel nhin so le.
 *
 * Cach lam la -webkit-line-clamp: no BAT BUOC di kem display:-webkit-box va
 * -webkit-box-orient:vertical, thieu mot trong hai la khong cat gi ca. Ten co
 * tien to -webkit- nhung moi trinh duyet hien nay deu hieu, ke ca Firefox.
 * Khai them 'line-clamp' khong tien to cho ban chuan sau nay.
 *
 * Chieu cao mot dong lay tu theme: tieu de 26px (shortcodes.css dong 957).
 */
.featured-imagebox-blog .featured-title h5 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.featured-imagebox-blog .featured-desc p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

/* ============================================================
   Khoi danh muc san pham va khoi san pham noi bat o trang chu
   ============================================================

   Hai khoi nay dung lai kieu the co san cua theme
   (.featured-imagebox-services style1 / style2) nhung xep thanh LUOI chu
   khong phai dai owl carousel, nen phai bu lai vai cho theme khong tinh toi.
*/

/*
 * Kieu style1 keo ca khoi chu len 55px de de len anh (shortcodes.css dong
 * 1597). Danh muc / san pham chua chon anh thi khong con gi de de len - giu
 * nguyen la khoi chu bi day ra ngoai the. Lop 'khong-anh' do view gan khi
 * duong dan anh la null.
 *
 * Khai bao cho style2 da xoa 30/07/2026: khoi danh muc chuyen sang style1
 * (bo cuc grid-section cua services-02.html) nen khong con cho nao dung.
 */
.featured-imagebox-services.style1.khong-anh .featured-content {
    margin-top: 0;
}

/*
 * Khoi san pham noi bat o trang chu KHONG con markup .featured-imagebox rieng:
 * tu 30/07/2026 no dung chung partial the_san_pham voi trang danh muc, nen moi
 * khai bao cho the san pham nam o mot cho duy nhat - muc "The san pham (dung
 * chung trang chu + trang danh muc)" o duoi.
 *
 * Cung ngay do the danh muc bo dong "N sản phẩm" nen khai bao
 * .khoi-danh-muc .so-san-pham da xoa.
 */

/*
 * Cat ten va mo ta danh muc con hai dong cho cac the trong luoi cao gan bang
 * nhau - cung ly do va cung cach lam nhu o the bai viet (xem ghi chu o tren):
 * -webkit-line-clamp BAT BUOC di kem display:-webkit-box va
 * -webkit-box-orient:vertical, thieu mot trong hai la khong cat gi ca. Dau ba
 * cham do chinh line-clamp them vao, khong phai text-overflow.
 *
 * Cat bang CSS chu khong bang Str::limit o view: so ky tu vua hai dong doi theo
 * be rong man hinh, cat trong PHP thi man rong bi hut chu con man hep van tran.
 * Mo ta day du van nam trong HTML nen cong cu tim kiem doc duoc het.
 *
 * O luoi con quan trong hon o dai carousel: cac the nam canh nhau tren cung
 * mot hang nen chenh lech chieu cao lo ra ngay.
 */
.khoi-danh-muc .featured-title h5,
.khoi-danh-muc .featured-desc p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.khoi-danh-muc .featured-desc p {
    margin-bottom: 0;
}

/* ============================================================
   Dai tieu de trang trong (partials/tieu_de_trang.blade.php)
   ============================================================

   Ban goc cua theme la mot dai anh nen toi, padding 195px tren / 110px duoi,
   chu can giua. Thiet ke moi bo anh nen va tach lam hai tang: thanh duong dan
   ngang nen xam nhat truoc, roi den <h1> tren nen trang, ca hai can trai.

   Mau nhan cua theme (#2d4a8a) chi con o muc dang xem cua breadcrumb, nho bo
   chon co san .title-box .breadcrumb-wrapper span:last-child cua theme
   (main.css dong 702). Nhung mau khac o day deu la mau trung tinh co dinh.
*/
.ttm-page-title-row.dai-tieu-de {
    background-image: none;
    background-color: #fff;
    padding-top: 90px;
    padding-bottom: 0;
}

.dai-tieu-de .thanh-duong-dan {
    background-color: #f7f8fa;
    border-bottom: 1px solid #e8eaee;
    padding: 13px 0;
}

/*
 * responsive.css dong 705 xoa sach padding cua .ttm-page-title-row .container
 * duoi 1199px, vi ban goc bu lai bang cot trong .row. Thanh nay khong dung
 * .row nen phai tra lai padding, khong thi chu dinh sat mep man hinh.
 */
.dai-tieu-de .container {
    padding-left: 15px;
    padding-right: 15px;
}

.dai-tieu-de .breadcrumb-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 4px;
}

.dai-tieu-de .breadcrumb-wrapper span {
    font-size: 14px;
    line-height: 22px;
    color: #6b7280;
    text-transform: none;
}

.dai-tieu-de .breadcrumb-wrapper a {
    color: #6b7280;
}

.dai-tieu-de .breadcrumb-wrapper a:hover {
    color: #1e2637;
}

.dai-tieu-de .breadcrumb-wrapper .ti-home {
    margin-right: 6px;
    font-size: 13px;
}

.dai-tieu-de .breadcrumb-wrapper .ttm-bread-sep {
    padding: 0 9px;
    font-size: 10px;
    color: #c7ccd4;
}

.dai-tieu-de .page-title-heading {
    padding: 30px 0 30px;
}

/*
 * Bo chon phai dai hon .title-box .page-title-heading h1 cua theme: co ban sao
 * trong responsive.css (dong 951) ep font-size 38px duoi 767px.
 * text-transform: capitalize cua theme hop tieng Anh, nhung tieng Viet khong
 * viet hoa tung chu ("Công Cụ Marketing" doc rat gan).
 */
.dai-tieu-de .page-title-heading h1.title {
    margin: 0;
    font-size: 34px;
    line-height: 42px;
    font-weight: 700;
    color: #1e2637;
    text-transform: none;
}

/*
 * KHOANG THO CUA MOI TRANG TRONG - mot cho duy nhat cho ca bon trang.
 *
 * Chu du an chot 30/07/2026: duoi <h1> chi con 30px, tuc dung padding-bottom
 * cua .page-title-heading ngay tren, khong cong them gi nua. Noi dung len sat
 * dai tieu de de khach thay hang / bai ngay khi vao trang.
 *
 * Vi sao phai gom vao day thay vi dua theo theme: khoang tho cua theme nam o
 * .sidebar .content-area (shortcodes.css dong 2538, 65px tren / 55px duoi),
 * ma no chi an khi phan tu CO class 'content-area'. Truoc thay doi nay bon
 * trang ra bon kieu khac nhau:
 *   - Trang danh muc  : col-lg-12 THIEU 'content-area' -> 0 tren, 0 duoi
 *                       (noi dung cham thang vao chan trang)
 *   - Trang san pham  : co 'content-area'              -> 65 tren, 55 duoi
 *   - Chuyen muc/bai  : .ttm-row cua theme             -> 90 tren, 90 duoi
 * Bam vao lop cua chinh tung trang thi khong con phu thuoc vao viec ai do co
 * nho go kem 'content-area' hay khong. Class do da duoc go khoi view san pham.
 */
.trang-danh-muc,
.trang-san-pham,
.trang-chuyen-muc,
.trang-bai-viet {
    padding-top: 0;
    padding-bottom: 55px;
}

@media all and (max-width: 767px) {
    .trang-danh-muc,
    .trang-san-pham,
    .trang-chuyen-muc,
    .trang-bai-viet {
        padding-bottom: 40px;
    }
}

.title-seonews {
    background-color: #fff;
    border: 1px solid #2a83e9;
    border-radius: 8px;
    color: #2a83e9;
    font-weight: bold;
    font-size: 16px!important;
    padding: 3px 10px;
    margin: 0 auto 20px;
    text-transform: uppercase;
    text-align: center;
    width: 260px;
}
.noi-dung-danh-muc h2 {
    font-size: 21px;
    line-height: 28px;
}
.noi-dung-danh-muc h3 {
    font-size: 19px;line-height: 28px;
}
.noi-dung-danh-muc h4 {
    font-size: 18px;
}
.noi-dung-danh-muc p {
    margin: 0;
    font-size: 16px;
    margin-bottom: 15px;
}
.noi-dung-danh-muc ol, .noi-dung-danh-muc ul {
    list-style: disc;
}
.noi-dung-danh-muc img {
    max-width: 100%;
    margin: auto;
    display: block;
}
@media (max-width: 767px) {
   .ttm-page-title-row.dai-tieu-de {

        padding-top: 0;
        padding-bottom: 0;
    }

    .dai-tieu-de .thanh-duong-dan {
        padding: 11px 0;
    }

    .dai-tieu-de .breadcrumb-wrapper span {
        font-size: 13px;
    }

    .dai-tieu-de .breadcrumb-wrapper .ttm-bread-sep {
        padding: 0 7px;
    }

    .dai-tieu-de .page-title-heading {
        padding: 26px 0 22px;
    }

    .dai-tieu-de .page-title-heading h1.title {
        font-size: 21px;
        line-height: 30px;
    }
}

/* ============================================================
   Trang danh muc san pham
   ============================================================

   Markup lay tu shop.html cua theme nhung BO cot sidebar, nen luoi chay het
   be ngang 4 o mot hang. Nhung gi bo sung o day la cho theme khong tinh toi:
   the san pham thieu anh, chip danh muc con (theme chi co kieu tagcloud nam
   trong sidebar), va cac dong chu tieng Viet.
*/

.trang-danh-muc .mo-ta-danh-muc {
    margin-bottom: 25px;
    font-size: 16px;
}

/*
 * Chip danh muc con. Theme co san kieu nay o .sidebar .widget .tagcloud a,
 * nhung bo chon do doi phai nam trong widget cua sidebar - trang nay khong co
 * sidebar nen chep lai dung khai bao do.
 */
/*
 * Cac chip nam tren DUNG MOT hang: qua nhieu danh muc con thi truot ngang chu
 * khong xuong dong. Dung flex + overflow-x thay vi white-space: nowrap vi the
 * <a> la inline-block, khoang trang giua chung se an theo dinh dang HTML.
 * scrollbar-width/padding-bottom chua cho thanh truot khoi de len chip.
 */
.trang-danh-muc .danh-muc-con {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin-bottom: 30px;
    padding-bottom: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.trang-danh-muc .danh-muc-con a {
    display: inline-block;
    flex: 0 0 auto;
    padding: 6px 14px;
    border: 1px solid #f0f0f0;
    background-color: #f8f9fa;
    font-size: 15px;
    font-weight: 600;
    color: #1e2637;
    white-space: nowrap;
}

/* Thanh truot mong cho WebKit - Firefox da xu ly bang scrollbar-width. */
.trang-danh-muc .danh-muc-con::-webkit-scrollbar {
    height: 6px;
}

.trang-danh-muc .danh-muc-con::-webkit-scrollbar-track {
    background-color: #f0f0f0;
    border-radius: 3px;
}

.trang-danh-muc .danh-muc-con::-webkit-scrollbar-thumb {
    background-color: #c4c9d2;
    border-radius: 3px;
}

.trang-danh-muc .danh-muc-con::-webkit-scrollbar-thumb:hover {
    background-color: #1e2637;
}

/*
 * Nen luc ro chuot dung mau toi co dinh cua theme chu khong phai mau nhan.
 */
.trang-danh-muc .danh-muc-con a:hover {
    background-color: #1e2637;
    border-color: #1e2637;
    color: #fff;
}

/* ============================================================
   The san pham (dung chung trang chu + trang danh muc)
   ============================================================

   Markup o resources/views/frontend/partials/the_san_pham.blade.php, dung o CA
   HAI cho: luoi trang danh muc va khoi san pham noi bat o trang chu.

   Vi vay moc CSS la .luoi-san-pham (lop bao cua hang the) chu KHONG phai
   .trang-danh-muc: bam vao lop cua rieng mot trang thi trang chu mat het dinh
   dang. Kieu co san cua theme cho .product / .product-thumbnail khong co tien
   to (shortcodes.css dong 2868+) nen chay duoc o moi trang.
*/

/*
 * O anh thay the khi san pham chua chon anh dai dien. Phai co chieu cao that,
 * o rong lam cac the trong luoi cao thap khong deu nhau.
 */
.luoi-san-pham .product-thumbnail.khong-anh .anh-thay-the {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 210px;
    background-color: #f4f6f8;
    color: #c3cbd4;
    font-size: 46px;
}

/* Nhan loai san pham ("Phần mềm cài máy" / "File tải về") tren ten san pham. */
.luoi-san-pham .nhan-loai {
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #8e959d;
}

/* Cat tieu de va mo ta cho cac the trong cung mot hang cao gan bang nhau. */
.luoi-san-pham .product-title h2,
.luoi-san-pham .mo-ta-ngan p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.luoi-san-pham .product-title h2 {
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.luoi-san-pham .mo-ta-ngan {
    margin-top: 6px;
}

.luoi-san-pham .mo-ta-ngan p {
    -webkit-line-clamp: 2;
    line-clamp: 2;
    margin-bottom: 0;
    font-size: 14px;
}

.luoi-san-pham .product-price {
    display: block;
    margin-top: 10px;
    font-weight: 700;
    color: #1e2637;
}

.luoi-san-pham .product-price .tu {
    margin-right: 4px;
    font-size: 14px;
    font-weight: bold;
    color: #2362ec;
}

/*
 * Preset anh 'san_pham_the' giu nguyen ti le anh goc (khong cat, chot
 * 29/07/2026 - anh san pham phan lon la anh chup man hinh, cat vao khung co
 * dinh la mat noi dung o ria). He qua: anh trong mot hang cao thap khac nhau.
 * Keo the cao bang nhau de vien duoi cua ca hang thang, con anh thi de nguyen.
 */
.luoi-san-pham > [class*="col-"] {
    display: flex;
}

.luoi-san-pham .product {
    display: flex;
    flex-direction: column;
    width: 100%;
    /* Hang duoi cach hang tren - truoc day the o trang chu tu mang mb-30. */
    margin-bottom: 30px;
}

.luoi-san-pham .product .product-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Gia luon nam sat day the du mo ta dai ngan khac nhau. */
.luoi-san-pham .product .product-content .product-price {
    margin-top: auto;
    padding-top: 10px;
}

/* Dong dem ket qua va o sap xep nam cung mot hang. */
.trang-danh-muc .products-ordering .form-group {
    margin-bottom: 20px;
}

/*
 * Mui ten so xuong cua o sap xep.
 *
 * O do la mot <select> deo lop .form-control cua Bootstrap 5, ma lop do dat
 * `appearance: none` - mui ten mac dinh cua trinh duyet bi xoa, o con lai
 * trong nhu mot hop chu tinh nen khach khong doan duoc la bam vao duoc. Ve
 * lai bang anh nen chu khong them the: anh nen khong nhan su kien chuot nen
 * bam vao bat ky dau trong o van mo duoc danh sach.
 *
 * Giu .form-control chu KHONG doi sang .form-select cua Bootstrap: theme co
 * rieng `.products-ordering .form-control { padding: 13px 13px }`
 * (shortcodes.css) dat kich thuoc o nay, doi lop la mat.
 */
.trang-danh-muc .products-ordering select.form-control {
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238093a8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 12px 12px;
    cursor: pointer;
}

.trang-danh-muc .chua-co-san-pham {
    margin: 20px 0 0;
    font-size: 16px;
}

/* Bai viet SEO cua danh muc, dat duoi luoi san pham. */
.trang-danh-muc .noi-dung-danh-muc {
    margin: 40px 0;
    background: #fbfbfb;
    color: #252525;
    padding: 20px;
}

.trang-danh-muc .noi-dung-danh-muc img {
    max-width: 100%;
    height: auto;
    border-radius:7px;
}

/* Nut "..." cua phan trang khong bam duoc nen bo vien va nen cho khoi giong nut. */
.ttm-pagination .page-numbers.dots {
    background-color: transparent;
    border-color: transparent;
}
.ordersp{
    display: flex;
    justify-content: space-between;
 }

/* ============================================================
   Muc luc noi dung (table of contents)
   ============================================================

   Dung trong .noi-dung-danh-muc, chen ngay duoi doan sapo. Cay de muc do
   App\Services\DichVuMucLuc sinh, markup o
   resources/views/frontend/partials/muc_luc.blade.php.
*/

.muc-luc-noi-dung {
    margin: 0 0 25px;
    padding: 18px 22px;
    background-color: #f2f2f2;
    border: 1px solid #e3e6ea;
    border-left: 4px solid #2a83e9;
    border-radius: 8px;

}

.muc-luc-dau {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 12px;
}

.muc-luc-tieu-de {
    font-size: 16px;
    font-weight: 700;
    color: #1e2637;
}
.featured-title h5 a {
    color: #252323;
}
.noi-dung-bai-viet h2,
.noi-dung-trang-tinh h2 {
    font-size: 24px !important;
    line-height: 30px !important;
}
.noi-dung-trang-tinh ol,.noi-dung-trang-tinh ul {
    margin-bottom: 10px;
}
.noi-dung-trang-tinh h3 {
    font-size: 21px;
    margin-bottom: 3px;
}
.row.ttm-pf-single-related-wrapper h4 {
    font-size: 19px !important;
    line-height: 30px !important;
}
.muc-luc-nut-thu-gon {
    padding: 0;
    border: 0;
    background: none;
    font-size: 14px;
    font-weight: 600;
    color: #2a83e9;
    cursor: pointer;
}

.muc-luc-nut-thu-gon i {
    margin-left: 5px;
    font-size: 12px;
}

/*
 * Danh sach dung so thu tu tu dem: .noi-dung-danh-muc ol o tren dat
 * list-style: disc cho MOI ol nen phai tat di roi tu ve so, neu khong muc luc
 * ra dau tron.
 *
 * Bo chon co y viet dai 'nav.muc-luc-noi-dung ol.xxx' (do dac hieu 0,2,2) chu
 * khong phai '.xxx' tron (0,1,0): partial muc luc duoc chen vao BEN TRONG khoi
 * noi dung cua nhieu trang khac nhau, ma trang nao cung co rule rieng cho
 * 'ol'/'ul' trong khoi do. Vi du .trang-bai-viet .noi-dung-bai-viet ol (0,2,1)
 * tung de len padding: 0 o day lam muc luc thut vao 22px, rieng trang bai viet
 * nhin khac han trang danh muc. Viet dai thi moi rule noi dung cua trang deu
 * thua, khong phai di sua lai moi lan them mot trang moi.
 */
nav.muc-luc-noi-dung ol.muc-luc-danh-sach,
nav.muc-luc-noi-dung ol.muc-luc-cap-hai {
    list-style: none !important;
    margin: 0;
    padding: 0;
    counter-reset: muc-luc;
}

.muc-luc-danh-sach li {
    counter-increment: muc-luc;
}

.muc-luc-danh-sach li:last-child {
    margin-bottom: 0;
}

.muc-luc-danh-sach > li > a::before,
.muc-luc-cap-hai > li > a::before {
    content: counter(muc-luc) ". ";
    font-weight: 600;
}

.muc-luc-noi-dung a {
    font-size: 15px;
    color: #2a83e9;
    font-style: italic;
    text-decoration: none;
}

.muc-luc-noi-dung a:hover {
    color: #2a83e9;
    text-decoration: underline;
}

/* Bo chon phai dai bang rule 'margin: 0' o tren (0,2,2), neu khong muc con mat thut le. */
nav.muc-luc-noi-dung ol.muc-luc-cap-hai {
    margin: 8px 0 0 22px;
}

.muc-luc-cap-hai > li > a {
    font-size: 15px;
    color: #4a5262;
}

/* Trang thai thu gon do JS bat, xem public/js/menu-custom.js. */
.muc-luc-noi-dung.dang-thu-gon .muc-luc-danh-sach {
    display: none;
}

.muc-luc-noi-dung.dang-thu-gon .muc-luc-dau {
    margin-bottom: 0;
}

/*
 * Bam link muc luc thi de muc dich khong duoc nam sat dinh man hinh - header
 * cua theme dinh cung se che mat no.
 */
.noi-dung-danh-muc h2[id],
.noi-dung-danh-muc h3[id],
.noi-dung-san-pham h2[id],
.noi-dung-san-pham h3[id] {
    scroll-margin-top: 100px;
}

html {
    scroll-behavior: smooth;
}

/* ============================================================
   Khoi noi dung dai thu gon + nut "Xem thêm"
   ============================================================

   Markup o resources/views/frontend/partials/khoi_thu_gon.blade.php, hanh vi o
   ham noiDungThuGon() trong public/js/menu-custom.js.

   Cat bang max-height + overflow chu KHONG bang display: none va tuyet doi
   khong nap noi dung bang AJAX: nho vay toan bo bai van nam trong HTML may chu
   tra ve nen Google doc du, chi la khach thay gon hon.

   Class 'dang-thu-gon' do JS them - HTML tra ve khong co no, tat JavaScript
   thi thay tron bai.
*/

/*
 * Chieu cao cat di qua bien --cao-toi-da (JS dat tren .khoi-thu-gon theo
 * data-cao-toi-da), KHONG dat max-height inline len chinh o noi dung: inline
 * style khong mat di khi bo class 'dang-thu-gon', noi dung se ket o 400px va nut
 * "Xem thêm" bam khong ra gi. Dat qua bien thi rule nay het hieu luc ngay khi
 * class bi bo.
 */
.khoi-thu-gon.dang-thu-gon .khoi-thu-gon-noi-dung {
    position: relative;
    overflow: hidden;
    max-height: var(--cao-toi-da, 160px);
}

/*
 * Dai mo dan o day cho biet con noi dung ben duoi. Mau phai trung nen cua
 * .noi-dung-danh-muc (#fbfbfb) - lech mot chut la thay ro vach ngang.
 */
.khoi-thu-gon.dang-thu-gon .khoi-thu-gon-noi-dung:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    /* Khong qua 1/3 chieu cao khoi, neu khong dai mo an het phan chu doc duoc. */
    height: 55px;
    background: linear-gradient(to bottom, rgba(251, 251, 251, 0) 0%, #fbfbfb 85%);
    pointer-events: none;
}

.khoi-thu-gon-nut {
    display: block;
    margin: 14px auto 0;
    padding: 8px 22px;
    border: 1px solid #2a83e9;
    border-radius: 20px;
    background: none;
    color: #2a83e9;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.khoi-thu-gon-nut:hover,
.khoi-thu-gon-nut:focus {
    background-color: #2a83e9;
    color: #fff;
}

.khoi-thu-gon-nut i {
    margin-left: 6px;
    font-size: 12px;
}

@media (prefers-reduced-motion: reduce) {
    .khoi-thu-gon-nut {
        transition: none;
    }
}

/* ============================================================
   Trang chi tiet san pham
   ============================================================

   Markup lay tu product-details.html cua theme nhung BO cot sidebar (giong
   trang danh muc) va bo ba khoi khong co chuc nang that: dai sao danh gia, o
   so luong, va toan bo phan binh luan/danh gia.

   Nhung gi bo sung o day la cho theme khong tinh toi: san pham chua co anh,
   danh sach goi gia dang radio (theme ban quan ao nen chi co mot gia), hai nut
   mua hang o trang thai vo hieu cho Giai doan 3, va cac dong chu tieng Viet.
*/

/*
 * O anh thay the khi san pham chua chon anh dai dien. Cung ly do voi the san
 * pham o luoi: o rong lam cot trai xep gon lai trong khi cot phai van dai, ca
 * khoi nhin nhu vo bo cuc.
 */
.trang-san-pham .product-gallery__image.khong-anh .anh-thay-the {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 320px;
    background-color: #f4f6f8;
    color: #c3cbd4;
    font-size: 64px;
}

/* Nhan loai san pham, dat tren dong gia. */
.trang-san-pham .nhan-loai-san-pham {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #8e959d;
}

.trang-san-pham .summary .price {
    margin-bottom: 0;
}

/*
 * Gia goc gach ngang nam sau gia ban. The <del> luon co trong HTML du khong co
 * khuyen mai (rong) de JS chi phai doi noi dung khi khach chon goi khac, khong
 * phai them/bot the - :empty giau no di.
 */
.trang-san-pham .summary .price .gia-goc {
    margin-left: 10px;
    font-size: 16px;
    font-weight: 400;
    color: #8e959d;
}

.trang-san-pham .summary .price .gia-goc:empty {
    display: none;
}

.trang-san-pham .summary .price .chua-co-gia {
    font-size: 18px;
    color: #8e959d;
}

/* --- Danh sach goi gia --- */

.trang-san-pham .khoi-chon-goi {
    margin-top: 25px;
}

.trang-san-pham .tieu-de-chon-goi {
    display: block;
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: 600;
    color: #1e2637;
}

.trang-san-pham .danh-sach-goi {
    margin: 0;
    padding: 0;
    list-style: none;
}

.trang-san-pham .danh-sach-goi li {
    margin-bottom: 8px;
}

.trang-san-pham .o-goi {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 12px 15px;
    border: 1px solid #e4e4e4;
    background-color: #fff;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.trang-san-pham .o-goi:hover {
    border-color: #c4c9d2;
}

/*
 * Vien dam khi goi dang duoc chon. Dung mau toi co dinh #1e2637 chu khong phai
 * mau nhan cua theme.
 */
.trang-san-pham .o-goi:has(input:checked) {
    border-color: #1e2637;
    background-color: #f8f9fa;
}

.trang-san-pham .o-goi input {
    flex: 0 0 auto;
    margin: 0;
}

/*
 * Chi mot goi thi nut radio vo nghia (khong co gi de chon) nhung van phai co
 * trong HTML: Giai doan 3 doc goi_san_pham_id tu chinh no, bo di thi Loai 2
 * gui len don hang khong co goi.
 */
.trang-san-pham .danh-sach-goi.mot-goi input {
    display: none;
}

.trang-san-pham .o-goi-than {
    flex: 1 1 auto;
    min-width: 0;
}

.trang-san-pham .o-goi-ten {
    display: block;
    font-weight: 600;
    color: #1e2637;
}

.trang-san-pham .o-goi-chi-tiet {
    display: block;
    font-size: 14px;
    color: #8e959d;
}

.trang-san-pham .o-goi-gia {
    flex: 0 0 auto;
    font-weight: 700;
    color: #1e2637;
}

.trang-san-pham .o-goi-gia del {
    margin-right: 6px;
    font-size: 14px;
    font-weight: 400;
    color: #8e959d;
}

.trang-san-pham .o-goi-gia ins {
    text-decoration: none;
}

/* --- Hai nut mua hang --- */

.trang-san-pham .khoi-mua-hang {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 25px;
    margin-bottom: 12px;
}

/*
 * Nut dang vo hieu (Giai doan 3 moi noi chuc nang). Phai nhin ro la khong bam
 * duoc, neu khong khach bam mai khong thay gi va tuong trang hong.
 */
.trang-san-pham .khoi-mua-hang .ttm-btn[disabled] {
    opacity: .55;
    cursor: not-allowed;
}

.trang-san-pham .ghi-chu-mua-hang {
    margin-bottom: 20px;
    padding: 10px 14px;
    background-color: #f8f9fa;
    border-left: 3px solid #c4c9d2;
    font-size: 14px;
    color: #4a5262;
}

.trang-san-pham .ghi-chu-mua-hang i {
    margin-right: 6px;
}

.trang-san-pham .ghi-chu-mua-hang a {
    font-weight: 600;
    color: #1e2637;
}

/*
 * Loi nhac gia han (Giai doan 5): khach da co key cua chinh san pham nay.
 *
 * Ba muc do dung chung mot khung, chi doi mau vien va mau nen. Muc 'chan' phai
 * nhin ra ngay la mot cho dung lai chu khong phai mot ghi chu - luc do hai nut
 * mua deu dang bi vo hieu, thieu tin hieu thi khach tuong trang hong.
 */
.trang-san-pham .nhac-ban-quyen {
    margin-bottom: 16px;
    padding: 11px 14px;
    border-left: 3px solid #c4c9d2;
    border-radius: 0 4px 4px 0;
    font-size: 14px;
    line-height: 1.55;
}

.trang-san-pham .nhac-ban-quyen i {
    margin-right: 6px;
}

.trang-san-pham .nhac-ban-quyen a {
    font-weight: 600;
    white-space: nowrap;
}

.trang-san-pham .nhac-thong_tin {
    background-color: #eef6ff;
    border-left-color: #4a8fd8;
    color: #24476b;
}

.trang-san-pham .nhac-thong_tin a {
    color: #1b5fa8;
}

.trang-san-pham .nhac-canh_bao {
    background-color: #fff8e8;
    border-left-color: #e0a800;
    color: #6b4e02;
}

.trang-san-pham .nhac-canh_bao a {
    color: #8a6400;
}

.trang-san-pham .nhac-chan {
    background-color: #fdeeec;
    border-left-color: #c0392b;
    color: #8c2419;
}

.trang-san-pham .nhac-chan a {
    color: #a02c1f;
}

/* --- Tab noi dung --- */

/*
 * Anh trong mo ta chi tiet do admin chen bang Summernote: kich thuoc that cua
 * anh co the rong hon o tab, phai ep lai keo vo tran ngang.
 */
.trang-san-pham .noi-dung-san-pham img {
    max-width: 100%;
    height: auto;
    border-radius: 7px;
}

.trang-san-pham .noi-dung-san-pham .chua-co-mo-ta {
    margin: 0;
    color: #8e959d;
}

/*
 * Video huong dan nhung tu YouTube. Summernote chen the
 * <iframe class="note-video-clip" width="640" height="360"> - so do cung, o
 * khung hep hon 640px la tran ngang. Ep ve 100% be ngang va giu ti le 16:9;
 * aspect-ratio nen dat cung height:auto de de len thuoc tinh height cua the.
 */
.trang-san-pham .noi-dung-san-pham iframe,
.trang-san-pham .noi-dung-san-pham .note-video-clip {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 0;
    margin: 15px 0;
}

/*
 * Cac buoc trong huong dan su dung thuong danh so - tra lai dau cham dau dong
 * cho ul/ol (reset cua theme go het list-style tren nhieu bo chon chung).
 */
.trang-san-pham .noi-dung-huong-dan ol {
    list-style: decimal;
    padding-left: 22px;
}

.trang-san-pham .noi-dung-huong-dan ul {
    list-style: disc;
    padding-left: 22px;
}

.trang-san-pham .noi-dung-huong-dan li {
    margin-bottom: 6px;
}

/*
 * Khoi thong so duoi hai nut mua hang. Theme cho .sku_wrapper/.posted_in mau
 * chu nhat va khong co khoang tho nao vi ban goc chi co ba dong.
 */
.trang-san-pham .product_meta {
    margin-top: 5px;
    padding-top: 15px;
    border-top: 1px solid #ececec;
}

.trang-san-pham .product_meta > div {
    margin-bottom: 6px;
    font-size: 14px;
    color: #4a5262;
}

.trang-san-pham .product_meta > div:last-child {
    margin-bottom: 0;
}

.trang-san-pham .product_meta span {
    color: #1e2637;
}

/* --- Dai san pham lien quan --- */

.trang-san-pham .related.products > h3 {
    margin-bottom: 25px;
    font-size: 24px;
}

@media (prefers-reduced-motion: reduce) {
    .trang-san-pham .o-goi {
        transition: none;
    }
}

/* ============================================================
   Trang chuyen muc bai viet
   ============================================================

   Markup lay tu blog-left-image.html cua theme, BO nen xam ttm-bgcolor-grey de
   dong bo voi trang danh muc san pham. Bo sung o day la cho theme khong tinh
   toi: bai chua co anh dai dien va cac dong chu tieng Viet.
*/

.trang-chuyen-muc .mo-ta-chuyen-muc {
    margin-bottom: 25px;
    font-size: 16px;
}

.trang-chuyen-muc .chua-co-bai-viet {
    margin: 20px 0 0;
    font-size: 16px;
}

/* ============================================================
   The bai viet dang luoi (partial the_bai_viet)
   ============================================================

   Moc CSS la .luoi-bai-viet (lop bao cua hang the) chu KHONG phai
   .trang-chuyen-muc: the nay se dung lai o nhung trang khac, bam vao lop cua
   rieng mot trang thi cho khac mat het dinh dang.

   Markup la .featured-imagebox-blog.style2 cua blog-grid.html. Theme chi lo
   phan trang tri; bo sung o day la nhung cho theme khong tinh toi: bai chua co
   anh dai dien, tieu de tieng Viet dai ngan khac nhau, va viec cac the trong
   mot hang phai cao bang nhau.
*/

/*
 * O anh thay the khi bai chua chon anh dai dien. Phai giu dung khung anh chu
 * khong duoc bo trong: huy hieu ngay cua style2 neo o top: -80px so voi khoi
 * chu nen thieu anh o tren la no bay han ra ngoai the.
 */
.luoi-bai-viet .featured-thumbnail.khong-anh .anh-thay-the,
.trang-bai-viet .featured-thumbnail.khong-anh .anh-thay-the {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 180px;
    background-color: #f4f6f8;
    color: #c3cbd4;
    font-size: 46px;
}

.luoi-bai-viet .featured-thumbnail.khong-anh {
    aspect-ratio: 654 / 490;
}

/*
 * Moi the mot khung anh giong nhau thi huy hieu ngay o cac the moi thang hang.
 * Preset 'bai_viet_the' da cat dung 654 x 490 nen object-fit khong lam meo anh.
 */
.luoi-bai-viet .featured-thumbnail img {
    width: 100%;
    aspect-ratio: 654 / 490;
    object-fit: cover;
}

/* Cat tieu de va mo ta cho cac the trong cung mot hang cao gan bang nhau. */
.luoi-bai-viet .post-title h5,
.luoi-bai-viet .featured-desc p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.luoi-bai-viet .post-title h5 {
    -webkit-line-clamp: 2;
    line-clamp: 2;
    margin-bottom: 0;
}

.luoi-bai-viet .featured-desc p {
    -webkit-line-clamp: 3;
    line-clamp: 3;
    margin-bottom: 0;
}

/* Chuyen muc nam sat day the du tieu de dai ngan khac nhau. */
.luoi-bai-viet .post-meta {
    margin-top: auto;
    font-size: 14px;
    color: #8e959d;
}

.luoi-bai-viet .post-meta .fa {
    margin-right: 6px;
}

/*
 * Keo cac the trong mot hang cao bang nhau de vien duoi cua hang thang. Khoi
 * chu phai la flex cot thi margin-top: auto o .post-meta moi co tac dung.
 */
.luoi-bai-viet > [class*="col-"] {
    display: flex;
}

.luoi-bai-viet .featured-imagebox-blog {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.luoi-bai-viet .featured-imagebox-blog .featured-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

/* ============================================================
   Trang chi tiet bai viet
   ============================================================

   Markup lay tu single-style-01.html - von la trang gioi thieu DU AN, khong
   phai trang bai viet, nen co hai chi tiet phai chinh lai (xem ben duoi). Ba
   o "Expert Team / Free Consultation / Lowest Cost" cua ban goc bo han: do la
   noi dung tinh cua theme, khong co du lieu nao trong he thong ung voi chung.
*/

.trang-bai-viet .ttm-pf-single-detail-box a {
    color: inherit;
    text-decoration: underline;
}

.trang-bai-viet .noi-dung-bai-viet img {
    max-width: 100%;
    height: auto;
    border-radius: 7px;
}

/*
 * Video nhung tu YouTube (Summernote chen <iframe width="640" height="360">).
 * height: auto la bat buoc de de len thuoc tinh height cua the, thieu no thi
 * aspect-ratio vo hieu.
 */
.trang-bai-viet .noi-dung-bai-viet iframe,
.trang-bai-viet .noi-dung-bai-viet .note-video-clip {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 0;
    margin: 15px 0;
}

.trang-bai-viet .noi-dung-bai-viet ol {
    list-style: decimal;
    padding-left: 22px;
}

.trang-bai-viet .noi-dung-bai-viet ul {
    list-style: disc;
    padding-left: 22px;
}

/* Neo muc luc khong duoc nam sat dinh man hinh - header dinh se che mat. */
.noi-dung-bai-viet h2[id],
.noi-dung-bai-viet h3[id] {
    scroll-margin-top: 100px;
}

/*
 * CHINH LAI THEME: o bai lien quan, .featured-imagebox-portfolio.style2 dat
 * .featured-content thanh lop phu chi hien khi RO CHUOT (opacity: 0 +
 * translateY(100%), shortcodes.css dong 1372). Kieu do hop voi luoi anh du an -
 * anh chinh la noi dung - nhung dem sang bai viet thi hong:
 *   - Tren thiet bi cam ung KHONG CO trang thai hover, tieu de bai vinh vien
 *     khong doc duoc.
 *   - Bai chua co anh thi o do trong tron.
 * Nen keo .featured-content ve dang tinh, nam duoi anh va luon hien.
 */
.trang-bai-viet .featured-imagebox-portfolio.style2 {
    background-color: #fff;
    box-shadow: 0 0 15px 0 rgba(40, 61, 88, .07);
}

.trang-bai-viet .featured-imagebox-portfolio.style2 .featured-content {
    position: static;
    width: auto;
    opacity: 1;
    transform: none;
    padding: 18px 20px;
    background-color: transparent;
}

.trang-bai-viet .featured-imagebox-portfolio.style2 .featured-title h5 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    margin-bottom: 6px;
    font-size: 17px;
    line-height: 24px;
}

.trang-bai-viet .featured-imagebox-portfolio.style2 .ngay-dang {
    font-size: 14px;
    color: #8e959d;
}

.trang-bai-viet .featured-imagebox-portfolio.style2 .featured-thumbnail img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

/* ============================================================
   Trang tinh - mau "Trang thuong"
   ============================================================

   Markup lay tu page-thuong.html, da bo sidebar nen cot noi dung chay het be
   ngang (col-lg-12).

   NO KY THUAT: day la lop noi dung soan thao THU TU (.noi-dung-danh-muc,
   .noi-dung-san-pham, .noi-dung-bai-viet, .noi-dung-trang-tinh) va bon khoi
   rule gan nhu trung nhau - img, iframe, ol, ul, scroll-margin. Nen gop thanh
   MOT lop dung chung, nhung viec do phai lam mot lan cho ca bon trang keo theo
   phai soi lai dinh dang cua ba trang dang chay tot, nen tach ra lam rieng.

   31/07/2026: cac rule duoi day da BO tien to '.trang-tinh-thuong' de mau
   "dich vu" dung chung - hai mau cung in mot cot noi_dung nen dinh dang phai
   giong nhau. Lop .noi-dung-trang-tinh chi xuat hien o hai mau trang tinh nen
   viec bo tien to khong dung toi trang nao khac.
*/

.noi-dung-trang-tinh img {
    max-width: 100%;
    height: auto;
    border-radius: 7px;
}

/*
 * Video nhung tu YouTube (Summernote chen <iframe width="640" height="360">).
 * height: auto la bat buoc de de len thuoc tinh height cua the, thieu no thi
 * aspect-ratio vo hieu.
 */
.noi-dung-trang-tinh iframe,
.noi-dung-trang-tinh .note-video-clip {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 0;
    margin: 15px 0;
}

/* main.css:84 dat 'ol, ul { list-style: none }' cho toan site. */
.noi-dung-trang-tinh ol {
    list-style: decimal;
    padding-left: 22px;
}

.noi-dung-trang-tinh ul {
   list-style: disc;
    padding-left: 30px;
    margin-bottom: 15px;
}

/* Neo muc luc khong duoc nam sat dinh man hinh - header dinh se che mat. */
.noi-dung-trang-tinh h2[id],
.noi-dung-trang-tinh h3[id] {
    scroll-margin-top: 100px;
}

/*
 * Bang trong noi dung: chinh sach hay bang gia hay dung bang, ma Summernote
 * chen <table> tran khong co class nen theme khong dinh dang gi. Cho tran ngang
 * duoc tren dien thoai thay vi lam vo be ngang ca trang.
 */
.noi-dung-trang-tinh table {
    width: 100%;
    margin-bottom: 20px;
    border-collapse: collapse;
}

.noi-dung-trang-tinh table td,
.noi-dung-trang-tinh table th {
    padding: 10px 12px;
    border: 1px solid #e3e6ea;
}

.noi-dung-trang-tinh table th {
    background-color: #f7f8f9;
    text-align: left;
}

/* ============================================================
   Trang tinh - mau "Trang dich vu"
   ============================================================

   Markup lay tu public/frontend/element.html. Moi khoi la mot .ttm-row cua theme
   (padding 90px tren/duoi) nen chi phai chinh nhung cho theme khong co san class
   tuong ung.

   Thu tu khoi tren trang: dai tieu de (H1+breadcrumb), hero, BANG GIA, cam ket, van de, danh cho
   ai, nhan duoc gi, con so, doi tac, noi dung chi tiet, keu goi giua, cac buoc,
   nguoi thuc hien, danh gia, FAQ, tool dung kem, NOI DUNG DAI, keu goi cuoi.
*/

/*
 * Dai tieu de cua trang dich vu dung nguyen khoi .dai-tieu-de o tren, khong co
 * nhanh anh nen rieng: da chot mau dich vu hien dai tieu de giong moi trang
 * trong khac (30/07/2026).
 */

/* ----- Hero ----- */

/* Hero nam ngay duoi H1 nen khong can them 90px o tren. */
.trang-dich-vu.dai-hero {
    padding-top: 45px;
}

.trang-dich-vu.dai-hero .cau-dan {
    margin-bottom: 25px;
    font-size: 18px;
    line-height: 30px;
    color: #4a5262;
}

.trang-dich-vu.dai-hero .ttm_single_image-wrapper img {
    border-radius: 8px;
}

/* ----- Bang gia ----- */

.trang-dich-vu.dai-bang-gia {
    padding: 70px 0 40px;
}

/*
 * Cac cot trong cung hang phai cao bang nhau, neu khong cot it thanh phan hon
 * lam vien duoi rang cua. Theme khong dat chieu cao vi ban goc luon dan du 3 goi
 * co so dong y het nhau.
 */
.trang-dich-vu .luoi-bang-gia .ttm-pricing-plan {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-bottom: 30px;
    border: 1px solid #e9ecf1;
    border-radius: 8px;
}

/* Nut luon dinh day the du danh sach thanh phan dai ngan khac nhau. */
.trang-dich-vu .luoi-bang-gia .price_btn {
    margin-top: auto;
}

.trang-dich-vu .luoi-bang-gia .ttm-ptablebox-features {
    text-align: left;
}

/*
 * Dau tich truoc tung thanh phan. main.css dong 84 tat list-style toan site nen
 * ve bang :before thay vi bat lai list-style.
 */
.trang-dich-vu .luoi-bang-gia .ttm-feature-lines li {
    position: relative;
    padding-left: 26px;
}

.trang-dich-vu .luoi-bang-gia .ttm-feature-lines li:before {
    content: "\e64c"; /* ti-check cua themify */
    position: absolute;
    top: 13px;
    left: 0;
    font-family: "themify";
    font-size: 12px;
    color: #2fa84f;
}

/* Goi bo trong o gia: chu "Liên hệ" khong duoc to bang con so 50px. */
.trang-dich-vu .luoi-bang-gia .gia-lien-he {
    font-size: 30px;
    line-height: 40px;
}

/* ----- Cam ket ----- */

.trang-dich-vu.dai-cam-ket {
    padding: 70px 0 40px;
}

.trang-dich-vu.dai-cam-ket .featured-icon-box {
    height: 100%;
    margin-bottom: 30px;
}

/* ----- Van de / diem noi bat: hai khoi cung dang o icon ben trai ----- */

.trang-dich-vu.dai-van-de,
.trang-dich-vu.dai-diem-noi-bat {
    padding: 70px 0 40px;
}

.trang-dich-vu.dai-van-de .featured-icon-box,
.trang-dich-vu.dai-diem-noi-bat .featured-icon-box {
    height: 100%;
    margin-bottom: 30px;
}

.trang-dich-vu .featured-desc p {
    margin-bottom: 0;
}

/* ----- Danh cho ai ----- */

.trang-dich-vu.dai-doi-tuong {
    padding: 70px 0 40px;
}

.trang-dich-vu .the-doi-tuong {
    height: 100%;
    margin-bottom: 30px;
    overflow: hidden;
    border: 1px solid #e9ecf1;
    border-radius: 8px;
    background-color: #fff;
}

.trang-dich-vu .the-doi-tuong .anh-doi-tuong img {
    width: 100%;
    height: 190px;
    object-fit: cover;
}

/*
 * Chua chon anh thi ve o thay the CAO BANG o co anh: de trong thi the nay lun
 * han so voi the ben canh va ca hang lech.
 */
.trang-dich-vu .the-doi-tuong .anh-doi-tuong.khong-anh .anh-thay-the {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 190px;
    background-color: #f2f4f7;
    color: #b4bcc8;
    font-size: 40px;
}

.trang-dich-vu .the-doi-tuong .noi-dung-doi-tuong {
    padding: 20px 22px 22px;
}

.trang-dich-vu .the-doi-tuong .noi-dung-doi-tuong h5 {
    margin-bottom: 8px;
    font-size: 17px;
    line-height: 25px;
}

.trang-dich-vu .the-doi-tuong .noi-dung-doi-tuong p {
    margin-bottom: 0;
    font-size: 15px;
    line-height: 24px;
    color: #6e7683;
}

/* ----- Con so tin cay ----- */

.trang-dich-vu.dai-con-so {
    padding: 60px 0 35px;
}

.trang-dich-vu.dai-con-so .ghi-chu-con-so {
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 22px;
    opacity: 0.75;
}

/* ----- Logo doi tac ----- */

.trang-dich-vu.dai-doi-tac {
    padding: 55px 0 40px;
}

/* ----- Noi dung chi tiet (accordion co so thu tu) ----- */

.trang-dich-vu.dai-chuong-trinh {
    padding: 70px 0;
}

.trang-dich-vu .toggle-title .so-phan {
    display: inline-block;
    min-width: 34px;
    margin-right: 10px;
    font-weight: 700;
    opacity: 0.55;
}

/* Dau viec trong tung phan: main.css dong 84 tat list-style nen ve lai dau tich. */
.trang-dich-vu .dau-viec {
    margin: 0;
    padding: 0;
}

.trang-dich-vu .dau-viec li {
    position: relative;
    padding: 5px 0 5px 26px;
    font-size: 15px;
    line-height: 25px;
}

.trang-dich-vu .dau-viec li:before {
    content: "\e64c"; /* ti-check cua themify */
    position: absolute;
    top: 8px;
    left: 0;
    font-family: "themify";
    font-size: 12px;
    color: #2fa84f;
}

/* ----- Nguoi thuc hien ----- */

.trang-dich-vu.dai-nguoi-thuc-hien {
    padding: 70px 0 40px;
}

.trang-dich-vu.dai-nguoi-thuc-hien .featured-thumbnail img {
    width: 100%;
    height: 260px;
    object-fit: cover;
}

.trang-dich-vu.dai-nguoi-thuc-hien .featured-content {
    padding: 18px 15px;
    text-align: center;
}

.trang-dich-vu.dai-nguoi-thuc-hien .featured-content .category {
    margin-bottom: 0;
    font-size: 14px;
    color: #6e7683;
}

/* ----- Danh gia + FAQ + tool dung kem ----- */

.trang-dich-vu.dai-danh-gia,
.trang-dich-vu.dai-cau-hoi {
    padding: 70px 0;
}

.trang-dich-vu.dai-san-pham {
    padding: 70px 0 40px;
}

/* The san pham trong cung hang cao bang nhau, giong trang danh muc. */
.trang-dich-vu .luoi-san-pham .product {
    height: 100%;
    margin-bottom: 30px;
}

/* ----- Noi dung dai ----- */

.trang-dich-vu.dai-noi-dung {
    padding: 70px 0;
}

.trang-dich-vu .noi-dung-trang-tinh img {
    max-width: 100%;
    height: auto;
    border-radius: 7px;
}

/*
 * Video nhung tu YouTube (Summernote chen iframe co width 640 height 360).
 * height: auto la bat buoc de de len thuoc tinh height cua the, thieu no thi
 * aspect-ratio vo hieu.
 */
.trang-dich-vu .noi-dung-trang-tinh iframe,
.trang-dich-vu .noi-dung-trang-tinh .note-video-clip {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 0;
    margin: 15px 0;
}

/* main.css dong 84 tat list-style cho ol va ul tren toan site. */
.trang-dich-vu .noi-dung-trang-tinh ol {
    list-style: decimal;
    padding-left: 22px;
}

.trang-dich-vu .noi-dung-trang-tinh ul {
    list-style: disc;
    padding-left: 22px;
}

.trang-dich-vu .noi-dung-trang-tinh table {
    width: 100%;
    margin-bottom: 20px;
    border-collapse: collapse;
}

.trang-dich-vu .noi-dung-trang-tinh table td,
.trang-dich-vu .noi-dung-trang-tinh table th {
    padding: 10px 12px;
    border: 1px solid #e3e6ea;
}

.trang-dich-vu .noi-dung-trang-tinh table th {
    background-color: #f7f8f9;
    text-align: left;
}

/* ----- Keu goi (giua trang va cuoi trang) ----- */

/*
 * Nen la mau nhan nen chu phai trang - theme chi to mau chu trang khi co san
 * class ttm-textcolor-white, ma o day khong dung class do vi no cung to trang ca
 * nut vien.
 */
.trang-dich-vu.dai-keu-goi {
    padding: 55px 0;
}

.trang-dich-vu.dai-keu-goi .keu-goi-tieu-de,
.trang-dich-vu.dai-keu-goi .keu-goi-mo-ta {
    color: #fff;
}

.trang-dich-vu.dai-keu-goi .keu-goi-tieu-de {
    margin-bottom: 8px;
    font-size: 24px;
    line-height: 32px;
}

.trang-dich-vu.dai-keu-goi .keu-goi-cac-nut {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

@media all and (max-width: 991px) {
    /* Man hinh nho: nut xuong duoi chu va can le trai cho de cham. */
    .trang-dich-vu.dai-keu-goi .keu-goi-cac-nut {
        margin-top: 22px;
        justify-content: flex-start;
    }
}

/* ==========================================================================
   GIO HANG (Giai doan 3 muc 1)
   ========================================================================== */

/*
 * Dai thong bao flash, in o dau site-main cua moi trang cong khai. Can them le
 * tren/duoi vi no nam sat ngay duoi dai tieu de - dinh vao nhau thi nhin nhu
 * mot phan cua dai do chu khong phai mot loi bao.
 */
/*
 * Le tren 45px chu khong phai 25px: trang khong co dai tieu de (trang chu,
 * trang dang nhap) thi loi bao nam thang duoi header, 25px la dinh vao nhau
 * nen doc nhu mot phan cua header chu khong phai mot loi bao.
 *
 * Le duoi am de bu bot padding_top_60 cua khoi noi dung ngay ben duoi - khong
 * co no thi giua loi bao va noi dung ho ra gan 100px.
 */
.dai-thong-bao {
    margin-top: 120px;
    margin-bottom: -25px;
}

.dai-thong-bao .alert {
    margin-bottom: 10px;
}

.dai-thong-bao .alert i {
    margin-right: 6px;
}

/* --- Nut "Thêm vào giỏ" o trang san pham --- */

/*
 * The <form> boc khoi chon goi + hai nut. KHONG dat class 'cart' cho no: theme
 * co san rule '.summary form.cart { margin: 30px 0 }' se cong them khoang tho
 * vao phan da can bang o .khoi-chon-goi.
 */
.trang-san-pham .form-mua-hang {
    margin: 0;
}

/* Nut "Xem giỏ hàng" la the <a> nen phai tu can chieu cao cho bang nut <button>
   dung canh no, neu khong hai nut lech nhau vai pixel. */
.trang-san-pham .khoi-mua-hang .nut-xem-gio {
    display: inline-flex;
    align-items: center;
}

/* --- Trang gio hang --- */

.trang-gio-hang .bang-gio-hang {
    margin-bottom: 0;
}

.trang-gio-hang .bang-gio-hang th {
    color: #1e2637;
}

/*
 * Theme ep anh trong shop_table ve 32px - qua nho de nhan ra san pham. O day
 * moi dong chi co mot mon nen rong rai hon nhieu.
 */
.trang-gio-hang .bang-gio-hang .product-thumbnail {
    width: 100px;
}

.trang-gio-hang .bang-gio-hang .product-thumbnail img {
    width: 80px;
    height: auto;
    border: 1px solid #ededed;
}

.trang-gio-hang .bang-gio-hang .anh-thay-the {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 60px;
    background-color: #f4f5f7;
    color: #b6bcc6;
    font-size: 22px;
}

.trang-gio-hang .bang-gio-hang .product-name a {
    font-weight: 600;
    color: #1e2637;
}

.trang-gio-hang .bang-gio-hang .nhan-loai {
    display: block;
    font-size: 13px;
    color: #8e959d;
}

/*
 * Mon khong con ban duoc (san pham bi an hoac goi bi tat hien thi). Lam mo ca
 * dong va bao ro ly do - de nguyen nhu cac mon khac thi khach khong hieu vi sao
 * tong tien khong cong no vao.
 */
.trang-gio-hang .mon-khong-ban-duoc {
    background-color: #fbfbfc;
}

.trang-gio-hang .mon-khong-ban-duoc .product-thumbnail img,
.trang-gio-hang .mon-khong-ban-duoc .product-price {
    opacity: .5;
}

.trang-gio-hang .canh-bao-mon {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: #c0392b;
}

/*
 * Loi nhac gia han trong gio (Giai doan 5). Cung noi dung voi khoi o trang san
 * pham nhung nam trong o cua bang nen phai gon hon: khong nen, chi mot vach mau
 * ben trai de van phan biet duoc ba muc do.
 */
.trang-gio-hang .nhac-ban-quyen-mon {
    display: block;
    margin-top: 6px;
    padding-left: 8px;
    border-left: 2px solid #c4c9d2;
    font-size: 13px;
    line-height: 1.5;
}

.trang-gio-hang .nhac-ban-quyen-mon i {
    margin-right: 4px;
}

.trang-gio-hang .nhac-ban-quyen-mon.nhac-thong_tin {
    border-left-color: #4a8fd8;
    color: #24476b;
}

.trang-gio-hang .nhac-ban-quyen-mon.nhac-canh_bao {
    border-left-color: #e0a800;
    color: #6b4e02;
}

.trang-gio-hang .nhac-ban-quyen-mon.nhac-chan {
    border-left-color: #c0392b;
    color: #8c2419;
}

.trang-gio-hang .product-package {
    width: 260px;
}

.trang-gio-hang .form-doi-goi {
    margin: 0;
}

/*
 * Mui ten tro xuong. Phai tu ve: mui ten mac dinh cua trinh duyet mo mot kieu
 * va rat mo tren nen trang, nhieu khach khong nhan ra o do bam duoc. Ve bang
 * hai duong vien xoay 45 do chu khong bang font icon - o nay nam trong bang,
 * mot ky tu icon khong nap kip se lam dong bang giat.
 */
.trang-gio-hang .o-chon-goi {
    position: relative;
    display: block;
}

.trang-gio-hang .o-chon-goi::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 14px;
    width: 7px;
    height: 7px;
    margin-top: -5px;
    border-right: 2px solid #4a5262;
    border-bottom: 2px solid #4a5262;
    transform: rotate(45deg);
    pointer-events: none; /* Bam trung mui ten van phai mo duoc o chon */
}

.trang-gio-hang .o-chon-goi .form-control {
    height: 40px;
    padding: 5px 32px 5px 10px; /* Chua cho mui ten o le phai */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}

/* Dang gui len may chu: lam mo ca o de thay ro la chua xong. */
.trang-gio-hang .o-chon-goi.dang-luu {
    opacity: .55;
}

/*
 * Doi goi xong thi lam sang thoang o gia - bao da luu that ma khong chan mot
 * hop thoai giua man hinh (doi goi la viec khach lam nhieu lan de so gia).
 */
.trang-gio-hang [data-gia-mon].vua-doi {
    animation: gio-hang-vua-doi 1.4s ease-out;
}

@keyframes gio-hang-vua-doi {
    0% { background-color: #fff6d6; }
    100% { background-color: transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .trang-gio-hang [data-gia-mon].vua-doi {
        animation: none;
    }
}

.trang-gio-hang .product-price {
    width: 160px;
    font-weight: 600;
}

.trang-gio-hang .product-remove {
    width: 60px;
}

/*
 * Theme chi ta kieu cho 'a.remove'; o day la <button> that (xoa lam doi du lieu
 * nen phai di bang DELETE co CSRF) nen phai go nen va vien mac dinh cua nut.
 */
.trang-gio-hang .product-remove .remove {
    padding: 0;
    border: 0;
    background: none;
    margin: 0 auto;
}

/* Khoi "Cộng giỏ hàng" duoc theme cho float: right nen phai tu don dong,
   khong thi phan sau no leo len nam canh. */
.trang-gio-hang .cart-collaterals::after {
    content: "";
    display: table;
    clear: both;
}

.trang-gio-hang .cart_totals .shop_table {
    margin-bottom: 20px;
}

.trang-gio-hang .cart_totals .order-total td {
    font-size: 18px;
    color: #1e2637;
}

/* Nut thanh toan con tat cho muc 2-3 cua Giai doan 3; phai nhin ro la khong
   bam duoc, giong hai nut o trang san pham. */
.trang-gio-hang .checkout-button[disabled] {
    display: block;
    width: 100%;
    opacity: .55;
    cursor: not-allowed;
}

.trang-gio-hang .ghi-chu-thanh-toan {
    margin-top: 15px;
    margin-bottom: 0;
    padding: 10px 14px;
    background-color: #f8f9fa;
    border-left: 3px solid #c4c9d2;
    font-size: 14px;
    color: #4a5262;
}

.trang-gio-hang .ghi-chu-thanh-toan i {
    margin-right: 6px;
}

.trang-gio-hang .ghi-chu-thanh-toan a {
    font-weight: 600;
    color: #1e2637;
}

/* --- Gio rong --- */

.trang-gio-hang .gio-hang-rong {
    padding: 60px 20px;
    text-align: center;
    background-color: #f8f9fa;
}

.trang-gio-hang .gio-hang-rong i {
    font-size: 46px;
    color: #b6bcc6;
}

.trang-gio-hang .gio-hang-rong h3 {
    margin-top: 18px;
    margin-bottom: 8px;
    font-size: 22px;
}

.trang-gio-hang .gio-hang-rong p {
    margin-bottom: 22px;
    color: #8e959d;
}

@media all and (max-width: 767px) {
    /* Man hinh nho: bang gio da cuon ngang trong .table-responsive, con khoi
       tong tien thi tra ve chieu rong day. */
    .trang-gio-hang .cart-collaterals .cart_totals {
        float: none;
        width: 100%;
    }
}

/* --- Popup ket qua "Thêm vào giỏ" --- */

/*
 * Khung modal cua Bootstrap 5.3.3 (theme co san ban that) lo phan can giua man
 * hinh, lop nen mo va phim Esc. O day chi ta rieng phan ruot.
 */
.popup-gio-hang .modal-dialog {
    max-width: 420px;
}

.popup-gio-hang .modal-content {
    border: 0;
    border-radius: 4px;
    box-shadow: 0 18px 50px rgba(30, 38, 55, .25);
}

.popup-gio-hang .modal-body {
    padding: 38px 30px 30px;
    text-align: center;
}

/*
 * Nut X: dat de len goc tren phai. Bootstrap 5 ve dau X bang anh nen SVG chu
 * khong phai ky tu, nen khong can lo font icon.
 */
.popup-gio-hang .btn-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1;
    opacity: .45;
}

.popup-gio-hang .btn-close:hover {
    opacity: .9;
}

.popup-gio-hang-bieu-tuong {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background-color: #e8f6ee;
    color: #22a35c;
    font-size: 26px;
}

/* Cung mot popup dung cho ca hai chieu: JS gan .popup-that-bai khi may chu tu
   choi (da co trong gio, goi ngung ban...). */
.popup-gio-hang.popup-that-bai .popup-gio-hang-bieu-tuong {
    background-color: #fdeceb;
    color: #c0392b;
}

.popup-gio-hang-tieu-de {
    margin-bottom: 8px;
    font-size: 22px;
    line-height: 30px;
    color: #1e2637;
}

.popup-gio-hang-loi-nhan {
    margin-bottom: 24px;
    color: #4a5262;
}

.popup-gio-hang-loi-nhan:empty {
    display: none;
}

/*
 * Loi nhac gia han trong popup (Giai doan 5). Dong nay dai hon cau bao "đã
 * thêm vào giỏ" nen phai nho hon va co khung rieng, neu khong no lan at chinh
 * ket qua ma khach vua bam.
 */
.popup-gio-hang-nhac {
    margin: -8px 0 22px;
    padding: 10px 12px;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.55;
    text-align: left;
}

.popup-gio-hang-nhac.nhac-thong_tin {
    background-color: #eef6ff;
    color: #24476b;
}

.popup-gio-hang-nhac.nhac-canh_bao {
    background-color: #fff8e8;
    color: #6b4e02;
}

.popup-gio-hang-nhac.nhac-chan {
    background-color: #fdeeec;
    color: #8c2419;
}

.popup-gio-hang-cac-nut {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

/* Nut "Xem giỏ hàng" la the <a>: ep ve inline-flex de chu can giua theo chieu
   doc dung nhu mot <button>. */
.popup-gio-hang-cac-nut > * {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media all and (max-width: 575px) {
    /* Man hinh hep: nut keo het be ngang cho de cham. */
    .popup-gio-hang-cac-nut > * {
        flex: 1 1 100%;
    }
}

/* --- Nut tai khoan o header (co anh dai dien) --- */

.header-btn .nut-tai-khoan {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/*
 * Anh dai dien tron. Phai ep ca width lan height va dung object-fit: anh
 * Google tra ve hinh vuong nhung anh khach tu tai len co the ti le bat ky, de
 * tu do thi nut gian ra lam lech ca hang tren cua header.
 */
.header-btn .anh-dai-dien-khach {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    background-color: rgba(255, 255, 255, .25);
}

/* Nut nay nam o thanh tren cung, man hinh nho theme da an ca khoi nen khong
   can rieng breakpoint. */

/* --- Nut dang nhap / dang ky bang Google --- */

/*
 * display: flex vua de can logo voi chu theo chieu doc, vua tra lai chieu rong
 * day cho nut: markup dang mang lop 'btn-block' cua Bootstrap 4, ma tep CSS
 * cua theme la Bootstrap 5.3.3 that - lop do khong con ton tai nen nut co lai
 * bang be ngang chu, lech han so voi nut "Đăng nhập" ngay ben duoi (dung w-100).
 */
.nut-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/*
 * Kich thuoc dat o day chu khong dung lop w-5 h-5: du an chay Bootstrap 5 +
 * theme Altech, khong co Tailwind nen hai lop do khong lam gi ca. SVG khong
 * khai width/height thi mot so trinh duyet ve no o 300x150 mac dinh.
 */
.logo-google {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
}

/* ==========================================================================
   TRANG DON HANG (Giai doan 3 muc 2)
   ========================================================================== */

.trang-don-hang .khoi-tom-tat-don {
    margin-bottom: 30px;
    padding: 25px 30px;
    background-color: #f8f9fa;
    border-left: 3px solid #22a35c;
}

.trang-don-hang .khoi-tom-tat-don h3 {
    margin: 10px 0 6px;
    font-size: 22px;
}

.trang-don-hang .khoi-tom-tat-don p {
    margin-bottom: 0;
    color: #4a5262;
}

/*
 * Ma don la thu khach phai GO TAY vao o noi dung chuyen khoan, nen phai de
 * doc tung ky tu: font day co dinh, gian chu, khong dinh vao chu ben canh.
 */
.ma-don {
    font-family: Consolas, "Courier New", monospace;
    letter-spacing: 1px;
    color: ##3f6dd0;
}
.khoi-qr img {
    max-width: 100%;
}
.khoi-qr {
    text-align: center !important;
}
.nhan-trang-thai {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 20px;
    background-color: #e9ecef;
    font-size: 13px;
    font-weight: 600;
    color: #4a5262;
}
.cangiua {
    margin: auto;
}
.khoi-giao-hang h4 {
    margin-top: 25px;
    font-size: 20px;
}
p.ghi-chu-thanh-toan.da-thanh-toan {
    color: #0c9430;
}
.khachhang h2 {
    font-size: 23px !important;
}

.khachhang {
    margin-top: 30px;
}
.nhan-trang-thai.trang-thai-cho_thanh_toan {
    background-color: #fff3cd;
    color: #8a6d3b;
}

.nhan-trang-thai.trang-thai-da_thanh_toan {
    background-color: #e8f6ee;
    color: #22a35c;
}

.nhan-trang-thai.trang-thai-da_huy,
.nhan-trang-thai.trang-thai-that_bai {
    background-color: #fdeceb;
    color: #c0392b;
}

.trang-don-hang .bang-don-hang th {
    color: #1e2637;
}

.trang-don-hang .bang-don-hang .product-name a {
    font-weight: 600;
    color: #1e2637;
}

.trang-don-hang .bang-don-hang .nhan-loai {
    display: block;
    font-size: 13px;
    color: #8e959d;
}

.trang-don-hang .bang-don-hang .product-price {
    width: 160px;
    font-weight: 600;
}

/* --- Cot phai: so tien can tra --- */

.trang-don-hang .khoi-thanh-toan {
    padding: 25px;
    border: 1px solid #ededed;
    background-color: #fff;
}

.trang-don-hang .khoi-thanh-toan h4 {
    margin-bottom: 6px;
    font-size: 16px;
    color: #8e959d;
}

.trang-don-hang .so-tien-can-tra {
    margin-bottom: 18px;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    color: #1e2637;
}

.trang-don-hang .thong-tin-don {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.trang-don-hang .thong-tin-don li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px dotted rgba(0, 0, 0, .1);
    font-size: 14px;
}

.trang-don-hang .thong-tin-don li span {
    color: #8e959d;
}

.trang-don-hang .thong-tin-don li strong {
    color: #1e2637;
    text-align: right;
}

.trang-don-hang .ghi-chu-thanh-toan {
    margin-bottom: 18px;
    padding: 12px 14px;
    background-color: #f8f9fa;
    border-left: 3px solid #c4c9d2;
    font-size: 14px;
    color: #4a5262;
}

.trang-don-hang .ghi-chu-thanh-toan i {
    margin-right: 6px;
}

/*
 * Loi nhac gia han o trang don (Giai doan 5), hien khi don con cho tien. Cung
 * ba muc do voi trang san pham va gio hang.
 */
.trang-don-hang .nhac-ban-quyen-don {
    margin-bottom: 16px;
    padding: 11px 14px;
    border-left: 3px solid #c4c9d2;
    border-radius: 0 4px 4px 0;
    font-size: 14px;
    line-height: 1.55;
}

.trang-don-hang .nhac-ban-quyen-don i {
    margin-right: 6px;
}

.trang-don-hang .nhac-ban-quyen-don.nhac-thong_tin {
    background-color: #eef6ff;
    border-left-color: #4a8fd8;
    color: #24476b;
}

.trang-don-hang .nhac-ban-quyen-don.nhac-canh_bao {
    background-color: #fff8e8;
    border-left-color: #e0a800;
    color: #6b4e02;
}

.trang-don-hang .nhac-ban-quyen-don.nhac-chan {
    background-color: #fdeeec;
    border-left-color: #c0392b;
    color: #8c2419;
}

.trang-don-hang .nut-mua-tiep {
    display: block;
    text-align: center;
}

@media all and (max-width: 991px) {
    /* Man hinh nho: khoi tien xuong duoi bang, can khoang tho cho no. */
    .trang-don-hang .khoi-thanh-toan {
        margin-top: 30px;
    }
}

/* --- Ma VietQR o trang don hang (Giai doan 3 muc 3) --- */

.trang-don-hang .khoi-qr {
    margin-bottom: 18px;
    padding: 15px;
    border: 1px solid #ededed;
    background-color: #fff;
    text-align: center;
}

/*
 * Anh QR phai vuong va du lon de quet duoc: dien thoai giu cach man hinh
 * ~20cm thi duoi 200px la bat dau kho bat net. Nen trang bat buoc - vien den
 * cua ma QR can tuong phan, dat len nen xam la vai app khong nhan ra.
 */
.trang-don-hang .anh-qr {
    display: block;
    width: 100%;
    max-width: 260px;
    height: auto;
    margin: 0 auto;
    background-color: #fff;
}

.trang-don-hang .huong-dan-quet {
    margin: 12px 0 0;
    font-size: 14px;
    color: #8e959d;
}

.trang-don-hang .thong-tin-chuyen-khoan {
    margin: 0 0 15px;
    padding: 0;
    list-style: none;
}

.trang-don-hang .thong-tin-chuyen-khoan li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px dotted rgba(0, 0, 0, .1);
    font-size: 14px;
}

.trang-don-hang .thong-tin-chuyen-khoan li span {
    flex: 0 0 auto;
    width: 100px;
    color: #8e959d;
}

.trang-don-hang .thong-tin-chuyen-khoan li strong {
    flex: 1 1 auto;
    min-width: 0;
    color: #1e2637;
    /* So tai khoan va ma don deu dai, khong duoc tran ra ngoai khoi. */
    word-break: break-all;
}

/* Ma don o day cung phai de doc tung ky tu nhu o khoi tom tat. */
.trang-don-hang .thong-tin-chuyen-khoan .ma-don {
    font-family: Consolas, "Courier New", monospace;
    letter-spacing: 1px;
}

.trang-don-hang .nut-sao-chep {
    flex: 0 0 auto;
    padding: 4px 7px;
    border: 1px solid #e4e4e4;
    border-radius: 3px;
    background: none;
    font-size: 13px;
    color: #8e959d;
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease;
}

.trang-don-hang .nut-sao-chep:hover {
    border-color: #c4c9d2;
    color: #1e2637;
}

/*
 * Da chep: doi nut sang xanh va thay icon bang dau tich. Khong dung hop thoai
 * hay dong chu them - o nay chat, ma khach chi can biet cu bam vua an.
 */
.trang-don-hang .nut-sao-chep.vua-chep {
    border-color: #22a35c;
    color: #22a35c;
}

.trang-don-hang .nut-sao-chep.vua-chep .fa::before {
    content: "\f00c"; /* fa-check */
}

/*
 * Loi nhac giu nguyen noi dung chuyen khoan. To hon ghi chu thuong vi day la
 * cho hay sai nhat: go tay ma don thieu mot ky tu la webhook khong khop duoc
 * don, tien vao roi ma don van treo.
 */
.trang-don-hang .luu-y-noi-dung {
    margin-bottom: 18px;
    padding: 12px 14px;
    background-color: #fff8e6;
    border-left: 3px solid #e6a817;
    font-size: 14px;
    color: #6b5320;
}

.trang-don-hang .luu-y-noi-dung i {
    margin-right: 6px;
}

.trang-don-hang .ghi-chu-thanh-toan.da-thanh-toan {
    background-color: #e8f6ee;
    border-left-color: #22a35c;
    color: #1d6b41;
}

/* --- Man hinh cho thanh toan (Giai doan 3 muc 5) --- */

.trang-don-hang .dong-cho-thanh-toan {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 16px;
    margin-bottom: 18px;
    font-size: 14px;
    color: #8a6d3b;
}

/*
 * Cham nhap nhay bao trang dang tu kiem tra. Khong dung anh xoay hay spinner
 * cua thu vien: mot cham nho nhay cham vua du de thay "dang co gi do chay",
 * ma khong keo mat khach khoi ma QR ngay ben tren.
 */
.trang-don-hang .cham-nhap-nhay {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    margin-top: 6px;
    border-radius: 50%;
    background-color: #e6a817;
    animation: don-hang-nhip-cho 1.6s ease-in-out infinite;
}

@keyframes don-hang-nhip-cho {
    0%, 100% { opacity: 1; }
    50% { opacity: .25; }
}

@media (prefers-reduced-motion: reduce) {
    .trang-don-hang .cham-nhap-nhay {
        animation: none;
    }
}

/* Het gio tu kiem tra: cham dung nhap nhay va chuyen xam cho khop voi chu. */
.trang-don-hang .dong-cho-thanh-toan.het-tu-kiem-tra {
    color: #8e959d;
}

.trang-don-hang .dong-cho-thanh-toan.het-tu-kiem-tra .cham-nhap-nhay {
    background-color: #c4c9d2;
    animation: none;
}

.trang-don-hang .nut-kiem-tra-lai {
    padding: 0;
    border: 0;
    background: none;
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline;
    color: #1e2637;
    cursor: pointer;
}

/* ------------------------------------------------------------------
   Khoi giao hang tren trang don (Giai doan 4 muc 2)
   ------------------------------------------------------------------ */

.trang-don-hang .khoi-giao-hang {
    margin-bottom: 30px;
    padding: 25px 30px 20px;
    border: 1px solid #d8ecdf;
    border-radius: 4px;
    background-color: #f6fbf8;
}

.trang-don-hang .khoi-giao-hang > h4 {
    margin-bottom: 18px;
    font-size: 19px;
    color: #1e2637;
}

.trang-don-hang .khoi-giao-hang > h4 .fa {
    margin-right: 8px;
    color: #22a35c;
}

.trang-don-hang .mon-da-giao {
    padding: 15px 0;
    border-top: 1px solid #e4efe8;
}

.trang-don-hang .mon-da-giao:first-of-type {
    padding-top: 0;
    border-top: 0;
}

.trang-don-hang .mon-da-giao .ten-mon {
    margin-bottom: 10px;
    font-weight: 600;
    color: #1e2637;
}

.trang-don-hang .mon-da-giao .nhan-loai {
    margin-left: 8px;
    font-size: 13px;
    font-weight: 400;
    color: #8e959d;
}

.trang-don-hang .mon-da-giao .dang-chuan-bi {
    margin-bottom: 0;
    font-size: 14px;
    color: #8a6d3b;
}

.trang-don-hang .mon-da-giao .dang-chuan-bi .fa {
    margin-right: 6px;
}

/* Ma ban quyen: khach phai doc va go tay nen phai la font don cach. */
.khoi-key {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding: 10px 14px;
    border: 1px dashed #c7dccf;
    border-radius: 3px;
    background-color: #fff;
}

.khoi-key .nhan-key {
    font-size: 13px;
    color: #8e959d;
}

.khoi-key .ma-key {
    padding: 0;
    font-family: Consolas, "Courier New", monospace;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
    background: none;
    color: #1e2637;
}

.khoi-key .han-key {
    margin-left: auto;
    font-size: 13px;
    color: #8e959d;
}

.dong-tep {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    margin-bottom: 8px;
    border: 1px solid #e4efe8;
    border-radius: 3px;
    background-color: #fff;
}

.dong-tep:last-child {
    margin-bottom: 0;
}

.dong-tep .ten-tep {
    flex: 1 1 220px;
    color: #1e2637;
    word-break: break-word;
}

.dong-tep .ten-tep .fa {
    margin-right: 8px;
    color: #8e959d;
}

.dong-tep .cho-tep {
    display: block;
    margin-left: 22px;
    font-size: 13px;
    color: #8e959d;
}

.dong-tep .nut-tai-ve {
    flex: 0 0 auto;
}

.dong-tep .nut-tai-ve .fa {
    margin-right: 6px;
}

.luu-y-tai-ve {
    margin: 16px 0 0;
    padding-top: 14px;
    border-top: 1px solid #e4efe8;
    font-size: 13px;
    color: #8e959d;
}

.luu-y-tai-ve .fa {
    margin-right: 6px;
}

/* ------------------------------------------------------------------
   Danh sach "Đơn hàng của tôi"
   ------------------------------------------------------------------
   .ma-don va .nhan-trang-thai dung chung voi trang chi tiet don, khai o
   khoi ben tren (khong con gioi han trong .trang-don-hang). */

.loc-trang-thai-don {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

.loc-trang-thai-don a {
    display: inline-block;
    padding: 5px 14px;
    border: 1px solid #e3e6ea;
    border-radius: 20px;
    font-size: 14px;
    color: #4a5262;
}

.loc-trang-thai-don a.dang-chon {
    border-color: transparent;
    background-color: #1e2637;
    color: #fff;
}

.bang-don-cua-toi th {
    color: #1e2637;
    white-space: nowrap;
}

.bang-don-cua-toi td {
    vertical-align: middle;
}

.bang-don-cua-toi .ma-don {
    font-weight: 600;
}

.bang-don-cua-toi .cot-hanh-dong {
    text-align: right;
    white-space: nowrap;
}

.don-trong {
    padding: 40px 30px;
    border: 1px dashed #e3e6ea;
    border-radius: 4px;
    text-align: center;
}

.don-trong p {
    margin-bottom: 18px;
    color: #8e959d;
}

/* ------------------------------------------------------------------
   O anh cua the san pham (frontend/partials/the_san_pham)
   ------------------------------------------------------------------
   Khong scope theo trang vi the san pham dung chung o trang chu, trang danh
   muc va cac dai lien quan.

   Ca o anh la mot lien ket toi trang san pham (thay cho nut "Xem chi tiết"
   hien khi ro chuot cua theme, da bo). The <a> mac dinh la inline: de nguyen
   thi no nam tren duong co so va sinh mot khe trang vai pixel duoi anh, thay
   ro nhat o the khong co anh vi khe do cong them vao o thay the. */

.product-thumbnail > .lien-ket-anh {
    display: block;
}

/* San pham chua co anh dai dien. O thay the phai co CHIEU CAO that, o rong
   lam cac the trong luoi cao thap khong deu. */

.product-thumbnail.khong-anh {
    background-color: #f4f6f8;
}

.product-thumbnail .anh-thay-the {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 4 / 3;
    color: #c4c9d2;
    font-size: 40px;
}

/* Trinh duyet cu khong hieu aspect-ratio: van phai co chieu cao toi thieu. */
@supports not (aspect-ratio: 4 / 3) {
    .product-thumbnail .anh-thay-the {
        min-height: 180px;
    }
}

/* ------------------------------------------------------------------
   Trang "File đã mua"
   ------------------------------------------------------------------
   .dong-tep / .luu-y-tai-ve dùng chung với trang đơn hàng, khai ở khối
   trên (không còn giới hạn trong .trang-don-hang). */

.mon-da-mua {
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid #eef1f4;
}

.mon-da-mua:last-of-type {
    border-bottom: 0;
}

.mon-da-mua .ten-mon {
    margin-bottom: 10px;
    font-weight: 600;
    color: #1e2637;
}

.mon-da-mua .ten-mon a {
    color: #1e2637;
}

.mon-da-mua .nhan-loai {
    margin-left: 8px;
    font-size: 13px;
    font-weight: 400;
    color: #8e959d;
}

/* Day sang phai tren man hinh rong, xuong dong tren dien thoai. */
.mon-da-mua .mua-tu-don {
    display: block;
    font-size: 13px;
    font-weight: 400;
    color: #8e959d;
}

@media (min-width: 768px) {
    .mon-da-mua .ten-mon {
        display: flex;
        align-items: baseline;
        gap: 8px;
    }

    .mon-da-mua .mua-tu-don {
        display: inline;
        margin-left: auto;
        white-space: nowrap;
    }
}

/* ------------------------------------------------------------------
   Trang "Bản quyền & thiết bị" (chỉ đọc)
   ------------------------------------------------------------------
   .khoi-key / .ma-key / .nhan-trang-thai dùng chung với trang đơn hàng. */

.the-ban-quyen {
    margin-bottom: 24px;
    padding: 20px 22px;
    border: 1px solid #e4efe8;
    border-radius: 4px;
    background-color: #f6fbf8;
}

.the-ban-quyen .ten-mon {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 17px;
    font-weight: 600;
    color: #1e2637;
}

.the-ban-quyen .ten-mon a {
    color: #1e2637;
}

.the-ban-quyen .thong-tin-key {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.the-ban-quyen .thong-tin-key span {
    display: block;
    font-size: 13px;
    color: #8e959d;
}

.the-ban-quyen .bang-thiet-bi {
    margin: 16px 0 0;
    background-color: #fff;
}

.the-ban-quyen .bang-thiet-bi th {
    font-size: 13px;
    color: #8e959d;
}

/* Chuoi HWID: font don cach de doc, xuong dong rieng khoi ten may. */
.the-ban-quyen .ma-may {
    display: block;
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
    color: #8e959d;
}

.the-ban-quyen .chua-co-thiet-bi {
    margin: 16px 0 0;
    padding: 12px 14px;
    border: 1px dashed #c7dccf;
    border-radius: 3px;
    background-color: #fff;
    font-size: 14px;
    color: #8e959d;
}

.the-ban-quyen .huong-dan-go-may {
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px solid #e4efe8;
    font-size: 13px;
    color: #8e959d;
}

.the-ban-quyen .huong-dan-go-may .fa {
    margin-right: 6px;
}

/* ==========================================================================
   Sua ho ten / so dien thoai tren trang tai khoan
   ==========================================================================
   Mac dinh (khong co JS): o nhap hien, nut but va gia tri xem an di - form
   dung nghia mot form. JS them lop .dang-sua de dao lai hai trang thai.
   ========================================================================== */

.form-thong-tin .gia-tri-xem,
.form-thong-tin .nut-sua-thong-tin {
    display: none;
}

.form-thong-tin.dang-sua .o-sua-thong-tin {
    display: block;
}

.form-thong-tin:not(.dang-sua) .o-sua-thong-tin {
    display: none;
}

.form-thong-tin:not(.dang-sua) .gia-tri-xem,
.form-thong-tin:not(.dang-sua) .nut-sua-thong-tin {
    display: inline-block;
}

.form-thong-tin:not(.dang-sua) .khoi-luu-thong-tin {
    display: none;
}

.form-thong-tin .nut-sua-thong-tin {
    margin-left: 8px;
    padding: 2px 8px;
    border: 1px solid #dbe2e6;
    border-radius: 3px;
    background: #fff;
    color: #8e959d;
    font-size: 13px;
    line-height: 1.6;
    vertical-align: middle;
    transition: color .2s, border-color .2s;
}

.form-thong-tin .nut-sua-thong-tin:hover,
.form-thong-tin .nut-sua-thong-tin:focus {
    border-color: var(--mau-nhan, #22a35c);
    color: var(--mau-nhan, #22a35c);
}

.form-thong-tin .gia-tri-xem {
    vertical-align: middle;
}

.form-thong-tin .khoi-luu-thong-tin {
    margin-bottom: 10px;
}

/* Nut huy don cua khach: nam canh nut hanh dong chinh nen phai nhat hon han
   no - huy la loi thoat, khong phai viec khach vao trang nay de lam. */
.form-huy-don {
    display: inline-block;
    margin: 0 0 0 4px;
}

.form-huy-don .nut-huy-don {
    padding: 0 6px;
    color: #8e959d;
    font-size: 13px;
    text-decoration: underline;
}

.form-huy-don .nut-huy-don:hover,
.form-huy-don .nut-huy-don:focus {
    color: #c0392b;
}

/* ============================================================
   Trang ket qua tim kiem (frontend/search/ket_qua.blade.php)

   Chi mot o nhap lai + hai trang thai rong. Phan luoi san pham,
   dong dem ket qua va o sap xep dung lai nguyen CSS cua trang
   danh muc (class .trang-danh-muc van duoc giu tren wrapper).
   ============================================================ */

.form-tim-kiem {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
}

.form-tim-kiem input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    height: 46px;
    padding: 0 16px;
    border: 1px solid #e0e4e8;
    border-radius: 3px;
    font-size: 15px;
    color: #4a5262;
}

.form-tim-kiem input[type="search"]:focus {
    outline: none;
    border-color: var(--mau-nhan, #22a35c);
}

.form-tim-kiem .ttm-btn {
    flex: 0 0 auto;
}

.khong-co-ket-qua {
    padding: 30px 0 10px;
}

.khong-co-ket-qua p {
    margin-bottom: 12px;
}
p.nhac-ban-quyen-don.nhac-thong_tin {
    color: #008e22;
    font-style: italic;
}
@media (max-width: 575px) {
    .form-tim-kiem {
        flex-wrap: wrap;
    }

    .form-tim-kiem input[type="search"] {
        flex: 1 1 100%;
    }
}

/* ==========================================================================
   Doan mo ta cua slide trang chu: chu den, vien trang bao quanh net chu
   ==========================================================================
   Anh nen slide do admin tai len, sang toi khong doan truoc duoc - chu khong
   vien thi co anh doc duoc, co anh chim han. Vien trang giu chu tach khoi nen
   ma van nhin xuyen qua duoc anh (khac han mot mang nen trang dac).

   Dung text-shadow 8 huong chu KHONG dung `-webkit-text-stroke`: text-stroke ve
   vien DE LEN net chu (an vao trong), 2px la net chu mong han di; muon no ve
   phia ngoai phai kem `paint-order: stroke fill`, ma thuoc tinh do tren van ban
   HTML thuong khong duoc moi trinh duyet ho tro. text-shadow chay o moi noi.

   Co chu do rs6 dat INLINE tu data-text nen khong chinh o day - sua trong
   resources/views/frontend/partials/slider.blade.php. */
.vnt-slide-mo-ta {
    text-shadow:
        -2px -2px 0 #fff,  0 -2px 0 #fff,  2px -2px 0 #fff,
        -2px  0   0 #fff,                  2px  0   0 #fff,
        -2px  2px 0 #fff,  0  2px 0 #fff,  2px  2px 0 #fff;
}

/* May nho: chu be lai thi vien 2px trong day, an mat khoang trong giua cac net. */
@media (max-width: 767px) {
    .vnt-slide-mo-ta {
        text-shadow:
            -1px -1px 0 #fff,  0 -1px 0 #fff,  1px -1px 0 #fff,
            -1px  0   0 #fff,                  1px  0   0 #fff,
            -1px  1px 0 #fff,  0  1px 0 #fff,  1px  1px 0 #fff;
    }
    .khachhang h2.title {
        font-size: 22px !important;
        margin-top: 20px;
    }
    .khachhang aside.widget-area {
        margin-top: -50px;
        background: #f1f1f1;
        padding: 10px;
        border-radius: 7px;
    }
}

/* ==========================================================================
   TRANG LOI (404, 4xx, 419)
   ==========================================================================
   Ba view dung chung khoi `section.error-404` cua theme (public/frontend/
   error.html) nen dung chung luon bo chon nay - ten lop la cua theme, khong
   phai ma loi cua tung trang.

   Theme dat icon trong .ttm-btn bang `left` am de no truot vao khi ro chuot,
   nhung tri so goc tinh cho nut trong noi dung, o day nut ngan hon nen icon
   dat ra ngoai vien. Truoc day rule nay nam trong the <style> cua rieng
   404.blade.php; gom ve day de trang 4xx khong phai chep lai.

   Trang 5xx KHONG dung tep nay: no tu chua CSS trong trang vi phai song duoc
   ca khi CSDL chet. */
.error-404 .ttm-btn.ttm-btn-size-md i {
    left: -80px !important;
}

/* ==========================================================================
   Khu cong tac vien (Giai doan 7 muc 7b)
   Bam theo the-ban-quyen o tren de hai trang trong khu khach cung mot ngon
   ngu. Bay tab thong ke se dung lai chinh cac lop nay o muc 7e.
   ========================================================================== */
.khoi-ctv {
    margin-bottom: 24px;
    padding: 22px 24px;
    border: 1px solid #e4efe8;
    border-radius: 4px;
    background-color: #f6fbf8;
}

.khoi-ctv h4 {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 600;
    color: #1e2637;
}

.khoi-ctv .mo-dau-ctv {
    margin-bottom: 18px;
    color: #4a5568;
}

.khoi-ctv .bang-ti-le {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 14px;
}

.khoi-ctv .o-ti-le {
    flex: 1 1 200px;
    padding: 16px 18px;
    border: 1px solid #dfe9e3;
    border-radius: 4px;
    background-color: #fff;
    text-align: center;
}

.khoi-ctv .o-ti-le .con-so {
    display: block;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    color: #1e2637;
}

.khoi-ctv .o-ti-le .chu-thich {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
}

.khoi-ctv .ghi-chu-ti-le,
.khoi-ctv .huong-dan-ma,
.khoi-ctv .ghi-chu-tam-dung {
    font-size: 14px;
    color: #6b7280;
}

.khoi-ctv .dong-trang-thai {
    margin-bottom: 16px;
    font-size: 16px;
}

.khoi-ctv .nhan-het-han {
    color: #c53030;
}

.khoi-ctv .nhan-con-han {
    color: #6b7280;
}

.khoi-ma-gioi-thieu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding: 14px 16px;
    border: 1px dashed #b9d4c5;
    border-radius: 4px;
    background-color: #fff;
}

.khoi-ma-gioi-thieu .nhan-ma {
    font-size: 13px;
    color: #6b7280;
}

.khoi-ma-gioi-thieu .ma-ctv {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #1e2637;
    background: none;
    padding: 0;
}

.form-dang-ky-ctv {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid #dfe9e3;
}

.form-dang-ky-ctv h4 {
    margin-bottom: 4px;
}

.form-dang-ky-ctv .form-group {
    margin-bottom: 16px;
}

.form-dang-ky-ctv label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    color: #1e2637;
}

.form-dang-ky-ctv .bat-buoc {
    color: #c53030;
}

.form-dang-ky-ctv .o-dieu-khoan label {
    font-weight: 400;
}

.form-dang-ky-ctv .o-dieu-khoan input {
    margin-right: 6px;
}

.form-dang-ky-ctv .loi-o-nhap {
    margin-top: 4px;
    font-size: 13px;
    color: #c53030;
}

/* Khoi lien ket gioi thieu (Giai doan 7 muc 7c) - dung khung cua khoi ma nhung
   chu nho hon vi URL dai hon han mot ma 8 ky tu. */
.khoi-ma-gioi-thieu.khoi-lien-ket .lien-ket-ctv {
    flex: 1 1 240px;
    overflow-wrap: anywhere;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    color: #1e2637;
    background: none;
    padding: 0;
}

/* Bang lien ket gioi thieu cho tung san pham / danh muc (Giai doan 7 muc 7c).
   Moi dong la mot hang ngang: ten + URL + nut chep. Xuong dong tren mobile nho
   flex-wrap chu khong dung media query rieng. */
.khoi-lien-ket-san-pham .o-loc-lien-ket {
    margin-bottom: 18px;
}

.khoi-lien-ket-san-pham .tieu-de-nhom-lien-ket {
    margin: 22px 0 10px;
    font-size: 15px;
    font-weight: 700;
    color: #4a5568;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dong-lien-ket {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
    border: 1px solid #dfe9e3;
    border-radius: 4px;
    background-color: #fff;
}

.dong-lien-ket .thong-tin-muc {
    flex: 1 1 220px;
    min-width: 0;
}

.dong-lien-ket .ten-muc {
    display: block;
    font-weight: 600;
    color: #1e2637;
}

.dong-lien-ket .dau-cap {
    color: #b0bcc4;
}

.dong-lien-ket .phu-muc {
    display: block;
    font-size: 12px;
    color: #8e959d;
}

.dong-lien-ket .url-muc {
    flex: 1 1 260px;
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 12.5px;
    color: #4a5568;
    background: none;
    padding: 0;
}

.khong-thay-ket-qua {
    margin-top: 12px;
    font-size: 14px;
    color: #8e959d;
}

/* ==========================================================================
   Popup "Đã sao chép" - dung chung cho moi nut [data-sao-chep] o khu ngoai.

   Vi tri do JS tinh theo NUT VUA BAM (datViTriPopup trong menu-custom.js) va
   ghi thang vao style.left / style.top, nen o day khong khai hai thuoc tinh do.
   Lop .giua-duoi la duong lui khi khong xac dinh duoc nut.

   z-index 1080: tren ca .modal-backdrop (1040) va .modal (1055) cua Bootstrap,
   vi popup nay co the bat len khi mot modal dang mo (popup gio hang chang han).

   Vi tri fixed + gan thang vao <body>: dat trong `.page` thi bi stacking
   context cua no nhot lai o tang 10 va nen mo cua modal se phu len.

   An bang visibility chu KHONG bang display:none - phan tu display:none co
   chieu cao va chieu rong bang 0, ma JS phai do duoc hai so do de dat popup
   cho dung.
   ========================================================================== */
.popup-sao-chep {
    position: fixed;
    z-index: 1080;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: calc(100vw - 16px);
    padding: 10px 16px;
    border-radius: 6px;
    background-color: #1e2637;
    color: #fff;
    font-size: 14px;
    line-height: 1.4;
    white-space: nowrap;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.26);
    pointer-events: none;

    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
}

.popup-sao-chep.hien {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s;
}

/* Loi bao khi chep hong dai hon han - cho no xuong dong thay vi tran ngang. */
.popup-sao-chep.that-bai {
    max-width: min(320px, calc(100vw - 16px));
    white-space: normal;
    background-color: #7a2318;
}

.popup-sao-chep .fa {
    font-size: 15px;
    color: #4ade80;
}

.popup-sao-chep.that-bai .fa {
    color: #ffd166;
}

/* Duong lui: khong xac dinh duoc nut thi ve giua duoi man hinh nhu truoc. */
.popup-sao-chep.giua-duoi {
    left: 50%;
    top: auto;
    bottom: 32px;
    transform: translate(-50%, 6px);
}

.popup-sao-chep.giua-duoi.hien {
    transform: translate(-50%, 0);
}

/* Nguoi dat "giam chuyen dong" trong he dieu hanh thi bo truot, chi con hien/an. */
@media (prefers-reduced-motion: reduce) {
    .popup-sao-chep {
        transition: opacity 0.01s linear, visibility 0s linear 0.01s;
        transform: none;
    }

    .popup-sao-chep.hien {
        transition: opacity 0.01s linear, visibility 0s;
        transform: none;
    }

    .popup-sao-chep.giua-duoi,
    .popup-sao-chep.giua-duoi.hien {
        transform: translateX(-50%);
    }
}

/* Dau tich "vua chep" cho MOI nut sao chep, khong rieng trang don hang.
   Rule cu (.trang-don-hang .nut-sao-chep.vua-chep) van giu vi no doi ca mau
   vien - o do nut co khung, con o khu ban quyen / cong tac vien thi khong. */
.nut-sao-chep.vua-chep {
    color: #22a35c;
}

.nut-sao-chep.vua-chep .fa::before {
    content: "\f00c"; /* fa-check */
}

/* ==========================================================================
   Bay tab cua khu cong tac vien (Giai doan 7 muc 7e)

   Tab la LIEN KET chu khong phai JavaScript, nen o day chi can to mau muc dang
   mo - khong co rule nao an/hien noi dung. May chu da tra ve dung mot tab.
   ========================================================================== */
.tab-ctv {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 26px 0 18px;
    border-bottom: 2px solid #e6e9ef;
    padding-bottom: 0;
}

.tab-ctv-muc {
    display: inline-block;
    padding: 9px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #5a6474;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    margin-bottom: -2px;
    text-decoration: none;
    transition: color 0.15s linear, background-color 0.15s linear;
}

.tab-ctv-muc:hover,
.tab-ctv-muc:focus {
    color: var(--skin-color, #1f4bd8);
    background-color: #f4f6fa;
}

.tab-ctv-muc.dang-mo {
    color: var(--skin-color, #1f4bd8);
    background-color: #fff;
    border-color: #e6e9ef;
    border-bottom: 2px solid #fff;
}

.noi-dung-tab .tieu-de-khoi-ctv {
    font-size: 19px;
    margin: 22px 0 12px;
}

.noi-dung-tab .tieu-de-khoi-ctv:first-child {
    margin-top: 0;
}

/* --- Bon o so ------------------------------------------------------------ */
.hang-o-so {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.o-so {
    flex: 1 1 160px;
    padding: 14px 16px;
    background-color: #f7f9fc;
    border: 1px solid #e6e9ef;
    border-radius: 8px;
}

.o-so.noi-bat {
    background-color: #eef4ff;
    border-color: #c9dbff;
}

.o-so .nhan-o-so {
    display: block;
    font-size: 13px;
    color: #6b7385;
    margin-bottom: 4px;
}

.o-so .con-so {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: #1b2130;
    line-height: 1.3;
}

.o-so .chu-thich-o-so {
    display: block;
    font-size: 12px;
    color: #8a92a3;
    margin-top: 4px;
}

/* --- Bieu do cot bang CSS thuan ------------------------------------------
   Theme Altech cua khu ngoai KHONG co Chart.js (chi theme Stisla cua khu quan
   tri co). Keo mot thu vien bieu do ve chi de ve mot day cot la doi vai chuc
   KB JavaScript lay mot con so - trong khi chieu cao cot da duoc tinh san o
   dich vu va in thang vao thuoc tinh style. */
.bieu-do-cot {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 190px;
    padding: 10px 0 0;
    margin-bottom: 8px;
    overflow-x: auto;
}

.cot-bieu-do {
    flex: 1 0 18px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    min-width: 18px;
}

.cot-bieu-do .than-cot {
    display: block;
    width: 100%;
    max-width: 34px;
    background-color: var(--skin-color, #1f4bd8);
    border-radius: 3px 3px 0 0;
    min-height: 0;
    transition: background-color 0.15s linear;
}

.cot-bieu-do:hover .than-cot {
    background-color: #12308f;
}

.cot-bieu-do .nhan-cot {
    display: block;
    font-size: 10px;
    color: #8a92a3;
    margin-top: 5px;
    white-space: nowrap;
    transform: rotate(-45deg);
    transform-origin: center;
}

/* --- Bang du lieu -------------------------------------------------------- */
.bang-cuon {
    overflow-x: auto;
    margin-bottom: 14px;
}

.bang-ctv {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.bang-ctv th,
.bang-ctv td {
    padding: 10px 12px;
    border-bottom: 1px solid #eef0f4;
    text-align: left;
    vertical-align: top;
}

.bang-ctv th {
    font-size: 13px;
    font-weight: 600;
    color: #6b7385;
    background-color: #f7f9fc;
    white-space: nowrap;
}

.bang-ctv .canh-phai {
    text-align: right;
    white-space: nowrap;
}

.bang-ctv .o-trong {
    text-align: center;
    color: #8a92a3;
    padding: 26px 12px;
}

.bang-ctv .phu-muc {
    display: block;
    font-size: 12px;
    color: #8a92a3;
    margin-top: 2px;
}

.bang-ctv .so-am {
    color: #c0392b;
}

.nhan-bu-tru,
.nhan-trang-thai {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 10px;
    white-space: nowrap;
}

.nhan-bu-tru {
    background-color: #f0f1f4;
    color: #5a6474;
}

.nhan-trang-thai.tt-cho_duyet {
    background-color: #fff4e0;
    color: #a06400;
}

.nhan-trang-thai.tt-da_duyet {
    background-color: #e5f1ff;
    color: #1257b8;
}

.nhan-trang-thai.tt-da_chi_tra {
    background-color: #e4f6ec;
    color: #1a7f43;
}

.nhan-trang-thai.tt-da_huy {
    background-color: #fdeaea;
    color: #b03030;
}

/* --- O chon ky ----------------------------------------------------------- */
.form-chon-ky {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
}

.form-chon-ky label {
    margin: 0;
    font-size: 13px;
    color: #6b7385;
}

.form-chon-ky .form-control {
    width: auto;
    min-width: 140px;
}

/* --- Ba buoc cua tien ---------------------------------------------------- */
.danh-sach-buoc {
    padding-left: 20px;
    margin-bottom: 14px;
}

.danh-sach-buoc li {
    margin-bottom: 6px;
    font-size: 14px;
}

.bang-ti-le-nho .o-ti-le .con-so {
    font-size: 24px;
}
nav.muc-luc-noi-dung li {
    list-style: none;
}
@media (max-width: 575px) {
    .tab-ctv-muc {
        padding: 8px 11px;
        font-size: 13px;
    }

    .o-so {
        flex-basis: 100%;
    }
}

/* Hai trang thai rieng cua DOT RUT TIEN (Giai doan 7 muc 7f) - bang trang thai
   cua no khac bang cua hoa hong, nen phai co rule rieng. */
.nhan-trang-thai.tt-da_chi {
    background-color: #e4f6ec;
    color: #1a7f43;
}

.nhan-trang-thai.tt-tu_choi {
    background-color: #fdeaea;
    color: #b03030;
}