/**
 * Giao dien nay chi co mot bang mau: SANG. Khong co bien the toi nao.
 *
 * Khong khai color-scheme thi trinh duyet coi trang la "chua noi gi" va lay
 * theo cai dat cua he dieu hanh. Voi CSS thuong thi vo hai, nhung Highcharts v13
 * tiem vao trang:
 *
 *     @supports (color: light-dark(#fff, #000)) {
 *       :root { --highcharts-background-color: light-dark(<sang>, <toi>); ... }
 *     }
 *
 * light-dark() phan giai theo color-scheme dang dung. May dat che do toi thi moi
 * bien mau cua Highcharts nhay sang nhanh toi - bieu do thanh khoi den nam giua
 * trang trang. Khai light o day chot lai nhanh sang.
 *
 * Cung sua luon cac o nhap, thanh cuon va nut mac dinh bi trinh duyet to toi
 * trong che do dark.
 */
:root {
    color-scheme: light;
}

/* Highcharts tu tiem `.highcharts-container { color-scheme: light dark }` vao
   trang, SAU stylesheet nay va cung do uu tien, nen no thang - dat color-scheme
   o :root khong cham toi duoc bieu do. !important la cach duy nhat de chot lai
   ma khong phai doi dom tang do uu tien. */
.highcharts-container {
    color-scheme: light !important;
}

/**
 * Font cho toan site: Be Vietnam Pro.
 *
 * Truoc day site hien ra bang Times New Roman, va do la TAI NAN chu khong phai
 * lua chon: bundle.css (nap SAU bootstrap.min.css nen de len) dat tren `body`
 *     font-family: "Roboto Slab", serif
 * nhung Roboto Slab KHONG he duoc tai ve - layout khong co link Google Fonts nao.
 * Trinh duyet roi xuong fallback `serif` = Times New Roman.
 *
 * Tuong tu, creditCard.css va payonline.css khai 'Poppins' cung khong tai,
 * roi ve sans-serif. Ket qua: moi trang mot kieu chu khac nhau.
 *
 * bundle.css chi dat font tren `body`, nen chi can de lai dung `body` - khong
 * dung selector rong kieu `body *` vi se pha font cua cac ho icon
 * (Font Awesome, Ionicons, Material Design Icons) von phai giu font rieng.
 *
 * File nay PHAI nap SAU bundle.css trong layout.
 *
 * Be Vietnam Pro duoc thiet ke rieng cho tieng Viet: dau dat dung vi tri,
 * khong chong len chu nhu nhieu font Latin thuan.
 */

body {
    font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
        Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* creditCard.css va payonline.css khai 'Poppins' khong ton tai -> dong bo lai */
.credit-card-wrapper,
.payonline-wrapper {
    font-family: inherit;
}

/* ------------------------------------------------------------------
   Sua loi ten san pham tran ra de len the ben canh
   ("San pham ban chay" / "San pham noi bat" tren trang chu).

   .single_small_product la flex container. Flex item mac dinh co
   min-width: auto, nghia la KHONG co duoc duoi kich thuoc noi dung -
   nen ten san pham dai (ten tieng Viet thuong dai) day rong o ra
   ngoai khung va de len the ke tiep.

   min-width: 0 cho phep o co lai; ket hop line-clamp de ten dai bi
   cat gon thanh 2 dong kem dau ba cham thay vi tran.
   ------------------------------------------------------------------ */
.single_small_product {
    align-items: flex-start;
    gap: 12px;
}

/* Template KHONG he co rule nao cho .product_thumb hay anh ben trong, ma anh
   goc rong 1000px. Truoc day no chi vua mat nho max-width:100% cua bootstrap.
   Phai an dinh kich thuoc thumbnail o day.

   LUU Y: dung `flex: 0 0 auto` la sai - no noi "dung bao gio co lai", nen anh
   bung ra dung 1000px va day toan bo phan chu ra khoi khung. Phai cho co so
   cu the (90px). */
.single_small_product .product_thumb {
    flex: 0 0 90px;
    width: 90px;
    max-width: 90px;
}

.single_small_product .product_thumb img {
    width: 100%;
    height: 90px;
    object-fit: contain;
}

.single_small_product .product_content {
    min-width: 0; /* mau chot: cho phep o co lai, tranh chu tran ra ngoai */
    flex: 1 1 auto;
}

.single_small_product .product_content h4 {
    margin-bottom: 6px;
}

.single_small_product .product_content h4 a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.35;
    word-break: break-word;
}

/* ------------------------------------------------------------------
   Nut "Them vao gio" hien san tren the san pham (trang chu + cua hang).

   Truoc day nut duy nhat de them gio nam trong .product__hover, chi lo
   ra khi ro chuot vao the: dien thoai khong co hover nen khong bam duoc,
   va tren may tinh thi khong ai doan duoc no o do.
   ------------------------------------------------------------------ */
.product_add_inline,
.product-add-to-cart {
    margin-top: 10px;
}

.btn_them_gio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border: 1px solid #ff7004;
    border-radius: 20px;
    background: #fff;
    color: #ff7004;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.btn_them_gio:hover,
.btn_them_gio:focus {
    background: #ff7004;
    color: #fff;
}

/* #amount la o hien khoang gia dang chon - readonly, khong phai o nhap */
#amount {
    width: 100%;
    margin: 14px 0 10px;
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    color: #ff7004;
    font-weight: 700;
    text-align: center;
}