/* = version 38 =*/

:root {
    --system-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, "Noto Sans", sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

    /* iOS design tokens - dung chung cho border-radius/transition/shadow toan site */
    --ios-radius-lg: 16px;
    --ios-radius: 12px;
    --ios-radius-sm: 8px;
    --ios-blue: #0d6efd;
    --ios-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
    --ios-transition: 0.2s var(--ios-ease);
    --ios-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    --ios-shadow-dark: 0 2px 10px rgba(0, 0, 0, 0.35);
}
html body,
body,
input,
textarea,
select,
button,
.elementor-widget-container,
.wpcf7 input,
.wpcf7 textarea,
.wpcf7 select
{
    font-family: var(--system-font) !important;
}
body.body_dark {
    background: #02111e !important;
    color: #c6c6c6 !important;
}
html:has(body.body_dark) {
    background: #02111e;
}
div.primary-navigation a {
    text-decoration: none;
}
.grecaptcha-badge {
    visibility: hidden;
}
body {
    margin-right: -1px !important;
}
.mobile_display {
    display: none;
}
div.ezd-grid.ezd-grid-cols-12.feedback_link {
    display: none;
}
body.body_dark .border_bottom {
      display: inline-block;
    background: #384c59;
}
body .border_bottom {
    display: none;
}
@media screen and (max-width: 767px) {
    .mobile_separator {
        display: block;
        width: 100%;
        height: 0;
        border-top: 1px solid #202838;
        margin: 20px 0;
    }
}
.last-updated-date
{
    display: none !important;
}
div.doc-middle-content {
  z-index: 0 !important;
}
div.rpwe-block {
    margin-right: 20px;
}
@media (min-width: 1100px) {
    .ezd-sticky-lg-top {
        position: sticky !important;
        align-self: flex-start !important;
        z-index: 1 !important;
        top: 0 !important;
    }
}
body.page-id-4500 div.elementor-element-e49dc66
{
    margin-top: 15px !important;
}
body.page-id-83844 div#secondary
{
    display: none !important;
}
section.elementor-element-453ba4d0
{
    display: none !important;
}
main.page_search article div.entry-summary
{
    margin-right: 10px !important;
    margin-left: 20px !important;
}
main.page_search article header
{
      margin-left: 10px !important;
      margin-bottom: 0px !important;
}
main.page_search div#infinite-handle
{
    display: none !important;
}
body.page-id-83844 div.kk-star-ratings,
body.page-id-90589 div.kk-star-ratings
{
    display: none !important;
}
body.page-id-4500 .last-updated-date,
body.page-id-83844 .last-updated-date,
body.page-id-92224 .last-updated-date,
body.page-id-90589 .last-updated-date
{
    display: none !important;
}
body.page-id-4500 div.new_snippet,
body.page-id-83844 div.new_snippet,
body.page-id-92224 div.new_snippet,
body.page-id-90589 div.new_snippet
{
    display: none !important;
}
body.page-id-4500 section.elementor-element-2afd3d7
{
  height: 160px !important;
}
body.page-id-4500 form.search-form
{
  top: -30px !important;
}
header#masthead{
    margin-bottom: 0px !important;
}
div.cky-btn-revisit-wrapper {
    display: none !important;
}
body.postid-88482 div.new_snippet,
body.postid-88482 div#content_elements h4,
body.postid-88497 div.new_snippet,
body.postid-88497 div#content_elements h4,
body.postid-88480 div.new_snippet,
body.postid-88480 div#content_elements h4,
body.postid-88481 div.new_snippet,
body.postid-88481 div#content_elements h4,
body.postid-88478 div.new_snippet,
body.postid-88478 div#content_elements h4,
body.postid-88553 div.new_snippet,
body.postid-88553 div#content_elements h4,
body.postid-88552 div.new_snippet,
body.postid-88552 div#content_elements h4,
body.postid-88555 div.new_snippet,
body.postid-88555 div#content_elements h4,
body.postid-88556 div.new_snippet,
body.postid-88556 div#content_elements h4,
body.postid-83245 div.new_snippet,
body.postid-83245 div#content_elements h4,
body.postid-83243 div.new_snippet,
body.postid-83243 div#content_elements h4,
body.postid-83249 div.new_snippet,
body.postid-83249 div#content_elements h4,
body.postid-83250 div.new_snippet,
body.postid-83250 div#content_elements h4,
body.postid-83251 div.new_snippet,
body.postid-83251 div#content_elements h4,
body.postid-83247 div.new_snippet,
body.postid-83247 div#content_elements h4,
body.postid-83246 div.new_snippet,
body.postid-83246 div#content_elements h4,
body.postid-83244 div.new_snippet,
body.postid-83244 div#content_elements h4,
body.postid-83248 div.new_snippet,
body.postid-83248 div#content_elements h4
{
    display: none !important;
}
li img {
    vertical-align: middle !important;
    display: inline-block !important;
}
body.page-id-4500  .elementor-icon-list-items
{
    margin: 0px;
}
#pvc_stats_83397
{
    margin-bottom: 30px !important;
}
#toc_container
{
    background: none !important;
    border: none !important;
}
#toc_container span.toc_number
{
    display: none !important;
}
#toc_container > p
{
    display: none !important;
}
#toc_container > ul > li
{
    display: none !important;
}
#toc_container > ul > ul > li > a > span
{
    display: none !important;
}
#toc_container > ul
{
    padding-left: 3px !important;
}
h1,h2,h3,h4,h5 {
 font-family: var(--system-font) !important;
}
h3.rpwe-title a {
    font-weight: 400 !important;
}

h3 a.anchorjs-link {
    display:none !important;
}
#post-83552 div.entry-content img
{
    width: 20px;
    height: 20px;
}
body.search-results .entry-content,
body.search-results .entry-taxonomy,
body.term-loi .entry-content,
body.term-loi .entry-taxonomy,
body.term-zalo-dien-thoai .entry-content,
body.term-zalo-dien-thoai .entry-taxonomy,
body.term-zalopc-zavi .entry-content,
body.term-zalopc-zavi .entry-taxonomy
{
    display: none;
}
body.search-results .entry-content p:nth-of-type(2) {
  display: block;
    background: red;
}
body.search-results #main header.page-header h1.page-title,
body.term-loi #main header.page-header h1.page-title,
body.term-zalo-dien-thoai #main header.page-header h1.page-title,
body.term-zalopc-zavi #main header.page-header h1.page-title
{
    text-align: center;
    padding-bottom: 60px;
}
div.gt_selected {
    padding-top:1px;
}
@media (max-width: 600px) {
.col-full {
        margin-left: 5px !important;
        margin-right: 5px !important;
    padding: 0;
}
}

