/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
:root, :host {
    --color-red-50: #fef2f2;
    --color-red-100: #ffe2e2;
    --color-red-200: #ffcaca;
    --color-red-400: #ff6568;
    --color-red-500: #fb2c36;
    --color-red-600: #e40014;
    --color-red-800: #9f0712;
    --color-red-900: #82181a;
    --color-orange-100: #ffedd5;
    --color-orange-400: #ff8b1a;
    --color-orange-500: #fe6e00;
    --color-orange-600: #f05100;
    --color-orange-900: #7e2a0c;
    --color-yellow-400: #fac800;
    --color-yellow-500: #edb200;
    --color-green-100: #dcfce7;
    --color-green-400: #05df72;
    --color-green-500: #00c758;
    --color-green-600: #00a544;
    --color-green-700: #008138;
    --color-green-900: #0d542b;
    --color-cyan-50: #ecfeff;
    --color-cyan-100: #cefafe;
    --color-cyan-900: #104e64;
    --color-blue-50: #eff6ff;
    --color-blue-100: #dbeafe;
    --color-blue-200: #bedbff;
    --color-blue-400: #54a2ff;
    --color-blue-500: #3080ff;
    --color-blue-600: #155dfc;
    --color-blue-700: #1447e6;
    --color-blue-800: #193cb8;
    --color-blue-900: #1c398e;
    --color-indigo-50: #eef2ff;
    --color-indigo-100: #e0e7ff;
    --color-indigo-900: #312c85;
    --color-purple-50: #faf5ff;
    --color-purple-100: #f3e8ff;
    --color-purple-200: #e9d5ff;
    --color-purple-400: #c07eff;
    --color-purple-500: #ac4bff;
    --color-purple-600: #9810fa;
    --color-purple-700: #8200da;
    --color-purple-900: #59168b;
    --color-pink-50: #fdf2f8;
    --color-pink-100: #fce7f3;
    --color-pink-200: #fccee8;
    --color-pink-900: #861043;
    --color-gray-50: #f9fafb;
    --color-gray-100: #f3f4f6;
    --color-gray-200: #e5e7eb;
    --color-gray-300: #d1d5dc;
    --color-gray-400: #99a1af;
    --color-gray-500: #6a7282;
    --color-gray-600: #4a5565;
    --color-gray-700: #364153;
    --color-gray-800: #1e2939;
    --color-gray-900: #101828;
    --color-gray-950: #030712;
    --color-black: #000;
    --color-white: #fff;
    --spacing: .25rem;
    --container-md: 28rem;
    --container-2xl: 42rem;
    --container-4xl: 56rem;
    --container-6xl: 72rem;
    --container-7xl: 80rem;
    --text-xs: .75rem;
    --text-xs--line-height: calc(1 / .75);
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --text-5xl: 3rem;
    --text-5xl--line-height: 1;
    --text-6xl: 3.75rem;
    --text-6xl--line-height: 1;
    --text-9xl: 8rem;
    --text-9xl--line-height: 1;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --tracking-wide: .025em;
    --tracking-wider: .05em;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-relaxed: 1.625;
    --radius-sm: .25rem;
    --radius-lg: .5rem;
    --radius-xl: .75rem;
    --radius-2xl: 1rem;
    --drop-shadow-lg: 0 4px 4px #00000026;
    --ease-in: cubic-bezier(.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, .2, 1);
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --animate-spin: spin 1s linear infinite;
    --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
    --blur-sm: 8px;
    --blur-md: 12px;
    --aspect-video: 16 / 9;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family:"Inter", sans-serif , ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --default-mono-font-family: var(--font-jetbrains-mono), "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	--sidebar-width: calc(var(--spacing) * 64);	
}
body{ font-family: "Inter", sans-serif,ui-sans-serif, system-ui, -apple-system,
               BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans",
               "Apple Color Emoji", "Segoe UI Emoji",
               "Segoe UI Symbol", "Noto Color Emoji"; font-size:14px}
.row.row-full-width.page-3col{
  display: flex;
  height: 100vh;
  overflow: hidden;
  color: #99a1af;
 
}

.dark .row.row-full-width.page-3col{
  background: #1e2939;
  color: #f9fafb;
}


