/* * Khoi tich diem nhanh o dau trang chu + sua loi hien thi tren mobile cua ban Elementor goc. * Mobile-first; mau lay tu giao dien goc (xanh #00512C, vang #FFD000). */ :root { --td-green: #00512c; --td-green-dark: #003d21; --td-green-soft: #e8f3ec; --td-yellow: #ffd000; --td-text: #1f2937; --td-muted: #4b5563; --td-border: #d1d5db; --td-error: #b42318; --td-error-soft: #fef3f2; --td-radius: 14px; } .td-panel { box-sizing: border-box; max-width: 560px; margin: 12px auto 24px; padding: 0 12px; font-family: "Montserrat", system-ui, sans-serif; color: var(--td-text); /* thanh menu Elementor dinh tren cung khi cuon -> chua cho khi nhay toi #tich-diem */ scroll-margin-top: 90px; } .td-panel *, .td-panel *::before, .td-panel *::after { box-sizing: border-box; } .td-card { background: #fff; border: 1px solid var(--td-green); border-radius: var(--td-radius); padding: 18px 16px 20px; box-shadow: 0 4px 16px rgba(0, 81, 44, .08); } .td-card + .td-card { margin-top: 16px; } .td-title { margin: 0 0 4px; font-size: 22px; line-height: 1.3; font-weight: 700; color: var(--td-green); text-align: center; } .td-sub { margin: 0 0 14px; font-size: 15px; line-height: 1.5; color: var(--td-muted); text-align: center; } /* Tab dang segmented control */ .td-tabs { display: flex; gap: 4px; padding: 4px; margin-bottom: 16px; background: var(--td-green-soft); border-radius: 12px; } .td-tab { flex: 1; min-height: 44px; border: 0; border-radius: 9px; background: transparent; color: var(--td-green); font: 600 15px/1.2 "Montserrat", system-ui, sans-serif; cursor: pointer; touch-action: manipulation; transition: background-color .2s ease, color .2s ease; } .td-tab[aria-selected="true"] { background: var(--td-green); color: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .15); } /* Elementor/hello theme to mau hover cho moi button -> tra lai dung trang thai tab */ .td-tab:hover, .td-tab:focus { background: rgba(0, 81, 44, .08); color: var(--td-green); } .td-tab[aria-selected="true"]:hover, .td-tab[aria-selected="true"]:focus { background: var(--td-green); color: #fff; } /* CSS goc trong ap cho moi "form" (khung, bong, nen xam o nhap) -> tat trong panel */ .td-panel form.td-form, .td-panel form.td-form:hover { max-width: none; margin: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; } .td-field { margin-bottom: 14px; } .td-field[hidden] { display: none; } .td-field label { display: block; margin-bottom: 6px; font-size: 15px; font-weight: 600; color: var(--td-text); } .td-panel .td-field input { display: block; margin: 0; width: 100%; min-height: 52px; padding: 12px 14px; border: 1.5px solid var(--td-border); border-radius: 10px; background: #fff; color: var(--td-text); /* >= 16px de iOS khong tu phong to khi focus */ font: 500 18px/1.3 "Montserrat", system-ui, sans-serif; letter-spacing: .02em; transition: border-color .15s ease, box-shadow .15s ease; } .td-panel .td-field input::placeholder { color: #9ca3af; font-weight: 400; font-size: 16px; letter-spacing: 0; } #td-code { text-transform: uppercase; } #td-code::placeholder { text-transform: none; } .td-panel .td-field input:focus { outline: none; border-color: var(--td-green); box-shadow: 0 0 0 3px rgba(0, 81, 44, .18); } .td-field input[aria-invalid="true"] { border-color: var(--td-error); } .td-saved { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; padding: 10px 12px; background: var(--td-green-soft); border-radius: 10px; font-size: 15px; } .td-saved[hidden] { display: none; } .td-saved strong { color: var(--td-green); letter-spacing: .02em; } .td-link { min-height: 44px; padding: 0 8px; border: 0; background: none; color: var(--td-green); font: 600 15px "Montserrat", system-ui, sans-serif; text-decoration: underline; cursor: pointer; } .td-link:hover, .td-link:focus { background: none; color: var(--td-green-dark); } .td-btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; padding: 12px 16px; border: 0; border-radius: 10px; background: var(--td-green); color: #fff; font: 700 17px/1.2 "Montserrat", system-ui, sans-serif; text-decoration: none; cursor: pointer; touch-action: manipulation; transition: background-color .15s ease, transform .1s ease; } /* theme to mau chu cho moi the a -> tang do uu tien de chu nut luon trang */ .td-panel .td-btn, .td-panel a.td-btn:visited { color: #fff; } .td-btn:hover, .td-btn:focus { background: var(--td-green-dark); color: #fff; } .td-btn:active { transform: scale(.98); } .td-btn:disabled { opacity: .6; cursor: wait; } .td-btn-zalo { margin-top: 12px; background: #0068ff; } .td-panel .td-btn-zalo:hover, .td-panel .td-btn-zalo:focus { background: #0052cc; color: #fff; } .td-btn-zalo[hidden] { display: none; } .td-tab:focus-visible, .td-btn:focus-visible, .td-link:focus-visible, .td-info a:focus-visible { outline: 3px solid var(--td-yellow); outline-offset: 2px; } .td-panel .result-message { display: none; text-align: left; margin-top: 12px; padding: 12px 14px; border-radius: 10px; font-size: 15px; line-height: 1.5; font-weight: 500; } .td-panel .result-message.success { display: block; background: var(--td-green-soft); color: var(--td-green); border-left: 4px solid var(--td-green); } .td-panel .result-message.error { display: block; background: var(--td-error-soft); color: var(--td-error); border-left: 4px solid var(--td-error); } /* Diem + thanh tien do toi moc qua ke tiep */ .td-progress { text-align: left; margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--td-border); } .td-progress[hidden] { display: none; } .td-progress-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 15px; color: var(--td-muted); } .td-progress-head span strong { color: var(--td-text); letter-spacing: .02em; } .td-points { font-size: 32px; line-height: 1; color: var(--td-green); font-variant-numeric: tabular-nums; } .td-bar { height: 10px; margin: 10px 0 8px; background: #e5e7eb; border-radius: 99px; overflow: hidden; } .td-bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--td-green), #2e9e5b); border-radius: inherit; transition: width .4s ease-out; } .td-progress-text { margin: 0; font-size: 15px; line-height: 1.5; } /* Tom tat chuong trinh */ .td-h2 { margin: 0 0 12px; font-size: 18px; line-height: 1.3; font-weight: 700; color: var(--td-green); } .td-h2:not(:first-child) { margin-top: 20px; } .td-gifts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; } .td-gift { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; transition: border-color .2s ease, background-color .2s ease; } .td-gift img { flex: none; width: 56px; height: 56px; border-radius: 8px; object-fit: cover; } .td-gift-name { flex: 1; min-width: 0; font-size: 15px; line-height: 1.35; font-weight: 600; } .td-gift-name small { display: block; font-size: 13px; font-weight: 400; color: var(--td-muted); } .td-gift-pts { flex: none; padding: 6px 10px; border-radius: 99px; background: #fff6cc; color: #5c4a00; font-size: 14px; font-weight: 700; white-space: nowrap; } /* Du diem: doi mau + chu "Du diem" (khong chi dua vao mau) */ .td-gift.is-ok { border-color: var(--td-green); background: var(--td-green-soft); } .td-gift.is-ok .td-gift-pts { background: var(--td-green); color: #fff; } .td-gift.is-ok .td-gift-name::after { content: "✓ Đủ điểm"; display: block; margin-top: 2px; font-size: 13px; color: var(--td-green); } .td-steps { margin: 0; padding: 0; list-style: none; counter-reset: td-step; } .td-steps li { position: relative; padding: 0 0 12px 40px; font-size: 15px; line-height: 1.55; counter-increment: td-step; } .td-steps li::before { content: counter(td-step); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--td-green); color: #fff; font-size: 14px; font-weight: 700; line-height: 28px; text-align: center; } .td-info a { color: var(--td-green); font-weight: 600; } .td-note { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--td-muted); } @media (min-width: 768px) { .td-panel { margin-top: 24px; } .td-card { padding: 24px; } .td-title { font-size: 26px; } } @media (prefers-reduced-motion: reduce) { .td-panel *, .td-panel *::before { transition: none !important; } } /* ===== Sua loi ban Elementor goc ===== */ /* Ten qua bi dat line-height:8px -> chong chu khi xuong dong (mobile, ca desktop ~1025-1200px). Bo margin 20px giua 2 dong

de tong chieu cao gan bang ban goc (86px) -> desktop khong lech bo cuc. */ .elementor-element-29f6b678, .elementor-element-2074588, .elementor-element-f548952, .elementor-element-154cd30 { line-height: 1.3 !important; } .elementor-element-29f6b678 p, .elementor-element-2074588 p, .elementor-element-f548952 p, .elementor-element-154cd30 p { margin: 0 !important; } @media (max-width: 767px) { /* Can deu 2 le tren man hep tao khoang trang lon giua cac chu -> can trai */ .elementor-element-5206fff, .elementor-element-6e8ab01, .elementor-element-a479ede, .elementor-element-670f2b2, .elementor-element-499654d, .elementor-element-db66edb, .elementor-element-731659e, .elementor-element-b97ba4f { text-align: left !important; } /* Chua cho thanh Messenger/Zalo/Goi dinh day man hinh */ body.home { padding-bottom: 72px; } }