:root {
  --color-ffffff: #ffffff;
  --color-000000: #000000;
  --color-fffcd6: #fffcd6;
  --color-f1b000: #f1b000;
  --color-fceeee: #fceeee;
  --color-96cb5f: #96cb5f;
  --color-666666: #666666;
  --color-7f58a5: #7f58a5;
  --color-cfcfcf: #cfcfcf;
  --color-eeeeee: #eeeeee;
  --color-ec535a: #ec535a;
  --color-231441: #231441;

  /* font-size */
  --font-size-normal: 22px;
  --font-size-mobile: 14px;
}

#verifyEmailPopupStep1,
#verifyEmailPopupStep2 {
  font-size: var(--font-size-normal);
  font-weight: 300;
}

.m-wrapper #verifyEmailPopupStep1,
.m-wrapper #verifyEmailPopupStep2 {
  font-size: var(--font-size-mobile);
}

#verifyEmailPopupStep1.modal div.modal-header,
#verifyEmailPopupStep2.modal div.modal-header {
  display: flex;
  justify-content: center;
  align-items: center;
}

#verifyEmailPopupStep1.modal div.modal-header .header-item:first-child,
#verifyEmailPopupStep2.modal div.modal-header .header-item:first-child {
  margin-left: auto;
}

#verifyEmailPopupStep1.modal div.modal-header .header-item:last-child,
#verifyEmailPopupStep2.modal div.modal-header .header-item:last-child {
  margin-left: auto;
}

#verifyEmailPopupStep2 div.notice-text {
  margin-bottom: -9.5%;
  margin-top: 10%;
  color: var(--color-ec535a);
}

.wrapper {
  margin: auto;
  width: 750px;
}
.wrapper-content {
  padding: 5%;
}
.light-black {
  color: #231541;
}
/* start login page */
div.bookmark-this-page {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #7f58a5;
  border-radius: 50px;
  margin: auto auto;
  width: 95%;
}
div.bookmark-this-page p {
  font-size: 30px;
  color: #7f58a5;
  padding-top: 3%;
}
img.web_uralalogo {
  display: block;
  margin: 0% auto 10%;
  width: 65%;
}
div.form-group input {
  vertical-align: middle;
  padding: 3% 13% 3% 5%;
  background-color: #eee;
  border: 0px;
  border-radius: 5px;
  font-size: 24px;
  width: 99%;
  height: auto;
  cursor: pointer;
}
div.input-pass-container {
  position: relative;
  margin-bottom: 0%;
}
img.toggle-password {
  cursor: pointer;
  position: absolute;
  right: 3%;
  top: 17%;
  width: 7%;
}
div.remember-email {
  width: 100%;
  margin: 5% auto;
}
.wrapper-content form label {
  font-size: 24px;
}
.wrapper-content p.errorMessage {
  color: #ec535a;
  font-size: 20px;
  margin: 0%;
}
img.checkbox-img {
  padding: 0% 0% 2%;
  cursor: pointer;
}
label.checkbox-label {
  cursor: pointer;
}
div.submit-disabled {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 10% 0% 0%;
}
div.submit-disabled button {
  color: #fff;
  cursor: pointer;
  border: 0px;
  border-radius: 50px;
  background-color: #cfcfcf;
  width: 90%;
  font-size: 34px;
  padding: 2%;
}
div.maintenance-link {
  width: 100%;
  font-size: 22px;
  text-align: center;
  margin: 0% auto 5%;
}
div.maintenance-link a {
  color: #ec535a;
  text-decoration-line: underline;
  cursor: pointer;
}
div.logo-header {
  margin: 0% auto 8%;
}
div.info {
  width: 100%;
  font-size: 22px;
  text-align: center;
  padding: 5% 0% 10%;
}
div.info a {
  color: #000000;
  text-decoration-line: underline;
  cursor: pointer;
}
div.info span {
  color: #666666;
  width: auto;
}
div.info p img {
  padding: 0% 1% 1%;
}
::placeholder {
  color: #cfcfcf;
  font-weight: 400;
}
h4.popup-content {
  font-size: 22px;
  font-weight: 300;
  margin-bottom: -7%;
}
img.popup-close {
  opacity: 1;
}
/* end login page */
/* start forgot password page */
div.submit-enabled {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 10% 0% 0%;
}
div.submit-enabled button {
  color: #fff;
  cursor: pointer;
  border: 0px;
  border-radius: 50px;
  background-color: #231541;
  width: 90%;
  font-size: 34px;
  padding: 2%;
}

div.wrapper-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 10% 0% 10%;
}

div.wrapper-button button.button {
  color: #fff;
  cursor: pointer;
  border: 0px;
  border-radius: 6.25rem;
  background-color: var(--color-231441);
  width: 100%;
  font-size: 18px;
  margin: 0 20px;
  padding: 2%;
}

div.wrapper-button button.button.disabled {
  background-color: var(--color-cfcfcf);
}

div.wrapper-button button.button-submit-type-1 {
  color: var(--color-231441);
  background-color: var(--color-ffffff);
  border: 1px solid var(--color-231441);
}

