/* Inter self-host. Truoc day day la @import toi fonts.googleapis.com dat o dong
   dau site.css: trinh duyet phai tai xong site.css moi biet den file font, roi
   moi noi toi mot host thu hai — mot chuoi request noi tiep chan render tren
   MOI trang. File duoi day la ban variable (weight 100-900) nen mot file phu
   het cac do dam site dang dung, subset latin + vietnamese. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/inter-vietnamese.woff2') format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --font-family: 'Inter', sans-serif;

    /* Nhan dien SmoCard. Mau goc lay tu logo: #3B5998 (xem tools/build-brand-assets.ps1).
       --brand tach roi --primary co chu dich: dung thang #3B5998 lam nen nut thi dung
       nhan dien nhung CTA bi chim, con --primary sang hon mot bac trong cung dai mau
       (hue 220) va van dat WCAG AA voi chu trang (5.18:1). */
    --brand: #3B5998;
    --brand-dark: #2E4678;
    --primary: #3D68CC;
    --primary-dark: #2E4678;
    --primary-light: #E8EEFA;
    --navy: #1E2E4F;
    --navy-deep: #16223C;

    --surface-bg: #f7f8fc;
    --surface-card: #ffffff;
    --surface-low: #f3f6fc;
    --text-main: #191b25;
    --text-muted: #434656;
    --border-color: #e2e5ef;
    --border-outline: #c4c9d9;
    --radius-button: 12px;
    --radius-card: 16px;
    --shadow-sm: 0 1px 3px rgba(10, 14, 26, 0.08);
    --shadow-primary: 0 4px 12px rgba(59, 89, 152, 0.24);

    /* Thang chu 6 bac, ti le ~1.25. Truoc day site chi co 4 co roi rac
       (24/22/20/14): tieu de muc chi to hon body 1.7 lan, con 22 va 20 gan nhu
       khong phan biet duoc voi 24 - khong con phan cap thi giac. */
    --fs-xs: 13px;
    --fs-sm: 14px;
    --fs-base: 16px;
    --fs-lg: 18px;
    --fs-xl: 22px;
    --fs-2xl: 28px;
    --fs-3xl: 34px;
    --lh-tight: 1.25;
    --lh-body: 1.65;
    /* Gioi han do dai dong. Do duoc 161 ky tu/dong o mot so muc, gap doi nguong
       de doc (65-75) - mat lac dong khi quay ve dau dong. */
    --measure: 68ch;
    /* 11 muc trang chu truoc day dung chung padding 50px: khong co nhip nen mat
       khong nhom duoc muc nao voi muc nao. */
    --section-pad: 80px;
}
@media (max-width: 767px) {
    :root {
        --section-pad: 44px;
        /* Tieu de 34px tren man 390px chiem gan het chieu ngang, phai ha bac. */
        --fs-3xl: 26px;
        --fs-2xl: 22px;
        --fs-xl: 19px;
    }
}

*, :after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* Truoc day o day co `outline: none` dat tren selector `*` — no xoa focus ring
   cua TOAN BO site, khong dieu huong duoc bang ban phim. Da bo. Ring duoi day
   chi hien khi dieu huong bang ban phim (:focus-visible), khong hien khi bam
   chuot, nen khong doi cam giac thao tac chuot. */
:focus-visible {
    outline: 2px solid #8A5A0B;
    outline-offset: 3px;
}
:focus:not(:focus-visible) { outline: none; }
html {
    font-family: 'Inter', sans-serif;
    background-color: var(--surface-bg);
    color: var(--text-main);
    background-image: none;
}
@media (max-width: 767px) {
    html { background-color: var(--surface-bg); }
    #page-home-index { background-color: #FFF; }
}
body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif;
    /* UIkit dat mac dinh 14px/20px (ti le 1.43). Cung mot luong noi dung, chu
       14px nen sat nhau trong day gap doi so voi 16px gian 1.65 - day la
       nguyen nhan chinh cua cam giac "nhieu chu". */
    font-size: var(--fs-base);
    line-height: var(--lh-body);
}

/* Chu than bai: ap o cap #main de thang moi rule 14/15px rai rac ben duoi. */
#main p, #main li {
    font-size: var(--fs-base);
    line-height: var(--lh-body);
}
#main .description p, #main .description li,
#main .content p, #main .content li {
    max-width: var(--measure);
}
/* Doan van ma toan bo noi dung nam trong mot <strong> that ra dang lam tieu de
   phu. De nguyen thi no chi la mot khoi chu dam giua than bai; cho no co chu
   rieng thi thanh phan cap that.
   Khong dat mau cung o day: cac muc nen navy da co rule doi chu sang trang,
   dat mau thuong hieu vao se thanh xanh dam tren nen xanh dam, gan nhu vo hinh. */