.page-3col > .large-2.col-left{
  flex: 0 0 var(--sidebar-width);
  max-width: var(--sidebar-width);
  height: 100vh;
  overflow:hidden;
  position: relative;
  background: #ffffff;
  border-right: 1px solid #e5e7eb;
  --translate-x: 0px;
  --translate-y: 0px;

  transform: translate(var(--translate-x), var(--translate-y));

  transition-property: transform, flex-basis, max-width;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.inner-siderbar {
    display: flex;
    flex-direction: column;
    justify-content: space-between;height:100vh
}
.sidebar-bottom{padding-bottom:30px}
.page-3col > .large-2.col-left #nav_menu-3{
  overflow-y:auto;
  overflow-x:hidden;
}


.page-3col > .large-2.col-left .info-widget{
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
}
.page-3col > .large-2.col-left.active{flex: 0 0 80px;
  max-width: 80px;--translate-x: 0px;
  --translate-y: 0px;}
.dark .page-3col > .large-2.col-left{
  background: #1f2937;
  border-right-color: #374151;
}

.page-3col > .large-2.col-right{
  flex: 0 0 var(--sidebar-width);
  max-width: var(--sidebar-width);
  height: 100vh;
  overflow-y: auto;
  position: relative;
  background: #ffffff;
  border-left: 1px solid #e5e7eb;padding-top:25px
}
td {
    color: #d1d5dc;
}
.calendar_wrap{display: flex;
    flex-direction: column-reverse;}

#calendar-2{
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);

  border-radius: var(--radius-2xl);
  padding: calc(var(--spacing) * 6);

  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.dark #calendar-2{
  background: var(--color-gray-800);
  border-color: var(--color-gray-700);
}
.dark .page-3col > .large-2.col-right{
  background: #1f2937;
  border-left-color: #374151;
}
.page-3col > .large-2.col-right > div{margin-bottom:40px}
.large-8.col-middle.col.active{--translate-x: 0px;
  --translate-y: 0px;}