div.info p {
  color: #7f58a5;
  width: auto;
  padding-top: 5%;
  cursor: pointer;
}
/* end forgot password page */
/* start price list page */
.no-padding {
  padding: 5% 0%;
}
div.page-title {
  text-align: center;
  width: 100%;
  padding: 5%;
  font-size: 30px;
}
div.page-title p {
  color: #231541;
  font-weight: bold;
  margin: 0;
}
div.page-title span.red {
  color: #ec535a;
}
div.price-list {
  width: 100%;
}
div.price-list div.price-item {
  width: 100%;
  border-bottom: 2px solid #eeeeee;
  background-color: #fff;
  padding: 4% 5%;
  float: left;
}
div.price-list div.campaign {
  background-color: #fffcd6;
  padding: 4% 5% 0% 5%;
}
div.price-list div.price-item > div {
  width: 100%;
}
div.price-list div.price-item div.campaign-img {
  text-align: right;
  padding-top: 4%;
  width: 100%;
  position: relative;
}
div.price-list div.price-item div.campaign-img > img {
  width: 26%;
  position: absolute;
  top: -16%;
  left: 70%;
}
div.price-list div.price-item div.point-bonus-price > div {
  float: left;
}
div.price-list div.price-item div.point-bonus-price div.price-item-point,
div.price-item-amount {
  width: 30%;
}
div.price-list
  div.price-item
  div.point-bonus-price
  div.price-item-point
  img.point-img {
  width: 24%;
  padding-bottom: 8%;
}
div.price-list div.price-item div.point-bonus-price div.price-item-point span {
  font-size: 30px;
  font-weight: bold;
}
div.price-list div.price-item div.point-bonus-price div.price-item-bonus {
  width: 40%;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 75%;
  padding: 2% 0%;
  text-align: center;
}
div.price-list div.price-item div.point-bonus-price div.price-item-bonus span {
  font-size: 24px;
  color: #fff;
}
div.price-list div.price-item div.point-bonus-price div.price-item-amount {
  background-color: #a18fb9;
  text-align: center;
  border-radius: 10px;
  cursor: pointer;
  padding: 2% 0%;
}
div.price-list div.price-item div.point-bonus-price div.price-item-amount:active,
div.price-list div.price-item div.point-bonus-price div.price-item-amount:focus {
  background: #d2b2f9;
  opacity: 0.4;
}
div.price-list div.price-item div.point-bonus-price div.price-item-amount span {
  font-size: 30px;
  color: #fff;
  font-weight: bold;
}
div.price-list
  div.price-item
  div.point-bonus-price
  div.price-item-amount-campaign {
  background-color: #f1b000;
}
div.campaign-info {
  display: inline-block;
  padding: 0% 0% 1% 0%;
  color: #ec535a;
  font-size: 16px;
  font-weight: 300;
}
div.campaign-info > p {
  margin: 0%;
}
div.rules {
  float: left;
  width: 100%;
  text-align: center;
  padding: 5%;
  font-size: 22px;
}
div.rules p {
  text-decoration-line: underline;
  cursor: pointer;
}
div.payment-complete-button-margin {
  margin: 40px 0 0 0;
}
div.open-app {
  float: left;
  width: 100%;
  text-align: center;
  padding: 0% 0% 10%;
}
div.open-app div.open-app-button {
  border: 2px solid #231541;
  border-radius: 50px;
  font-size: 36px;
  padding-top: 2%;
  width: 80%;
  margin: auto;
  cursor: pointer;
}
.open-padding {
  padding-top: 5%;
}
a.payment-upper-price-setting-link {
  color: #7f58a5;
  font-size: 30px;
  font-weight: normal;
  text-decoration: underline;
}
/* end price list page */
/* start payment page */
div.acceptable-cards p {
  font-size: 24px;
  font-weight: bold;
}
div.images-of-cards {
  text-align: center;
  width: 100%;
}
div.images-of-cards img.web_img_cards {
  width: 160px;
}
form.payment-form label {
  font-size: 24px;
  font-weight: bold;
  margin-top: 20px;
}
form.payment-form input {
  padding: 3%;
  background-color: #eee;
  border: 0px;
  border-radius: 5px;
  font-size: 24px;
  cursor: pointer;
  width: 100%;
}
form.payment-form input#email,
input#card_number,
input#cardholder_name {
  width: 100%;
}
form.payment-form input#valid_date,
input#security_code {
  width: 35%;
}
img.help-mark {
  margin-bottom: 2%;
  width: 5%;
}
div.security-code-info-outer {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 5%;
  flex-wrap: wrap; /* THÊM DÒNG NÀY */
  max-width: 100%;
}
div.security-code-info-inner {
  flex: 0 0 65%; /* tương đương col-xs-7 */
  border-radius: 10px;
  box-shadow: 0px 0px 5px 3px #f2f2f2;
  text-align: center;
  font-size: 20px;
  flex-wrap: wrap;
  padding: 5% 0%;
  margin-bottom: 10%;
  color: #231541;
}
div.security-code-info-inner img.help-mark {
  margin-bottom: 2%;
  width: 6%;
}
div.security-code-info-inner span.what-is-security-code {
  font-weight: bold;
}
div.security-code-info-inner img.img-cvv {
  width: 35%;
}
img.card-next-time {
  margin-bottom: 2%;
  cursor: pointer;
  width: 6%;
}
div.price {
  text-align: left;
  width: 100%;
  border-bottom: 2px solid #231541;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 5%;
}
p.price-point {
  text-align: right;
  font-size: 40px;
  margin: 0%;
}
div.pay-now {
  text-align: center;
  color: #ec535a;
}
p.pay-now-warning {
  color: #ec535a;
  font-size: 26px;
  font-weight: 300;
  margin-bottom: -13%;
}
div.payment-info-error {
  border: 4px solid #ec535a;
  background-color: #fceeed;
  text-align: center;
  color: #ec535a;
  font-size: 24px;
  padding: 4%;
  margin-bottom: 5%;
}
div.payment-info-error p {
  margin: 0;
}
p.payment-input-error {
  color: #ec535a;
  font-size: 22px;
}
div.white-button {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  width: 100%;
  margin: 15% 0% 0%;
}
div.white-button button {
  color: #000;
  cursor: pointer;
  border: 2px solid #231541;
  border-radius: 50px;
  text-align: center;
  width: 90%;
  font-size: 34px;
  padding: 2%;
  background-color: #fff;
}
div.price-list div.white-button {
  margin: 7.5% 0 0;
}
div.grey-button {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  width: 100%;
  margin: 10% 0% 0%;
}
div.grey-button button {
  color: #fff;
  cursor: pointer;
  border: 0px;
  border-radius: 50px;
  text-align: center;
  background-color: #231541;
  width: 90%;
  font-size: 34px;
  padding: 2%;
}
div.payment-complete {
  padding: 8% 4%;
  margin: 0% 1% 0% 3%;
}
div.security-img img.img-payment-complete {
  max-width: 100%;
  height: auto;
  display: block;
  margin: auto;
}
div.open-app-complete {
  float: left;
  width: 100%;
  text-align: center;
  padding: 0% 0% 10%;
  margin: 100px 0 0 0;
}
.overlay-payment {
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  overflow: scroll;
  top: 0;
  left: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.9);
}
.overlay-payment.price-list-icon {
  background: inherit;
}
.overlay-payment.page-load {
  background: inherit;
}
.overlay-payment .overlay-text {
  text-align: center;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  max-width: 500px;
  transform: translate(-50%, -50%);
}
.overlay-payment.price-list-icon .overlay-text {
  width: 10%;
  max-width: 100px;
  background: inherit;
}
.overlay-payment.page-load .overlay-text {
  width: 10%;
  max-width: 100px;
  background: inherit;
}
.overlay-payment .overlay-text p {
  text-align: center;
  font-size: 40px;
}
.overlay-payment .overlay-text .loading {
  text-align: center;
}
img.auto-payment-check {
  margin-bottom: 2%;
  cursor: pointer;
  width: 6%;
}
div.payment-check-boxes {
  white-space: nowrap;
}
div.payment-upper-price {
  margin: 40px 0 0 0;
  text-align: center;
}
a.payment-upper-price-link {
  color: #7f58a5;
  font-size: 24px;
  text-decoration: underline;
}
div.auto-payment-description-outer {
  padding: 20px;
  display: flex;
  justify-content: center;
  margin-top: 5%;
}
div.auto-payment-description-inner {
  width: 85%;
  border-radius: 10px;
  box-shadow: 0px 0px 5px 3px #f2f2f2;
  text-align: left;
  font-size: 20px;
  flex-wrap: wrap;
  padding: 5% 5%;
  margin-bottom: 10%;
  color: #231541;
}
div.auto-payment-description-inner img.help-mark {
  margin-bottom: 2%;
  width: 6%;
}
div.auto-payment-description-inner span.what-is-auto-payment {
  font-weight: bold;
}
div.auto-payment-upper-price {
  width: 100%;
  margin-top: 5%;
  cursor: pointer;
}
div.price-picker {
  float: left;
  width: 6%;
  margin: 4% 0 5% 5%;
}
div.price-picker-page {
  float: left;
  width: 6%;
  margin: 6% 0 5% 5%;
}
div.price-picker img.radio-img {
  width: 100%;
}
div.price-picker-page img.radio-img {
  width: 100%;
}
div.auto-payment-upper-price-item {
  display: flex;
  width: 85%;
  font-weight: 400;
  text-align: left;
  font-size: 34px;
  flex-wrap: wrap;
  padding: 3%;
  color: #000000;
}
span.auto-payment-upper-price-update-title {
  font-size: 24px;
  display: inline-block;
  padding: 20px;
}
span.auto-payment-upper-price-update-list-title {
  font-weight: bold;
  font-size: 24px;
}
/* end payment page */
/* start card_selection page */
div.card-picker {
  float: left;
  width: 6%;
  margin: 5% 0 5% 5%;
}
div.card-picker img.radio-img {
  width: 100%;
}
.card-list * {
  margin: 0 auto;
}
div.card-item {
  width: 100%;
  margin-top: 5%;
  cursor: pointer;
}
div.card-item-outer {
  display: flex;
  justify-content: center;
  width: 85%;
}
div.card-item-inner {
  width: 90%;
  border-radius: 10px;
  box-shadow: 0px 0px 5px 3px #f2f2f2;
  font-weight: 400;
  text-align: center;
  font-size: 24px;
  flex-wrap: wrap;
  padding: 3%;
  color: #231541;
}
div.card-item-inner img.img-creditcard {
  width: 25%;
}
div.card-management {
  text-align: center;
  margin: 7% 0%;
}
div.card-management div {
  border: 2px solid;
  border-radius: 50px;
  width: 70%;
  margin: auto;
  font-size: 30px;
  padding-top: 2%;
}
div.add-card-button {
  border-color: #95cb5f;
  color: #95cb5f;
  cursor: pointer;
}
div.card-management img.card-management-img {
  width: 10%;
  padding-bottom: 2%;
  cursor: pointer;
}
div.remove-card-button-disabled, div.update-card-button-disabled {
  border-color: #cfcfcf;
  color: #cfcfcf;
}
div.remove-card-button {
  border-color: #ec535a;
  color: #ec535a;
}
div.update-card-button {
  border-color: #537CEC;
  color: #537CEC;
}
div.remove-card-button.setting, div.update-card-button.setting {
  padding: 2%;
  background: #FFFFFF 0% 0% no-repeat padding-box;
  border: 2px solid #7F58A5;
  border-radius: 100px;
  color: #7F58A5;
  cursor: pointer;
  margin-top: 7.5%;
}
div.remove-card-disabled {
  color: #fff;
  /* cursor: pointer; */
  /* border: 0px; */
  /* border-radius: 50px; */
  background-color: #cfcfcf;
  /* width: 90%; */
  /* height: 90px; */
  /* font-size: 34px; */
}
/* end card_selection page */
/* start payment_again page */
div.form-group input.readonly {
  background-color: #fff;
  border: 2px solid #eee;
}
/* end payment_again page */
/* start payment_pending page */
div.pending-title {
  text-align: center;
  width: 100%;
  padding: 5% 5% 200px 5%;
  font-size: 30px;
}
div.pending-title p {
  color: #231541;
  font-weight: bold;
  margin: 0;
}
div.pending-contents {
  text-align: center;
  width: 100%;
  padding: 5% 0 205px 0;
  font-size: 30px;
}
div.pending-contents .pending-text {
  color: #231541;
  font-weight: bold;
  margin: 0;
}
div.pending-contents .pending-text-red {
  color: #ec535a;
  font-weight: bold;
  margin: 0;
}
div.pending-annotation {
  text-align: center;
  width: 100%;
  padding: 100px 0 0 0;
  font-size: 25px;
}
div.pending-annotation p {
  color: #ec535a;
  margin: 0;
}
div.pending-button {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  width: 100%;
  margin: 10% 0% 0%;
}
div.pending-button img {
  width: auto;
}
div.pending-button button {
  color: #fff;
  cursor: pointer;
  border: 0px;
  border-radius: 50px;
  text-align: center;
  background-color: #96cb5f;
  width: 90%;
  font-size: 34px;
  padding: 2%;
}
div.auto-payment-upper-price-checked {
  background-color: #fffcd6;
}
span.setting-auto-payment {
  color: #ec535a;
}
/* end payment_pending page */
/* start auto_payment_update_complete */
div.auto-payment-upper-price-update-complete-title {
  padding: 0 0 255px 0;
}
/* end auto_payment_update_complete */
/* common css start */
div.no-border {
  border: none;
}
div.card-info {
  padding: 0 10px;
  margin: auto 0;
  background-color: #EEEEEE;
  opacity: 1;
}
div.card-info p {
  text-align: left;
  font-size: 25px;
  letter-spacing: 0px;
  color: #231441;
  opacity: 1;
  font-weight: bold;
  padding: 10px 0;
}
div.card-setting {
  padding: 10px;
  cursor: pointer;
  margin: 10px 0 40px;
}
div.card-setting.more-far {
  margin: 5% 0 0;
}
div.card-setting a {
  font-size: 30px;
  text-decoration: underline;
  letter-spacing: 0px;
  color: #7F58A5;
  opacity: 1;
  line-height: 45px;
}
div.subscription {
  margin: auto 0;
  padding: 0 10px;
}
div.subscription div.text-title {
  text-align: left;
  height: 37px;
  margin: 20px 0 10px;
}
div.subscription div.text-title p {
  font-size: 25px;
  letter-spacing: 0px;
  color: #231441;
  opacity: 1;
}
div.subscription div.text-info {
  text-align: left;
  height: 50px;
  margin-bottom: 10px;
  border-bottom: 1px solid #EEEEEE;
}
div.subscription div.text-info p {
  font-size: 30px;
  letter-spacing: 0px;
  color: #000000;
  opacity: 1;
}
div.subscription_note.text {
  padding: 0 10px;
  font-weight: normal;
}
div.subscription_note.text p {
  font-size: 22px;
  line-height: 33px;
}
div.subscription_note.text p.canceled {
  font-size: 22px;
  line-height: 33px;
  color: #7F58A5;
}
div.subscription_note.text p.canceled .underline{
  text-decoration: underline;
  cursor: pointer;
  color: #7F58A5;
}
.card-item-inner div.subscription_note.text_card {
  font-size: 20px;
  line-height: 22px;
  font-weight: bold;
  margin: 10px;
  text-align: center;
}
.payment-setting-model .modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.5);
  justify-content: center;
  align-items: center;
}