img.open
{
    display:none !important;
}
div.site-branding {
    width: 13%;
}
ul#menu-main-1 li.menu-item-87919 {
      display:none !important;
}
ul#menu-main-1 li.menu-item-has-children.menu-item-87923 button.dropdown-toggle {
      display:none !important;
    padding-top: 17px;
    padding-right: 2px;
}
.handheld-navigation ul.menu li {
     padding-right: 20px !important;
}
.no-wc-breadcrumb .site-header {
    margin-bottom: 1em;
}
.site-header .site-logo-anchor, .site-header .site-logo-link, .site-header .custom-logo-link {
      margin-left: 20px;
}
.site-branding, .site-search, .site-header-cart, .site-logo-anchor, .site-logo-link, .custom-logo-link {
    margin-bottom: -10em;
}
.main-navigation ul.menu, .main-navigation ul.nav-menu {
    margin-left: 13em;
}
#menu-main-1 {
    padding-top: 15px;
    margin-left: 3%;
      display: flex;
    flex-direction: row;
}
.handheld-navigation ul.menu .sub-menu {
 display:none !important;
}
.elementor-4500 .elementor-element.elementor-element-2afd3d7:not(.elementor-motion-effects-element-type-background), .elementor-4500 .elementor-element.elementor-element-2afd3d7 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    height: 250px;
}
button.menu-toggle, button.menu-toggle:hover {
    width: 70%;
    border-color: #23396d;
}
#site-navigation-menu-toggle > span
{
    color: #b7cee5;
    width: 100px;
    font-size: 15px;
}
#menu-main a {
    color: #b7cee5;
}
#menu-main-1 a {
    color: #b7cee5;
}
#menu-main-1 li {
    font-size: 15px;
}
.site-footer {
       background: #02111e!important;
}
button.dropdown-toggle {
    color: #aeb5e0 !important;
}
div.new_snippet div.elementor-divider {
    padding-bottom: 10px !important;
    padding-top: 250px !important;
}
div.shortcode_title a.ezd-doc-badge {
    color: white !important;
    background: rgb(79 79 198 / 81%) !important;
}
button.menu-toggle:after, button.menu-toggle:before, button.menu-toggle span:before {
    background-color:  #aeb5e0 !important;
}
#post-93113 h1.entry-title {
    display:none;
}
#post-93113 div.elementor-widget-container {
    margin: auto;
    text-align: center;
    font-size: 30px;
      padding-top: 50px;
}
#post-93113 div.elementor-widget-container input {
    width: 100%;
    border-radius: 5px;
    margin-left: 5px;
    margin-right: 5px;
}
img.custom-logo
{
    background-color: #23396d !important;
    border-radius: 6px !important;
    height: 45px !important;
    width: 45px !important;
}
.container-fluid {
      margin-left: 20px;
      margin-right: 20px;
}
.ezd-container-fluid{
      padding-left: 6px !important;
      padding-right: 3px !important;
}
.doc_right_mobile_menu .doc_rightsidebar {
    border-radius: 6px;
    margin-top: 1px !important;
}
.docs-template-default .doc_documentation_area.body_fixed .doc_left_sidebarlist {
      width: 265px;
    min-width: 220px;
    max-width: 400px;
    border-radius: 6px;
      margin-top: 0px !important;
}
aside.doc_left_sidebarlist {
    border-radius: 6px;
      width: 265px;
        padding: 3px;
    min-width: 220px;
    max-width: 400px;
    padding-top: 20px;
      margin-top: 0px !important;
}
.docs-template-default .doc-main-content {
    min-height: 850px;
}
.credit-text-container::after {
    display: none;
}

.docs-template-default .nav-sidebar:not(.doc-nav) .nav-item .dropdown_nav li a {
    font-size: 15px;
}
.docs-template-default .nav-sidebar .nav-item .nav-link + .icon {
    right: 20px;
}
.feedback_link .h_btn {
    background-color: white;
}
.feedback_link .h_btn:hover {
    background: #5660e1;
}
.feedback_link .h_btn.red {
    background-color: white;
}
.feedback_link .h_btn.red:hover {
    background: #d84a3c;
}
::-webkit-scrollbar {
  width: 6px;
}
.body_dark ::-webkit-scrollbar-track {
    border-radius: 15px;
  background-color: #b1c0d6;
}
::-webkit-scrollbar-track {
    border-radius: 15px;
  background-color: white;
}
::-webkit-scrollbar-thumb {
    border-radius: 15px;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.50, rgb(122,153,217)), color-stop(0.72, rgb(73,125,189)), color-stop(0.86, rgb(28,58,148)));
}
div#mCSB_1 {
  scroll-behavior: smooth;
}
div.ezd-scroll {
    padding-right: 0px !important;
}
div.scroll {
    overflow-y: scrollbar;
      scroll-behavior: smooth;
}
a.active {
    background-color: #ffffbf;
      border-radius: 3.5px;
}
.nav-sidebar .nav-item {
    margin-bottom: 20px;
    padding-right: 0px;
}
.docs-template-default .recently_added .tag_list li {
    display: inherit;
}
.docs-template-default .recently_added .tag_list li::after {
    content: none;
}
#back-to-top {
    right: 22px;
    bottom: 96px;
    top: auto;
    width: 45px;
    height: 45px;
}
div.doc-scrollable.editor-content > div.elementor {
    padding: 0px !important;
      margin-right: 2px !important;
}
div.elementor-widget-wrap {
    padding: 0px !important;
      margin: 0px !important;
}
.shortcode_info {
    padding-right: 3px;
    padding-left: 2px;
    margin-left: 1px !important;
}
.shortcode_info p {
    margin-top: 8px;
    margin-bottom: 2px;
}
.wp-block-heading {
    padding-top: 35px;
}
.crp_related {
    margin-top: 150px;
    margin-bottom: 10px;
}
:target {
      scroll-margin-top: 3rem;
}
#docly-search-result .search-result-item {
    background-color: #eef1f8;
}
.body_dark .custom-select, .body_dark input#searchInput {
    background: #e9eefd;
    color: #fff;
}
.body_dark .breadcrumb_area {
        background-color: #23396d;
    background-image: none;
    padding: 40px;
}
.breadcrumb_area {
        background-color: #23396d;
    background-image: none;
    padding: 40px;
}
.breadcrumb_area .banner_search_form {
    display: none;
   max-width: 50%;
}
.doc_documentation_area {
    margin-top: 10px;
}
.mobile_main_menu .mobile_menu_left {
        margin-top: 3px;
    margin-left: 3px;
}
button.mobile_menu_btn {
    display: none;
}
a.sticky_logo {
    display: inline-block;
}
@media (max-width: 1099px) {
    .doc_left_sidebarlist .open_icon {
        display: block !important;
        right: -25px !important;
        left: auto !important;
        top: 2px !important;
    }
 .doc_rightsidebar
    .open_icon {
        display: block !important;
        left: -25px !important;
        right: auto !important;
        top: 2px !important;
    }
}
body.body_dark div.open_icon {
        background-color: #2e353b;
        color: antiquewhite;
}
.cropvideo {
      width: 70% !important;
    height: 70% !important;
}
body.body_dark figure figcaption {
    color: antiquewhite;
}
body.body_dark div.wp-block-group.has-background {
    background-color: #02111e !important
}
.wp-block-table{
    font-size: 16px ;
}
.navbar-toggler {
    pointer-events: none;
}
body.body_dark .open_icon:hover {
    background: #1f41c5;
    color: #fff;
}
.doc-middle-content {
    margin-top: 15px;
    padding-top: 30px;
    padding-left: 2px;
      padding-right: 2px;
}
.navbar-expand-lg .navbar-nav.menu {
    height: 65px;
    margin-left: 35%;
}
.menu > .nav-item {
    padding-top: 17px;
}
.menu>.nav-item+.nav-item {
    margin-left: 35px;
}