#main p > strong:only-child {
    display: block;
    font-size: var(--fs-lg);
    line-height: 1.4;
}
/* Tieu de the trong luoi: sau khi body len 16px thi chung bang het co voi than
   bai, mat khong con phan biet duoc tieu de voi noi dung. */
#main .item .name, #main .item .name > * {
    font-size: var(--fs-lg);
    line-height: 1.4;
    font-weight: 600;
}
a { color: var(--primary); text-decoration: none; transition: all 0.2s ease; }
a:hover { color: var(--primary-dark); }
blockquote {
    border-left: 5px solid var(--primary);
    font-size: inherit;
    font-style: normal;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    color: var(--text-main);
    font-family: 'Inter', sans-serif;
}
i.ti {
    font-size: 18px;
    vertical-align: text-top;
}
.e-page>.uk-container>.wrapper {
    margin: 25px 0;
    border-radius: 5px;
}
.e-page>.uk-container>.wrapper.none {
    padding: 0;
    background-color: transparent;
}
@media (max-width: 767px) {
    /* Bo le cua container de khoi noi dung tran het be ngang — chu y la vay.
       Nhung .uk-grid ben trong keo margin-left -25px con o con day padding-left
       +25px, cong lai chu roi dung vao x = 0: dinh sat mep man hinh, khong con
       mot khoang tho nao. Do duoc o 390px: h1 va cac doan van deu x = 0.

       Dat le vao chinh .wrapper thi chuoi tinh ra: wrapper 16 -> luoi -9 ->
       o con +25 = chu o 16px. Luoi tho ra trai 9px nhung cho do khong chua noi
       dung nen khong cat chu, va mep phai van trong man hinh (374 < 390). */
    .e-page>.uk-container { padding: 0; }
    .e-page>.uk-container>.wrapper {
        margin: 0;
        border-radius: 0;
        padding: 0 16px 5px;
        background-color: transparent;
    }
}
.tool .uk-list { margin: 0; white-space: nowrap; }
.tool .uk-list>li { display: inline-block; color: #FFF; }
.tool .uk-list>li>a {
    border-radius: 5px;
    display: inline-block;
    height: 25px;
    line-height: 25px;
}
.tool .uk-list>li>a>i+span, .tool .uk-list>li>a>span+i { margin-left: 5px; }
.tool.left .uk-list>li { margin-right: 10px; }
.tool.right .uk-list>li { margin-left: 10px; }

/* ===== Mobile: sua tran ngang =====
   Cac luoi khai bao so cot cho CA mobile (uk-grid-width-1-6, 1-3) nen tren man
   390px chung bi ep thanh 3-6 cot rong 122px, noi dung tran ra ngoai khung: do
   duoc trang rong 599px tren viewport 390px. Ba khoi benefit/feedback/article
   truoc day "chua chay" bang cach dat width co dinh 1000-1500px roi cho cuon
   ngang - cuon ngang tren dien thoai la trai voi thoi quen nguoi dung.
   Cach xu ly: tren mobile xep mot the moi hang, cuon doc binh thuong. */
@media (max-width: 767px) {
    #main [class*="uk-grid-width-1-"] > * { width: 100%; }
    #benefit.e-feature .grid,
    #feedback.e-feature .grid,
    #article.e-article .grid { overflow-x: visible; }
    #benefit.e-feature .grid .uk-grid,
    #feedback.e-feature .grid .uk-grid,
    #article.e-article .grid .uk-grid { width: auto; }
    /* .nowrap tren nhan bieu mau lam nhan dai hon khung, day ca luoi rong ra. */
    #main .nowrap { white-space: normal; overflow: visible; text-overflow: clip; }
    /* Khoang cach doc giua cac the: cac rule nth-child ben duoi chi tinh cho bo
       cuc nhieu cot, khi xep mot cot thi cac the dinh sat nhau. */
    #main .uk-grid > * + * { margin-top: 20px; }
    /* O nhap bieu mau van chia doi tren man 390px nen chu bi cat giua chung.
       uk-width-1-2 khac uk-grid-width-1-2 nen khong dinh rule o tren. */
    #form .uk-form-stacked .uk-grid > [class*="uk-width-"] { width: 100%; }
    #form .uk-form-stacked .uk-grid > * + * { margin-top: 14px; }
}

.image { position: relative; height: 85px; }
.image img { width: 100%; height: 100%; object-fit: scale-down; object-position: center center; }
.image.cover img { object-fit: cover; border-radius: 5px; }
/* Banner thuong hieu (1.92:1) dat trong khung hep hon thi phai hien tron, cat di
   la mat logo va tieu de. Nen navy trung voi nen banner nen khong lo vien trang. */
.image.brand-banner { background-color: var(--navy); border-radius: 5px; }
.image.brand-banner img { object-fit: contain; border-radius: 5px; }
.e-product-item .gallery .main .image.brand-banner img { object-fit: contain; }

/* .e-cta khong khai bao chieu cao nen o anh roi ve 85px cua .image - anh chi hien
   mot dai mong vo nghia. Cho no chieu cao that de banner doc duoc. */
.e-cta .image { height: 260px; }
@media (max-width: 767px) {
    .e-cta .image { height: 170px; }
}
.image.round { width: 85px; border-radius: 50%; }
.image.round img { border-radius: 50%; }

.nowrap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.mt10 { margin-top: 10px; }
.mt15 { margin-top: 15px; }
.mt25 { margin-top: 25px; }

.button {
    width: 100%;
    text-align: center;
    background-color: #FFF;
}
.button:hover { background-color: var(--primary-light); color: var(--brand-dark); border-color: var(--brand-dark); }
.submit {
    background-color: var(--primary);
    color: #FFF;
    padding: 0 15px;
    width: 100%;
    text-align: center;
    border: none;
    cursor: pointer;
}
.submit:hover { background-color: var(--primary-dark); color: #FFF; }

.accordion .uk-accordion-title {
    position: relative;
    border-radius: 0;
    border: none;
    background-color: #f7f7f7;
    padding: 10px 20px 10px 15px;
    font-size: inherit;
    border-left: 5px solid var(--navy);
    margin-bottom: 5px;
    cursor: pointer;
}
.accordion .uk-accordion-title:after {
    position: absolute;
    content: "\ea61";
    font-family: "tabler-icons";
    font-size: 18px;
    right: 15px;
    top: 10px;
    font-weight: normal;
}
.accordion .uk-accordion-title.uk-active:after { content: "\ea5f"; }
.accordion .uk-accordion-content { padding: 10px 15px 15px 15px; }

.grid>.uk-grid.uk-grid-width-medium-1-1>div:nth-child(n+2),
.grid>.uk-grid.uk-grid-width-medium-1-2>div:nth-child(n+3),
.grid>.uk-grid.uk-grid-width-medium-1-3>div:nth-child(n+4),
.grid>.uk-grid.uk-grid-width-medium-1-4>div:nth-child(n+5),
.grid>.uk-grid.uk-grid-width-medium-1-5>div:nth-child(n+6),
.grid>.uk-grid.uk-grid-width-medium-1-6>div:nth-child(n+7) {
    margin-top: 25px;
}

.uk-form input[type="checkbox"], .uk-form input[type="radio"] {
    height: 18px; width: 18px; border: 1px solid var(--border-outline); background-color: #FFF; margin-right: 8px;
}
.uk-form input[type="checkbox"] + *, .uk-form input[type="radio"] + * { vertical-align: middle; }
.uk-form label:has(input[type="radio"]), .uk-form label:has(input[type="checkbox"]) {
    display: inline-flex; align-items: center; min-height: 44px;
}
/* O nhap cao 30px va chu 14px: duoi nguong cham 44px, va Safari tren iOS tu
   phong to trang khi con tro vao o co chu duoi 16px. */
.uk-form input[type=text], .uk-form input[type=password], .uk-form input[type=email],
.uk-form input[type=tel], .uk-form input[type=number], .uk-form textarea, .uk-form select {
    width: 100%; border: 1px solid var(--border-outline); color: var(--text-main);
    padding: 11px 12px; min-height: 44px; border-radius: 6px;
    font-size: var(--fs-base); font-family: inherit; background-color: #FFF;
}
.uk-form input:focus, .uk-form textarea:focus, .uk-form select:focus {
    border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light);
}
.uk-form-stacked .uk-form-label { margin-bottom: 8px; font-weight: bold; }

.panel .name>* { font-size: var(--fs-2xl); line-height: var(--lh-tight); margin: 0; text-transform: capitalize; }
#page-home-index .panel .name>* { font-size: var(--fs-3xl); line-height: var(--lh-tight); }
.panel .name+.description, .panel .name+.content { margin-top: 15px; }

.item { position: relative; }
.item .image { height: 125px; }
.item .image+.body { margin-top: 15px; }
.item .description { margin-top: 5px; }
.item .meta { margin-top: 5px; }

/* Nut bo tron: chieu cao co dinh 35px + line-height 35px lam chu tran han ra
   ngoai vien khi nhan dai phai xuong dong (thay ro tren man 390px). Dung
   min-height + padding doc de nut tu cao theo so dong. */
.readmore a, .item .more a, .button {
    display: inline-block;
    border: 1px solid var(--brand);
    border-radius: 25px;
    padding: 8px 18px;
    min-height: 40px;
    line-height: 1.45;
    color: var(--brand);
}

/* ================= About & Article Page Styles ================= */
.e-breadcrumb .uk-breadcrumb {
    margin: 0;
    white-space: nowrap;
    overflow-x: auto;
}
.e-article-item+.e-article-item {
    margin-top: 25px;
}
.e-article-item>.wrapper {
    margin-top: 15px;
}
.e-article-item .panel .name h1 {
    font-size: var(--fs-3xl);
    line-height: 32px;
    font-weight: bold;
    color: #000;
    margin: 0 0 10px 0;
    text-transform: none;
}
.e-article-item .panel .meta {
    color: #9E9E9E;
    font-size: 14px;
    margin-bottom: 15px;
    margin-top: 5px;
}
.e-article-item .panel .meta i {
    margin-right: 4px;
    vertical-align: middle;
    font-size: 16px;
}
.e-article-item .panel .meta span {
    margin-right: 15px;
}
.e-article-item .panel .description p {
    font-size: 15px;
    line-height: 22px;
    color: #333;
    text-align: justify;
    margin: 15px 0;
}
.e-article-item .panel .description+.image {
    margin-top: 15px;
    height: 410px;
}
.e-article-item .panel .description+.image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
}
.e-article-item .panel .name+.accordion,
.e-article-item .panel .image+.content {
    margin-top: 15px;
}
.e-article-item .panel .content {
    text-align: justify;
    margin-top: 15px;
}
.e-article-item .panel .content p {
    font-size: 15px;
    line-height: 24px;
    color: #333;
    text-align: justify;
    margin-bottom: 12px;
}
.e-article-item .panel .content h3,
.e-article-item .panel .content h4 {
    font-size: 18px;
    line-height: 24px;
    font-weight: bold;
    color: #000;
    border-left: 5px solid var(--navy);
    padding-left: 10px;
    margin: 20px 0 10px 0;
    text-transform: none;
}
.e-article-item .panel .content ul {
    padding-left: 20px;
    margin: 10px 0 15px 0;
    list-style: disc;
}
.e-article-item .panel .content ul li {
    margin-bottom: 8px;
    list-style: disc;
    display: list-item;
}
.e-article-item .panel .content blockquote {
    background-color: #EEEEEE;
    border-left: 5px solid var(--navy);
    padding: 10px 15px;
    margin: 15px 0;
    font-style: normal;
}
.e-article-item .panel .content blockquote p {
    margin: 0;
    color: #000;
}
.e-article-item .panel .description a,
.e-article-item .panel .content a {
    text-decoration: underline;
    color: var(--primary);
}