.payment-setting-model .modal-content {
  background: white;
  border-radius: 8px;
  text-align: center;
  height: 431px;
  width: 690px;
  margin: auto;
  color: #231441;
}
.payment-setting-model .modal-content .box-top {
  height: 100px;
}
.payment-setting-model .modal-content .box-text {
  margin: 0 auto;
  width: 425px;
  height: 90px;
  text-align: center;
}
.payment-setting-model .modal-content .box-text p {
  font-size: 30px;
  line-height: 45px;
  margin: 0;
}
.payment-setting-model .modal-content .box-middle {
  height: 50px;
}
.payment-setting-model .modal-buttons {
  display: flex;
  justify-content: space-around;
}

.payment-setting-model .btn {
  width: 300px;
  height: 70px;
  padding: 10px 20px;
  border: none;
  border-radius: 50px;
  font-size: 35px;
  line-height: 52px;
  cursor: pointer;
}

.payment-setting-model .btn.cancel {
  background-color: #2d1457;
  color: white;
}

.payment-setting-model .btn.confirm {
  background-color: white;
  color: #2d1457;
  border: 2px solid #2d1457;
}
button.btn.confirm.middle {
  width: 600px;
}
.security-table {
  width: 100%;
  border-collapse: collapse;
}

.security-text {
  width: 65%;
}
.security-text-box {
  vertical-align: middle;
  border-radius: 10px;
  box-shadow: 0px 0px 5px 3px #f2f2f2;
  text-align: center;
  font-size: 20px;
  padding: 5% 0% 3%;
  color: #231541;
}
.security-image {
  width: 35%;
  text-align: center;
  vertical-align: middle;
  padding: 10px;
}