.large-8.col-middle.col{
  flex: 1 1 0%;
  min-width: 0;
  height: 100vh;
  overflow: hidden;
  position: relative;
  max-width:unset!important;padding-left:0px;padding-right:0px;
    --translate-x: 0px;
  --translate-y: 0px;

  transform: translate(var(--translate-x), var(--translate-y));

  transition-property: transform, flex-basis, max-width;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.page-inner{padding-left:16px;padding-right:16px}
.large-8.col-middle.col .page-inner{
  height:100%;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
}
.page-inner, #content{background:#f9fafb}
.dark .page-inner,.dark #content{background:#101828}
header{background:#fff;padding-left:16px;padding-right:16px}
.support,.mode_style{position:relative;cursor:pointer}
.zalo.email .text-icon-zalo{background-color: #fb2c36;}
.content-support{position:absolute;background-color: #fff;border:1px solid #e5e7eb;border-radius: var(--radius-xl);width: calc(var(--spacing) * 72);right:0;overflow:hidden;height:auto;display:none;}
.content-support.active{display:block}
.content-support-text{padding: calc(var(--spacing) * 3);background:#fff}
.dark .content-support{border-color:#364153}
.dark .content-support-text{background:#1e2939}
.dark .content-left .text{color:#fff}
.supprt-title {
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);padding-left: 1rem; padding-right: 1rem; padding-top: 0.75rem; padding-bottom: 0.75rem; border-bottom: 1px solid #e5e7eb; background: linear-gradient(to right, #eff6ff, #f5f3ff); display: flex; align-items: center; justify-content: space-between;border-bottom-color:#d0d2d5;
}
.dark .supprt-title{border-bottom: 1px solid #364153;background: linear-gradient(to right, #1f2c4a, #292649);}
.content-left {
    display: flex;
    gap: 10px;
    align-items: center;
    align-content: center;
}
.content-left svg{margin-bottom:0px;padding-bottom:0px}
.content-left .text{font-weight: 700;
  color: #111827;

  display: flex;
  align-items: center;
  gap: 0.5rem;}
.close-support{color: #99a1af;}

.zalo{
  display: flex;
  align-items: center;
  gap: 0.75rem;

  padding: 0.75rem;
  border-radius: 0.5rem;

  background: linear-gradient(to right, #eff6ff, #ecfeff);

  border: 1px solid #dbeafe;

  transition: all 200ms ease;

  cursor: pointer;margin-bottom:8px;
}

.zalo:hover{
  background: linear-gradient(to right, #dbeafe, #cffafe);
}

.dark .zalo{
  background: linear-gradient(
    to right,
    #1b2f43,
    #1b3042
  );

  border-color: #193cb8;

  transition-property: all;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.dark .zalo:hover{
  background: linear-gradient(
    to right,
    rgba(30,58,138,0.3),
    rgba(22,78,99,0.3)
  );
}
.text-icon-zalo{
  flex-shrink: 0;

  width: 2.5rem;
  height: 2.5rem;

  border-radius: 0.5rem;
  background-color: #3b82f6;

  display: flex;
  align-items: center;
  justify-content: center;
}
.text-icon-zalo-show{
  color: #ffffff;
  font-weight: 700;
  font-size: 0.875rem;
}
.content-zalo{
  flex: 1 1 0%;
  min-width: 0;
}
.content-zalo-text{
  font-size: 0.875rem;
  font-weight: 600;
  color: #111827;

  transition: color 200ms ease;
}

.zalo:hover .content-zalo-text{
  color: #2563eb;
}

.dark .content-zalo-text{
  color: #f9fafb;
}

.dark .zalo:hover .content-zalo-text{
  color: #60a5fa;
}
.content-zalo-text-sup{
  font-size: 0.75rem;
  color: #4b5563;
}

.dark .content-zalo-text-sup{
  color: #9ca3af;
}
.dark header{background:#101828}
.logo-sliderbar {
    display: flex;
    justify-content: space-between;
    padding-top: 15px;
    align-items: center;
		padding-bottom: 15px;
}
.zalo.email .text-icon-zalo{background-color: #fb2c36;}
.zalo.email{
  display: flex;
  align-items: center;
  gap: 0.75rem;

  padding: 0.75rem;
  border-radius: 0.5rem;

  background: linear-gradient(to right, #fef2f2, #fdf2f8);

  border: 1px solid #fee2e2;
  cursor: pointer;

  transition: all 200ms ease;
}

.zalo.email:hover{
  background: linear-gradient(to right, #fee2e2, #fce7f3);
}
.zalo.email .text-icon-zalo{color:#fff}
.dark .zalo.email{
  background: linear-gradient(
    to right,
    rgba(127,29,29,0.2),
    rgba(131,24,67,0.2)
  );
  border-color: #7f1d1d;
}

.dark .zalo.email:hover{
  background: linear-gradient(
    to right,
    rgba(127,29,29,0.3),
    rgba(131,24,67,0.3)
  );
}
.zalo.facebook{
  border-radius: 0.5rem;

  background: linear-gradient(to right, #eff6ff, #eef2ff);

  border: 1px solid #dbeafe;

  transition: all 200ms ease;
}

.zalo.facebook:hover{
  background: linear-gradient(to right, #dbeafe, #e0e7ff);
}

.dark .zalo.facebook{
  background: linear-gradient(
    to right,
    rgba(30,58,138,0.2),
    rgba(49,46,129,0.2)
  );
  border-color: #1e40af;
}

.dark .zalo.facebook:hover{
  background: linear-gradient(
    to right,
    rgba(30,58,138,0.3),
    rgba(49,46,129,0.3)
  );
}
.zalo.facebook .text-icon-zalo{color:#fff}
.logo-sliderbar img{max-width:120px}
.dark .logo-sliderbar .header_logo.header-logo{display:none}
.dark .logo-sliderbar .header-logo-dark{display:block!important}
.logo-sliderbar .menu-nav-icon .close-nav{display:none}
.header-nav-main > li .bg-gray-100 {
    background-color: #f3f4f6;
    min-width: 40px;
    min-height: 40px;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
}
.dark .header-nav-main > li .bg-gray-100{background-color: #364153;}
.lucide-sun{display:none}
.dark .lucide-sun{display:block}
.lucide-moon{display:block}
.dark .lucide-moon{display:none}
.rounded-lg {
    border-radius: var(--radius-lg);
}
.transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.duration-200 {
    --tw-duration: .2s;
    transition-duration: .2s;
}
.page-3col .col-left.active .logo-sliderbar a{display:none}
.row header .container{max-width:100%}
.logo-sliderbar .menu-nav-icon{cursor:pointer}	
*{
  scrollbar-width: thin;
  scrollbar-color: rgba(100,116,139,.4) transparent;
}

*::-webkit-scrollbar{
  width:6px;
  height:6px;
}

*::-webkit-scrollbar-track{
  background:transparent;
}

*::-webkit-scrollbar-thumb{
  background-color:rgba(100,116,139,.35);
  border-radius:999px;
  border:2px solid transparent;
  background-clip:content-box;
}

*::-webkit-scrollbar-thumb:hover{
  background-color:rgba(100,116,139,.6);
}

.dark *{
  scrollbar-color: rgba(148,163,184,.4) transparent;
}

.dark *::-webkit-scrollbar-thumb{
  background-color:rgba(148,163,184,.35);
}

.dark *::-webkit-scrollbar-thumb:hover{
  background-color:rgba(148,163,184,.6);
}
@media (max-width: 1023px){
  html,
  body{
    overflow: auto;
  }

  .row.row-full-width.page-3col{
    height: auto;
    flex-direction: column;
  }

  .page-3col > .large-2,
  .large-8.col-middle{
    height: auto;
    max-width: 100%;
    overflow: visible;
  }
}
.page-3col ..large-8.col-middle.col > header{position: sticky;top: calc(var(--spacing) * 0);}
.rounded-lg {
    border-radius: var(--radius-lg);
}
.sidebar-bottom{
  background:#ffffff;
  border-top:1px solid #e5e7eb;
  padding:0.5rem;z-index:99
}

.dark .sidebar-bottom{
  background:#1f2937;
  border-top-color:#374151;
}
.author{
  display:flex;
  align-items:center;
  gap:0.75rem;

  padding:0.5rem;
  border-radius:0.75rem;

  background:#f9fafb;
}

.dark .author{
  background:rgba(55,65,81,0.5);
}
.nguyenlan-img{
  width:2.5rem;
  height:2.5rem;

  border-radius:9999px;

  background:#d1d5db;

  display:flex;
  align-items:center;
  justify-content:center;

  flex-shrink:0;
}

.dark .nguyenlan-img{
  background:#4b5563;
}
.name-author{
  flex: 1 1 0%;
  overflow: hidden;
}
.name-author-title{
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);

  color: var(--color-gray-900);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dark .name-author-title{
  color: var(--color-gray-100);
}
.name-author-title-sub{
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);

  color: var(--color-gray-500);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dark .name-author-title-sub{
  color: var(--color-gray-400);
}
.info-widget .widget_nav_menu .toggle{
    display: none !important;
}
.info-widget .widget_nav_menu .icon-angle-down{
  transform: rotate(269deg);opacity:1;
}
span.widget-title{
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  font-weight: var(--font-weight-semibold);

  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);

  color: var(--color-gray-400);

  margin-bottom: calc(var(--spacing) * 4);
  padding-left: calc(var(--spacing) * 3);
  padding-right: calc(var(--spacing) * 3);
}

.dark span.widget-title{
  color: var(--color-gray-500);
}
.sidebar-top .info-widget ul li{border:none}
.info-widget .nav-top-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.75rem;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    border-radius: 0.75rem;
    font-size: 0.875rem; 
    font-weight: 500; 
    color: var(--color-gray-500);
    transition: color 0.2s ease, background-color 0.2s ease;width:100%;
}
.info-widget .is-divider.small{display:none}
.info-widget .menu-item a{display:flex;gap:10px}
.info-widget .menu-item-has-children a .icon-angle-down{position:absolute;right:0px}
.info-widget .menu-item-has-children a {position:relative;padding-right:20px}
.nav-top-link:hover {
    background-color: var(--color-gray-50);
    color: #000;
}

.dark .nav-top-link {
    color: var(--color-gray-400);
}

.dark .nav-top-link:hover {
    background-color: var(--color-gray-700);
    color: var(--color-gray-100);
}
.notive-dot {
    position: absolute;
    top: 0.375rem;  
    right: 0.375rem; 

    width: 0.5rem; 
    height: 0.5rem; 

    background-color: var(--color-red-500);
    border-radius: 9999px;

    border: 2px solid #ffffff;
}
.dark .notive-dot {
    border-color: var(--color-gray-800);
}
.new-article {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 0.5rem;
    width: 20rem;
    max-height: 500px;
    background: #ffffff;
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,.25);
    border: 1px solid #e5e7eb;
    z-index: 100;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.new-article{display:none}
.new-article.active{display:block}
@media (min-width: 768px) {
    .new-article {
        width: 24rem;
    }
}

.dark .new-article {
    background: #1f2937;
    border-color: #374151;
}

.new-article-header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dark .new-article-header {
    border-color: #374151;
}

.new-article-title {
    font-weight: 700;
    color: #111827;
}

.dark .new-article-title {
    color: #f9fafb;
}

.new-article-close {
    background: none;
    border: none;
    font-size: 1.25rem;
    color: #9ca3af;
    cursor: pointer;
}

.new-article-close:hover {
    color: #4b5563;
}

.dark .new-article-close:hover {
    color: #d1d5db;
}

.new-article-body {
    overflow-y: auto;
}

.new-article-list {
    display: flex;
    flex-direction: column;
}

.new-article-item {
    display: flex;
    gap: 0.75rem;
    padding: 1rem;
    text-decoration: none;
    transition: background-color .2s ease;
}

.new-article-item:hover {
    background: #f9fafb;
}

.dark .new-article-item:hover {
    background: rgba(55,65,81,.5);
}

.new-article-thumb {
    width: 4rem;
    height: 4rem;
    border-radius: 0.5rem;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

.new-article-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}

.new-article-item:hover .new-article-thumb img {
    transform: scale(1.05);
}

.new-article-content {
    flex: 1;
    min-width: 0;
}

.new-article-item-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 0.25rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .2s ease;
}

.new-article-item:hover .new-article-item-title {
    color: #2563eb;
}

.dark .new-article-item-title {
    color: #f9fafb;
}

.dark .new-article-item:hover .new-article-item-title {
    color: #60a5fa;
}

.new-article-date {
    font-size: 0.75rem;
    color: #6b7280;
}

.dark .new-article-date {
    color: #9ca3af;
}
#copy-menu .sub-menu{    display: flex;
    position: relative;
    visibility: visible;
    opacity: 1;
    max-height: fit-content;
    left: 0;}
.cur{cursor:pointer}
.dev-popup-overlay.active{display:flex;}
.dev-popup-icon,.dev-popup-close{display: flex; justify-content: center; align-items: center; align-content: center;}
.dev-popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0,0,0,.6);
    backdrop-filter: blur(6px);
	display:none;
}

.dev-popup {
    width: 100%;
    max-width: 42rem;
    background: #fff;
    border-radius: 1.5rem;
    border: 1px solid #e5e7eb;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,.25);
    max-height: 95vh;
    overflow-y: auto;
}

.dark .dev-popup {
    background: #1f2937;
    border-color: #374151;
}

.dev-popup-header {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 1.5rem;
    background: linear-gradient(135deg,#f9fafb,#f3f4f6);
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.dark .dev-popup-header {
    background: linear-gradient(135deg,#1f2937,#111827);
    border-color: #374151;
}

.dev-popup-title-wrap {
    display: flex;
    gap: 1rem;
    flex: 1;
}

.dev-popup-icon {
    width: 3rem;
    height: 3rem;
    border-radius: .75rem;
    background: #e5e7eb;
}

.dark .dev-popup-icon {
    background: #374151;
}

.dev-popup-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
}

.dark .dev-popup-title {
    color: #f9fafb;
}

.dev-popup-subtitle {
    font-size: .875rem;
    color: #6b7280;
}

.dark .dev-popup-subtitle {
    color: #9ca3af;
}

.dev-popup-close {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .5rem;
    border: none;
    background: #e5e7eb;
    cursor: pointer;
}

.dark .dev-popup-close {
    background: #374151;
}

.dev-popup-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.dev-progress-head {
    display: flex;
    justify-content: space-between;
    font-size: .875rem;
}

.dev-progress-bar {
    height: .75rem;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
}

.dev-progress-fill {
    height: 100%;
    background: linear-gradient(to right,#9ca3af,#6b7280);
    transition: width 1s ease;
}

.dev-popup-note {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: .75rem;
    padding: 1rem;
    font-size: .875rem;
}

.dark .dev-popup-note {
    background: rgba(17,24,39,.5);
    border-color: #374151;
}

.dev-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(140px,1fr));
    gap: .75rem;
}

.dev-feature-item {
    padding: .75rem;
    border: 1px solid #e5e7eb;
    border-radius: .75rem;
    background: #f9fafb;
    transition: .2s;
}

.dev-feature-item:hover {
    border-color: #9ca3af;
}

.dark .dev-feature-item {
    background: rgba(17,24,39,.5);
    border-color: #374151;
}

.dev-tech {
    padding: 1rem;
    border-radius: .75rem;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
}

.dark .dev-tech {
    background: rgba(17,24,39,.5);
    border-color: #374151;
}

.dev-contact-title {
    font-weight: 600;
}

.dev-contact-list {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
}

.dev-contact-item {
    flex: 1;
    display: flex;
    gap: .75rem;
    padding: .75rem;
    border-radius: .75rem;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    text-decoration: none;
}

.dark .dev-contact-item {
    background: rgba(17,24,39,.5);
    border-color: #374151;
}

.dev-contact-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .5rem;
    background: #374151;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.dev-popup-footer {
    position: sticky;
    bottom: 0;
    padding: 1rem;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
}

.dark .dev-popup-footer {
    background: rgba(17,24,39,.5);
    border-color: #374151;
}

.dev-popup-confirm {
    width: 100%;
    padding: .75rem;
    border-radius: .75rem;
    border: none;
    background: #111827;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}	
.page-3col .active.col-left .text-menu{display:none}
.page-3col .active.col-left #nav_menu-3{display:none}
.page-3col .active.col-left .name-author{display:none}
.page-3col .active.col-left .logo-sliderbar{justify-content: center;}
.dark .page-3col .active.col-left .author {
    background: transparent;
    display: flex;
    justify-content: center;
}
.text-run{display:none;}
.page-3col .active.col-left .text-run {
    display: block;
    max-height: 650px;
    overflow: hidden;
}
.marquee-text {
    animation: marqueeText 12s linear infinite;
}
.group-text {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.group-text span {
    font-size: 36px;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 24px;
    line-height: 1.5em;
}
.group-text span:nth-of-type(odd) {
    -webkit-text-stroke-color: transparent;
    -webkit-text-fill-color: #fff;
    -webkit-text-stroke-width: 2px;
    color: #fff !important;
    background: #000;
    background-clip: text;
}

.marquee-text {
	animation: marqueeText 12s linear infinite;
}

.group-text {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.group-text span {
	font-size: 36px;
	font-weight: 800;
	text-transform: uppercase;
	margin-bottom: 24px;
	line-height: 1.5em;
	color:#1f2937
}
.dark .group-text span {color:#ffef00}
.group-text span:nth-of-type(odd) {
	-webkit-text-stroke-color: transparent;
	-webkit-text-fill-color: #fff;
	-webkit-text-stroke-width: 2px;
	color: #fff !important;
	background: #000;
	background-clip: text;
}

.marquee-text .group-text span {
	writing-mode: sideways-lr;
}

@keyframes marqueeText {
	from {
		transform: translateY(-50%);
	}
	to {
		transform: translateY(0%);
	}
}
.trending-news-header{
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: calc(var(--spacing) * 4);
}
.trending-news-list{
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 5);
}
.trending-news-title{
  font-weight: var(--font-weight-bold);

  font-size: var(--text-base);
  line-height: var(--text-base--line-height);

  color: var(--color-black);

  border-left: 2px solid var(--color-black);
  padding-left: calc(var(--spacing) * 3);
}

.dark .trending-news-title{
  color: var(--color-white);
  border-left-color: var(--color-white);
}
.trending-news-item{
  display: flex;
  gap: calc(var(--spacing) * 3);

  cursor: pointer;
}
.trending-news-content{
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.trending-news-content{
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.trending-news-cat{
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  font-weight: var(--font-weight-semibold);

  color: var(--color-orange-500);

  margin-bottom: calc(var(--spacing) * 1);
}
.trending-news-item-title{
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  font-weight: var(--font-weight-medium);

  color: var(--color-gray-800);

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;

  transition: color var(--default-transition-duration) var(--default-transition-timing-function);
}

.group:hover .trending-news-item-title{
  color: var(--color-blue-600);
}

.dark .trending-news-item-title{
  color: var(--color-gray-200);
}

.dark .group:hover .trending-news-item-title{
  color: var(--color-blue-400);
}
.trending-news-thumb{
  width: calc(var(--spacing) * 16);
  height: calc(var(--spacing) * 16);

  border-radius: var(--radius-lg);
  object-fit: cover;

  flex-shrink: 0;
}

.hot-cat{margin-bottom:2rem}
.hot-cat-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.hot-cat-title{font-size:1rem;font-weight:700;border-left:2px solid var(--color-black);padding-left:.75rem;color:var(--color-black)}
.hot-cat-arrow{font-size:.875rem;color:var(--color-gray-400)}
.hot-cat-list{display:flex;flex-direction:column;gap:.25rem}
.hot-cat-item{display:flex;align-items:center;justify-content:space-between;padding:.5rem;border-radius:var(--radius-lg);transition:.2s}
.hot-cat-item:hover{background:var(--color-gray-50)}
.hot-cat-left{display:flex;align-items:center;gap:.75rem}
.hot-cat-icon{font-size:.75rem;color:var(--color-gray-400)}
.hot-cat-name{font-size:.875rem;font-weight:500;color:var(--color-gray-700)}
.hot-cat-right{display:flex;align-items:center;gap:.5rem}
.hot-cat-count{font-size:.75rem;color:var(--color-gray-400)}
.hot-cat-trend{font-size:.75rem;color:var(--color-green-500)}
.dark .hot-cat-title{color:var(--color-white);border-color:var(--color-white)}
.dark .hot-cat-item:hover{background:var(--color-gray-700)}
.dark .hot-cat-name{color:var(--color-gray-300)}
.dark .nav-dropdown>li>a:hover{color:#fff}
.page-wrapper{padding-top:0px}
.col.post-item .col-inner{
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);

  border-radius: var(--radius-2xl);
  overflow: hidden;

  box-shadow: 0 1px 2px rgba(0,0,0,0.05);

  transition: all 0.3s var(--ease-in-out);
}

.col.post-item:hover .col-inner{
  box-shadow: 0 10px 15px rgba(0,0,0,0.1),
              0 4px 6px rgba(0,0,0,0.05);
}

.dark .col.post-item .col-inner{
  background: var(--color-gray-800);
  border-color: var(--color-gray-700);
}
.blog-post-inner .is-divider{display:none}
.post-title a{
  font-size: var(--text-lg);
  line-height: var(--text-lg--line-height);
  font-weight: var(--font-weight-bold);

  color: var(--color-gray-900);

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;

  margin-bottom: calc(var(--spacing) * 3);

  transition: color var(--default-transition-duration) var(--default-transition-timing-function);
}

.col.post-item:hover .post-title a{
  color: var(--color-blue-600);
}

.dark .post-title a{
  color: var(--color-gray-100);
}

.dark .col.post-item:hover .post-title a{
  color: var(--color-blue-400);
}
.from_the_blog_excerpt{
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);

  color: var(--color-gray-600);

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.dark .from_the_blog_excerpt{
  color: var(--color-gray-400);
}
.author-info{
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);

  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);

  color: var(--color-gray-500);

  margin-bottom: calc(var(--spacing) * 3);
}

.dark .author-info{
  color: var(--color-gray-400);
}
.blog-post-inner{padding: calc(var(--spacing) * 5);}

.duong-dan .breadcrumbs{
  margin-bottom: calc(var(--spacing) * 6);

  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);

  color: var(--color-gray-500);

  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);text-transform: initial;font-weight:normal;
}

.dark .duong-dan .breadcrumbs{
  color: var(--color-gray-400);
}
.duong-dan .breadcrumbs a{
  transition: color var(--default-transition-duration) var(--default-transition-timing-function);
}

.duong-dan .breadcrumbs a:hover{
  color: var(--color-gray-700);
}

.dark .duong-dan .breadcrumbs a:hover{
  color: var(--color-gray-300);
}
.archive-page-header{background: transparent!important;}
.large-8.col-middle.col .page-inner{padding-top:20px;padding-bottom:20px}
.archive-page-header h1{
  font-size: var(--text-4xl);
  line-height: var(--text-4xl--line-height);
  font-weight: var(--font-weight-bold);

  color: var(--color-gray-900);
text-transform: initial;
  margin-bottom: calc(var(--spacing) * 4);
}

@media (min-width:768px){
  .archive-page-header h1{
    font-size: var(--text-5xl);
    line-height: var(--text-5xl--line-height);
  }
}

.dark .archive-page-header h1{
  color: var(--color-gray-100);
}

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}