/* ============================================================
   site.css — CSS bổ sung của bản làm lại (không có trong theme gốc).
   Chỉ chứa:
   1) Fix nút submit form đăng ký (theme gốc dùng Vue nên chỉ style
      input[type=button]; bản này submit thường nên phải style lại).
   2) Trang Liên hệ — trang tự dựng, site gốc không có.
   ============================================================ */

/* --- 1. Nút submit dùng chung, kế thừa đúng style nút cam của theme --- */
.page-dangky .content .md-right input[type=submit],
.page-lienhe .lienhe-right input[type=submit] {
    border: 2px solid #F7884C;
    background: #EA351A;
    padding: 15px 30px;
    border-radius: 60px;
    display: table;
    margin: 25px auto 0 auto;
    color: #FFF;
    font-family: 'SVN-GothamRoundedMedium';
    cursor: pointer;
    transition-duration: 0.5s;
}
.page-dangky .content .md-right input[type=submit]:hover,
.page-lienhe .lienhe-right input[type=submit]:hover {
    background: #d1513d;
    color: yellow;
}

/* --- 1b. Nút tải ebook (thay nút Vue chết của site cũ) --- */
.ebook-download {
    margin: 0 0 20px;
    text-align: right;
}
.ebook-download a {
    display: inline-block;
    background: #EA351A;
    border: 2px solid #F7884C;
    color: #FFF;
    font-family: 'SVN-GothamRoundedMedium';
    padding: 12px 26px;
    border-radius: 60px;
    text-decoration: none;
    transition-duration: 0.3s;
}
.ebook-download a:hover {
    background: #d1513d;
    color: yellow;
    text-decoration: none;
}
.ebook-download .ebook-size {
    font-size: 0.85em;
    opacity: 0.85;
}

/* --- 2. Trang Liên hệ --- */
.page-lienhe {
    padding-top: 20px;
    margin-bottom: 40px;
}
.page-lienhe .lienhe-title {
    font-family: 'SVN-GothamRoundedBold';
    color: #EA351A;
    text-align: center;
    font-size: calc(20px + 1vw);
    margin: 10px 0 15px;
}
.page-lienhe .lienhe-intro {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 30px;
    color: #555;
    line-height: 1.7;
}

.page-lienhe .lienhe-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    margin-bottom: 35px;
}
.page-lienhe .lienhe-quick-item {
    flex: 1 1 240px;
    max-width: 320px;
    background: #FFF;
    border: 2px solid #F7A376;
    border-radius: 30px;
    padding: 16px 22px;
    text-align: center;
    text-decoration: none;
    transition-duration: 0.3s;
}
.page-lienhe .lienhe-quick-item:hover {
    background: #FFF3EA;
    text-decoration: none;
}
.page-lienhe .lienhe-quick-item .lbl {
    display: block;
    color: #888;
    font-size: 14px;
    margin-bottom: 4px;
}
.page-lienhe .lienhe-quick-item strong {
    display: block;
    color: #EA351A;
    font-family: 'SVN-GothamRoundedMedium';
    font-size: calc(10px + 0.5vw);
    word-break: break-word;
}

.page-lienhe .lienhe-cols {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: flex-start;
}
.page-lienhe .lienhe-left {
    flex: 1 1 340px;
}
.page-lienhe .lienhe-right {
    flex: 1 1 420px;
    background: #FFF;
    border-radius: 40px;
    padding: 30px;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06);
}
.page-lienhe h2 {
    font-family: 'SVN-GothamRoundedBold';
    color: #2FA34B;
    font-size: calc(14px + 0.7vw);
    margin-bottom: 18px;
}

.page-lienhe .lienhe-centers {
    list-style: none;
    padding: 0;
    margin: 0;
}
.page-lienhe .lienhe-centers li {
    background: #FFF;
    border-radius: 24px;
    padding: 18px 22px;
    margin-bottom: 14px;
    border-left: 6px solid #EA351A;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.page-lienhe .lienhe-centers h3 {
    font-family: 'SVN-GothamRoundedMedium';
    color: #EA351A;
    font-size: calc(11px + 0.4vw);
    margin: 0 0 6px;
}
.page-lienhe .lienhe-centers p {
    margin: 0 0 8px;
    color: #555;
    line-height: 1.6;
}
.page-lienhe .lienhe-centers .map-link {
    color: #2FA34B;
    font-size: 14px;
    text-decoration: underline;
}