.banner_search_form button {
    color: #1855a8;
    background-color: white;
}
.custom_container.container {
    background-color: #23396d;
        padding: 0px;
}
.navbar {
    background-color: #23396d;
}
.navbar-collapse {
    background-color: #23396d;
}
.navbar-toggler button {
   display: none;
}
.navbar_fixed.menu_one {
    background: #23396d;
}
.single.has_not_menu .navbar:not(.navbar_fixed) {
    height: 45px;
}
.doc_documentation_full_area .container-fluid {
        max-width: 97%;
    padding-right: 10px!important;
    padding-left: 10px!important;
}
.ezd-widgets {
    margin-top: 5px;
}
.widget + .widget {
    margin-top: 15px;
    margin-bottom: 30px;
}
.custom-html-widget {
    padding-top: 10px;
}
.onepage-doc-sec li a, .onepage-doc-sec p a, .doc-middle-content p a, .card-body a, .blog_single_item p a {
    color: #0d6efd;
    text-decoration-color: #0d6efd;
}
a:hover, a:focus {
    color: #56d0ce;
}
a {
    color: #0d6efd ;
}
.body_dark .onepage-doc-sec p a:hover, .body_dark .doc-middle-content p a:hover, .body_dark .card-body a:hover, .body_dark .blog_single_item p a:hover {
    color: #56d0ce;
}

.breadcrumb_text h2 {
    color: #043b6f;
}
.blog_classic_item img {
    max-width: 10%;
}
span {
  display: block;
  text-decoration: none;
    color: #0d6efd;
}
#rpwe_widget-3 {
    margin-bottom: 30px;
}
.wpcf7 form.sent .wpcf7-response-output {
    margin: 0px;
    padding: 0px;
    background-color: #3b4896;
    color: white;
    text-align: center;
    border-color: #3b4896;
    border-radius: 5px;
}
select.wpcf7-select {
    width: 220px;
    border-radius: 6px;
    border-color: #e6ecf1;
        background-color: white;
}
.navbar_fixed.menu_one .menu > .nav-item:hover > .nav-link, .navbar_fixed.menu_one .menu > .nav-item.active > .nav-link {
    color: #7dbc42;
}
.menu_toggle .hamburger {
    display: none;
}
.breadcrumb_area_three > div > div > p > span  {
    display: none;
}
.breadcrumb_area_three {
    display: none; /* nen: #d1e3ff, padding-top: 100px, padding-bottom: 1px (giu lai neu sau nay bat hien thi lai) */
}
.pagination .page-numbers:hover{
    background-color: #9ce1b9;
    color: #106032;
}
 .pagination .page-numbers.current {
    background-color: #b3b6e1;
    color: #201c54;
}
.ha-post-list-title h3{
        font-size: 18px;
}
.upk-item .upk-title a {
    font-size: 16px;
    font-weight: normal;
}

input#doc_filter {
	margin-left: 10px;
}

body.search-results div.entry-content > img {
    height: 25px;
    width: 25px;
}
body.page-id-93104 #pvc_stats_93104 {
    display: none !important;
}
.doc-scrollable ul {
    padding-left: 35px !important;
    margin: 1px 0px 15px 0px !important;
    gap: 1px !important;
    padding-bottom: 1px !important;
}
.doc-scrollable ol {
    padding-left: 35px !important;
   margin: 1px 0px 15px 0px !important;
    gap: 1px !important;
    padding-bottom: 1px !important;
}
.doc-scrollable ul li img {
      width: 22px !important;
    margin: 0 !important;
}
div.new_snippet .rpwe-block ul {
    list-style: none !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}
div.new_snippet .rpwe-block li {
    border-bottom: 1px  #eee !important;
    margin-bottom: 1px !important;
    padding-bottom: 1px !important;
    list-style-type: none !important;
}
div.new_snippet .rpwe-block a {
    display: inline !important;
    text-decoration: none;
}
div.new_snippet .rpwe-block h3 {
    background: none !important;
    clear: none;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    font-weight: 40;
    font-size: 16px !important;
    line-height: 1.2em;
}
div.elementor-element-populated > div.elementor-widget-heading
{
    margin-bottom: 0px !important;
}
.rpwe-block ul {
    list-style: none !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}