.e-author>.wrapper {
    margin-top: 25px;
    min-height: 110px;
    position: relative;
    background-color: #f7f6f6;
    border-radius: 5px;
    padding: 15px 15px 15px 145px;
}
.e-author .panel .avatar {
    position: absolute;
    left: 15px;
    top: 15px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    overflow: hidden;
}
.e-author .panel .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.e-author .panel .name>* {
    font-size: 18px;
    line-height: 24px;
    font-weight: bold;
    color: #000;
    margin: 0;
    text-transform: none;
}
.e-author .panel .name+.description {
    margin-top: 10px;
}
.e-author .panel .description p {
    font-size: 14px;
    line-height: 20px;
    color: #333;
    margin-bottom: 8px;
}

.e-article-catalogue>.wrapper,
.e-product-catalogue>.wrapper {
    margin-top: 15px;
}
.e-article-catalogue .item,
.e-product-catalogue .item {
    border: 1px solid #9e9e9e;
    border-radius: 5px;
    padding: 15px;
    background-color: #FFF;
}
.e-article-catalogue .item .image {
    height: 130px;
}
.e-product-catalogue .item .image {
    height: 245px;
}
.e-product-catalogue .item .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}
.e-product-catalogue .item .meta .price {
    color: red;
    font-weight: bold;
    font-size: 16px;
    display: inline-block;
    margin: 5px 0;
}
.e-product-catalogue .grid+.panel {
    margin-top: 25px;
}
.e-product-item .panel.information .name h1 {
    font-size: var(--fs-2xl);
    line-height: 28px;
    font-weight: bold;
    color: #000;
    margin: 0 0 10px 0;
    text-transform: none;
}
.e-product-item .panel.information .meta {
    margin-bottom: 15px;
}
.e-product-item .panel.information .description p {
    font-size: 15px;
    line-height: 22px;
    color: #333;
    text-align: justify;
    margin-bottom: 10px;
}
.e-product-item .gallery .main .image {
    height: 320px;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid #ddd;
}
.e-product-item .gallery .main .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.e-article-catalogue .item .meta {
    color: #9E9E9E;
}