.page-lienhe .lienhe-right .md-row {
    margin-bottom: 15px;
    width: 100%;
}
.page-lienhe .lienhe-right .md-row .md-col {
    width: 49.5%;
    float: left;
}
.page-lienhe .lienhe-right .md-row .md-col:first-child {
    margin-right: 1%;
}
.page-lienhe .lienhe-right input[type=text],
.page-lienhe .lienhe-right input[type=tel],
.page-lienhe .lienhe-right input[type=email] {
    font-family: 'SVN-GothamRoundedItalic';
    width: 100%;
    border: 2px solid #E88F57;
    height: 50px;
    border-radius: 60px;
    padding: 0 20px;
    color: #707070;
}
.page-lienhe .lienhe-right textarea {
    font-family: 'SVN-GothamRoundedItalic';
    width: 100%;
    border: 2px solid #E88F57;
    border-radius: 30px;
    padding: 15px 20px;
    color: #707070;
}
.page-lienhe .lienhe-ok {
    background: #E9F8EC;
    border: 2px solid #2FA34B;
    color: #1d7a35;
    border-radius: 20px;
    padding: 12px 18px;
    margin-bottom: 18px;
}
.page-lienhe .lienhe-err {
    background: #FDECEA;
    border: 2px solid #EA351A;
    color: #b32b16;
    border-radius: 20px;
    padding: 12px 18px;
    margin-bottom: 18px;
}

@media (max-width: 767px) {
    .page-lienhe .lienhe-right {
        padding: 20px;
        border-radius: 24px;
    }
    .page-lienhe .lienhe-right .md-row .md-col {
        width: 100%;
        float: none;
        margin-right: 0;
    }
    .page-lienhe .lienhe-right .md-row .md-col:first-child {
        margin-bottom: 15px;
    }
}

/* ============================================================
   3. FORM ĐĂNG KÝ DÙNG CHUNG (.tmt-register-form) — 2026-08-18
   Một mẫu form cho trang chủ + /dang-ky + landing khóa học.
   Theme gốc chỉ style input[type=button] (form Vue cũ) nên nút submit
   thật bị mất màu — phần dưới style lại cho đúng nút đỏ của thương hiệu.
   ============================================================ */

/* --- Bố cục: hàng dùng flex cho cân, ghi đè float 49.5% của theme cũ --- */
.tmt-register-form .md-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 15px;
    width: 100%;
}
.tmt-register-form .md-row .md-col {
    /* !important vì theme cũ có selector nặng hơn (.page-dangky .content .md-right
       .md-row .md-col{width:49.5%;float:left}) sẽ đè mất, làm hàng 1 ô bị hụt nửa hàng */
    flex: 1 1 0 !important;
    min-width: 0;
    width: auto !important;
    float: none !important;
    margin-right: 0 !important;
}
.tmt-register-form .md-row input,
.tmt-register-form .md-row select {
    width: 100%;
    box-sizing: border-box;
}

/* Select cao bằng input để hàng không so le */
.page-dangky .tmt-register-form .md-row select {
    height: 50px;
}
.home-register .tmt-register-form .md-row select {
    height: 54px;
    border: 2px solid #F7A376;
    border-radius: 30px;
    padding: 0 20px;
    color: #707070;
    background: #FFF;
    font-family: 'SVN-GothamRoundedItalic';
}

/* --- Nút "Đăng ký ngay": ĐỎ, dùng chung mọi vị trí --- */
.tmt-register-form input[type=submit] {
    /* width auto !important: theme co .home-register .content form input{width:100%}
       nang hon, khong chan thi nut bi keo dai het hang */
    width: auto !important;
    background: #EA351A;
    border: 3px solid #F7A376;
    color: #FFF;
    padding: 14px 34px;
    border-radius: 60px;
    display: table;
    margin: 25px auto 0 auto;
    cursor: pointer;
    font-family: 'SVN-GothamRoundedBold';
    transition-duration: 0.5s;
}
.tmt-register-form input[type=submit]:hover {
    background: #d1513d;
    color: yellow;
}
.tmt-register-form input[type=submit]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
/* Trang chủ: chữ nút to theo theme gốc */
.home-register .tmt-register-form input[type=submit] {
    font-size: calc(13px + 0.7vw);
    padding: 10px 26px 16px 26px;
}

/* --- Báo lỗi validate --- */
.tmt-register-form .tmt-error {
    color: #EA351A;
    font-size: 13px;
    margin: 6px 0 0 20px;
    font-family: 'SVN-GothamRoundedMedium';
}
.tmt-register-form .tmt-invalid {
    border-color: #EA351A !important;
    background: #fff6f4;
}

/* --- Mobile: mỗi ô một hàng cho dễ bấm --- */
@media screen and (max-width: 767px) {
    .tmt-register-form .md-row {
        display: block;
    }
    .tmt-register-form .md-row .md-col {
        width: 100%;
        margin-bottom: 12px;
    }
}

/* Trang chủ: ảnh bé gái (.img-right) vẽ đè lên mép phải form, che mũi tên ô
   "Chương trình học" và chặn click. Nâng khối form lên trên ảnh. */
.home-register .content {
    position: relative;
    z-index: 3;
}

/* ============================================================
   4. POPUP KẾT QUẢ ĐĂNG KÝ (.tmt-modal-*) — 2026-08-18
   Hiện sau khi gửi form đăng ký (?dangky=ok / ?dangky=loi).
   ============================================================ */