.img-payment-complete {
  max-width: 100%;
  height: auto;
  display: block; /* tránh khoảng trắng dưới ảnh */
}
/* common css end */
/* for mobile */
.m-wrapper .payment-setting-model .modal-content {
  width: 314px;
  height: 167px;
}
.m-wrapper .payment-setting-model .modal-content .box-text {
  width: 85%;
  height: 40px;
}
.m-wrapper .payment-setting-model .modal-content .box-text p {
  font-size: 15px;
  line-height: 22px;
}
.m-wrapper .payment-setting-model .modal-content .box-top {
  height: 40px;
}
.m-wrapper .payment-setting-model .modal-content .box-middle {
  height: 15px;
}
.m-wrapper .payment-setting-model .btn {
  width: 130px;
  height: 34px;
  padding: 1%;
  font-size: 15px;
  line-height: 24px;
}
.m-wrapper .btn.confirm.middle {
  width: 90%;
}
.m-wrapper .wrapper-content .subscription_note.text p.canceled {
  font-size: 14px;
  line-height: 22px;
}
.m-wrapper {
  width: 100%;
}
/* start login page-m */
.m-wrapper div.bookmark-this-page {
  border-width: 1px;
  border-radius: 30px;
}
.m-wrapper div.bookmark-this-page img {
  width: 8%;
}
.m-wrapper div.bookmark-this-page p {
  font-size: 16px;
  padding-top: 4%;
}
.m-wrapper div.form-group input {
  font-size: 16px;
}
.m-wrapper div.form-group {
  margin-bottom: 0%;
}
.m-wrapper img.checkbox-img {
  width: 7%;
}
.m-wrapper label.checkbox-label {
  font-size: 16px;
}
.m-wrapper div.submit-disabled button {
  font-size: 18px;
}
.m-wrapper div.maintenance-link {
  font-size: 12px;
}
.m-wrapper div.info {
  font-size: 12px;
}
.m-wrapper #creditCardPaymentInfo img {
  width: 7%;
}
.m-wrapper p.errorMessage {
  font-size: 12px;
}
.m-wrapper div.modal img.close {
  width: 10%;
}
.m-wrapper div.modal h2.modal-title {
  font-size: 18px;
}
.m-wrapper div.modal h4.popup-content {
  font-size: 14px;
}
.m-wrapper form label {
  font-size: 16px;
}
/* end login page-m */
/* start forgot password page-m */
.m-wrapper div.forgot-password-info {
  font-size: 16px;
}
.m-wrapper div.submit-enabled button {
  font-size: 18px;
}
/* end forgot password page-m */
/* start price list page-m */
.m-wrapper div.price-list div.price-item {
  border-width: 1px;
}
.m-wrapper div.point {
  font-size: 16px;
}
.m-wrapper div.bonus-ribbon {
  background-size: 100%;
  background-repeat: no-repeat;
}
.m-wrapper div.campaign-info {
  font-size: 10px;
}
.m-wrapper div.rules {
  font-size: 12px;
}
.m-wrapper div.go-price-list div.go-price-list-button {
  font-size: 18px;
  border-width: 1px;
}
.m-wrapper div.card-setting {
  padding: 7px;
  cursor: pointer;
  margin: 7px 0 28px;
}
.m-wrapper div.card-info p {
  font-size: 16px;
}
.m-wrapper div.card-setting a {
  font-size: 18px;
  line-height: 25px;
}
.m-wrapper div.subscription div.text-title {
  height: 24px;
  margin: 10px 0 5px;
}
.m-wrapper div.subscription div.text-info {
  height: 32px;
  margin-bottom: 5px;
}
.m-wrapper div.subscription div.text-title p {
  font-size: 16px
}
.m-wrapper div.subscription div.text-info p {
  font-size: 18px;;
}
.m-wrapper .wrapper-content .subscription_note {
  margin-bottom: 10px;
  line-height: 24px;
}
.m-wrapper .wrapper-content .subscription_note p {
  font-size: 13px;
  line-height: 20px;
}
.m-wrapper .wrapper-content .subscription_note.text_card p {
  font-size: 12px;
  line-height: 14px;
}
/* end price list page-m */
/* start price list page-m */
.m-wrapper div.page-title {
  font-size: 16px;
}
.m-wrapper
  div.price-list
  div.price-item
  div.point-bonus-price
  div.price-item-point
  span {
  font-size: 16px;
}
.m-wrapper
  div.price-list
  div.price-item
  div.point-bonus-price
  div.price-item-bonus
  span {
  font-size: 14px;
}
.m-wrapper
  div.price-list
  div.price-item
  div.point-bonus-price
  div.price-item-amount {
  border-radius: 5px;
}
.m-wrapper
  div.price-list
  div.price-item
  div.point-bonus-price
  div.price-item-amount
  span {
  font-size: 16px;
}
.m-wrapper .product_not_auto_bank .banner-subscription {
  width: 100%;
  height: auto;
  max-width: 90%; /*345px; hoặc 100% nếu bạn muốn full chiều ngang */
}
.m-wrapper .product_not_auto_bank .banner-subscription img{
  width: 100%;
  height: auto;
  display: block;
}
.m-wrapper a.payment-upper-price-setting-link {
  font-size: 16px;
}
/* end price list page-m */
/* start payment page-m */
.m-wrapper div.acceptable-cards p {
  font-size: 16px;
}
.m-wrapper div.payment-info-error {
  font-size: 14px;
  border-width: 2px;
}
.m-wrapper form.payment-form label {
  font-size: 16px;
}
.m-wrapper img.help-mark {
  margin-bottom: 1%;
  width: 6%;
}
.m-wrapper div.security-code-info-inner img.help-mark {
  margin-bottom: 1%;
  width: 7%;
}
.m-wrapper div.security-code-info-inner span {
  font-size: 10px;
}
.m-wrapper div.security-code-info-inner span.what-is-security-code {
  font-size: 14px;
}
.m-wrapper .security-text p {
  font-size: 11px;
}
.m-wrapper div.security-code-info-inner p {
  font-size: 11px;
}
.m-wrapper p.payment-input-error {
  font-size: 12px;
  margin-bottom: -2%;
}
.m-wrapper img.card-next-time {
  width: 7%;
}
.m-wrapper div.price {
  font-size: 16px;
}
.m-wrapper p.price-point {
  font-size: 30px;
}
.m-wrapper p.pay-now-warning {
  font-size: 12px;
  margin-bottom: -15%;
}
.m-wrapper div.white-button button {
  font-size: 18px;
  border: 1px solid #231541;
}
.m-wrapper div.grey-button button {
  font-size: 18px;
}
.m-wrapper div.overlay-payment div.overlay-text p {
  font-size: 20px;
}
.m-wrapper div.price-picker {
  margin: 3.5% 0 5% 5%;
}
.m-wrapper div.price-picker-page {
  margin: 8% 0 5% 5%;
}
.wrapper-content .subscription_note {
  color: #EC535A;
  font-size: 25px;
  line-height: 37px;
  font-weight: bold;
  text-align: left;
  letter-spacing: 0px;
  opacity: 1;
}
div.price-list
  div.price-item
  div.point-bonus-price
  div.price-item-amount
  .symbol-yen {
  font-size: 18px;
}
@media only screen and (max-device-width: 1024px) {
  .m-wrapper
    div.price-list
    div.price-item
    div.point-bonus-price
    div.price-item-amount
    .symbol-yen {
    font-size: 11px;
  }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  .m-wrapper div.price-picker-page {
    margin: 4% 0 5% 5%;
  }
}
.m-wrapper div.auto-payment-upper-price-item {
  font-size: 18px;
}
.m-wrapper img.auto-payment-check {
  width: 7%;
}
.m-wrapper a.payment-upper-price-link {
  font-size: 16px;
}
.m-wrapper div.auto-payment-description-inner img.help-mark {
  margin-bottom: 1%;
  width: 7%;
}
.m-wrapper div.auto-payment-description-inner span {
  font-size: 10px;
}
.m-wrapper div.auto-payment-description-inner span.what-is-auto-payment {
  font-size: 14px;
}
.m-wrapper span.auto-payment-upper-price-update-title {
  font-size: 14px;
}
.m-wrapper span.auto-payment-upper-price-update-list-title {
  font-size: 14px;
}
.m-wrapper label#labelCardNextTime {
  font-size: 14px;
}
.m-wrapper label#labelAutoPayment {
  font-size: 14px;
}
/* end payment page-m */
/* start card_selection page-m */
.m-wrapper div.card-item-inner {
  font-size: 12px;
}
.m-wrapper div.card-management div {
  font-size: 16px;
}
.for-ipad p.pay-now-warning {
  margin-bottom: -12% !important;
}
.m-wrapper #autoPaymentInfo {
  width: 5%;
}
/* end card_selection page-m */
/* start payment_pending page-m */
.m-wrapper div.pending-title {
  padding: 5% 5% 100px 5%;
  font-size: 16px;
}
.m-wrapper div.pending-contents {
  padding: 5% 0 105px 0;
  font-size: 16px;
}
.m-wrapper div.pending-button img {
  width: 10%;
}
.m-wrapper div.pending-button img.for-ipad {
  width: 5%;
}
.m-wrapper div.pending-button button {
  font-size: 18px;
}
.m-wrapper div.pending-annotation {
  padding: 50px 0 0 0;
  font-size: 12px;
}
/* end payment_pending page-m */
/* start auto_payment_update_complete page-m */
.m-wrapper div.auto-payment-upper-price-update-complete-title {
  padding: 0 0 155px 0;
}
/* end auto_payment_update_complete page-m */
/* start priceList */
.wrap-list {
  position: relative;
}
.ic-wrap {
  position: absolute;
  top: -15px;
  z-index: 10;
  right: 25%;
}
.img-ic-info {
  width: 32px;
  height: 32px;
  background-color: transparent;
  border: none;
}
.list-types {
  display: flex;
  /* max-width: 735px; */
  width: 100%;
  position: relative;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  position: relative;
  z-index: 1;
  margin: 10px auto;
  font-size: 17px;
  border: 1px solid #fff;
  border-radius: 5px;
  color: #000;
  background-color: #cccbd096;
  padding: 1px;
}
.list-types > input {
  display: none;
}
.list-types label {
  flex: 1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  margin: 1px;
  font-weight: normal;
  line-height: 22px;
  padding: 3px;
}
.list-types > input:checked + label {
  color: #000;
  font-weight: 500;
  background-color: #a18fb9;
  border-radius: 5px;
}
.list-types > input:nth-of-type(1):checked ~ label:last-of-type:before {
  transform: translateX(calc(0% + 0px));
}
.list-types > input:nth-of-type(2):checked ~ label:last-of-type:before {
  transform: translateX(calc(100% + 0px));
}
.list-types > input:nth-of-type(3):checked ~ label:last-of-type:before {
  transform: translateX(calc(200% + 0px));
}
.list-types label:last-of-type:before {
  content: "";
  display: block;
  max-width: calc(33.3333333333% - 0px);
  margin: 0px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  transform: translateX(0);
}
.list-types label {
  transition: color 250ms cubic-bezier(0, 0.95, 0.38, 0.98);
}
.list-types label:before {
  transition: all 250ms cubic-bezier(0, 0.95, 0.38, 0.98);
}
.list-types label:not(:last-child) {
  border-right: 1px solid #f5f5f58f;
}
.list-box{
  display: none;
}
.list-box .container {
  font-size: 15px;
}
h4.p-expired {
  color: red;
  font-size: 15px;
  text-align: center;
}
.m-wrapper div.page-title {
  padding: 2%;
}
.product_not_auto_bank .page-title {
  padding: 30px 30px;
}
.product_not_auto_bank .page-title-subscription {
  padding: 0px 30px;
}
.product_not_auto_bank .page-title .bounder {
  width: 630px;
}
.product_not_auto_bank .banner-subscription {
  margin: 0 auto;
  width: 690px;
  height: 570px;
  position: relative;
}
.subscription_warning_banner {
  margin: 0 auto;
  width: 100%;
  height: auto;
  position: relative;
}
.banner-close {
  position: absolute;
  top: 0px;
  right: 20px;
  background: transparent;
  border: none;
  font-size: 46px;
  cursor: pointer;
  color: #EC535A;
}
.subscription_warning_banner .banner-close {
  right: 55px;
  font-size: 37px;
}
.subscription_warning_banner .banner-close.page_setting {
  right: 32px;
}
.subscription_warning {
  border: 3px solid #EC535A;
  background: #FCEEEE 0% 0% no-repeat padding-box;
  margin: 5% 5% 0;
}
.subscription_warning.page_setting {
  margin: 2%;
}
.subscription_warning .text {
  text-align: center;
  margin: 5% 9%;
}
.subscription_warning .text p {
  color: #EC535A;
  font-size: 25px;
  line-height: 37px;
  margin: 0px;
}
.subscription_warning .text p a{
  color: #EC535A;
  cursor: pointer;
  text-decoration: underline;
}
.subscription_warning_banner .banner-close {
  right: 55px;
  font-size: 37px;
}
.product_auto_bank .page-title {
  font-size: 30px;
  font-weight: bold;
}
.page-title .bounder {
  width: 100%;
  height: 110px;
  background-color: #FFFCD6;
  border: 2px solid #7F58A5;
  border-radius: 100px;
  opacity: 1;
  margin: 0 auto;
  cursor: pointer;
}
.page-title .bounder-subscription {
  background-color: #7F58A5;
  border: 2px solid #7F58A5;
  height: 90px;
}
.bounder .title {
  letter-spacing: 0px;
  color: #7F58A5;
  opacity: 1;
  margin: auto;
  padding: 30px;
  font-weight: bold;
  font-size: 35px;
}
.bounder .title img {
  padding-bottom: 10px;
}
.bounder-subscription .title {
  color: #fff;
  padding: 20px;
  font-weight: normal;
}
.product_auto_bank .page-title {
  text-align: center;
  letter-spacing: 0px;
  padding: 17px;
}
.page-title .bounder_01 {
  width: 360px;
  height: 90px;
  color: #231441;
  margin: 10px auto;
}
.page-title .bounder_02 {
  width: 360px;
  height: 45px;
  color: #7F58A5;
  opacity: 1;
  font-size: 30px;
  margin: 30px auto 40px;
  background: #FFFCD6 0% 0% no-repeat padding-box;
  cursor: pointer;
}
.page-title .bounder_02 .div01 img {
  margin-bottom: 5px;
  margin-right: 5px;
}
.page-title .bounder_01 .sp_red {
  color: #EC535A;
}
@media screen and (max-width: 767px) {
.ic-wrap {
  top: -9px;
  z-index: 10;
  right: 25%;
}
.img-ic-info {
  width: 25px;
  height: 25px;
}
.list-box .container {
  font-size: 13px;
}
h4.p-expired {
  font-size: 13px;
}
.product_not_auto_bank .page-title .bounder {
  width: 675px;
}
}
.m-wrapper .subscription_warning {
  border: 2px solid #EC535A;
}
.m-wrapper .subscription_warning .text p {
  text-align: center;
  color: #EC535A;
  font-size: 15px;
  line-height: 22px;
}
.m-wrapper .banner-close {
  font-size: 28px;
  right: 12px;
}
.m-wrapper .subscription_warning_banner .banner-close {
  right: 35px;
}
.m-wrapper .subscription_warning_banner .banner-close.page_setting {
  right: 21px;
}
.m-wrapper .page-title .bounder_01 {
  width: 200px;
  height: 40px;
}
.m-wrapper .page-title .bounder_02 {
  width: 200px;
  height: 26px;
  font-size: 16px;
  margin: 20px auto 12px;
}
.m-wrapper .page-title .bounder_02 .div01 {
  padding-top: 2px;
}
.m-wrapper .page-title .bounder_02 .div01 img {
  width: 15px;
  height: 15px;
}
.m-wrapper .bounder {
  height: 57px;
}