.e-fanpage>.wrapper {
    border-radius: 5px;
    overflow: hidden;
    min-height: 130px;
}
.e-article-sidebar>.wrapper {
    margin-top: 25px;
}
.e-article-sidebar .panel .name {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
    border-bottom: 2px solid var(--navy);
    padding-bottom: 5px;
}
.e-article-sidebar .list .uk-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.e-article-sidebar .list .uk-list>li {
    margin-top: 15px;
}
.e-article-sidebar .list .uk-list>li:first-child {
    margin-top: 0;
}
.e-article-sidebar .item {
    min-height: 80px;
    padding-left: 110px;
    position: relative;
}
.e-article-sidebar .item .image {
    height: 80px;
    width: 95px;
    position: absolute;
    left: 0;
    top: 0;
}
.e-article-sidebar .item .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}
.e-article-sidebar .item .image+.body {
    margin-top: 0;
}
.e-article-sidebar .item .name a {
    font-weight: bold;
    font-size: 13px;
    line-height: 18px;
    color: #000;
}
.e-article-sidebar .item .meta {
    color: #9E9E9E;
    font-size: 12px;
    margin-top: 3px;
}

/* ================= Section Specific Styles ================= */

/* Header Topbar */
#header>.e-top>.wrapper {
    background-color: var(--navy);
    height: 30px;
    line-height: 30px;
}
#header>.e-top .tool .uk-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
#header>.e-top .tool .uk-list>li {
    display: inline-block;
    height: 30px;
    line-height: 30px;
}
#header>.e-top .tool .uk-list>li>a {
    color: #FFF;
    font-size: 13px;
    line-height: 30px;
    display: inline-block;
}
#header>.e-top .tool.right .uk-list>li {
    margin-left: 15px;
}
#header>.e-top>.wrapper.dark {
    background-color: #FFF;
}
#header>.e-top>.wrapper.dark .tool .uk-list>li>a {
    color: #000;
}