.tmt-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 20, 20, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 99999;
    animation: tmtFade 0.25s ease;
}
.tmt-modal-overlay.tmt-dong {
    display: none;
}
.tmt-modal {
    background: #FFF;
    border-radius: 28px;
    max-width: 520px;
    width: 100%;
    padding: 44px 38px 34px 38px;
    text-align: center;
    position: relative;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
    animation: tmtZoom 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.tmt-modal-x {
    position: absolute;
    top: 14px;
    right: 20px;
    background: none;
    border: 0;
    font-size: 30px;
    line-height: 1;
    color: #B9B9B9;
    cursor: pointer;
    padding: 4px 8px;
}
.tmt-modal-x:hover { color: #707070; }
.tmt-modal-icon { margin-bottom: 14px; }
.tmt-modal-title {
    font-family: 'SVN-GothamRoundedBold';
    font-size: 26px;
    color: #2BA84A;
    margin: 0 0 14px 0;
}
.tmt-modal-loi .tmt-modal-title { color: #EA351A; }
.tmt-modal-text {
    color: #4A4A4A;
    font-size: 16px;
    line-height: 1.6;
    margin: 0 0 16px 0;
}
.tmt-modal-note {
    color: #707070;
    font-size: 15px;
    margin: 0 0 26px 0;
}
.tmt-modal-note a {
    color: #EA351A;
    font-family: 'SVN-GothamRoundedBold';
    text-decoration: none;
    white-space: nowrap;
}
.tmt-modal-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.tmt-btn {
    display: inline-block;
    padding: 13px 30px;
    border-radius: 60px;
    font-family: 'SVN-GothamRoundedMedium';
    font-size: 15px;
    cursor: pointer;
    border: 2px solid transparent;
    text-decoration: none;
    transition-duration: 0.3s;
}
.tmt-btn-main {
    background: #2BA84A;
    color: #FFF;
    border-color: #2BA84A;
}
.tmt-btn-main:hover { background: #24913f; }
.tmt-modal-loi .tmt-btn-main {
    background: #EA351A;
    border-color: #EA351A;
}
.tmt-modal-loi .tmt-btn-main:hover { background: #d1513d; }
.tmt-btn-phu {
    background: #FFF;
    color: #EA351A;
    border-color: #F7A376;
}
.tmt-btn-phu:hover { background: #FFF3EE; }

/* Vẽ dấu tích chạy từ từ cho cảm giác "xong việc" */
.tmt-icon-circle {
    stroke-dasharray: 160;
    stroke-dashoffset: 160;
    animation: tmtVeVong 0.5s ease forwards;
}
.tmt-icon-check {
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: tmtVeTich 0.35s 0.45s ease forwards;
}
@keyframes tmtVeVong  { to { stroke-dashoffset: 0; } }
@keyframes tmtVeTich  { to { stroke-dashoffset: 0; } }
@keyframes tmtFade    { from { opacity: 0; } to { opacity: 1; } }
@keyframes tmtZoom    { from { opacity: 0; transform: translateY(18px) scale(0.94); } to { opacity: 1; transform: none; } }

@media screen and (max-width: 600px) {
    .tmt-modal { padding: 36px 22px 26px 22px; border-radius: 22px; }
    .tmt-modal-title { font-size: 22px; }
    .tmt-modal-actions .tmt-btn { width: 100%; }
}

/* ============================================================
   5. HEADER — 2026-08-18
   Theme để .main-menu là display:table-cell nhưng QUÊN vertical-align,
   nên chữ menu dính lên mép trên thanh trắng thay vì nằm giữa.
   ============================================================ */
@media screen and (min-width: 1024px) {
  .main-menu { vertical-align: middle; }
  .page-header .container-header { display: table; }

  /* Nút "ĐĂNG KÝ" trên thanh menu: gọn lại cho cân với chữ menu bên cạnh */
  .main-menu ul li .register {
    padding: 10px 18px;
    white-space: nowrap;
    line-height: 1.2;
  }
}

/* Menu cấp 3 (.sub-menu-2): tên khoá học dài, canh giữa đọc rất rối —
   chuyển sang canh trái cho dễ quét mắt. Chỉ áp dụng desktop. */
@media screen and (min-width: 1024px) {
  .main-menu ul li .sub-menu-1 .sub-menu-2 ul,
  .main-menu ul li .sub-menu-1 .sub-menu-2 ul li {
    text-align: left;
  }
  .main-menu ul li .sub-menu-1 .sub-menu-2 ul li a {
    text-align: left;
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* Mobile: menu cấp 3 cũng canh trái cho đồng bộ với desktop.
   Chừa lại thanh breadcrumb "quay lại" (.breck-crum-menu) — cái đó giữ canh giữa. */
@media screen and (max-width: 1023.8px) {
  .page-header .main-menu ul li .sub-menu-1 .sub-menu-2 ul li a {
    text-align: left;
    padding-left: 24px;
    padding-right: 16px;
  }
  .page-header .main-menu ul li .sub-menu-1 .sub-menu-2 .breck-crum-menu a {
    text-align: center;
    padding-left: 0;
    padding-right: 0;
  }
}