/*************** ADD CUSTOM CSS HERE.   ***************/


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


}


body {
  color: #2B2B2B;
  background: #ffffff !important;
font-family: 'Be Vietnam Pro', 'Segoe UI', sans-serif !important;
  font-optical-sizing: auto;
}

  @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,400;1,700&family=Cormorant+Garamond:wght@300;400&family=Space+Mono:wght@400&display=swap');
 
  .artelier-philosophy {
    --cream: #f5efe6;
    --gold:  #d50000;
    --muted: #6b6259;
    --paper: #1a1612;
    --ink:   #0e0c0a;
    color: var(--cream);
    background: var(--ink);
    width: 100%;
    overflow: hidden;
  }

.artelier-philosophy *,
  .artelier-philosophy *::before,
  .artelier-philosophy *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
 
  /* ══════════════════════
     FLEX LAYOUT CHÍNH
  ══════════════════════ */
  .artelier-philosophy .phil-grid {
    display: flex;
    flex-direction: row;
    min-height: 80vh;
  }
 
  /* ══════════════════════
     CỘT TRÁI
  ══════════════════════ */
  .artelier-philosophy .phil-left {
    flex: 1 1 50%;
    background: #fff;
    padding: 100px 80px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Fade-in animation */
    animation: ap-fadeUp 0.9s cubic-bezier(0.23,1,0.32,1) both;
  }
 
  /* Dấu ngoặc kép trang trí */
  .artelier-philosophy .phil-left::before {
   content: '\201C';
    position: absolute;
    top: -20px;
    left: 40px;
    font-family: 'Playfair Display', serif;
    font-size: 220px;
    line-height: 1;
    color: #FF8C00;
    pointer-events: none;
    user-select: none;
  }
 
  /* Section label */
  .artelier-philosophy .section-label {
    font-size: 11px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #FF8C00;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 1;
  }
 
  .artelier-philosophy .section-label::before {
    content: '';
    width: 30px;
    height: 1px;
    background: var(--gold);
    flex-shrink: 0;
  }
 
  /* Quote */
  .artelier-philosophy .phil-quote {
    font-family: 'Playfair Display', serif;
    font-size: clamp(22px, 2.5vw, 30px);
    line-height: 1.45;
    font-style: italic;
    color: #111;
    margin-bottom: 32px;
    position: relative;
    z-index: 1;
  }
 
  .artelier-philosophy .phil-quote strong {
    font-style: normal;
    color: var(--gold);
  }
 
  /* Body */
  .artelier-philosophy .phil-body {
    font-size: 17px;
    line-height: 1.9;
    color: #111;
    max-width: max-content;
    position: relative;
    z-index: 1;
  }
 
  /* ══════════════════════
     CỘT PHẢI
  ══════════════════════ */
  .artelier-philosophy .phil-right {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
  }
 
  /* Mỗi ô ảnh */
  .artelier-philosophy .phil-img {
    flex: 1 1 50%;
    position: relative;
    overflow: hidden;
    min-height: 240px;
  }
 
  /* Đường kẻ phân cách giữa 2 ảnh */
  .artelier-philosophy .phil-img:first-child {
    border-bottom: 1px solid rgba(201,168,76,0.1);
  }
 
  /* ── IMG TAG ── */
  .artelier-philosophy .phil-img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.7s cubic-bezier(0.23,1,0.32,1);
  }
 
  /* Overlay tối lên trên ảnh */
  .artelier-philosophy .phil-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      135deg,
      rgba(14,12,10,0.55) 0%,
      rgba(14,12,10,0.2) 100%
    );
    z-index: 1;
    transition: background 0.4s;
  }
 
  .artelier-philosophy .phil-img:hover img {
    transform: scale(1.05);
  }
 
  .artelier-philosophy .phil-img:hover .phil-img-overlay {
    background: linear-gradient(
      135deg,
      rgba(14,12,10,0.35) 0%,
      rgba(14,12,10,0.1) 100%
    );
  }
 
  /* Chữ trang trí mờ */
  .artelier-philosophy .img-overlay-text {
    position: absolute;
    bottom: 24px;
    left: 28px;
    font-family: 'Playfair Display', serif;
    font-size: clamp(48px, 6vw, 80px);
    font-weight: 900;
    font-style: italic;
    color: rgba(245,239,230,0.08);
    line-height: 1;
    pointer-events: none;
    user-select: none;
    z-index: 2;
  }
 
  /* ══════════════════════
     VÒNG TRÒN TRANG TRÍ
  ══════════════════════ */
  .artelier-philosophy .art-circle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 2;
    animation: ap-rotate 20s linear infinite;
  }
 
  .artelier-philosophy .art-circle-a {
    width: 160px;
    height: 160px;
    bottom: 20%;
    right: 15%;
    border: 1px solid rgba(176,74,47,0.25);
    animation-duration: 15s;
  }
 
  .artelier-philosophy .art-circle-b {
    width: 80px;
    height: 80px;
    top: 15%;
    right: 30%;
    border: 1px solid rgba(201,168,76,0.2);
    animation-direction: reverse;
    animation-duration: 10s;
  }
 
  /* ══════════════════════
     ANIMATIONS
  ══════════════════════ */
  @keyframes ap-fadeUp {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
  }
 
  @keyframes ap-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }
 
  .artelier-philosophy .phil-img:nth-child(1) {
    animation: ap-fadeRight 0.9s 0.15s cubic-bezier(0.23,1,0.32,1) both;
  }
 
  .artelier-philosophy .phil-img:nth-child(2) {
    animation: ap-fadeRight 0.9s 0.3s cubic-bezier(0.23,1,0.32,1) both;
  }
 
  @keyframes ap-fadeRight {
    from { opacity: 0; transform: translateX(30px); }
    to   { opacity: 1; transform: translateX(0); }
  }
 
  /* ══════════════════════
     RESPONSIVE — Tablet
  ══════════════════════ */
  @media (max-width: 900px) {
    .artelier-philosophy .phil-grid {
      flex-direction: column;
    }
 
    .artelier-philosophy .phil-left {
      padding: 72px 40px;
      flex: none;
    }
 
    .artelier-philosophy .phil-right {
      flex-direction: row;
      flex: none;
      height: 320px;
    }
 
    .artelier-philosophy .phil-img {
      flex: 1 1 50%;
      min-height: unset;
    }
 
    .artelier-philosophy .phil-img:first-child {
      border-bottom: none;
      border-right: 1px solid rgba(201,168,76,0.1);
    }
  }
 
  /* ══════════════════════
     RESPONSIVE — Mobile
  ══════════════════════ */
  @media (max-width: 768px) {
	  body {
	font-family: 'Be Vietnam Pro', 'Segoe UI', sans-serif !important;
	}
    .artelier-philosophy .phil-left {
      padding: 52px 24px;
    }
 
    .artelier-philosophy .phil-left::before {
      font-size: 136px;
    }
 
    .artelier-philosophy .phil-right {
      flex-direction: column;
      height: auto;
    }
 
    .artelier-philosophy .phil-img {
      min-height: 220px;
    }
 
    .artelier-philosophy .phil-img:first-child {
      border-right: none;
      border-bottom: 1px solid rgba(201,168,76,0.1);
    }
 
    .artelier-philosophy .art-circle-a,
    .artelier-philosophy .art-circle-b {
      display: none;
    }
	  .artelier-philosophy .phil-body, .ac-header-desc {
    	font-size: 15px !important;
		}
	 
	  .ac-header-title, .pxedu-stats__title {
    font-size: 20px !important;
		  line-height: 30px !important;
	}
	 .section-title span {
        line-height: 30px !important;
        font-size: 20px !important;
    }
	  .phoenix-about__heading {
 		font-size: 24px !important;
	  }
	 
  }