.rpwe-block li {
    border-bottom: 1px  #eee !important;
    margin-bottom: 10px !important;
    padding-bottom: 10px !important;
    list-style-type: none !important;
}
.rpwe-block a {
    display: inline !important;
    text-decoration: none;
}
.rpwe-block h3 {
    background: none !important;
    clear: none;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    font-weight: 400;
    font-size: 16px !important;
    line-height: 1.5em;
}
.rpwe-thumb {
    border: 1px solid #eee !important;
    box-shadow: none !important;
    margin: 2px 10px 2px 0;
    padding: 3px !important;
}
.rpwe-summary {
    font-size: 12px;
}
.rpwe-time {
    color: #bbb;
    font-size: 11px;
}
.rpwe-alignleft {
    display: inline;
    float: left;
}
.rpwe-alignright {
    display: inline;
    float: right;
}
.rpwe-aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.rpwe-clearfix:before,.rpwe-clearfix:after {
    content: "";
    display: table !important;
}
.rpwe-clearfix:after {
    clear: both;
}
.rpwe-clearfix {
    zoom: 1;
}
.f_bg_color {
    background: #23396d;
}
.dk_menu .nav-item > .nav-link {
    color: white;
}
.arrow_carrot-down {
     display: none !important;
}
.ordered-list li::marker {
    display: none !important;
}
.yasr-small-block-bold {
    display: block;
    font-weight: 700;
    font-size: 15px !important;
}
body.body_dark .doc_menu .nav-link.active, body.body_dark .doc_menu .nav-link:hover, body.body_dark h1, body.body_dark h2, body.body_dark h3, body.body_dark h4, body.body_dark h5, body.body_dark h6 {
    color: #e9eadb;
}
body.body_dark img {
    background-color: #dce5e9;
    border-radius: 19px;
}
body.body_dark span{
    color: #99c1fc;
}
body.body_dark a{
    color: #a1b2f0;
}
a:hover {
    color: #56d0ce !important;
}
body.body_dark li strong{
    color: #afa978;
}
body.body_dark em:first-child  {
    color: #33e7a9eb;
}
body.body_dark h1,
body.body_dark h1 strong,
body.body_dark h2,
body.body_dark h2 strong,
body.body_dark h3,
body.body_dark h3 strong,
body.body_dark h4,
body.body_dark h4 strong
{
    color: #5bbaff;
}
a.navbar-brand.logo.sticky_logo img{
    background-color: #23396d ;
    height: 39px;
    border-radius: 5px;
}
.doc_rightsidebar #font-switcher {
    margin: 0px;
}
body .pvc_stats .pvc-stats-icon.medium svg {
    background-color: whitesmoke;
    border-radius: 3px;
}
body.body_dark table:not( .has-background ) tbody td {
    background-color: #091021 !important;
}
body.body_dark .direction_step {
    background: rgb(75 76 125 / 80%);
    color: #fff;
    border-radius: 5px;
    display: table;
}
span:hover {
     border-radius: 5px;
     color: #0d6efd;
}
.wp-block-separator {
    margin-top: 30px !important;
    margin-bottom: 29px !important;
    width: 150px !important;
    border-bottom: 1px solid !important;
}
.open_icon {
    margin-top: 2px;
}
.single-docs  h3,
.single-docs  h4,
.single-docs  h5 {
    margin-top: 20px !important;
    margin-bottom: 10px !important;
}
.single-docs #post h4 .anchorjs-link
{
    display: none !important;
}
span.yasr-already-voted-text,
span.yasr-small-block-bold
{
    font-size: 13px !important;
        color: #9d9d74 !important;
}
.yasr-visitor-votes
{
    font-size: 13px !important;
        color: #9d9d74 !important;
}
div.wp-block-group,
div.wp-block-columns,
div.wp-block-group__inner-container p
{
        margin: 0px !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    padding-right: 3px !important;
    padding-left: 3px !important;
}
div.wp-block-group__inner-container {
        border-style: ridge;
    border-radius: 6px;
    border-color: #84848b;
}
body.body_dark .ordered-list li::before {
    background: #0d1633!important;
    border: 5px solid #4b535f !important;
}
body.body_dark aside.doc_left_sidebarlist h2.doc-title {
    margin-top: 25px;
}
body.body_dark div.section.eazydocs-footer {
    background: #0d1633!important;
}
div.section.eazydocs-footer {
    display: none !important;
}
body.body_dark #wrapper, body.body_dark .doc_documentation_area, body.body_dark .nav-sidebar.one-page-doc-nav-wrap .nav-item .dropdown_nav {
    background: #02111e !important;
}
body.body_dark .elementor-divider-separator {
    border-color: gray !important;
}
div.elementor-4513 section
{
    background-color: #b8c4e0 !important;
    border-radius: 6px !important;
}
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {
    margin: 0px;
    padding: 0px;
    background-color: #818071;
    color: #fdfcfc;
    text-align: center;
    border-color: #8f8f66;
    border-radius: 5px;
}
span.dnd-upload-counter,
div.codedropz-upload-container span {
    color: gray;
}
div.codedropz-upload-container {
    background: #f9fbfc;
    border-radius: 6px;
}
img.wpcf7-captchac,
input.wpcf7-captchar.wpcf7-form-control
{
        display: block;
    margin-left: auto;
    margin-right: auto;
    width: 23%;
}
input[name="zalo_consent"]{
    height: 22px;
}
div.col-lg-12.form-group h4
{
    margin-left: 10px;
}
input.wpcf7-submit {
    border-radius: 5px
}
div.mfile-wrapper {
    margin: 8px;
}
span.wpcf7-not-valid-tip,
div.col-lg-12 p{
    text-align: center;
}
textarea.wpcf7-textarea
{
        background-color: white;
}
span.wpcf7-form-control-wrap input
{
        background-color: white;
    border-radius: 5px;
      display: block;
    margin-left: auto;
    margin-right: auto;
    width: 75%;
}
span.wpcf7-form-control-wrap {
    margin: 2px;
}
.widget_search .search-form .form-control:focus {
    border-color: #ffffff !important;
}
div.widget_search {
    width: 90% !important;
    margin: auto !important;
}
p.has-black-color
{
    color: #fc0b0b !important;
}
li.menu-item-gtranslate {
    margin-left: 12px;
    padding-bottom: 37px;
    padding-top: 16px;
}
div.gt_switcher {
    font-family: var(--system-font) !important;
    font-size: 10pt!important;
    text-align: left!important;
    cursor: pointer!important;
    overflow: hidden!important;
    line-height: 0!important;
    border-radius: 5px!important;
    width: 112px!important;
    margin-top: 2px !important;
}
div.gt_option img,
div.gt_selected img {
    background-color: #23396d !important;
}
div.elementor-element-populated span.elementor-icon-list-icon > i {
    display: none !important;
}
div.elementor-element-populated ul.elementor-icon-list-items {
    list-style-type: none !important;
}
#top-posts-4 a:before {
    display: none !important;
}
#top-posts-4 {
    padding-bottom: 10px;
}
h2.fx-toc-title {
    height: 5px !important;
}