#header>.e-header>.wrapper {
    padding: 15px 0; color: #000; box-shadow: 0 1px 2px rgb(0 0 0 / 10%); background-color: #FFF; position: relative; z-index: 10;
}
#header>.e-header .brand img { height: 44px; width: auto; }
#header>.e-header .uk-navbar { background: transparent; border: none; }
#header>.e-header .uk-navbar-nav>li>a {
    color: var(--navy); padding: 0 10px; height: 35px; line-height: 35px; font-weight: bold; text-transform: uppercase;
}
#header>.e-header .uk-navbar-nav>li>a:hover, #header>.e-header .uk-navbar-nav>li.uk-active>a { color: var(--primary); }
#header>.e-header .tool .uk-list>li>a {
    height: 35px; line-height: 35px; color: var(--brand); border-radius: 25px; padding: 0 15px; border: 1px solid var(--brand); position: relative;
}
#header>.e-header .tool .uk-list>li>a:hover { background-color: var(--primary-light); color: var(--brand-dark); border-color: var(--brand-dark); }
#header>.e-header .tool .uk-list>li>a span.ajax-cartitem {
    position: absolute; right: 10px; top: 2px; background-color: red; color: #FFF; width: 15px; height: 15px;
    line-height: 15px; font-size: 10px; border-radius: 50%; text-align: center;
}

/* Hero */
#hero.e-introduce>.wrapper { padding: var(--section-pad) 0; }
#hero.e-introduce .panel.media .image { height: 465px; }
#hero.e-introduce>.wrapper.dark { background-color: var(--navy); }
#hero.e-introduce>.dark .panel.introduce .name>*,
#hero.e-introduce>.dark .panel.introduce .description,
#hero.e-introduce>.dark .panel.introduce .description a { color: #FFF; }
#hero.e-introduce>.dark .panel.introduce .description blockquote { border-left: 5px solid #FFF; padding: 10px; color: #000; background: #FFF; }
#hero.e-introduce>.dark .panel.introduce .readmore a { border: 1px solid #FFF; color: #FFF; }
@media (max-width: 767px) {
    #hero.e-introduce>.wrapper { padding: 15px 0; }
    #hero.e-introduce .panel.media .image { height: 215px; }
}

