/* ==========================================================
   Demo Bonsai
   style.css
   CSS dùng chung + Home
========================================================== */


/*==========================================================
    ROOT
==========================================================*/

:root{

    --bg:#e3d4ae;

    --ink:#1f1b16;

    --muted:#776b5a;

    --brand:#c60000;

    --surface:#fff7e1;

    --btn:#2f6f3e;

    --btn-ghost:#cabd9b;

    --shadow:0 6px 20px rgba(0,0,0,.12);

}


/*==========================================================
    RESET
==========================================================*/

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html,
body{

    height:100%;

    overscroll-behavior-y:auto;

}

body{

    background:var(--bg);

    color:var(--ink);

    font-family:

        system-ui,

        -apple-system,

        "Segoe UI",

        Roboto,

        sans-serif;

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

}


/*==========================================================
    COMMON
==========================================================*/

*{

    -webkit-user-select:none;

    user-select:none;

    -webkit-tap-highlight-color:transparent;

}

[aria-hidden="true"]{

    display:none;

}

.sr-only{

    position:absolute!important;

    width:1px;

    height:1px;

    overflow:hidden;

    clip:rect(1px,1px,1px,1px);

    white-space:nowrap;

}


/*==========================================================
    SCREEN
==========================================================*/

.screen{

    max-width:980px;

    margin:auto;

    padding:16px 16px 32px;

}


/*==========================================================
    BRAND
==========================================================*/

.brand{

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:20px;

    font-size:40px;

    font-weight:800;

}

.brand-mark{

    color:var(--brand);

    font-family:"Brush Script MT",cursive;

}

.brand-name{

    color:#1b1b1b;

}


/*==========================================================
    ACTIONS
==========================================================*/

.actions .row{

    display:flex;

    gap:16px;

    margin:16px 0;

}


/*==========================================================
    BUTTON
==========================================================*/

.btn{

    border:none;

    cursor:pointer;

    border-radius:12px;

    padding:12px 16px;

    font:inherit;

    font-weight:600;

    transition:.2s;

}

.btn:hover{

    transform:translateY(-1px);

}

.btn:active{

    transform:scale(.98);

}


/*==========================================================
    HOME BUTTON
==========================================================*/

.btn-big{

    flex:1;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    background:#2a2a2a;

    color:#fff;

}

.btn-download{

    background:#1a7bd9;

    color:#fff;

}

.btn-wide{

    width:100%;

    background:#263d7a;

    color:#fff;

}

.btn-pill{

    flex:1;

    border-radius:999px;

    background:var(--btn);

    color:#fff;

}

.btn-pill.flag{

    background:#8c7300;

}

.btn-pill.ghost{

    background:var(--btn-ghost);

    color:#000;

}


/*==========================================================
    ICON
==========================================================*/

.icon{

    display:inline-flex;

    justify-content:center;

    align-items:center;

}

.icon-left{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

}

.icon-left .icon{

    font-size:20px;

}


/*==========================================================
    ADVERTISEMENT
==========================================================*/

.ad-card{

    display:flex;

    align-items:center;

    gap:16px;

    padding:16px;

    background:var(--surface);

    border-radius:16px;

    box-shadow:var(--shadow);

}

.ad-art{

    flex:1;

    min-height:120px;

    display:grid;

    place-items:center;

    border:2px dashed #b9cbe0;

    border-radius:12px;

    font-weight:700;

}


/*==========================================================
    LANGUAGE
==========================================================*/

.lang-wrap{

    margin-left:12px;

}

.lang-flags{

    display:flex;

    align-items:center;

    gap:8px;

}

.flag-btn{

    width:32px;

    height:22px;

    object-fit:cover;

    border-radius:4px;

    border:2px solid transparent;

    cursor:pointer;

    transition:.2s;

}

.flag-btn:hover{

    transform:scale(1.08);

}

.flag-btn.active{

    border-color:red;

}


/*==========================================================
    COMMON IMAGE
==========================================================*/

img{

    max-width:100%;

    display:block;

}
/*==============================
  Language title
==============================*/

/*==============================
  Language title
==============================*/

.lang-wrap{
    display:flex;
    flex-direction:column;
    align-items:center;
    margin-left:12px;
}

.lang-title{
    margin-top:5px;

    display:flex;
    justify-content:center;
    align-items:center;
    gap:4px;

    font-size:11px;
    font-weight:600;
    color:#043ac9;      /* xanh da trời */
    white-space:nowrap; /* không xuống dòng */
    line-height:1;
}

.lang-title span{
    display:inline-block;
}
/* SEO content */
.seo-content h2{
    color:#e3d4ae;      
}

.seo-content p{
    color:#e3d4ae;      /* màu nội dung */
}