div.wpcf7-response-output {
    color: midnightblue;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    border-color: #231a67;
    border-radius: 5px;
}
.body_dark .reduce-first-column-wide  td {
    background-color: #02111e;
}
.body_dark .wp-block-table:not( .has-background ):not( .is-style-stripes ) tbody tr:nth-child(2n) td {
    background-color: #02111e;
}
.body_dark aside.doc_left_sidebarlist {
    background-color: #02111e;
    padding: 0px;
    padding-left: 3px;
}
.body_dark aside.doc_left_sidebarlist div.ezd-scroll
{
    background-color: #0d1633;
}
.body_dark aside.doc_left_sidebarlist h2
{
    background-color: #0d1633;
}
.doc_left_sidebarlist .doc-title {
    display: none !important;
}
.doc_left_sidebarlist .ezd-scroll li.page-item-83243 > div.doc-link {
    display: none !important;
}
body.body_dark .doc_left_sidebarlist .ezd-scroll,
body.body_dark .doc_left_sidebarlist::after, body.body_dark .doc_left_sidebarlist:not(.one-page-docs-sidebar-wrap)::before {
    background: #02111e !important;
    border: none !important;
}
.doc_left_sidebarlist:before {
    height: 99.8% !important;
}
.reduce-first-column-wide tbody tr > :first-child {
    width: 27%;
}
.reduce-first-column-wide {
    font-size: 16px !important;
}
div.elementor-element.elementor-element-244b6616
{
    padding-bottom: 50px;
}
body div.body_wrapper div.elementor-top-column:first-child
{
    padding-left: 10px;
    padding-right: 10px;
}
.elementor-section:first-child {
    margin-left: 0px !important;
    margin-right: 0px !important;
}
.elementor-section
{
    margin-left: 15px !important;
    margin-right: 15px !important;
}
body div.body_wrapper  ul  li a  span
{
    font-size: 16px !important;
}
body h3  a {
    font-size: 16px !important;
}
h1 {
    font-size: 36px !important;
    padding-top: 10px;
    margin-bottom: 10px;
}
h2 {
    font-size: 24px !important;
}
h3 {
    font-size: 20px !important;
    padding: 0 !important;
}
h4 {
    font-size: 18px !important;
}
h5 {
    font-size: 16px !important;
}
footer div.col-full {
    text-align:center;
}
#post-90589 h1 {
    display: none;
}
a:focus, input:focus, textarea:focus, button:focus {
    outline: none !important;
}
header #masthead .site-header {
    margin-bottom: 0px;
}
.zalo-footer {
    padding: 20px 0;
    font-family: var(--system-font);
    color: #828282;
    font-size: 16px;
    line-height: 1.6;
}
.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}
.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 15px;
}
.footer-logo-section {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #757575;
}
.footer-logo {
    height: 22px;
}
.footer-menu-social {
    display: flex;
    align-items: center;
    gap: 30px;
}
.footer-links {
    list-style: none;
    display: flex;
    gap: 20px;
    margin: 0;
    padding: 0;
}
.footer-links a {
    text-decoration: none;
    color: #222;
    font-weight: bold;
}
.footer-social {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #757575;
}
.footer-social i {
    color: #757575;
    font-size: 16px;
}
.footer-divider {
    border: 0;
    border-top: 1px solid #e5e5e5;
    margin: 0 0 20px 0;
}
.footer-bottom {
    display: flex;
    justify-content: space-between;
}
.footer-col {
    flex: 1;
}
.footer-col p {
    margin: 4px 0;
    color: #7e7e7e;
    font-size: 13.9px;
}
.info-left {
    max-width: 30%;
}
.info-center {
    max-width: 45%;
    padding-left: 20px;
}
.info-right {
    text-align: right;
    max-width: 25%;
    color: #757575;
}
.info-left strong {
    display: block;
    margin-bottom: 5px;
    font-size: 15px;
}
@media (max-width: 768px) {
    .footer-top, .footer-bottom, .footer-menu-social {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    .info-left, .info-center, .info-right {
        max-width: 100%;
        text-align: left;
        padding-left: 0;
    }
}
.elementor-4500 {
    display: block;
    width: 100% !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
}
.elementor-4500 .elementor-section-wrap,
.elementor-4500 .elementor-element {
    max-width: 100% !important;
    width: 100% !important;
}
@media (min-width: 1200px) {
    .elementor-4500 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}
.ios-search-wrapper {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    background-color: rgba(118, 118, 128, 0.12) !important;
    border-radius: 12px !important;
    padding: 2px 8px 2px 12px !important;
    transition: all 0.3s ease;
    box-sizing: border-box;
    border: none !important;
}
.ios-search-icon {
    color: #8e8e93 !important;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
}
.ios-search-input {
    flex: 1;
    border: none !important;
    background: transparent !important;
    height: 44px !important;
    font-size: 16px !important;
    color: #000000 !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0 0 0 32px !important;
    box-sizing: border-box;
}
.ios-search-wrapper:focus-within {
    background-color: rgba(118, 118, 128, 0.18) !important;
    box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.2);
}
.ios-search-input::placeholder {
    color: #8e8e93 !important;
    opacity: 1;
}
.ios-search-submit {
    background: transparent !important;
    border: none !important;
    color: #007aff !important;
    font-size: 16px !important;
    font-weight: 600;
    padding: 0 8px !important;
    cursor: pointer;
    height: 100%;
    display: none;
}
.ios-search-wrapper:focus-within .ios-search-submit {
    display: block;
    animation: fadeIn 0.2s ease;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateX(5px); }
    to { opacity: 1; transform: translateX(0); }
}
#wpcom-gifting-banner {
    display: none !important;
}

/* =========================================================================
   FIX: Dark mode khong ap dung tren trang chu (body.page-id-4500)
   Nguyen nhan: trang chu dung Elementor, moi section/column/widget duoc
   Elementor xuat mau nen truc tiep (inline style hoac CSS rieng cua trang),
   che mat mau nen toi cua <body>. Ep trong suot de lo nen toi ben duoi.
   Neu sau khi ap dung van con mang/khoi nao giu nen sang, gui minh class
   "elementor-element-xxxxxxx" cua khoi do de them rule rieng (khoi hero/
   banner co anh nen thuc su thi nen giu nguyen, khong ep trong suot).
   ========================================================================= */
body.body_dark.page-id-4500 .elementor-section,
body.body_dark.page-id-4500 .elementor-container,
body.body_dark.page-id-4500 .elementor-column,
body.body_dark.page-id-4500 .elementor-widget-wrap,
body.body_dark.page-id-4500 .elementor-element,
body.body_dark.page-id-4500 .elementor-background-overlay {
    background-color: transparent !important;
    background-image: none !important;
}
body.body_dark.page-id-4500 .elementor-widget-heading .elementor-heading-title,
body.body_dark.page-id-4500 p {
    color: #c6c6c6 !important;
}
body.body_dark.page-id-4500 .elementor-icon-list-text {
    color: #c6c6c6 !important;
}
/* Fix rieng: noi dung nhap tay trong widget HTML/Text Editor cua Elementor
   (vd khoi "Thong bao" o trang chu) dung mau inline style="color:#03437f"
   dinh san cho nen trang. Khi qua dark mode mau nay chim vao nen toi, gan
   nhu khong doc duoc. Vi la inline style nam tren chinh the <strong>/<span>,
   phai ep !important truc tiep tren cac the do (khong the sua qua the cha)
   moi thang duoc mau inline. */
body.body_dark.page-id-4500 .elementor-widget-container,
body.body_dark.page-id-4500 .elementor-widget-container p,
body.body_dark.page-id-4500 .elementor-widget-container strong,
body.body_dark.page-id-4500 .elementor-widget-container span,
body.body_dark.page-id-4500 .elementor-widget-container li,
body.body_dark.page-id-4500 .elementor-widget-container h1,
body.body_dark.page-id-4500 .elementor-widget-container h2,
body.body_dark.page-id-4500 .elementor-widget-container h3,
body.body_dark.page-id-4500 .elementor-widget-container h4 {
    color: #d7dee8 !important;
}
body.body_dark.page-id-4500 .elementor-widget-container a {
    color: #6cb4ff !important;
}
body.body_dark.page-id-4500 .elementor-widget-container a:hover {
    color: #56d0ce !important;
}

/* =========================================================================
   IOS DARK MODE - grouped card cho trang chu (dua theo dung class trong
   source HTML thuc te trang chu: .rpwe-block, .elementor-icon-list-items,
   .documentation_item, .docly-btn...). Muc tieu: tao phan tang do sau
   (surface elevated) kieu iOS thay vi chu/link noi truc tiep tren nen
   phang, dong bo bo goc + khoang cach + hover.
   Bien --ios-dark-elevated/--ios-dark-elevated-2 la 2 cap "do sang" cao
   hon nen goc (#02111e), dung lam nen cho card/list/button.
   ========================================================================= */
body.body_dark {
    --ios-dark-elevated: #0e1c2f;
    --ios-dark-elevated-2: #16283f;
    --ios-dark-separator: rgba(255, 255, 255, 0.08);
    --ios-dark-text-secondary: #9aa7b8;
}