/* Benefit */
#benefit.e-feature>.wrapper { padding: var(--section-pad) 0; }
#benefit.e-feature .item { border: 1px solid #9e9e9e; border-radius: 5px; padding: 10px; background: #FFF; }
#benefit.e-feature>.wrapper.dark { background-color: var(--navy); }
#benefit.e-feature>.dark .panel .name>*, #benefit.e-feature>.dark .panel .description { color: #FFF; }
#benefit.e-feature>.dark .item { border: none; background-color: #FFF; color: #000; }
@media (max-width: 767px) {
    /* Bo cuon ngang gia lap - xem ghi chu o dau file. */
    #benefit.e-feature .grid { overflow-x: visible; }
    #benefit.e-feature .grid .uk-grid { width: auto; }
}

/* Bang trong than bai - dung chung cho moi trang, khong rieng #compare nua:
   bang so sanh da chuyen tu trang chu sang trang Giai phap. */
#main .content table { width: 100%; border-collapse: collapse; margin: 15px 0; }
#main .content table th, #main .content table td { padding: 12px; border: 1px solid var(--border-outline); text-align: left; vertical-align: top; }
#main .content table thead th { background-color: var(--navy); color: #FFF; border-color: var(--navy); }
#main .content table tbody tr:nth-child(even) { background-color: var(--surface-low); }

/* Solution */
#solution.e-feature>.wrapper { padding: var(--section-pad) 0; }
#solution.e-feature .item { border: 1px solid #9e9e9e; border-radius: 5px; padding: 15px; background: #FFF; }
#solution.e-feature .item .name>* { font-size: var(--fs-xl); line-height: var(--lh-tight); }
#solution.e-feature .item .description ul { padding: 0; list-style: none; }
#solution.e-feature .item .description ul li { position: relative; padding-left: 30px; margin-bottom: 5px; }
#solution.e-feature .item .description ul li:before {
    font-family: "tabler-icons" !important; content: "\eba6"; color: var(--primary); position: absolute; left: 0; top: 0; font-size: 20px;
}
#solution.e-feature .item .more a { display: inline-block; border: 1px solid var(--brand); border-radius: 25px; color: var(--brand); }
#solution.e-feature .item .more a:hover { background-color: var(--primary-light); color: var(--brand-dark); border-color: var(--brand-dark); }
#solution.e-feature>.wrapper.dark { background-color: var(--navy); }
#solution.e-feature>.dark .panel .name>*, #solution.e-feature>.dark .panel .description { color: #FFF; }
#solution.e-feature>.dark .item { border: none; background-color: #FFF; color: #000; }

/* Form */
#form.e-form>.wrapper { padding: var(--section-pad) 0; }
#form.e-form>.wrapper.dark { background-color: var(--navy); }
#form.e-form>.wrapper.dark .panel.form>.wrapper { background-color: #FFF; padding: 25px; border-radius: 5px; }
/* Truoc day .name bi khoa cung height: 22px - tieu de xuong hai dong la tran ra
   ngoai, de len nhan ngay ben duoi (thay ro tren man 390px). */
#form.e-form>.wrapper.dark .panel.form .name { border-left: 4px solid var(--brand); padding-left: 12px; margin-bottom: 6px; }
#form.e-form>.wrapper.dark .panel.form .name>* { line-height: var(--lh-tight); font-size: var(--fs-xl); color: var(--text-main); font-weight: 600; margin: 0; }
#form.e-form>.wrapper.dark .panel.form .uk-form-label, #form.e-form>.wrapper.dark .panel.form .uk-form-controls label { color: #000; font-weight: bold; }
#form.e-form>.dark .panel.introduce .name>*, #form.e-form>.dark .panel.introduce .description, #form.e-form>.dark .panel.introduce .description a { color: #FFF; }
/* .uk-button cua UIkit ve mot linear-gradient trang len tren, va them text-shadow
   trang. Chi dat background-color thi gradient do van che het mau nut - nut hien
   ra nhu mot thanh trang trong. Phai go ca hai. */
#form.e-form .panel.form .uk-button.submit {
    line-height: 1.45; min-height: 44px; background-color: var(--primary); background-image: none;
    border: 1px solid var(--primary); color: #FFF; text-shadow: none;
    border-radius: 25px; padding: 10px 28px; font-size: var(--fs-base); font-weight: 600; cursor: pointer;
}
#form.e-form .panel.form .uk-button.submit:hover { background-color: var(--primary-dark); background-image: none; border-color: var(--primary-dark); color: #FFF; }

/* Feedback */
#feedback.e-feature>.wrapper { padding: var(--section-pad) 0; }
#feedback.e-feature>.wrapper.light { background-color: #FFF; }
#feedback.e-feature .item { border: 1px solid #9e9e9e; padding: 10px; border-radius: 5px; background-color: #FFF; }
#feedback.e-feature .item .author .avatar { margin-right: 15px; height: 85px; width: 85px; background-color: #FFF; padding: 2px; }
#feedback.e-feature .item .body .star { margin-top: 15px; }
#feedback.e-feature .item .body .star i.ti-star-filled { color: #FFC107; }
#feedback.e-feature .item .body .description { margin-top: 10px; }
@media (max-width: 767px) {
    #feedback.e-feature .grid { overflow-x: visible; }
    #feedback.e-feature .grid .uk-grid { width: auto; }
}