.m-wrapper .bounder .title {
  width: 90%;
  height: 100%;
  margin: auto;
  padding: 15px 0px;
  font-weight: bold;
  font-size: 18px;
}
.m-wrapper .bounder-subscription {
  height: 45px;
}
.m-wrapper .bounder-subscription .title {
  font-weight: normal;
  padding: 7px 0px;
}
.m-wrapper .bounder .title img {
  padding-bottom: 3px;
  width: 25px;
}
.m-wrapper.for-ipad .bounder {
  height: 60px;
}
.m-wrapper.for-ipad .bounder .title {
  margin: 15px auto;
}
.m-wrapper .product_not_auto_bank .page-title .bounder {
  width: 95%;
}
.m-wrapper .product_not_auto_bank .page-title .bank-recommend img {
  width: 87%;
}
.m-wrapper .list-types label {
  font-size: 15px;
}
.m-wrapper .product_not_auto_bank div.page-title {
  padding: 5px 25px 10px;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container {
width: min(1200px, 98%);
margin: 0px auto;
padding: 0px;
}
ul {
  margin: 0 10px;
}
.history {
position: relative;
list-style: none;
border-bottom: 1px solid #c9c9c94a;
padding: 8px 0;

&:last-of-type {
  border-bottom: 1px solid #c9c9c94a;
}
}
.history .p-name, .history .p-point {
color: #6e38b6;
font-size: 16px;
}
.p-name {
float: left;
}
.p-point {
float: right;
}
.p-created {
clear: both;
margin: 0px;
color: #938383cf;
}
@media screen and (max-width: 767px) {
.p-created {
  font-size: 11px;
}
}
/* end priceList */