.header-main.nav-dark
{
	background-color: #ec712e !important;
}

 .ac-courses {
    --white:   #ffffff;
    --black:   #111111;
    --red:     #FF8C00;
    --gray:    #f2f2f2;
    --muted:   #666666;
    --radius:  16px;
    padding: 48px 24px;
    background: #f5f5f5;
    width: 100%;
  }
 
  .ac-courses *,
  .ac-courses *::before,
  .ac-courses *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
 
  /* ── Flex wrapper ── */
  .ac-grid {
    display: flex;
    flex-direction: row;
    gap: 16px;
    max-width: 1320px;
    margin: 0 auto;
  }
 
  /* ── Card chung ── */
  .ac-card {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    background: #222;
  }
 
  /* ── Card trái (lớn) ── */
  .ac-card-main {
    flex: 0 0 48%;
    min-height: 560px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
 
  /* ── Cột phải ── */
  .ac-col-right {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
 
  /* ── Card nhỏ ── */
  .ac-card-sm {
    flex: 1 1 0;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
 
  /* ── Ảnh nền ── */
  .ac-card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.23,1,0.32,1);
  }
 
  .ac-card:hover .ac-card-img {
    transform: scale(1.05);
  }
 
  /* ── Overlay gradient ── */
  .ac-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to top,
      rgba(0,0,0,0.82) 0%,
      rgba(0,0,0,0.3) 50%,
      rgba(0,0,0,0.05) 100%
    );
    transition: background 0.4s;
  }
 
  .ac-card-sm .ac-overlay {
    background: linear-gradient(
      to top,
      rgba(0,0,0,0.75) 0%,
      rgba(0,0,0,0.15) 60%,
      transparent 100%
    );
  }
 
  /* ── Nội dung card ── */
  .ac-content {
    position: relative;
    z-index: 2;
    padding: 28px 28px 32px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
 
  .ac-card-sm .ac-content {
    padding: 20px 22px 24px;
    gap: 8px;
  }
 
  /* ── Tag nhỏ ── */
  .ac-tag {
    display: inline-flex;
    align-items: center;
    background: rgba(255,255,255,0.92);
    color: var(--black);
    font-size: 13px;
    font-weight: 500;
    padding: 5px 14px;
    border-radius: 999px;
    width: fit-content;
    letter-spacing: 0.2px;
  }
 
  .ac-tag-red {
    background: var(--red);
    color: var(--white);
  }
 
  /* ── Tiêu đề card ── */
  .ac-title {
    font-size: clamp(18px, 2vw, 22px);
    font-weight: 700;
    color: var(--white);
    line-height: 1.2;
    letter-spacing: -0.3px;
	  text-transform: uppercase;
  }
 
  .ac-card-sm .ac-title {
    font-size: clamp(18px, 2vw, 22px);
  }
 
  /* ── Mô tả ── */
  .ac-desc {
    font-size: 15px;
    line-height: 1.65;
    color: rgba(255,255,255,0.75);
    max-width: 380px;
  }
 
  /* ── Link ── */
  .ac-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--red);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    margin-top: 4px;
    transition: gap 0.3s;
  }
 
  .ac-link:hover {
    gap: 10px;
  }
 
  /* ── Ảnh thật qua <img>, không cần CSS gradient ── */
 
  /* ── Header text ── */
  .ac-header {
    text-align: center;
    max-width: 780px;
    margin: 0 auto 48px;
    padding: 0 16px;
  }
 
  .ac-header-title {
    font-size: 32px;
    font-weight: 700;
    color: #111111;
    line-height: 1.4;
    letter-spacing: 0;
    margin-bottom: 16px;
  }
 
  .ac-header-title .ac-highlight {
    color: var(--red);
  }
 
  .ac-header-desc {
    font-size: clamp(15px, 1.6vw, 18px);
    line-height: 1.7;
    color: var(--muted);
  }
 
  /* ── Responsive: tablet ── */
  @media (max-width: 900px) {
    .ac-grid {
      flex-direction: column;
    }
    .ac-card-main {
      flex: none;
      min-height: 420px;
    }
    .ac-col-right {
      flex-direction: row;
    }
    .ac-card-sm {
      min-height: 200px;
    }
  }
 
  /* ── Responsive: mobile ── */
  @media (max-width: 768px) {
    .ac-courses {
      padding: 20px 16px;
    }
    .ac-col-right {
      flex-direction: column;
    }
    .ac-card-main {
      min-height: 360px;
    }
    .ac-card-sm {
      min-height: 180px;
    }
    .ac-content {
      padding: 20px 20px 24px;
    }
	 .section2_new
	  {
		  padding-top: 0px !important;
    	padding-bottom: 0px !important;
	  }
	  .footer-section .tabbed-content {
    padding: 0px !important;
	}
  }


 @import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Playfair+Display:ital,wght@1,700;1,900&display=swap');
  .tp {
    --red:    #D50000;
    --black:  #000000;
    --white:  #FFFFFF;
    --gray:   #888888;
    --line:   rgba(255,255,255,0.08);
    --card:   #0f0f0f;
 
    background: var(--black);
    color: var(--white);
    font-family: 'Be Vietnam Pro', 'Segoe UI', sans-serif;
    padding: 100px 80px;
    width: 100%;
    overflow: hidden;
    position: relative;
  }
 
  .tp *, .tp *::before, .tp *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
 
  /* ── Số lớn trang trí nền ── */
  .tp__bg-num {
    position: absolute;
    right: -10px;
    bottom: -60px;
    font-family: 'Playfair Display', serif;
    font-size: clamp(200px, 25vw, 380px);
    font-style: italic;
    font-weight: 900;
    color: rgba(255,255,255,0.025);
    line-height: 1;
    pointer-events: none;
    user-select: none;
    letter-spacing: -10px;
  }
 
  /* ══════════════════════════════
     HEADER
  ══════════════════════════════ */
  .tp__header {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 80px;
    position: relative;
    z-index: 1;
  }
 
  .tp__header-left {
    max-width: 640px;
  }
 
  .tp__label {
       display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #FF8C00;
    margin-bottom: 15px;
  }
 
  .tp__label::before {
    content: '';
    width: 32px;
    height: 1px;
    background: #FF8C00;
    flex-shrink: 0;
  }
 
  .tp__title {
    font-family: 'UTMScriptinaKT';
    font-size: clamp(32px, 4vw, 56px);
    font-style: italic;
    font-weight: 900;
    line-height: 1.15;
    color: var(--white);
  }
 
  .tp__title em {
    font-style: normal;
    color: #FF8C00;
  }
 
  .tp__subtitle {
	 font-size: 16px;
    font-weight: 300;
    line-height: 1.8;
    color: var(--gray);
    text-align: left;
  }
 
  /* ══════════════════════════════
     STEPS — horizontal list
  ══════════════════════════════ */
  .tp__steps {
    display: flex;
    flex-direction: row;
    position: relative;
    z-index: 1;
  }
 
  /* Mỗi step */
  .tp__step {
    flex: 1 1 0;
    padding: 40px 40px 40px 0;
    border-top: 1px solid var(--line);
    position: relative;
    transition: border-color 0.3s;
    cursor: default;
  }
 
  /* Đường kẻ đỏ xuất hiện khi hover */
  .tp__step::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    width: 0;
    height: 2px;
    background: #FF8C00;
    transition: width 0.5s cubic-bezier(0.23,1,0.32,1);
  }
 
  .tp__step:hover::before {
    width: 100%;
  }
 
  /* Separator dọc giữa các step */
  .tp__step + .tp__step {
    padding-left: 40px;
    border-left: 1px solid var(--line);
  }
 
  /* Số thứ tự — editorial style */
  .tp__step-num {
       font-family: 'Playfair Display', serif;
    font-size: 30px;
    font-style: italic;
    font-weight: 800;
    color: #FF8C00;
    letter-spacing: 2px;
    display: block;
    opacity: 0.9;
    line-height: 30px;
  }
 
  /* Icon */
  .tp__step-icon {
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    margin-bottom: 24px;
    transition: border-color 0.3s, background 0.3s;
    flex-shrink: 0;
  }
 
  .tp__step:hover .tp__step-icon {
    border-color: #FF8C00;
    background: #FF8C00;
    color: #fff;
  }
 
  /* Tên bước */
  .tp__step-name {
    font-size: clamp(16px, 1.6vw, 20px);
    font-weight: 700;
    color: var(--white);
    line-height: 1.3;
    margin-bottom: 16px;
    letter-spacing: -0.2px;
  }
 
  /* Mô tả */
  .tp__step-desc {
    font-size: 14px;
    font-weight: 300;
    color: var(--gray);
    line-height: 1.8;
  }
 
  /* ══════════════════════════════
     BOTTOM BAR
  ══════════════════════════════ */
  .tp__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 64px;
    padding-top: 32px;
    border-top: 1px solid var(--line);
    position: relative;
    z-index: 1;
    gap: 24px;
  }
 
  .tp__bottom-text {
    font-size: 13px;
    font-weight: 300;
    color: var(--gray);
    letter-spacing: 0.5px;
  }
 
  .tp__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #FF8C00;
    color: var(--white);
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 14px 32px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.25s, gap 0.25s;
    flex-shrink: 0;
  }
 
  .tp__cta:hover {
    background: #b30000;
    gap: 16px;
  }
 
  .tp__cta svg {
    transition: transform 0.25s;
  }
 
  .tp__cta:hover svg {
    transform: translateX(4px);
  }
 
  /* ══════════════════════════════
     ANIMATIONS
  ══════════════════════════════ */
  .tp__header {
    animation: tp-fadeUp 0.8s 0.1s cubic-bezier(0.23,1,0.32,1) both;
  }
  .tp__step:nth-child(1) { animation: tp-fadeUp 0.7s 0.2s cubic-bezier(0.23,1,0.32,1) both; }
  .tp__step:nth-child(2) { animation: tp-fadeUp 0.7s 0.3s cubic-bezier(0.23,1,0.32,1) both; }
  .tp__step:nth-child(3) { animation: tp-fadeUp 0.7s 0.4s cubic-bezier(0.23,1,0.32,1) both; }
  .tp__step:nth-child(4) { animation: tp-fadeUp 0.7s 0.5s cubic-bezier(0.23,1,0.32,1) both; }
  .tp__bottom { animation: tp-fadeUp 0.7s 0.55s cubic-bezier(0.23,1,0.32,1) both; }
 
  @keyframes tp-fadeUp {
    from { opacity: 0; transform: translateY(32px); }
    to   { opacity: 1; transform: translateY(0); }
  }
 
  /* ══════════════════════════════
     RESPONSIVE — Tablet (≤ 1024px)
  ══════════════════════════════ */
  @media (max-width: 1024px) {
    .tp {
      padding: 80px 40px;
    }
 
    .tp__header {
      flex-direction: column;
      align-items: flex-start;
      margin-bottom: 60px;
    }
 
    .tp__subtitle {
      text-align: left;
      max-width: 560px;
    }
 
    .tp__step {
      padding: 32px 24px 32px 0;
    }
 
    .tp__step + .tp__step {
      padding-left: 24px;
    }
  }
 
  /* ══════════════════════════════
     RESPONSIVE — Mobile (≤ 768px)
  ══════════════════════════════ */
  @media (max-width: 768px) {
    .tp {
      padding: 64px 24px;
    }
 
    .tp__bg-num {
      display: none;
    }
 
    /* Steps xếp dọc */
    .tp__steps {
      flex-direction: column;
      gap: 0;
    }
 
    .tp__step {
      padding: 32px 0;
      border-top: 1px solid var(--line);
      border-left: none !important;
    }
 
    .tp__step + .tp__step {
      padding-left: 0;
      border-left: none;
    }
 
    .tp__step::before {
      /* Dọc thay vì ngang trên mobile */
      top: 0;
      left: -1px;
      width: 2px;
      height: 0;
      transition: height 0.5s cubic-bezier(0.23,1,0.32,1);
    }
 
    .tp__step:hover::before {
      width: 2px;
      height: 100%;
    }
 
    .tp__step-desc {
      max-width: 100%;
    }
 
    .tp__bottom {
      flex-direction: column;
      align-items: flex-start;
      margin-top: 48px;
    }
 
    .tp__cta {
      width: 100%;
      justify-content: center;
    }
  }
 
  /* ══════════════════════════════
     RESPONSIVE — Mobile nhỏ (≤ 480px)
  ══════════════════════════════ */
  @media (max-width: 480px) {
    .tp {
      padding: 52px 16px;
    }
  }


 /* ============================================================
       BLOCK: faq
    ============================================================ */
    .faq {
      padding: 0px 24px;
      max-width: 1200px;
      margin: 0 auto;
    }
 
    /* ── Header ── */
    .faq__head {
      text-align: center;
      margin-bottom: 48px;
    }
 
    .faq__title {
      font-size: clamp(26px, 4vw, 40px);
      font-weight: 700;
      color: #111111;
      margin-bottom: 14px;
    }
 
    .faq__subtitle {
      font-size: 15px;
      color: #888888;
      line-height: 1.75;
      max-width: 480px;
      margin: 0 auto;
    }
 
    /* ── List ── */
    .faq__list {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
 
    /* ── Item — dùng thẻ <details> native ── */
    .faq__item {
      border: 1px solid #e5e5e5;
      border-radius: 14px;
      overflow: hidden;
      background: #ffffff;
      transition: border-color 0.25s, background 0.25s;
 
      /* Ẩn marker mặc định của <details> trên mọi trình duyệt */
      list-style: none;
    }
 
    /* Khi <details> đang open → đổi màu border + nền */
    .faq__item[open] {
      border-color: #f0c0c6;
      background: #fff8f8;
    }
 
    /* ── Trigger — dùng thẻ <summary> native ── */
    .faq__trigger {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 22px 24px;
      cursor: pointer;
      list-style: none;
      user-select: none;
      /* Reset <summary> default display để flex hoạt động đúng */
      -webkit-appearance: none;
    }
 
    /* Ẩn marker ::marker trên Firefox + Safari */
    .faq__trigger::-webkit-details-marker { display: none; }
    .faq__trigger::marker               { display: none; }
 
    .faq__trigger-text {
      font-size: 15px;
      font-weight: 600;
      color: #111111;
      line-height: 1.4;
      flex: 1;              /* chiếm hết không gian còn lại, icon không bị đẩy */
      transition: color 0.2s;
    }
 
    .faq__item[open] .faq__trigger-text {
      color: #c9263d;
    }
 
    /* ── Icon: SVG chevron xoay bằng CSS ── */
    .faq__icon {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: #f2f2f2;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      align-self: center;   /* luôn căn giữa dọc dù text wrap nhiều dòng */
      margin-left: auto;    /* đẩy sát về phía phải */
      transition: background 0.25s, transform 0.35s;
    }
 
    .faq__icon svg {
      width: 16px;
      height: 16px;
      stroke: #555555;
      stroke-width: 2.2;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: stroke 0.25s;
    }
 
    /* Khi open: icon xoay 180° + đổi màu đỏ */
    .faq__item[open] .faq__icon {
      background: #c9263d;
      transform: rotate(180deg);
    }
 
    .faq__item[open] .faq__icon svg {
      stroke: #ffffff;
    }
 
    /* Divider dưới trigger khi mở */
    .faq__item[open] .faq__trigger {
      padding-bottom: 16px;
      border-bottom: 1px solid #f0c0c6;
    }
 
    /* ── Body — animation bằng grid trick ── */
    .faq__body {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows 0.35s ease;
    }
 
    /* <details>[open] → grid mở ra */
    .faq__item[open] .faq__body {
      grid-template-rows: 1fr;
    }
 
    .faq__body-inner {
      overflow: hidden;
    }
 
    .faq__answer {
      padding: 0 24px 22px;
      font-size: 14px;
      color: #666666;
      line-height: 1.8;
    }
 
    /* ── Responsive ── */
    @media (max-width: 560px) {
      .faq { padding: 56px 16px; }
      .faq__trigger { padding: 18px 16px; }
      .faq__answer  { padding: 0 16px 18px; }
    }

.tabbed-content li.active a {
    background: #fff !important;
    box-shadow: none !important;
    text-align: center;
    font-weight: 800;
    font-size: 20px;
    text-transform: capitalize;
}

.tabbed-content li a {
    box-shadow: 0 1px 6px 0 #ff4747 !important;
}

.section2 .icon-box h3 {
     background: linear-gradient(270deg, #ff4747 0%, #f41616 100%) !important;
    -webkit-background-clip: text !important;
}
.section-title span {
    color: #20262e !important;
}

.nut-hieu-ung:before {
       background-image: linear-gradient(180deg, #FF8C00, #FF8C00) !important;
}

.kh-courses-grid {
    grid-template-columns: repeat(3, 1fr) !important;
}

.kh-card {
    grid-template-columns: none !important;
}
.kh-card-img img {
    height: 340px !important;
}
@media (max-width: 768px) {
    .kh-courses-grid {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }
}

.gv-section-title {
    display: none;
}
.gv-section-sub {
    display: none;
}
.gv-section {
    padding: 10px 0px !important;
}

.pxedu-stats__num {
    font-family: 'Be Vietnam Pro', sans-serif !important;
}
.pxedu-stats__label {
    font-size: 15px !important;
    color: #3a3733 !important;
}
.pxedu-stats__meta {
    color: #393837 !important;
	    font-size: 15px !important;
}
.pxedu-stats
{
	    background: #fff9f2 !important;
}
.pxedu-stats__suf {
    color: #000000 !important;
}
.pxedu-stats__bar {
    background: #000000 !important;
}
.pxedu-stats__art {
    color: #000000 !important;
}
.artelier-philosophy .phil-body {
    font-size: 16px;
    font-family: 'Be Vietnam Pro', sans-serif !important;
}
.ac-header-title {
    font-family: 'Be Vietnam Pro', sans-serif !important;
	text-transform: uppercase;
}
.ac-courses, .section-content, .content-area   {
    background: #fff9f2 !important;
}
#footer .section-content  {
    background: #ec712e !important;
}
.ac-header-desc {
	font-family: 'Be Vietnam Pro', sans-serif !important;
    font-size: 16px;
    color: #111;
}
.ac-card-sm .ac-title, .section-title span, .kh-card-desc, .kh-card-title, .kh-card-meta, .kh-price-wrap, .kh-card-btns a, .kh-status-badge, .kh-card-number, .tp__step-name, .header-main .nav > li > a, .kha-header h1, .kha-filter-btn, .kha-card-title, .khs-hero-title, .khs-strip-label, .khs-register-card-header h3, .gva-header h1, .gva-header p, .gva-filter-btn.active, .gva-filter-btn, .gva-search, .gv-hero-name, .gv-cta h4, .footer-section .tabbed-content .icon-box h4, .tabbed-content li.active a, .footer-section h3
   {
    font-family: 'Be Vietnam Pro', 'Segoe UI', sans-serif !important;
}
.kh-status-badge {
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 12px;
}
.kh-card {
    border: 1px solid #e2e2e2 !important;
}
.kh-btn-outline {
    background: transparent;
    border: 1px solid !important;
}
.section8 .slider .icon-box p, .list-post .post-item .from_the_blog_excerpt, .pxedu-stats__tag  {
    font-size: 14px !important;
}
.kh-courses-grid {
    max-width: 1320px !important;
}
.container-width, .container, .row {
    max-width: 100% !important;
}
.gv-grid
{
	max-width:1320px !important;
}
.section8 .slider .icon-box h4 {
    background: linear-gradient(270deg, #FF8C00  0%, #FF8C00  100%) !important;
}
.section8 .slider .row.is-selected .icon-box {
    box-shadow: 1px 3px 1px 3px #FF8C00  !important;
}
.absolute-footer, html {
    background-color: #000000 !important;
}
::-webkit-scrollbar-thumb {
    background: #FF8C00  !important;
    border-radius: 4px;
}
.pxedu-stats__tag, .pxedu-stats__title em, .artelier-philosophy .phil-quote strong, .kh-card-title , .kh-card-number, .kh-price-new, .kh-btn-outline, .gv-hero-name
{
	color: #FF8C00 !important;
}
.kh-card-number
{
	border-color: #FF8C00 !important; 
}
.kh-price-badge, .kh-btn-solid
{
	background-color: #FF8C00 !important; 
}
.nav-dropdown-has-shadow .nav-dropdown
 {
    display: none;
}
.header-main .nav > li:hover {
    background: transparent !important;
}

  .phoenix-about {
    box-sizing: border-box;
  }
 
  .phoenix-about__label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: #FF8C00;
    text-transform: uppercase;
    margin-bottom: 18px;
    display: block;
    margin-top: 30px;
  }
 
  /* ── Inner: hai cột side-by-side, wrap khi hẹp ── */
  .phoenix-about__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 64px;
  }
 
  .phoenix-about__content {
    flex: 1 1 340px;   /* co giãn, tối thiểu 340px */
    min-width: 0;
  }
 
  .phoenix-about__heading {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.25;
    color: #111;
    margin: 0 0 28px 0;
  }
 
  .phoenix-about__body p {
    font-size: 16px;
    line-height: 1.78;
    color: #333;
    margin: 0 0 20px 0;
  }
 
  .phoenix-about__body p:last-child {
    margin-bottom: 0;
  }
 
  /* ── Images: hai ảnh xếp lệch nhau ── */
  .phoenix-about__images {
    flex: 1 1 300px;   /* co giãn, tối thiểu 300px */
    min-width: 0;
    display: flex;
    align-items: flex-start;
    position: relative;
  }
 
  .phoenix-about__img-wrap {
    flex: 0 0 auto;
    border-radius: 12px;
    overflow: hidden;
    line-height: 0;
  }
 
  /* Ảnh trái: rộng hơn, nằm trước */
  .phoenix-about__img-wrap--top {
    width: 52%;
    position: relative;
    z-index: 2;
    margin-right: -24px; /* chồng lên ảnh phải */
  }
 
  /* Ảnh phải: hẹp hơn, lùi xuống */
  .phoenix-about__img-wrap--bottom {
    width: 52%;
    margin-top: 56px;
    position: relative;
    z-index: 1;
  }
 
  .phoenix-about__img-wrap img {
    width: 100%;
    display: block;
    border-radius: 12px;
    object-fit: cover;
  }
 
  .phoenix-about__img-wrap--top img    { height: 300px; }
  .phoenix-about__img-wrap--bottom img { height: 260px; }
 
  /* ── Tablet (≤ 900px): ảnh lên trên, text xuống dưới ── */
  @media (max-width: 900px) {
    .phoenix-about__inner {
      flex-direction: column-reverse;
      gap: 36px;
    }
 
    .phoenix-about__content,
    .phoenix-about__images {
      flex: 0 0 100%;
      width: 100%;
    }
 
    .phoenix-about__img-wrap--top    { width: 50%; }
    .phoenix-about__img-wrap--bottom { width: 50%; }
 
    .phoenix-about__img-wrap--top img    { height: 220px; }
    .phoenix-about__img-wrap--bottom img { height: 190px; }
  }
 
  /* ── Mobile (≤ 560px): hai ảnh xếp dọc, bỏ lệch ── */
  @media (max-width: 560px) {
    .phoenix-about {
        padding: 70px 20px 0px 20px;
    }
 
    .phoenix-about__images {
      flex-direction: column;
      gap: 12px;
    }
 
    .phoenix-about__img-wrap--top,
    .phoenix-about__img-wrap--bottom {
      width: 100%;
      margin-right: 0;
      margin-top: 0;
    }
 
    .phoenix-about__img-wrap--top img,
    .phoenix-about__img-wrap--bottom img {
      height: 220px;
    }
  }
.gioi-thieu-7 .box .box-text {
    background-color: #FF8C00 !important;
}
.gioi-thieu-7 .box .box-image .image-cover {
    border: 2px solid #FF8C00 !important;
}

.kha-filter-btn {
    font-size: 13px;
    font-weight: 400 !important;
	color:#111 !important;
  
}
.khs-hero-title, .khs-register-card-header h3 {
    color: #fff;
}
.khs-strip-label, .khs-section-title {
    color:#111 !important;
}
.khs-strip-val {
    font-weight: 500 !important;
}
.khs-section-title {
    font-size: 18px !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    color: #111 !important;
    border-bottom: 1px solid #000000 !important;
 
}
.khs-price-display .badge {
    height: 23px !important;
    width: 100% !important;
	background-color: #FF8C00 !important;
}
.khs-commit-item {
    background: #f9f9f9 !important;

}
.khs-hero-content {
      background: linear-gradient(135deg, #FF8C00 0%, #7f4217 100%) !important;
}
.khs-btn-primary, .khs-price-display .new, .khs-cta-outline
{
	color: #FF8C00 !important;
}
.khs-register-card-header
{
  background: linear-gradient(135deg, #FF8C00, #cf991d) !important;
}
.khs-cta-btn, .khs-curriculum-num, .gva-card-btn {
	background-color: #FF8C00 !important;
}
.khs-cta-outline {
	 border-color: #FF8C00 !important;
}
@media (max-width: 768px) {
  .lh-intro-table,
  .lh-map-table { display: block !important; }
 
  .lh-intro-table tr,
  .lh-map-table tr { display: block !important; }
 
  .lh-left-td,
  .lh-right-td,
  .lh-mapinfo-td,
  .lh-mapembed-td {
    display: block !important;
    width: 100% !important;
    padding: 44px 24px !important;
    border-right: none !important;
    box-sizing: border-box !important;
  }
 
  .lh-left-td {
    border-bottom: 1px solid rgba(28,25,23,.1) !important;
  }
 
  .lh-mapinfo-td {
    border-bottom: 1px solid rgba(28,25,23,.1) !important;
  }
 
  .lh-h1 { font-size: 48px !important; }
 
  .lh-mapembed-td iframe { height: 300px !important; }
	
	.section.gioi-thieu-1
	{
		padding-bottom: 0px !important;
	}
	    .phoenix-about__inner {
         gap: 15px;
    }
	.phoenix-about__body p, .why-us p, 
	.gioi-thieu-7 p, .phoenix-about__body, .gioi-thieu-2 .box .box-text p, .phoenix-about__label
	{
		font-size: 15px !important;
	}
	.gva-card-name {
    font-size: 14px;
    font-weight: 700;
    color: #2d3748;
    margin-bottom: 8px;
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    text-transform: capitalize;
	}
}
 
@media (max-width: 480px) {
  .lh-h1 { font-size: 38px !important; }
  .lh-left-td, .lh-right-td, .lh-mapinfo-td, .lh-mapembed-td {
    padding: 36px 20px !important;
  }
}
.gva-card-role, .gva-meta-item {
    color: #050505 !important;
}
.gv-cta h4 {
    color: #fff;
}
.gv-cta {
    background: linear-gradient(135deg, #f66b20, #f18f0a) !important;
}
.gv-info-card-header, .kha-price-tag
{
	background: #0f1213 !important;
}
.gv-info-card-header {
    font-size: 14px !important;
    letter-spacing: 1px !important;
}
.gv-info-label {
    color: #3f3f3f !important;
    font-size: 13px !important;
}
.gv-cta a, .kha-card-title, .kha-price-new, .kha-btn-outline, .kha-card-num, .gva-card-specialty {
    color: #ff8100 !important;
}
.gv-portrait {
    bottom: 20px !important;
}
.kha-btn-solid
{
	background-color: #ff8100 !important;
}
.kha-btn-outline, .kha-card-num
{
	border : 1px solid #ff8100 !important;
}
.kha-card {
    border: 1px solid #f6f6f6 !important;
}
.kha-card:hover {
  	border : 1px solid #ff8100 !important;
}
.kha-wrap, .gva-wrap {
    padding: 0px 24px 50px 24px !important;
}
.kha-status {
    font-weight: 500 !important;
	background: #FF8C00 !important;
    color: #fff !important;
}
.kha-header::before {
    background: radial-gradient(ellipse at 20% 50%, rgb(0 0 0 / 35%) 0%, transparent 60%), radial-gradient(ellipse at 80% 50%, rgba(49, 130, 206, 0.25) 0%, transparent 60%) !important;
}
.kha-stat-lbl {
    font-size: 14px !important;
}
.gva-header {
       background: linear-gradient(135deg, #f2830f 0%, #ab6413 100%) !important;
}
.gva-search {
    border: 1px solid #e4e4e4 !important;
    box-shadow: none !important;
    border-radius: 30px !important;
	font-size: 14px !important;
    font-weight: 300 !important;
}

.gioi-thieu-3 .icon-box {
    background: rgb(255 255 255 / 39%) !important;
}
h1>span, h2>span, h3>span, h4>span, h5>span, h6>span, p.headline>span, .gioi-thieu-2 .box h3, .gioi-thieu-4 .icon-box h3, .gioi-thieu-4 .icon-box h4, .phoenix-about__heading, .lh-intro-table p, .pxedu-stats__title, .gioi-thieu-5 .box h4, .gioi-thieu-5 .box h3, .off-canvas .nav-vertical>li>a, .phoenix-about__body p, .channel-list__num {
    font-family: 'Be Vietnam Pro', sans-serif !important;
}

.section5 ul li, .section6 ul li, .gioi-thieu-4 ul li {
    font-size: 14px !important;
    color: #000000 !important;
    line-height: 20px !important;
    font-weight: 300 !important;
}
.khs-price-display .old {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #000000 !important;
}
.khs-curriculum li, .khs-commit-item  {
    font-size: 16px !important;
    color: #000000 !important;
    font-weight: 300 !important;
}
.khs-curriculum-num {
    width: 32px !important;
    height: 32px !important;
    border-radius: 4px !important;
}
.gva-filter-btn.active {
    color: #ff8c00 !important;
    border-bottom-color: #ff8c00 !important;
}
.gva-filter-btn {
    color: #000000 !important;
}
.gva-card-role {
    font-size: 12px !important;
    letter-spacing: 1px !important;
    text-transform: capitalize;
    color: #111 !important;
    font-weight: 300 !important;
}
.gva-meta-item {
	font-size: 13px !important;
	font-weight: 300 !important;
}

/* ─── TOKENS ────────────────────────────────────────────────────── */
    :root {
      --c-ink:        #1c1917;
      --c-ink-60:     rgba(28,25,23,.6);
      --c-ink-35:     rgba(28,25,23,.35);
      --c-ink-15:     rgba(28,25,23,.12);
      --c-brand:      #c84b2f;
      --c-brand-soft: rgba(200,75,47,.08);
      --c-bg:         #faf9f7;
      --c-surface:    #ffffff;
 
      --ff-display: 'Instrument Serif', Georgia, serif;
      --ff-body:    'DM Sans', sans-serif;
 
      --radius-sm:  6px;
      --radius-md:  12px;
      --radius-lg:  20px;
 
      --shadow-sm: 0 1px 4px rgba(28,25,23,.06);
      --shadow-md: 0 4px 24px rgba(28,25,23,.08);
      --shadow-lg: 0 12px 48px rgba(28,25,23,.12);
 
      --ease-out: cubic-bezier(.22,1,.36,1);
    }
 
    /* ─── RESET ─────────────────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
    html { scroll-behavior: smooth; }
 
    body {
      font-family: var(--ff-body);
      background: var(--c-bg);
      color: var(--c-ink);
      -webkit-font-smoothing: antialiased;
      min-height: 100dvh;
    }
 
    a { color: inherit; text-decoration: none; }
 
   
   
 
    /* ─── CHANNEL LIST ───────────────────────────────────────────────── */
    .channel-list {
      display: flex;
      flex-direction: column;
      gap: 0;
      border-top: 1px solid var(--c-ink-15);
    }
 
    .channel-list__item {
      display: grid;
      grid-template-columns: 28px 1fr 32px;
      align-items: center;
      gap: 16px;
      padding: 20px 0;
      border-bottom: 1px solid var(--c-ink-15);
      transition: background .2s var(--ease-out);
      border-radius: var(--radius-sm);
    }
 
    .channel-list__num {
         font-size: 15px;
    color: #111;
    line-height: 1;
    font-weight: 600;
}
    }
 
    .channel-list__label {
     font-size: 14px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #ff8c00 !important;
    margin-bottom: 4px;
    }
 
    .channel-list__value {
      font-size: 15px;
       color: #111;
      font-weight: 500;
    }
 
    .channel-list__arrow {
      display: grid;
      place-items: center;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      opacity: .35;
      transition: opacity .2s, transform .2s var(--ease-out);
    }
 
    
  
 
  
  
 
    /* ─── ANIMATIONS ─────────────────────────────────────────────────── */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(20px); }
      to   { opacity: 1; transform: translateY(0); }
    }
 
    /* ─── RESPONSIVE ─────────────────────────────────────────────────── */
 
 
 
    /* Mobile */
    @media (max-width: 768px) {
    
		.nav-sidebar.nav-vertical>li+li {
        border-top: 1px solid #ffffff !important;
    }
		.nav>li.has-icon>a>i {
    	color: #fff !important;
		}
	.off-canvas-left .mfp-content {
           background-color: #ec712e !important;
    }
	.ux-sidebar-menu-icon
		{
			display: none;
		}
	.nav li:last-child {
   	 margin-left: 0px !important;
	width: 100%;
	}
		.footer-section .tabbed-content li.active a {
    text-transform: uppercase !important;
    font-size: 16px !important;
	}
    }


.header:not(.transparent) .header-nav-main.nav > li > a {
    color: #fff !important;
	text-transform: uppercase;
	padding: 0px 15px;
}
.header:not(.transparent) .header-nav-main.nav li.current-menu-item a {
    color: #fff !important; 
}

.header:not(.transparent) .header-nav-main.nav > li > a:hover
{
	color: #fff !important;
}
.nav li:last-child {
    margin-left: 30px;
}
 .pxedu-stats__title
{
	color: #FF8C00 !important;
    font-family: "Dancing Script", cursive !important;
	    text-shadow: 1px 1px 1px #707070;
}
.kh-status-badge
{
	background: #FF8C00 !important;
    color: #ffffff !important;
}
#tp_gallery_1 .tp-masonry {
    margin-top: 10px;
}
.section10_adce {
    padding-top: 60px !important;
    padding-bottom: 20px !important;
}
.dark, .dark p, .dark td, .dark h2, .social-icons span, .footer-section .tabbed-content .icon-box h4, .footer-section .tabbed-content li a, .footer-section h3 {
    color: #000000 !important;
}
.footer-section .tabbed-content, .footer-section ul.thong-tin-lien-he li {
    box-shadow:  none !important; 
}
.dark, .dark p, .dark td {
    font-size: 14px;
}
.copyright-footer
{
	color:#fff !important;
}
.footer-section .tabbed-content .tab-panels {
    max-height: 188px !important;
    overflow-y: scroll;
}
.footer-section
{
	padding-top: 30px;
    padding-bottom: 0px !important;
}

.list-post .post-item .col-inner {
    border: none !important; 
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px !important;
	padding: 10px !important; 
    border-radius: 10px !important; 
}
.pxedu-stats {
    padding: clamp(64px, 9vw, 112px) clamp(28px, 7vw, 96px) clamp(72px, 10vw, 70px) !important;
}
#footer a.back-to-top
{
	background: #FF8C00 !important;
}
.gioi-thieu-7 p , .phoenix-about__body, .gioi-thieu-2 .box .box-text p
{
	color: #111 !important;
	font-weight: 300;
}
.gioi-thieu-7 .box .box-text p {
    color: white !important;
}

    /* ═══════════════════════════════════════════
       Block: why-us
    ═══════════════════════════════════════════ */
    .why-us {
    padding: 0px 35px 55px;
    }
 
    .why-us__inner {
      max-width: 1360px;
      margin: 0 auto;
    }
 
    /* ── Element: heading group ── */
    .why-us__heading {
      text-align: center;
      margin-bottom: 56px;
    }
 
    .why-us__tag {
      display: inline-block;
      font-size: 16px;
      font-weight: 600;
      letter-spacing: 3px;
      color: #FF8C00;
      text-transform: uppercase;
      margin-bottom: 14px;
    }
 
    .why-us__title {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: 40px;
      font-weight: 400;
      color: #111;
      line-height: 1.28;
      margin-bottom: 24px;
    }
 
    .why-us__title em {
      font-style: italic;
      color: #FF8C00;
    }
 
    .why-us__divider {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
    }
 
    .why-us__divider-line {
      width: 64px;
      height: 1.5px;
      background: #FF8C00;
      opacity: 0.35;
    }
 
    .why-us__divider-diamond {
      width: 8px;
      height: 8px;
      background: #FF8C00;
      transform: rotate(45deg);
      flex-shrink: 0;
    }
 
    /* ═══════════════════════════════════════════
       Block: feature-grid
    ═══════════════════════════════════════════ */
    .feature-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      background: #ebebeb;
      border: 1px solid #ebebeb;
    }
 
    /* ── Element: card ── */
    .feature-grid__card {
      background: #fff;
      padding: 36px 32px 32px;
      position: relative;
      transition: box-shadow 0.25s ease, transform 0.25s ease;
    }
 
    .feature-grid__card:hover {
      z-index: 1;
      box-shadow: 0 8px 32px rgba(255, 140, 0, 0.10);
      transform: translateY(-2px);
    }
 
    .feature-grid__icon {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      border: 1.5px solid #FF8C00;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
      transition: background 0.25s ease;
    }
 
    .feature-grid__card:hover .feature-grid__icon {
      background: rgba(255, 140, 0, 0.15);
    }
 
    .feature-grid__icon i {
      font-size: 22px;
      color: #FF8C00;
    }
 
    .feature-grid__index {
     font-size: 28px;
    font-weight: 800;
    color: #FF8C00;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 8px;
    }
 
    .feature-grid__name {
      font-size: 18px;
      font-weight: 500;
      color: #111;
      margin-bottom: 10px;
      line-height: 1.35;
    }
 
    .feature-grid__desc {
      font-size: 15px;
      font-weight: 300;
      color: #555;
      line-height: 1.8;
    }
 
    /* ═══════════════════════════════════════════
       Block: metric-bar
    ═══════════════════════════════════════════ */
    .metric-bar {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      border: 1px solid #ebebeb;
      border-top: none;
    }
 
    .metric-bar__item {
      text-align: center;
      padding: 28px 16px;
    }
 
    .metric-bar__item:not(:last-child) {
      border-right: 1px solid #ebebeb;
    }
 
    .metric-bar__value {
      font-size: 36px;
      font-weight: 600;
      color: #FF8C00;
      line-height: 1;
    }
 
    .metric-bar__label {
         font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #0e0e0e;
    text-transform: uppercase;
    margin-top: 10px;
    }
 
    /* ═══════════════════════════════════════════
       Responsive
    ═══════════════════════════════════════════ */
    @media (max-width: 1024px) {
      .why-us { padding-left: 32px; padding-right: 32px; }
      .why-us__title { font-size: 32px; }
      .feature-grid { grid-template-columns: repeat(2, 1fr); }
    }
 
    @media (max-width: 768px) {
      .why-us { padding: 5px 20px 52px; }
      .why-us__heading { margin-bottom: 40px; }
      .why-us__title { font-size: 26px; }
      .why-us__divider-line { width: 40px; }
      .feature-grid { grid-template-columns: 1fr; }
      .feature-grid__card { padding: 28px 20px 24px; }
      .metric-bar { grid-template-columns: 1fr; }
      .metric-bar__item:not(:last-child) { border-right: none; border-bottom: 1px solid #ebebeb; }
      .metric-bar__value { font-size: 30px; }
	.row__lesson
		{
			padding: 0px 20px;
		}
		
	    .pxedu-stats {
        padding: 15px !important;
   		 }
		.artelier-philosophy .phil-left::before {
    	top: -30px !important;
		}
		.px-hero-title {
    	font-size: 36px !important;
		}
		
	.div__flexs {
  	  	flex-wrap: wrap;
		margin-top: 30px;
	}
	.div__flexs .pxedu-stats__title {
    	font-size: 20px !important;
	}
    }

.gioi-thieu-2 .box {
    background: linear-gradient(90deg, #ffffff, #ff8c00), linear-gradient(90deg, #ff8c00, #f9a53d) !important;
	border-color: #ff8c00 !important;
	border-width: 4px !important;
	padding: 1px !important;
}
.gioi-thieu-4 .icon-box .icon-box-text {
    box-shadow: 0 0 2px 0 #ff8c00 !important;
}
.gioi-thieu-5 .box .box-text {
    box-shadow: 0px 0px 7.45652px #e6e6e6 !important;
    background: rgb(255 255 255) !important;
}
.footer-wrapper {
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.gioi-thieu-7 .box .box-text p {
    font-weight: 500 !important;
    font-size: 14px !important;
}
.tin-tuc-1 .tabbed-content li.active a {
    background: linear-gradient(270deg, #ff8c00 0%, #ff8c00 100%) !important;
    color: white !important;
    font-size: 15px !important;
    font-weight: 500 !important;
}
.tabbed-content li a {
    box-shadow: none !important;
    border: 1px solid #ff8c00;
}

.block_widget span.widget-title
{
 background: linear-gradient(270deg, #ff8c00 0%, #ff8c00 100%) !important;
margin-bottom: 0px !important;
}
.block_widget {
    background: linear-gradient(90deg, #ffffff, #ffffff), linear-gradient(90deg, #ff8c00, #ff8c00) !important;
}
.entry-author.author-box
{
	display: none;
}
.blog-single .xem-them
{
	margin-top: 30px;
}
.xem-them ul li {
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px !important;
}
.widget a {
    color: #161616 !important;
}
.wpcf7 form.sent .wpcf7-response-output {
    border-color: #46b450;
    color: #111;
}

.xem__them-intro a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 30px;
  border-radius: 12px;
  overflow: hidden;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  letter-spacing: 0.4px;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 4px 20px rgba(255, 140, 0, 0.35);
  background: linear-gradient(135deg, #FF8C00 0%, #FF6B00 100%);
}

.xem__them-intro a::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #FFA533 0%, #FF8C00 100%);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.xem__them-intro a:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(255, 140, 0, 0.45);
}

.xem__them-intro a:active {
  transform: translateY(-1px);
}

/* Icon tròn bên phải */
.xem__them-intro a::after {
  content: '→';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  font-size: 15px;
  transition: transform 0.25s ease, background 0.25s ease;
  position: relative;
  z-index: 1;
}

.xem__them-intro a:hover::after {
  transform: translateX(3px);
}

/* Đảm bảo text nằm trên overlay */
.xem__them-intro a span {
  position: relative;
  z-index: 1;
}

.list-post .post-item .post-title {
    height: 44px;
	    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

#areas .container .section, .row .section {
    padding-left: 5px !important;
    padding-right: 5px !important;
}
.px-contact-inner
{
	max-width: 1320px !important;
}
.px-scroll-hint {
    font-size: 12px !important;
    font-weight: 300 !important;
    letter-spacing: .14em;
    color: #040404 !important;
 
}
.px-loc-title {
    font-size: 16px !important;
    letter-spacing: 1px !important;
    color: #080808 !important;
}
.px-locations-left
{
	border: none !important;
}
.px-locations-right {
    border-radius: 10px;
}
.px-branch-addr {
    color: #000000 !important;
    font-weight: 300 !important;
}
.px-orange {
    color: #ff8c00 !important;
}
.px-row-label {
    font-size: 15px !important;
    color: #ff8c00 !important;
}
.px-branch:hover .px-branch-name, .px-branch.active .px-branch-name {
    color: #ff8c00 !important;
}
.px-branch:hover .px-branch-label, .px-branch.active .px-branch-label {
    background: #ff8c00 !important;
}

.px-hero-title
{
 font-size: 66px;
}
.blog-wrapper.blog-single.page-wrapper
{
	color: #111 !important;
}
.xem-them ul li {
    display: flex !important;
    width: 49% !important;
    float: left !important;
    box-shadow: 3px 3px 3px 1px #0700a84d;
    height: 70px !important;
    border-radius: 6px !important;
    padding: 10px !important;
    margin-right: 5px !important;
    font-size: 15px !important;
}
.pkh-btn-detail {
    font-weight: 300 !important;
}
.pkh-toc__header:hover {
    background: #ff8c00 !important;
    border: 0px !important;
    color: #fff !important;
	transition: all 0.3s;
}
.pkh-toc__header:hover .pkh-toc__icon {
    color: #fff !important;
}
.pkh-toc__list li a:hover {
    color: #ffffff !important;
    background: #ff8c00 !important;
    padding-left: 26px;
}
.pkh-toc__list li.pkh-toc__sub a {
    color: #072348;
    font-size: 14px !important;
}

#gcb-toggle {
    bottom: 30% !important;
}

.pxedu-stats__header {
    max-width: 100% !important;
}
.pxedu-stats__title
 {
    font-size: 34px !important;
    font-weight: 800 !important;
    text-align: center;
    letter-spacing: 0px !important;
    max-width: max-content;
    margin: 0px !important;
}
.pxedu-stats__tag-rule, .artelier-philosophy .phil-left::before, .pxedu-stats__divider {
    display: none;
}
.pxedu-stats__tag {
    display: inline-block !important;
    gap: 12px;
    font-size: 22px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase;
    color: var(--pxedu-accent);
    font-weight: 600;
    margin: 0 0 22px;
    text-align: center;
    width: 100% !important;
}
.xem__them-intro {
    text-align: center;
}
.div__flexs
{
	 display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
}
.tp-gallery-wrap {
    padding: 0 30px;
}

.section10 .section-title span {
    text-align: center;
    width: 100%;
    margin-bottom: 20px;
}
.section10 .section-title b {
    display: none;
}
.header-main
{
	    height: 100px !important;
}
#logo img 
{
	    max-height: 100px !important;
}
 .footer-section h3:before {
	display: none;
	     visibility: hidden;
}
.footer-section h2, .footer-section ul.thong-tin-lien-he li, .footer-section .tabbed-content .icon-box h4, .footer-section .tabbed-content .icon-box p
{
	color: #fff !important;
}
.footer-section h2
{
	font-size: 20px !important;
}
.pkh-card__body {
    background-color: #ff8c00 !important;
}
.pkh-card__title a, .pkh-card__excerpt, .pkh-btn-detail {
    color: #fff !important;
}
.pkh-btn-detail
{
	    border: 2px solid #ffffff !important;
}
.pkh-card__thumb
{
	aspect-ratio: 16 / 9 !important;
}
.header-main .nav > li > a img
{
	display: none;
}
#logo img {
    padding: 0px 0 !important;
}
.container__fix-all, .section10, .section8, .section13, .header .flex-row, #footer .row, .section__container-fix, .tin-tuc-1, .title__container-fix
{
	max-width: 1320px !important;
	margin: 0px auto !important;
}
.home #wrapper .page-wrapper {
    padding-bottom: 0px !important;
    padding-top: 0px !important;
}

.home #wrapper .page-wrapper .col {
    margin: 0;
    padding: 0 0px 0px;
    position: relative;
    width: 100%;
}

.section8 .slider .row .icon-box {
    margin: 200px 15px !important;
}


   @media (max-width: 768px) {
	.home #wrapper .page-wrapper .section8  .col, 
	.home #wrapper .page-wrapper .section13  .col{
    padding: 0px 15px 0px;
}      
	   
	  .home #wrapper .page-wrapper .section13  .row 
	   {
		   margin: 0px auto !important;
}
	   
}
#main, #wrapper, .px-contact-hero, .px-locations, .px-locations-left {
    background: #fff9f2 !important;
}

.ux-shape-divider--bottom .ux-shape-fill {
    fill: transparent !important;
}