/* FAQ */
#faq.e-feature>.wrapper { padding: var(--section-pad) 0; }
#faq.e-feature>.wrapper.dark { background-color: var(--navy); }
#faq.e-feature>.dark .panel .name>*, #faq.e-feature>.dark .panel .description { color: #FFF; }
#faq.e-feature>.dark .accordion .uk-accordion-title { border-left: none; border-radius: 5px; color: #000; background-color: #FFF; }
#faq.e-feature>.dark .accordion .uk-accordion-content { color: #FFF; }
#faq.e-feature>.dark .readmore a { border: 1px solid #FFF; color: #FFF; }

/* Gia goi dich vu trong the bang gia */
#solution.e-feature .item .price { font-size: var(--fs-xl); font-weight: 700; color: var(--brand); margin: 0 0 10px; }

/* Footer */
#footer>.e-footer>.wrapper.dark { background-color: var(--navy); color: #FFF; padding: var(--section-pad) 0; }
#footer .footer-brand { margin: 0 0 15px; }
#footer .footer-brand img { height: 42px; width: auto; display: block; }
#footer>.e-footer>.wrapper.dark a { color: #FFF; }
#footer>.e-copyright>.wrapper.dark { background-color: var(--navy-deep); color: #FFF; padding: 10px 0; }

.required { color: red; margin-left: 3px; }

/* ==========================================================================
   SmoCard Public Template Themes (Phase 6 Feature 3)
   ========================================================================== */

/* 1. tpl-modern (Modern Clean Theme) */
.smocard-app-shell.tpl-modern {
    background-color: #F8FAFC;
    color: #0F172A;
}

/* 2. tpl-corporate (Professional Corporate Theme) */
.smocard-app-shell.tpl-corporate {
    background-color: #F1F5F9;
    color: #0F172A;
}
.smocard-app-shell.tpl-corporate .bg-surface {
    background-color: #FFFFFF !important;
    border: 1px solid #CBD5E1;
    border-radius: 8px !important;
}
.smocard-app-shell.tpl-corporate .bg-primary {
    background-color: #0F172A !important;
}

/* 3. tpl-minimal (Minimalist Slate Theme) */
.smocard-app-shell.tpl-minimal {
    background-color: #FAFAFA;
    color: #18181B;
}
.smocard-app-shell.tpl-minimal .bg-surface {
    background-color: #FFFFFF !important;
    border: 1px solid #E4E4E7;
    box-shadow: none !important;
    border-radius: 12px !important;
}
.smocard-app-shell.tpl-minimal .bg-primary {
    background-color: #27272A !important;
}

/* 4. tpl-luxury (Premium Gold & Obsidian Luxury Theme) */
.smocard-app-shell.tpl-luxury {
    background-color: #12100E;
    color: #F3F4F6;
}
.smocard-app-shell.tpl-luxury .bg-surface {
    background-color: #1C1917 !important;
    border: 1px solid #78350F;
    color: #F3F4F6 !important;
}
.smocard-app-shell.tpl-luxury .text-text-main {
    color: #F9FAFB !important;
}
.smocard-app-shell.tpl-luxury .text-text-subtle {
    color: #D1D5DB !important;
}
.smocard-app-shell.tpl-luxury .bg-primary {
    background-color: #D97706 !important;
    color: #FFFFFF !important;
}

/* 5. tpl-creative (Vibrant Purple & Indigo Creative Theme) */
.smocard-app-shell.tpl-creative {
    background-color: #F5F3FF;
    color: #2E1065;
}
.smocard-app-shell.tpl-creative .bg-surface {
    background-color: #FFFFFF !important;
    border: 1px solid #DDD6FE;
    border-radius: 20px !important;
}
.smocard-app-shell.tpl-creative .bg-primary {
    background-color: #7C3AED !important;
}

/* 6. tpl-dark (Obsidian Dark Premium Theme) */
.smocard-app-shell.tpl-dark {
    background-color: #0B0F17;
    color: #F1F5F9;
}
.smocard-app-shell.tpl-dark .bg-surface {
    background-color: #151D2A !important;
    border: 1px solid #1E293B;
    color: #F8FAFC !important;
}
.smocard-app-shell.tpl-dark .text-text-main {
    color: #F8FAFC !important;
}
.smocard-app-shell.tpl-dark .text-text-subtle {
    color: #94A3B8 !important;
}
.smocard-app-shell.tpl-dark .bg-primary {
    background-color: #38BDF8 !important;
    color: #0F172A !important;
}