/* Khoi "Thong bao" tren cung -> tach thanh card rieng co padding + bo goc */
body.body_dark.page-id-4500 .elementor-element-509840b > .elementor-widget-container {
    background: var(--ios-dark-elevated);
    border-radius: var(--ios-radius);
    padding: 18px 20px;
}

/* Duong ke phan cach (Elementor divider) - doi tu "gray" tho sang mau mo
   nhe kieu iOS separator, hoa vao nen thay vi noi cung nhu vien trang. */
body.body_dark .elementor-divider-separator {
    border-color: var(--ios-dark-separator) !important;
}

/* Danh sach "Bai moi nhat" / "Quan tam nhat" -> gom thanh 1 grouped list
   kieu iOS: nen cao hon 1 cap, moi dong co padding + duong ke mo giua cac
   dong, dong cuoi khong ke, hover doi nen sang hon chut de bao "co the bam". */
body.body_dark .rpwe-block > ul.rpwe-ul,
body.body_dark .elementor-icon-list-items {
    background: var(--ios-dark-elevated);
    border-radius: var(--ios-radius);
    overflow: hidden;
    padding: 0 !important;
}
body.body_dark .rpwe-block .rpwe-li,
body.body_dark .elementor-icon-list-item {
    border-bottom: 1px solid var(--ios-dark-separator) !important;
    margin: 0 !important;
    padding: 12px 16px !important;
    transition: background-color var(--ios-transition);
}
body.body_dark .rpwe-block .rpwe-li:last-child,
body.body_dark .elementor-icon-list-item:last-child {
    border-bottom: none !important;
}
body.body_dark .rpwe-block .rpwe-li:hover,
body.body_dark .elementor-icon-list-item:hover {
    background-color: var(--ios-dark-elevated-2);
}
body.body_dark .rpwe-block h3.rpwe-title {
    font-size: 15px !important;
    font-weight: 400 !important;
}
body.body_dark .elementor-icon-list-item a {
    display: block;
}
/* FIX: .elementor-icon-list-text la <span> nam trong <a>, bi rule chung
   "body.body_dark.page-id-4500 .elementor-widget-container span" (o tren)
   ghi mau xam len truoc, khien "Quan tam nhat" khong dong bo mau xanh link
   nhu "Bai moi nhat". Dat rule nay sau cung + selector cu the hon de thang. */
body.body_dark .elementor-icon-list-text {
    color: #6cb4ff !important;
}
body.body_dark .elementor-icon-list-item:hover .elementor-icon-list-text {
    color: #56d0ce !important;
}

/* Card danh muc (Moi bat dau / Nhan tin va goi / Tro chuyen nhom...)
   Dung padding tren o boc (col-lg-6) thay vi margin-bottom tren chinh card,
   tranh truong hop Bootstrap ".row" keo gian chieu cao (align-items:stretch)
   lam lo khoang nen thua giua 2 hang card. */
body.body_dark .row.doc-items {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 12px !important;
    margin: 0 !important;
}
body.body_dark .row.doc-items > [class*="col-"] {
    width: auto !important;
    max-width: none !important;
    flex: unset !important;
    padding: 0 !important;
    margin: 0 !important;
}
body.body_dark .documentation_item {
    background: var(--ios-dark-elevated);
    border-radius: var(--ios-radius);
    padding: 16px;
    height: 100%;
    box-sizing: border-box;
    transition: background-color var(--ios-transition);
}
body.body_dark .documentation_item:hover {
    background: var(--ios-dark-elevated-2);
}
body.body_dark .documentation_item .doc-sec.title {
    color: #eaeef2 !important;
    font-weight: 600;
}
body.body_dark .documentation_item p {
    color: var(--ios-dark-text-secondary) !important;
    margin-top: 4px;
}

/* Nut "Xem tat ca bai viet" -> dang pill be tron kieu iOS thay vi chu/link chay tay */
body.body_dark .docly-btn.learn_btn {
    background: var(--ios-dark-elevated-2) !important;
    color: #6cb4ff !important;
    border-radius: 999px !important;
    padding: 10px 22px !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background-color var(--ios-transition), color var(--ios-transition);
}
body.body_dark .docly-btn.learn_btn:hover {
    background: var(--ios-dark-elevated) !important;
    color: #56d0ce !important;
}

/* =========================================================================
   KHU VUC TIM KIEM (widget_search / .ios-search-wrapper)
   Loi that su: widget nay dung "width: inherit" (co lai theo noi dung),
   nen ban than CA WIDGET (khong chi o input ben trong) dang nam sat trai
   trong cot rat rong cua section "stretch section" - vi .elementor-widget-wrap
   mac dinh la flex-direction:column + align-items:flex-start. Fix truoc chi
   canh giua NOI DUNG trong widget, chua canh giua CHINH widget do trong cot.
   Phai canh giua o dung cap cot chua no (elementor-element-7b1596f, lay tu
   HTML thuc te) thi widget moi thuc su nam giua section rong. */
.elementor-element-7b1596f > .elementor-widget-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.elementor-element-42eee5b {
    width: 100%;
    max-width: 680px;
}
.elementor-element-42eee5b .elementor-widget-container {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-left: 60px;
}
.elementor-element-42eee5b .ios-search-wrapper {
    width: 100%;
}
/* Vung do cao toi thieu cua section (section-height-min-height) khong nen
   qua rong/trong nhu anh chup - them padding tren-duoi de o tim kiem co
   khong gian tho thoang thay vi dinh sat footer ben duoi. */
.elementor-element-2afd3d7 {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
}
.ios-search-wrapper {
    box-shadow: var(--ios-shadow);
}
/* Dark mode: nen mac dinh cua o tim kiem (rgba xam 12%) qua mo tren nen
   navy toi, gan nhu khong thay duong vien -> doi sang token elevated cho
   ro rang hon, dong bo voi cac card/list khac. */
body.body_dark .ios-search-wrapper {
    background-color: var(--ios-dark-elevated) !important;
    box-shadow: var(--ios-shadow-dark);
}
body.body_dark .ios-search-wrapper:focus-within {
    background-color: var(--ios-dark-elevated-2) !important;
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.35);
}
body.body_dark .ios-search-input {
    color: #eaeef2 !important;
}
body.body_dark .ios-search-input::placeholder {
    color: var(--ios-dark-text-secondary) !important;
}
body.body_dark .ios-search-icon {
    color: var(--ios-dark-text-secondary) !important;
}

/* =========================================================================
   IOS LIGHT MODE - ban tuong duong voi khoi dark mode o tren, danh cho
   luc site o che do sang (mac dinh). Dung mau nen "elevated" nhat hon mot
   chut so voi nen trang cua trang, ket hop shadow nhe de tao do sau kieu
   iOS thay vi mau/link noi truc tiep tren nen trang khong co ranh gioi.
   ========================================================================= */
