.elementor-432 .elementor-element.elementor-element-684541fe{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--gap:10px 20px;--row-gap:10px;--column-gap:20px;--flex-wrap:wrap;border-style:solid;--border-style:solid;border-width:0px 0px 1px 0px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:1px;--border-left-width:0px;border-color:#E6E8EB;--border-color:#E6E8EB;--padding-top:9px;--padding-bottom:9px;--padding-left:40px;--padding-right:0px;}.elementor-432 .elementor-element.elementor-element-684541fe:not(.elementor-motion-effects-element-type-background), .elementor-432 .elementor-element.elementor-element-684541fe > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F5F6F7;}.elementor-432 .elementor-element.elementor-element-2aa08fa7{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-icon-list .elementor-icon-list-item:not(:last-child):after{border-color:var( --e-global-color-text );}.elementor-widget-icon-list .elementor-icon-list-icon i{color:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-icon svg{fill:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-item > .elementor-icon-list-text, .elementor-widget-icon-list .elementor-icon-list-item > a{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-icon-list .elementor-icon-list-text{color:var( --e-global-color-secondary );}.elementor-432 .elementor-element.elementor-element-6ce9c768 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(22px/2);}.elementor-432 .elementor-element.elementor-element-6ce9c768 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(22px/2);}.elementor-432 .elementor-element.elementor-element-6ce9c768 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(22px/2);}.elementor-432 .elementor-element.elementor-element-6ce9c768 .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-22px/2);}.elementor-432 .elementor-element.elementor-element-6ce9c768 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-22px/2);}.elementor-432 .elementor-element.elementor-element-6ce9c768 .elementor-icon-list-icon i{color:#E01A12;transition:color 0.3s;}.elementor-432 .elementor-element.elementor-element-6ce9c768 .elementor-icon-list-icon svg{fill:#E01A12;transition:fill 0.3s;}.elementor-432 .elementor-element.elementor-element-6ce9c768{--e-icon-list-icon-size:13px;--icon-vertical-offset:0px;}.elementor-432 .elementor-element.elementor-element-6ce9c768 .elementor-icon-list-icon{padding-inline-end:7px;}.elementor-432 .elementor-element.elementor-element-6ce9c768 .elementor-icon-list-text{color:#14181F;transition:color 0.3s;}.elementor-432 .elementor-element.elementor-element-6ce9c768 .elementor-icon-list-item:hover .elementor-icon-list-text{color:#E01A12;}.elementor-432 .elementor-element.elementor-element-18c1e6e7{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-432 .elementor-element.elementor-element-7c12e10d .elementor-button{background-color:#FFFFFF;font-family:"Manrope", Sans-serif;font-size:16px;font-weight:800;fill:#14181F;color:#14181F;border-style:solid;border-width:1px 1px 1px 1px;border-color:#DDE0E4;border-radius:999px 999px 999px 999px;padding:14px 23px 14px 23px;}.elementor-432 .elementor-element.elementor-element-7c12e10d .elementor-button:hover, .elementor-432 .elementor-element.elementor-element-7c12e10d .elementor-button:focus{background-color:#E01A12;color:#FFFFFF;border-color:#E01A12;}.elementor-432 .elementor-element.elementor-element-7c12e10d > .elementor-widget-container{margin:0px 55px 0px 0px;}.elementor-432 .elementor-element.elementor-element-7c12e10d .elementor-button-content-wrapper{flex-direction:row;}.elementor-432 .elementor-element.elementor-element-7c12e10d .elementor-button .elementor-button-content-wrapper{gap:8px;}.elementor-432 .elementor-element.elementor-element-7c12e10d .elementor-button:hover svg, .elementor-432 .elementor-element.elementor-element-7c12e10d .elementor-button:focus svg{fill:#FFFFFF;}.elementor-432 .elementor-element.elementor-element-57ed55e6{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:48px;--padding-bottom:40px;--padding-left:20px;--padding-right:20px;}.elementor-432 .elementor-element.elementor-element-57ed55e6:not(.elementor-motion-effects-element-type-background), .elementor-432 .elementor-element.elementor-element-57ed55e6 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F5F8FA;}.elementor-432 .elementor-element.elementor-element-7c6bde86{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:12px 12px;--row-gap:12px;--column-gap:12px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-432 .elementor-element.elementor-element-570fe07{--display:flex;}.elementor-widget-loop-grid .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-loop-grid .elementor-pagination{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-loop-grid .e-load-more-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-432 .elementor-element.elementor-element-7448415{--grid-columns:1;}.elementor-432 .elementor-element.elementor-element-4fc8d989{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:48px;--padding-bottom:64px;--padding-left:20px;--padding-right:20px;}.elementor-432 .elementor-element.elementor-element-4fc8d989:not(.elementor-motion-effects-element-type-background), .elementor-432 .elementor-element.elementor-element-4fc8d989 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-432 .elementor-element.elementor-element-5876650f{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:flex-start;--gap:40px 40px;--row-gap:40px;--column-gap:40px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-432 .elementor-element.elementor-element-5dd875a1{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-432 .elementor-element.elementor-element-41788a78{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--flex-wrap:wrap;--padding-top:12px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-432 .elementor-element.elementor-element-cc5a1f7{--e-filter-direction:row;--e-filter-white-space:nowrap;--e-filter-wrap:wrap;--e-filter-overflow-x:initial;}.elementor-432 .elementor-element.elementor-element-1884606{--grid-columns:2;}.elementor-432 .elementor-element.elementor-element-1884606 .elementor-pagination{text-align:center;}body:not(.rtl) .elementor-432 .elementor-element.elementor-element-1884606 .elementor-pagination .page-numbers:not(:first-child){margin-left:calc( 10px/2 );}body:not(.rtl) .elementor-432 .elementor-element.elementor-element-1884606 .elementor-pagination .page-numbers:not(:last-child){margin-right:calc( 10px/2 );}body.rtl .elementor-432 .elementor-element.elementor-element-1884606 .elementor-pagination .page-numbers:not(:first-child){margin-right:calc( 10px/2 );}body.rtl .elementor-432 .elementor-element.elementor-element-1884606 .elementor-pagination .page-numbers:not(:last-child){margin-left:calc( 10px/2 );}.elementor-432 .elementor-element.elementor-element-6235a19a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:24px 24px;--row-gap:24px;--column-gap:24px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-432 .elementor-element.elementor-element-441ba295{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:12px 12px;--row-gap:12px;--column-gap:12px;--padding-top:22px;--padding-bottom:22px;--padding-left:22px;--padding-right:22px;}.elementor-432 .elementor-element.elementor-element-26be7d4c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:12px 12px;--row-gap:12px;--column-gap:12px;--padding-top:22px;--padding-bottom:22px;--padding-left:22px;--padding-right:22px;}.elementor-432 .elementor-element.elementor-element-2ae5f1ba{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:12px 12px;--row-gap:12px;--column-gap:12px;--padding-top:24px;--padding-bottom:24px;--padding-left:22px;--padding-right:22px;}@media(max-width:1024px){.elementor-432 .elementor-element.elementor-element-7448415{--grid-columns:2;}.elementor-432 .elementor-element.elementor-element-1884606{--grid-columns:2;}}@media(max-width:767px){.elementor-432 .elementor-element.elementor-element-684541fe{--padding-top:8px;--padding-bottom:8px;--padding-left:16px;--padding-right:16px;}.elementor-432 .elementor-element.elementor-element-7448415{--grid-columns:1;}.elementor-432 .elementor-element.elementor-element-1884606{--grid-columns:1;}}@media(min-width:768px){.elementor-432 .elementor-element.elementor-element-2aa08fa7{--width:auto%;}.elementor-432 .elementor-element.elementor-element-18c1e6e7{--width:auto%;}.elementor-432 .elementor-element.elementor-element-7c6bde86{--content-width:1140px;}.elementor-432 .elementor-element.elementor-element-5876650f{--content-width:1140px;}.elementor-432 .elementor-element.elementor-element-5dd875a1{--width:68%;}.elementor-432 .elementor-element.elementor-element-6235a19a{--width:32%;}}/* Start custom CSS for container, class: .elementor-element-4fc8d989 *//* =========================================================
   TRÍ TÍN — LOOP ITEM TRANG BLOG TỔNG HỢP (v2)
   Dán vào: Giao diện → Tùy chỉnh → CSS bổ sung
   Tiền tố: ttk-
   Không có JS. Loop Grid là widget gốc của Elementor nên
   không dính lỗi nhân đôi trong trình sửa (lỗi 4.4).
   ========================================================= */


/* ---------------------------------------------------------
   1 · THẺ BÀI VIẾT TRONG LƯỚI 2 CỘT
   Class ttk-the đặt trên CONTAINER GỐC của Loop Item.
   Mọi luật đều bắt đầu từ .ttk-the — không dựa vào
   container cha, tránh lan sang menu (lỗi 4.8).
   --------------------------------------------------------- */

.ttk-the{
  /* Khoá số dòng chữ — chống thẻ cao thấp không đều (lỗi 4.6).
     Sửa hai biến này là đổi được toàn bộ lưới.
     Tiêu đề để 3: tiêu đề tiếng Việt có dấu nên dài hơn tiếng Anh
     cùng nghĩa khoảng 15–20%, để 2 là cụt gần hết. */
  --dong-tieu-de: 3;
  --dong-mo-ta: 3;

  display: flex;
  flex-direction: column;
  height: 100%;                 /* ép mọi thẻ trong một hàng cao bằng nhau */
  background: #FFFFFF;
  border: 1px solid #E3E9EE;
  border-radius: 12px;

  /* Dùng clip thay hidden: hidden ép chiều còn lại thành auto
     rồi cắt luôn (lỗi 4.2). clip chỉ cắt đúng chiều được khai. */
  overflow: clip;

  transition: transform .25s ease,
              box-shadow .25s ease,
              border-color .25s ease;
}

/* Rê chuột: thẻ trồi lên, viền đỏ. Ảnh đứng yên — quyết định đã chốt. */
.ttk-the:hover{
  transform: translateY(-4px);
  border-color: #E01A12;
  box-shadow: 0 8px 24px rgba(20, 24, 31, .08);
}


/* --- Ảnh đại diện --------------------------------------- */
/* Tỷ lệ 16:10 theo quy ước thẻ blog 500×310.
   Khoá tỷ lệ ở đây nên ảnh tải lên sai kích thước vẫn không vỡ lưới. */
.ttk-the .ttk-anh img{
  display: block;
  width: 100%;
  aspect-ratio: 500 / 310;
  object-fit: cover;
}

/* Chặn mọi hiệu ứng phóng ảnh có thể đến từ nơi khác */
.ttk-the:hover .ttk-anh img{
  transform: none;
}


/* --- Khối chữ ------------------------------------------- */
/* Padding do container Elementor lo (bấm vào sửa được).
   CSS ở đây chỉ lo phần flex — đây là thứ giữ cho "Đọc tiếp"
   luôn tụt xuống sát đáy thẻ dù chữ dài ngắn khác nhau. */
.ttk-the .ttk-noi-dung{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}


/* --- Nhãn chuyên mục ------------------------------------ */
.ttk-the .ttk-chuyen-muc a{
  display: inline-block;
  padding: 4px 11px;
  border-radius: 999px;
  background: #F5F8FA;
  color: #6B7280;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}

.ttk-the .ttk-chuyen-muc a:hover{
  background: #E01A12;
  color: #FFFFFF;
}


/* --- Tiêu đề -------------------------------------------- */
.ttk-the .ttk-tieu-de{
  margin: 10px 0 8px;
}

/* Cắt đúng số dòng đã khai ở biến trên.
   Chỉ kẹp ở thẻ <a> — tầng trong cùng thật sự chứa chữ.
   KHÔNG kẹp ở vỏ widget .ttk-tieu-de: vỏ kế thừa line-height của
   chữ thường nên tự tính chiều cao thấp hơn h3 rồi cắt cụt chữ. */
.ttk-the .ttk-tieu-de .elementor-heading-title{
  line-height: 1.4;
}

.ttk-the .ttk-tieu-de a{
  display: -webkit-box;
  -webkit-line-clamp: var(--dong-tieu-de);
  line-clamp: var(--dong-tieu-de);
  -webkit-box-orient: vertical;
  overflow: hidden;

  /* Tiếng Việt cần khoảng thở lớn hơn tiếng Anh: dấu chồng hai tầng
     (ượ, ẫ) đội lên trên, nét móc dưới (g, y, ạ) thò xuống dưới.
     Dưới 1.35 là bắt đầu cụt dấu. */
  line-height: 1.4;
  padding-bottom: 3px;
}

.ttk-the .ttk-tieu-de a{
  color: #3C4453;
  text-decoration: none;

  /* Gạch chân chạy từ trái sang — vẽ bằng background nên
     không cộng thêm chiều cao, thẻ không bị xê dịch. */
  background-image: linear-gradient(#E01A12, #E01A12);
  background-repeat: no-repeat;
  background-size: 0 2px;
  background-position: 0 calc(100% - 1px);
  transition: background-size .3s ease, color .25s ease;
}

.ttk-the:hover .ttk-tieu-de a{
  color: #E01A12;
  background-size: 100% 2px;
}


/* --- Tóm tắt -------------------------------------------- */
/* Cùng một bài học như tiêu đề: kẹp ở thẻ <p>, không kẹp ở vỏ widget. */
.ttk-the .ttk-mo-ta{
  color: #6B7280;
  font-size: 15px;
}

.ttk-the .ttk-mo-ta p{
  margin: 0;
  line-height: 1.65;

  display: -webkit-box;
  -webkit-line-clamp: var(--dong-mo-ta);
  line-clamp: var(--dong-mo-ta);
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding-bottom: 2px;
}


/* --- Ngày đăng ------------------------------------------ */
.ttk-the .ttk-ngay{
  margin-top: 14px;
  color: #6B7280;
  font-size: 13px;
}


/* --- Đọc tiếp ------------------------------------------- */
/* margin-top:auto đẩy dòng này xuống sát đáy thẻ.
   Đây là thứ giữ cho mọi "Đọc tiếp" thẳng hàng dù chữ dài ngắn khác nhau. */
.ttk-the .ttk-doc-tiep{
  margin-top: auto;
  padding-top: 14px;
}

.ttk-the .ttk-doc-tiep a{
  color: #E01A12;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}

/* Mũi tên nhích sang phải khi rê */
.ttk-the .ttk-doc-tiep a::after{
  content: "→";
  display: inline-block;
  margin-left: 6px;
  transition: transform .25s ease;
}

.ttk-the:hover .ttk-doc-tiep a::after{
  transform: translateX(4px);
}


/* ---------------------------------------------------------
   2 · BÀI NỔI BẬT — DẢI NGANG ĐẦU TRANG
   Class ttk-noibat trên container gốc của Loop Item thứ hai.
   Việc chia cột do container Elementor lo, CSS chỉ lo chi tiết.
   --------------------------------------------------------- */

.ttk-noibat{
  --dong-tieu-de: 2;
  --dong-mo-ta: 3;

  background: #FFFFFF;
  border: 1px solid #E3E9EE;
  border-radius: 14px;
  overflow: clip;
  transition: border-color .25s ease, box-shadow .25s ease;
}

.ttk-noibat:hover{
  border-color: #E01A12;
  box-shadow: 0 10px 30px rgba(20, 24, 31, .09);
}

/* Ảnh bài nổi bật theo quy ước 960×540 (16:9) */
.ttk-noibat .ttk-anh img{
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Kẹp dòng và line-height giống thẻ lưới — cùng lý do:
   kẹp ở thẻ <a>, không kẹp ở vỏ widget. */
.ttk-noibat .ttk-tieu-de .elementor-heading-title{
  line-height: 1.35;
}

.ttk-noibat .ttk-tieu-de a{
  display: -webkit-box;
  -webkit-line-clamp: var(--dong-tieu-de);
  line-clamp: var(--dong-tieu-de);
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
  padding-bottom: 4px;

  color: #14181F;
  text-decoration: none;
  transition: color .25s ease;
}

.ttk-noibat .ttk-mo-ta p{
  margin: 0;
  line-height: 1.7;

  display: -webkit-box;
  -webkit-line-clamp: var(--dong-mo-ta);
  line-clamp: var(--dong-mo-ta);
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding-bottom: 2px;
}

.ttk-noibat:hover .ttk-tieu-de a{
  color: #E01A12;
}


/* ---------------------------------------------------------
   3 · BỘ LỌC CHUYÊN MỤC
   Class ttk-loc trên widget Taxonomy Filter.
   ⚠ Tên class bên trong (.e-filter-item) do Elementor sinh ra,
   có thể khác giữa các phiên bản. Bấm chuột phải vào một chip
   → Kiểm tra, xác nhận lại trước khi tin khối này.
   --------------------------------------------------------- */

.ttk-loc .e-filter-item{
  border: 1px solid #E3E9EE;
  border-radius: 999px;
  background: #FFFFFF;
  color: #3C4453;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 600;
  transition: background-color .2s ease,
              border-color .2s ease,
              color .2s ease;
}

.ttk-loc .e-filter-item:hover{
  border-color: #E01A12;
  color: #E01A12;
}

.ttk-loc .e-filter-item.e-filter-item-active,
.ttk-loc .e-filter-item[aria-pressed="true"]{
  background: #E01A12;
  border-color: #E01A12;
  color: #FFFFFF;
}

/* Nếu bộ lọc vẫn dựng bằng container Elementor làm chip thì mở khối này.
   Container Elementor mặc định width:100% nên mỗi chip rơi một dòng (lỗi 4.7).

.ttk-loc .nut-loc{
  width: auto !important;
  flex: 0 0 auto !important;
}
*/


/* ---------------------------------------------------------
   4 · SIDEBAR DÍNH
   Đo chiều cao header thật thay vì gõ số cứng — biến --header
   đã được JS ở bài viết đơn gán sẵn (lỗi 4.14).
   124px chỉ là giá trị dự phòng khi JS chưa chạy.
   --------------------------------------------------------- */

@media (min-width: 1025px){
  .ttk-sidebar{
    position: sticky;
    top: calc(var(--header, 124px) + 16px);
  }
}


/* ---------------------------------------------------------
   5 · MÀN HÌNH HẸP
   --------------------------------------------------------- */

/* Bài nổi bật xếp dọc dưới 1024px.
   Viết bằng CSS thay vì trông vào thiết lập đáp ứng của Elementor —
   thiết lập đó nằm trong JSON nhập vào, chưa chắc bám đúng.
   min-width:0 gỡ mặc định min-width:auto của flex item, nếu không
   cột chữ không co được và tràn ra ngoài thẻ. */
@media (max-width: 1024px){
  .ttk-noibat{
    flex-direction: column !important;
  }

  .ttk-noibat > .ttk-noibat-anh,
  .ttk-noibat > .ttk-noi-dung{
    width: 100% !important;
  }
}

.ttk-noibat > .ttk-noi-dung{
  min-width: 0;
}

@media (max-width: 767px){
  .ttk-the{
    --dong-tieu-de: 3;
    --dong-mo-ta: 2;
  }

  /* Trên cảm ứng không có trạng thái rê — bỏ hiệu ứng trồi lên */
  .ttk-the:hover{
    transform: none;
    box-shadow: none;
  }
}


/* ---------------------------------------------------------
   6 · TÔN TRỌNG THIẾT LẬP GIẢM CHUYỂN ĐỘNG
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce){
  .ttk-the,
  .ttk-noibat,
  .ttk-the .ttk-tieu-de a,
  .ttk-the .ttk-doc-tiep a::after,
  .ttk-loc .e-filter-item{
    transition: none;
  }

  .ttk-the:hover{
    transform: none;
  }

  .ttk-the:hover .ttk-tieu-de a{
    background-size: 100% 2px;
  }
}

/* =========================================================
   7 · KHUNG TRANG BLOG TỔNG HỢP
   Đi kèm khung-trang-blog-v1.json
   ========================================================= */

/* --- Đầu trang ------------------------------------------ */
.ttk-breadcrumb{
  color: #6B7280;
  font-size: 14px;
}

.ttk-breadcrumb a{
  color: #6B7280;
  text-decoration: none;
}

.ttk-breadcrumb a:hover{
  color: #E01A12;
}

.ttk-h1 .elementor-heading-title{
  color: #14181F;
  font-size: 44px;
  line-height: 1.25;      /* tiêu đề lớn vẫn cần chỗ cho dấu chồng */
  margin: 0;
}

.ttk-dan{
  color: #6B7280;
  font-size: 16px;
  max-width: 720px;       /* dòng quá dài thì mắt khó bắt dòng kế */
}

.ttk-dan p{
  margin: 0;
  line-height: 1.7;
}


/* --- Hai cột -------------------------------------------- */
/* min-width:0 gỡ mặc định min-width:auto của flex item.
   Không có nó thì cột chính không co được và đẩy sidebar tràn. */
.ttk-hai-cot > .ttk-chinh{
  min-width: 0;
}


/* --- Hộp trong sidebar ---------------------------------- */
.ttk-hop{
  background: #F5F8FA;
  border: 1px solid #E3E9EE;
  border-radius: 12px;
}

.ttk-hop-tieu-de .elementor-heading-title{
  color: #14181F;
  font-size: 17px;
  line-height: 1.4;
  margin: 0;
}


/* --- Danh sách đọc nhiều nhất --------------------------- */
/* Class ttk-doc-nhieu gắn THẲNG lên widget Trình soạn thảo,
   mọi luật bắt đầu từ đó — nếu viết từ container cha thì luật
   với tới mọi thẻ li trên trang, kể cả menu header (lỗi 4.8). */
.ttk-doc-nhieu ol{
  list-style: none;
  counter-reset: bai;
  margin: 0;
  padding: 0;
}

.ttk-doc-nhieu ol li{
  counter-increment: bai;
  position: relative;
  padding-left: 26px;
  margin-bottom: 12px;
  line-height: 1.5;
}

.ttk-doc-nhieu ol li:last-child{
  margin-bottom: 0;
}

.ttk-doc-nhieu ol li::before{
  content: counter(bai);
  position: absolute;
  left: 0;
  top: 0;
  color: #E01A12;
  font-weight: 700;
  font-size: 14px;
}

.ttk-doc-nhieu a{
  color: #3C4453;
  font-size: 15px;
  text-decoration: none;
  transition: color .2s ease;
}

.ttk-doc-nhieu a:hover{
  color: #E01A12;
}


/* --- Danh sách chuyên mục ------------------------------- */
.ttk-danh-muc ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

.ttk-danh-muc ul li{
  border-bottom: 1px solid #E3E9EE;
}

.ttk-danh-muc ul li:last-child{
  border-bottom: none;
}

.ttk-danh-muc a{
  display: block;
  padding: 10px 0;
  color: #3C4453;
  font-size: 15px;
  text-decoration: none;
  transition: color .2s ease, padding-left .2s ease;
}

.ttk-danh-muc a:hover{
  color: #E01A12;
  padding-left: 6px;
}


/* --- Hộp CTA -------------------------------------------- */
.ttk-hop-cta{
  background: #14181F;
  border-color: #14181F;
}

.ttk-hop-cta .ttk-cta-tieu-de .elementor-heading-title{
  color: #FFFFFF;
  font-size: 18px;
}

.ttk-hop-cta .ttk-cta-mo-ta{
  color: #9AA3B0;
  font-size: 14px;
}

.ttk-hop-cta .ttk-cta-mo-ta p{
  margin: 0;
  line-height: 1.6;
}

.ttk-cta-nut .elementor-button{
  background: #E01A12;
  border-radius: 8px;
  font-weight: 600;
  transition: background-color .2s ease;
}

.ttk-cta-nut .elementor-button:hover{
  background: #B31410;
}


/* --- Ghi chú tạm ---------------------------------------- */
/* Hai dòng ghi chú trong khung là chỗ đặt widget.
   Viền đỏ đứt để không quên xoá. Xoá xong khối này cũng bỏ được. */
.ttk-ghi-chu{
  border: 2px dashed #E01A12;
  border-radius: 8px;
  padding: 14px;
  color: #E01A12;
  font-size: 14px;
  text-align: center;
}

.ttk-ghi-chu p{
  margin: 0;
}


/* --- Màn hình hẹp --------------------------------------- */
@media (max-width: 1024px){
  .ttk-hai-cot{
    flex-direction: column !important;
  }

  .ttk-hai-cot > .ttk-chinh,
  .ttk-hai-cot > .ttk-sidebar{
    width: 100% !important;
  }
}

@media (max-width: 767px){
  .ttk-h1 .elementor-heading-title{
    font-size: 30px;
  }
}


/* =========================================================
   8 · CHẶN LAN
   Đặt cuối file. Giữ mọi luật ::before ở trên không với tới
   menu header — bài học từ lỗi 4.8.
   ========================================================= */

.menu-item::before,
.sub-menu li::before,
.elementor-nav-menu li::before{
  content: none !important;
}/* End custom CSS */