/* Fallback & Essential Styles for Public SmoCard Shell */
.smocard-app-shell {
    max-width: 28rem;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    min-height: 100vh;
    padding-bottom: 3rem;
}

/* Sizing & Core Utilities */
.hidden { display: none !important; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-1 { flex: 1 1 0%; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.grid { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.w-full { width: 100%; }
.h-full { height: 100%; }
.w-6 { width: 1.5rem; }
.h-6 { height: 1.5rem; }
.w-9 { width: 2.25rem; }
.h-9 { height: 2.25rem; }
.w-10 { width: 2.5rem; }
.h-10 { height: 2.5rem; }
.w-12 { width: 3rem; }
.h-12 { height: 3rem; }
.w-28 { width: 7rem; }
.h-28 { height: 7rem; }
.h-44 { height: 11rem; }
.max-w-xs { max-width: 20rem; }
.max-w-sm { max-width: 24rem; }
.max-w-md { max-width: 28rem; }
.mx-auto { margin-left: auto; margin-right: auto; }

.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.top-0 { top: 0; }
.top-4 { top: 1rem; }
.bottom-0 { bottom: 0; }
.bottom-1 { bottom: 0.25rem; }
.right-0 { right: 0; }
.right-1 { right: 0.25rem; }
.right-4 { right: 1rem; }
.sticky { position: sticky; }
.z-10 { z-index: 10; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }

.overflow-hidden { overflow: hidden; }
.object-cover { object-fit: cover; }
.object-contain { object-fit: contain; }

.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-2xl { border-radius: 1rem; }
.rounded-3xl { border-radius: 1.5rem; }
.rounded-full { border-radius: 9999px; }

.p-1 { padding: 0.25rem; }
.p-1\.5 { padding: 0.375rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; }

.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }

.gap-1 { gap: 0.25rem; }
.gap-1\.5 { gap: 0.375rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }

.mt-0\.5 { margin-top: 0.125rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-1\.5 { margin-top: 0.375rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.-mt-16 { margin-top: -4rem; }

.bg-surface { background-color: #FFFFFF; }
.bg-background-light { background-color: #F8FAFC; }
.bg-subtle { background-color: #E2E8F0; }
.bg-primary { background-color: #3B82F6; }
.bg-primary-dark { background-color: #2563EB; }
.bg-black\/60 { background-color: rgba(0, 0, 0, 0.6); }

.text-text-main { color: #0F172A; }
.text-text-subtle { color: #64748B; }
.text-primary { color: #3B82F6; }
.text-white { color: #FFFFFF; }

.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }

.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.uppercase { text-transform: uppercase; }
.tracking-wider { letter-spacing: 0.05em; }

.border { border: 1px solid #E2E8F0; }
.border-2 { border: 2px solid #E2E8F0; }
.border-b { border-bottom: 1px solid #E2E8F0; }
.border-t { border-top: 1px solid #E2E8F0; }
.border-subtle { border-color: #E2E8F0; }
.border-background-light { border-color: #F8FAFC; }

.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
.shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
.shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }

.transition-colors { transition-property: color, background-color, border-color; transition-duration: 150ms; }
.transition-all { transition-property: all; transition-duration: 150ms; }

.header-section img, .smocard-app-shell img { max-width: 100%; }

/* =============================================================================
   VÙNG CHẠM TRÊN ĐIỆN THOẠI
   -----------------------------------------------------------------------------
   Đo ở 390px: 29–38 link/nút mỗi trang cao dưới 40px, phần lớn là danh sách
   link ở chân trang (cao đúng 20px) và vài nút ở đầu trang. 20px là quá sát để
   bấm bằng ngón tay — chuẩn tối thiểu là 44px, và các link nằm sát nhau theo
   chiều dọc thì rất dễ bấm nhầm sang dòng bên cạnh.

   Chỉ nới khoảng đệm dọc, không đổi cỡ chữ hay bố cục.
   ========================================================================== */
@media (max-width: 767px) {
    .e-footer .description ul > li > a,
    .e-footer .description p > a,
    .e-footer .social ul > li > a {
        display: inline-block;
        min-height: 40px;
        line-height: 40px;
    }

    .tool .uk-list > li > a {
        height: 40px;
        line-height: 40px;
    }

    /* Nút phụ trong biểu mẫu (Tạo tài khoản mới, Khôi phục mật khẩu…) */
    .e-page .uk-form .uk-form-row .uk-button,
    .e-page .uk-form .uk-form-row > span > a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}