body:not(.body_dark) {
    --ios-light-elevated: #f5f6f8;
    --ios-light-elevated-2: #eceef2;
    --ios-light-separator: rgba(60, 60, 67, 0.12);
    --ios-light-text-secondary: #6b7280;
    --ios-light-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
}
body:not(.body_dark).page-id-4500 .elementor-element-509840b > .elementor-widget-container {
    background: var(--ios-light-elevated);
    border-radius: var(--ios-radius);
    padding: 18px 20px;
    box-shadow: var(--ios-light-shadow);
}
body:not(.body_dark) .elementor-divider-separator {
    border-color: var(--ios-light-separator) !important;
}
body:not(.body_dark) .rpwe-block > ul.rpwe-ul,
body:not(.body_dark) .elementor-icon-list-items {
    background: var(--ios-light-elevated);
    border-radius: var(--ios-radius);
    overflow: hidden;
    padding: 0 !important;
    box-shadow: var(--ios-light-shadow);
}
body:not(.body_dark) .rpwe-block .rpwe-li,
body:not(.body_dark) .elementor-icon-list-item {
    border-bottom: 1px solid var(--ios-light-separator) !important;
    margin: 0 !important;
    padding: 12px 16px !important;
    transition: background-color var(--ios-transition);
}
body:not(.body_dark) .rpwe-block .rpwe-li:last-child,
body:not(.body_dark) .elementor-icon-list-item:last-child {
    border-bottom: none !important;
}
body:not(.body_dark) .rpwe-block .rpwe-li:hover,
body:not(.body_dark) .elementor-icon-list-item:hover {
    background-color: var(--ios-light-elevated-2);
}
body:not(.body_dark) .rpwe-block h3.rpwe-title {
    font-size: 15px !important;
    font-weight: 400 !important;
}
body:not(.body_dark) .elementor-icon-list-item a {
    display: block;
}
body:not(.body_dark) .row.doc-items {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 12px !important;
    margin: 0 !important;
}
body:not(.body_dark) .row.doc-items > [class*="col-"] {
    width: auto !important;
    max-width: none !important;
    flex: unset !important;
    padding: 0 !important;
    margin: 0 !important;
}
body:not(.body_dark) .documentation_item {
    background: var(--ios-light-elevated);
    border-radius: var(--ios-radius);
    padding: 16px;
    height: 100%;
    box-sizing: border-box;
    box-shadow: var(--ios-light-shadow);
    transition: background-color var(--ios-transition);
}
body:not(.body_dark) .documentation_item:hover {
    background: var(--ios-light-elevated-2);
}
body:not(.body_dark) .documentation_item .doc-sec.title {
    font-weight: 600;
}
body:not(.body_dark) .documentation_item p {
    color: var(--ios-light-text-secondary) !important;
    margin-top: 4px;
}
/* .row.doc-items goc la Bootstrap col-lg-6 col-sm-6: duoi 576px von la
   1 cot (stack doc), tu 576px tro len moi thanh 2 cot. Vi minh ep grid
   2 cot co dinh, can bu lai o mobile de khong vo bo cuc tren dien thoai. */
@media (max-width: 575px) {
    body.body_dark .row.doc-items,
    body:not(.body_dark) .row.doc-items {
        grid-template-columns: 1fr;
    }
}
body:not(.body_dark) .docly-btn.learn_btn {
    background: var(--ios-light-elevated) !important;
    color: var(--ios-blue) !important;
    border-radius: 999px !important;
    padding: 10px 22px !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: var(--ios-light-shadow);
    transition: background-color var(--ios-transition), color var(--ios-transition);
}
body:not(.body_dark) .docly-btn.learn_btn:hover {
    background: var(--ios-light-elevated-2) !important;
}

/* =========================================================================
   IOS POLISH LAYER - bo goc / transition / shadow dong bo theo chuan iOS,
   dung chung token o :root, khong doi mau thuong hieu hien co.
   ========================================================================= */
input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
textarea,
select,
.wpcf7 input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.wpcf7 textarea,
.wpcf7 select {
    border-radius: var(--ios-radius-sm) !important;
    transition: background-color var(--ios-transition), box-shadow var(--ios-transition), border-color var(--ios-transition);
}
button,
.wpcf7 input[type="submit"],
input.wpcf7-submit,
.feedback_link .h_btn,
.banner_search_form button {
    border-radius: var(--ios-radius-sm) !important;
    transition: background-color var(--ios-transition), color var(--ios-transition), transform var(--ios-transition);
}
button:active,
.wpcf7 input[type="submit"]:active,
.feedback_link .h_btn:active {
    transform: scale(0.97);
}
aside.doc_left_sidebarlist,
.doc_right_mobile_menu .doc_rightsidebar,
#docly-search-result .search-result-item,
div.codedropz-upload-container {
    border-radius: var(--ios-radius) !important;
    box-shadow: var(--ios-shadow);
}
body.body_dark aside.doc_left_sidebarlist,
body.body_dark .doc_right_mobile_menu .doc_rightsidebar,
body.body_dark #docly-search-result .search-result-item {
    box-shadow: var(--ios-shadow-dark);
}
.breadcrumb_area,
.custom_container.container,
.wpcf7-response-output {
    border-radius: var(--ios-radius) !important;
}
a,
button,
.pagination .page-numbers,
.open_icon {
    transition: color var(--ios-transition), background-color var(--ios-transition);
}
.pagination .page-numbers {
    border-radius: var(--ios-radius-sm);
}

/* =========================================================================
   IOS DOC PAGE (trang khong phai trang chu) - trang xem 1 bai viet cua
   EazyDocs (vd postid-95388): sidebar trai (nav cay thu muc + o loc/tim),
   noi dung giua (article.shortcode_info), sidebar phai (font-size +
   cong tac dark/light). Cac selector duoi day lay tu HTML/CSS mac dinh
   thuc te cua EazyDocs (khong dung page-id-4500 vi trang doc mang class
   .docs-template-default / .single-docs). Dung lai toan bo token
   --ios-dark-elevated*, --ios-light-elevated*, --ios-radius* da khai bao
   o cac khoi tren.
   ========================================================================= */

/* --- Sidebar trai: danh sach nav dang "grouped list" kieu iOS --- */
.nav-sidebar .nav-item > a,
.nav-sidebar .nav-item .nav-link,
.nav-sidebar .nav-item .doc-link,
.dropdown_nav li a {
    display: block;
    border-radius: var(--ios-radius-sm);
    padding: 8px 10px;
    transition: background-color var(--ios-transition), color var(--ios-transition);
}
body:not(.body_dark) .nav-sidebar .nav-item > a:hover,
body:not(.body_dark) .nav-sidebar .nav-item .nav-link:hover,
body:not(.body_dark) .nav-sidebar .nav-item .doc-link:hover,
body:not(.body_dark) .dropdown_nav li a:hover {
    background-color: var(--ios-light-elevated-2);
}
body.body_dark .nav-sidebar .nav-item > a:hover,
body.body_dark .nav-sidebar .nav-item .nav-link:hover,
body.body_dark .nav-sidebar .nav-item .doc-link:hover,
body.body_dark .dropdown_nav li a:hover {
    background-color: var(--ios-dark-elevated-2);
}
/* Trang dang xem (active): thay nen vang cu (#ffffbf) bang xanh iOS nhat, dong bo 2 mode */
body:not(.body_dark) a.active {
    background-color: rgba(13, 110, 253, 0.1) !important;
    color: var(--ios-blue) !important;
    border-radius: var(--ios-radius-sm) !important;
    font-weight: 600;
}
body.body_dark a.active {
    background-color: rgba(108, 180, 255, 0.16) !important;
    color: #6cb4ff !important;
    border-radius: var(--ios-radius-sm) !important;
    font-weight: 600;
}

/* --- O tim kiem / bo loc trong sidebar trai (input#searchInput, .custom-select) --- */
input#searchInput,
.custom-select {
    border-radius: var(--ios-radius-sm) !important;
    border: 1px solid transparent !important;
    transition: background-color var(--ios-transition), box-shadow var(--ios-transition);
}
body:not(.body_dark) input#searchInput,
body:not(.body_dark) .custom-select {
    background-color: var(--ios-light-elevated) !important;
    color: #1c1c1e !important;
}
body:not(.body_dark) input#searchInput:focus,
body:not(.body_dark) .custom-select:focus {
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
    outline: none;
}
body.body_dark input#searchInput,
body.body_dark .custom-select {
    background-color: var(--ios-dark-elevated) !important;
    color: #e5e9f0 !important;
}
body.body_dark input#searchInput:focus,
body.body_dark .custom-select:focus {
    background-color: var(--ios-dark-elevated-2) !important;
    box-shadow: 0 0 0 3px rgba(108, 180, 255, 0.2);
    outline: none;
}
body.body_dark input#searchInput::placeholder {
    color: var(--ios-dark-text-secondary);
}

/* --- Sidebar trai/phai: nen "elevated" kieu grouped-card o light mode.
   Dark mode giu aside.doc_left_sidebarlist nhu cu (flush voi nen trang,
   da duoc thiet lap san trong CSS goc), chi nang cap doc_rightsidebar. --- */

body.body_dark .doc_rightsidebar {
    box-shadow: var(--ios-shadow-dark);
    border-radius: var(--ios-radius);
}

/* --- Bo dieu chinh co chu (A- A A+) thanh segmented control kieu iOS --- */
.doc_rightsidebar #font-switcher,
.fontsize-controllers .btn-group {
    display: inline-flex;
    border-radius: var(--ios-radius-sm);
    padding: 3px;
    gap: 2px;
}
body:not(.body_dark) .doc_rightsidebar #font-switcher,
body:not(.body_dark) .fontsize-controllers .btn-group {
    background-color: var(--ios-light-elevated-2);
}
body.body_dark .doc_rightsidebar #font-switcher,
body.body_dark .fontsize-controllers .btn-group {
    background-color: var(--ios-dark-elevated-2);
}
.fontsize-controllers .btn-group button,
.fontsize-controllers .btn-group .btn {
    border-radius: var(--ios-radius-sm) !important;
    border: none !important;
    background: transparent !important;
    transition: background-color var(--ios-transition), color var(--ios-transition);
}
body:not(.body_dark) .fontsize-controllers .btn-group button.active,
body:not(.body_dark) .fontsize-controllers .btn-group .btn.active {
    background-color: #ffffff !important;
    box-shadow: var(--ios-light-shadow);
}
body.body_dark .fontsize-controllers .btn-group button.active,
body.body_dark .fontsize-controllers .btn-group .btn.active {
    background-color: var(--ios-dark-elevated) !important;
}

/* --- Cong tac chuyen dark/light (.doc_switch / #ezd_dark_switch): lam
   tron vien + them transition, khong doi co che hoat dong (giu nguyen
   markup/JS goc cua EazyDocs). --- */
.doc_switch {
    border-radius: 999px;
    transition: background-color var(--ios-transition);
    margin-top: 10px;
    margin-left: 15px;
}


.doc_switch label {
    transition: background-color var(--ios-transition), opacity var(--ios-transition);
}

/* --- Bai viet (article.shortcode_info / .doc-scrollable): khoang cach
   tieu de + duong ke gon hon kieu iOS. --- */
.shortcode_info h1,
.shortcode_info h2,
.shortcode_info h3,
.shortcode_info h4 {
    letter-spacing: -0.01em;
}
.doc-scrollable.editor-content hr,
.doc-scrollable.editor-content .wp-block-separator {
    border-color: var(--ios-light-separator);
}
body.body_dark .doc-scrollable.editor-content hr,
body.body_dark .doc-scrollable.editor-content .wp-block-separator {
    border-color: var(--ios-dark-separator);
}

/* =========================================================================
   TOP STICKERS TREN ZALO (trang chu, mobile) - dua theo HTML thuc te:
   section .elementor-element-6523465 > .elementor-container chua 6 column
   .elementor-column, MOI column co inline style="width:130px" (khong co
   !important) va rieng <section> co inline "margin-left:50px !important".
   Vi la flex row mac dinh khong wrap + column co do rong pixel co dinh
   130-140px, tong ~800px KHONG the vua man hinh dien thoai (~360-400px)
   => bi tran/cat, chi thay 1 sticker dau tien.
   Cach xu ly:
   - Cac div .elementor-column KHONG co !important tren inline width nen
     CSS ben ngoai dung !important se thang, ep lai thanh % de tu wrap.
   - Rieng <section> co margin-left:50px kem !important tren inline: theo
     dung quy tac cascade cua CSS, 1 khai bao inline co !important luon
     thang 1 khai bao !important trong stylesheet ben ngoai du selector
     manh co nao (khong the "de" duoc bang class/id thong thuong). Nen
     dung transform (thuoc tinh khac, khong canh tranh voi margin-left)
     de keo lai vi tri cho can giua, thay vi co gang ghi de truc tiep.
   ========================================================================= */
@media (max-width: 767px) {
    .elementor-element-6523465 {
        width: 100% !important;
        margin-left: 0 !important;
        transform: translateX(-50px);
    }
    .elementor-element-6523465 > .elementor-container {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        row-gap: 16px !important;
        column-gap: 8px !important;
        padding: 0 10px !important;
    }
    .elementor-element-6523465 > .elementor-container > .elementor-column {
        width: calc(33.333% - 8px) !important;
        max-width: calc(33.333% - 8px) !important;
        flex-basis: calc(33.333% - 8px) !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .elementor-element-6523465 .elementor-widget-wrap {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .elementor-element-6523465 .media-body {
        text-align: center;
    }
    .elementor-element-6523465 .media-body a.doc-sec.title {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        line-height: 1.25;
    }
    .elementor-element-6523465 .media-body img {
        width: 100%;
        max-width: 64px;
        height: auto;
    }
}
/* Man hinh rat nho (~360px tro xuong): 3/hang van chat, giam xuong 2/hang */
@media (max-width: 400px) {
    .elementor-element-6523465 > .elementor-container > .elementor-column {
        width: calc(50% - 8px) !important;
        max-width: calc(50% - 8px) !important;
        flex-basis: calc(50% - 8px) !important;
    }
}