@charset "utf-8";
:root {
    /*Light mode background: #191919;*/
    --luckynumber-body-bg-light:#ffffff;
    --luckynumber-body-color-light:#222222;
    --luckynumber-body-bgimage-light:url(https://www.siamphone.com/images/bg-horo4.jpg);
    --luckynumber-cover-gray-light:#fcfff4;
    --luckynumber-cover-white-light:#ffffff;
    --luckynumber-detail-bg-light:#f1f1e3;
    --luckynumber-detail-color-light:#020202;
    --luckynumber-itemnumber-bg-light: #ffffff;
    --luckynumber-itemnumber-shadow-light:0 0 10px #f1f1e3;
    --luckynumber-itemnumber-shadowhover-light:0 0 10px #e7e7e7;
    --luckynumber-simicon-light:none;
    --luckynumber-input-border-light:1px dotted #ccc;
    --luckynumber-header-before-light:#ebebeb;
    --luckynumber-blackwhite-color-light:#000000;
    --luckynumber-grade-bg-light:#373737;
    --luckynumber-whiteblack-color-light:#ffffff;
    --luckynumber-cate-bg-light:#f4f5e7 url(https://www.siamphone.com/images/icon-square-2023.png) no-repeat;

    /*dark-mode styles*/
    --luckynumber-body-bg-dark:#222222;
    --luckynumber-body-color-dark:#efefef;
    --luckynumber-body-bgimage-dark:url(https://www.siamphone.com/images/luckynumber/bg-luckynumber.png);
    --luckynumber-cover-gray-dark:#222222;
    --luckynumber-cover-white-dark:#222222;
    --luckynumber-detail-bg-dark:#000000;
    --luckynumber-detail-color-dark:#ffffff;
    --luckynumber-itemnumber-bg-dark: #222222;
    --luckynumber-itemnumber-shadow-dark: none;
    --luckynumber-itemnumber-shadowhover-dark:none;
    --luckynumber-simicon-dark:invert(1);
    --luckynumber-input-border-dark:1px solid #5f5f5f;
    --luckynumber-header-before-dark:#5f5f5f;
    --luckynumber-blackwhite-color-dark:#ffffff;
    --luckynumber-grade-bg-dark:#ffffff;
    --luckynumber-whiteblack-color-dark:#000000;
    --luckynumber-cate-bg-dark:#333333 url(https://www.siamphone.com/images/icon-square-2023-wh.png) no-repeat;
}

@media(prefers-color-scheme: dark){
    :root {
        --luckynumber-body-bg:var(--luckynumber-body-bg-dark);
        --luckynumber-body-color:var(--luckynumber-body-color-dark);
        --luckynumber-body-bgimage:var(--luckynumber-body-bgimage-dark);
        --luckynumber-cover-gray:var(--luckynumber-cover-gray-dark);
        --luckynumber-cover-white:var(--luckynumber-cover-white-dark);
        --luckynumber-detail-bg:var( --luckynumber-detail-bg-dark);
        --luckynumber-detail-color:var(--luckynumber-detail-color-dark);
        --luckynumber-itemnumber-bg:var(--luckynumber-itemnumber-bg-dark);
        --luckynumber-itemnumber-shadow:var(--luckynumber-itemnumber-shadow-dark);
        --luckynumber-itemnumber-shadowhover:var(--luckynumber-itemnumber-shadowhover-dark);
        --luckynumber-simicon:var(--luckynumber-simicon-dark);
        --luckynumber-input-border:var(--luckynumber-input-border-dark);
        --luckynumber-header-before:var(--luckynumber-header-before-dark);
        --luckynumber-blackwhite-color:var(--luckynumber-blackwhite-color-dark);
        --luckynumber-grade-bg:var(--luckynumber-grade-bg-dark);
        --luckynumber-whiteblack-color:var(--luckynumber-whiteblack-color-dark);
        --luckynumber-cate-bg:var(--luckynumber-cate-bg-dark);
    }
}

@media(prefers-color-scheme: light){
    :root {
        --luckynumber-body-bg:var(--luckynumber-body-bg-light);
        --luckynumber-body-color:var(--luckynumber-body-color-light);
        --luckynumber-body-bgimage:var(--luckynumber-body-bgimage-light);
        --luckynumber-cover-gray:var(--luckynumber-cover-gray-light);
        --luckynumber-cover-white:var(--luckynumber-cover-white-light);
        --luckynumber-detail-bg:var( --luckynumber-detail-bg-light);
        --luckynumber-detail-color:var(--luckynumber-detail-color-light);
        --luckynumber-itemnumber-bg:var(--luckynumber-itemnumber-bg-light);
        --luckynumber-itemnumber-shadow:var(--luckynumber-itemnumber-shadow-light);
        --luckynumber-itemnumber-shadowhover:var(--luckynumber-itemnumber-shadowhover-light);
        --luckynumber-simicon:var(--luckynumber-simicon-light);
        --luckynumber-input-border:var(--luckynumber-input-border-light);
        --luckynumber-header-before:var(--luckynumber-header-before-light);
        --luckynumber-blackwhite-color:var(--luckynumber-blackwhite-color-light);
        --luckynumber-grade-bg:var(--luckynumber-grade-bg-light);
        --luckynumber-whiteblack-color:var(--luckynumber-whiteblack-color-light);
        --luckynumber-cate-bg:var(--luckynumber-cate-bg-light);
    }
}

[color-scheme="light"]{
    --luckynumber-body-bg:var(--luckynumber-body-bg-light);
    --luckynumber-body-color:var(--luckynumber-body-color-light);
    --luckynumber-body-bgimage:var(--luckynumber-body-bgimage-light);
    --luckynumber-cover-gray:var(--luckynumber-cover-gray-light);
    --luckynumber-cover-white:var(--luckynumber-cover-white-light);
    --luckynumber-detail-bg:var( --luckynumber-detail-bg-light);
    --luckynumber-detail-color:var(--luckynumber-detail-color-light);
    --luckynumber-itemnumber-bg:var(--luckynumber-itemnumber-bg-light);
    --luckynumber-itemnumber-shadow:var(--luckynumber-itemnumber-shadow-light);
    --luckynumber-itemnumber-shadowhover:var(--luckynumber-itemnumber-shadowhover-light);
    --luckynumber-simicon:var(--luckynumber-simicon-light);
    --luckynumber-input-border:var(--luckynumber-input-border-light);
    --luckynumber-header-before:var(--luckynumber-header-before-light);
    --luckynumber-blackwhite-color:var(--luckynumber-blackwhite-color-light);
    --luckynumber-grade-bg:var(--luckynumber-grade-bg-light);
    --luckynumber-whiteblack-color:var(--luckynumber-whiteblack-color-light);
    --luckynumber-cate-bg:var(--luckynumber-cate-bg-light);
}

[color-scheme="dark"]{
    --luckynumber-body-bg:var(--luckynumber-body-bg-dark);
    --luckynumber-body-color:var(--luckynumber-body-color-dark);
    --luckynumber-body-bgimage:var(--luckynumber-body-bgimage-dark);
    --luckynumber-cover-gray:var(--luckynumber-cover-gray-dark);
    --luckynumber-cover-white:var(--luckynumber-cover-white-dark);
    --luckynumber-detail-bg:var( --luckynumber-detail-bg-dark);
    --luckynumber-detail-color:var(--luckynumber-detail-color-dark);
    --luckynumber-itemnumber-bg:var(--luckynumber-itemnumber-bg-dark);
    --luckynumber-itemnumber-shadow:var(--luckynumber-itemnumber-shadow-dark);
    --luckynumber-itemnumber-shadowhover:var(--luckynumber-itemnumber-shadowhover-dark);
    --luckynumber-simicon:var(--luckynumber-simicon-dark);
    --luckynumber-input-border:var(--luckynumber-input-border-dark);
    --luckynumber-header-before:var(--luckynumber-header-before-dark);
    --luckynumber-blackwhite-color:var(--luckynumber-blackwhite-color-dark);
    --luckynumber-grade-bg:var(--luckynumber-grade-bg-dark);
    --luckynumber-whiteblack-color:var(--luckynumber-whiteblack-color-dark);
    --luckynumber-cate-bg:var(--luckynumber-cate-bg-dark);
}


@media only screen and (min-width: 992px) {
    body{/*background:red; */}
    .container{max-width: 1100px;}
}

@media (min-width: 1200px) {
    .container {
      max-width: 1200px;
      padding:0;
    }
}
.mode-switch {
    display: block !important;
}
a{
    text-decoration: none;
}
hr{
    border-top: 1px dashed #e4e4e4;
    margin:20px 0;
}
body{
    font-family: 'Kanit';
    font-size: 1rem;
    font-weight: 400;
	color:var(--luckynumber-body-color);
    background:var(--luckynumber-body-bg);
}

.custom {
    /* height: calc(100vh - 60px); */
}
.horo-box{
    font-family: 'Kanit';
	font-weight: 400;
	border-radius: 30px;
	text-align:center;
    background: rgb(255 255 255 / 10%);
    color: #ffffff;

    padding: 0 40px 10px;
    padding: 0 30px 10px;
    font-size: 1.25rem;
    line-height: 2rem;
    box-shadow: 0 0 25px #3c0301;
}
.horo-box .text-center{
	align-items: center;
	justify-content: center;
}
.horo-box h1{
    color: #ffffff;
    text-align: center;
    font-size: 3rem;
    padding-top: 50px;
    font-weight: 600;

    color: #D5AD6D;
    background: -webkit-linear-gradient(#ac874f, transparent), -webkit-linear-gradient(top, rgba(213,173,109,1) 0%, rgba(213,173,109,1) 26%, rgba(226,186,120,1) 35%, rgba(163,126,67,1) 45%, rgba(145,112,59,1) 61%, rgba(213,173,109,1) 100%);
    background: -o-linear-gradient(transparent, transparent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 
    
    letter-spacing: 1px;
    background-image: linear-gradient( to right, #462523 0, #cb9b51 22%, #f6e27a 40%, #f6f2c0 50%, #f6e27a 55%, #cb9b51 78%, #462523 100% );
    color: transparent;
    -webkit-background-clip: text;
    position:relative;
}
.horo-box h1:after {
    content: attr(data-text);
    background: -webkit-linear-gradient(-180deg, #3399ff, #82ed89, #3399ff);
    -webkit-background-clip: text;
    -webkit-text-stroke: 5px transparent;
    position: absolute;
    z-index: -1;
    width: 100%;
    height: auto;
    text-align: center;
    left: 0;
    top: 0;
}

.item-cover{
	width:100%;
	position: fixed;
    z-index: 999;
	top: 0;
	right: 0;
	background: rgb(53 53 53 / 98%);
	height: calc(100vh - 60px);
	height:100%;
	transition: background 0.3s;

}
.item-star{
	width: 100%;
  height: 300px;
  border-radius: 3px;
  position: relative;
  background:url(https://www.siamphone.com/images/luckynumber/star.png) no-repeat;
  background-position:center;
  background-size: 350px;
  margin-top:7%
}
.item {
  width: 100%;
  height: 300px;
  border-radius: 3px;
  position: relative;
  background:url(https://www.siamphone.com/images/luckynumber/world.png) no-repeat;
  background-position:center;
  background-size: 350px;
  animation: loader-rotate 10s ease-in-out infinite;
 }

@keyframes loader-rotate {
  0% {
    transform: rotate(0); }
  100% {
    transform: rotate(360deg); } 
}

.number {
    text-align:center;
    color: #fff;
	font-family: 'Kanit';
    font-size: 20px;
    font-weight: 300;
    margin-top:0;
}

.horo-box p{
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    margin-bottom:50px;
    color: #d0a456;
}
.horo-box label{
    font-weight: 500;
    margin-bottom:10px;
}
.phone-number input{
    width: 50px;
    height: 50px;
    text-align: center;
    font-family: 'Roboto';
    font-weight: bold;
    font-size: 28px;
    border: 1px solid #ffffff;
    color: #000000;
    border-radius:.25rem;
    vertical-align: sub;
}
.date-form{
    max-width: 350px;
    width: 50%;
    margin: 0 auto;
}
.date-form input{
    width:60%;
    height: 50px;
    text-align: left;
    font-family: 'Kanit';
    font-weight: 300;
    font-size: 20px;
    border: 1px solid #ffffff;
    border-right:0;
    color: #000000;
    border-radius:0.25rem 0.25rem !important;
    margin: 0 auto;
    background: #ffffff url(https://www.siamphone.com/images/luckynumber/icon-calendar.png) center center no-repeat;
    background-position: 95%;
    background-size: 25px;
}
.date-form .input-group-text{
    height:50px;
    border-left:0;
    background:#ffffff;
    border-color:#ffffff;
    border-radius: 0 .25rem .25rem 0;
}
.date-form .form-control:focus{
    border-color:#ffffff;
    box-shadow: none;
}
.date-form i.icon-calendar{
    width:30px;
    height:30px;
    display:inline-block;
    background: url(https://www.siamphone.com/images/luckynumber/icon-calendar.png) center center no-repeat;
    background-size: 25px;
}
.btn-reset{
    display: block;
    margin: 10px 0 30px;
    color: #f3f3f3;
    font-size: 14px;
}
.btn-reset i{
    font-weight: 700;
    margin-right: 5px;
    font-size: 14px;
}
.btn-reset:hover{
    color:#ffffff;
    text-decoration: underline;
}
.submit-number{
	font-size: 1.5rem;
	font-weight: 400;
	width: 35%;
    min-width:240px;
	display: block;
	/*background: linear-gradient(to right, #4096ee 0%,#2a84e1 100%);*/
    background:#cc0000;
	color: #ffffff;
	text-align: center;
	text-decoration: none;
	border: 0;
	border-radius: 60px;
	padding: 10px 10px;
	margin: 40px auto 40px;
	font-family: 'Kanit';
}
.submit-number:hover{color:#fff;text-decoration: none;background:linear-gradient(to bottom, #e02203 0%,#bd0000 100%);}
/* footer */
.container-footer{background:#191919;}
#footer {
    margin: 10px auto 0;
}
#footer_copyright {
    padding: 0;
    width: 100%;
    font: 10px/30px Arial;
    text-transform: uppercase;
    display: inline-block;
}
#footer_copyright .siamphone_logo {
    margin: 0 10px;
    float: left;
}
#footer_copyright .siamphone_logo img {
	vertical-align:sub;
}
#footer_copyright em.copysign {
    font-size: 12px;
    float: left;
    font-family: Arial;
    margin-right: 5px;
    font-style: normal;
}
#footer_copyright p.right_reserved_text {
    float: left;
    margin: 0;
    color: #8c8c8c;
}
#footer_copyright p.social_network {
    float: right;
    margin: 0 10px;
    color: #8c8c8c;
}
#footer_copyright p.social_network a {
    margin: 0 5px;
    color: #8c8c8c;
}

.breadcrumb{
    padding: 0 0 5px;
    margin: 0 0 0;
    color: grey;
    position: relative;
    line-height: 25px;
	overflow:hidden;
	font-size:14px;
	font-weight:300;
}
.breadcrumb a{
	color: gray;
}
.breadcrumb em{
    font-size: 14px;
    margin: 0;
    vertical-align: baseline;
    font-weight: 300;
	font-style:normal;
	padding-left:6px;
}
.breadcrumb ul{
	padding: 0 0 0 10px;
}
.breadcrumb ul li{
	display:inline-block;
	position:relative;
}
.breadcrumb li:before {
    content: "»";
    display: inline-block;
    height: 18px;
    margin-left: 0;
    margin-right: 8px;
    width: 10px;
    padding: 0px 6px;
    font-size: 14px;
}
.breadcrumb li:first-child:before {
	content:none;
}

.block-item{
    /*border: 1px solid #eee;
    padding: 15px 20px 0;
    border-radius: 0;*/
    border-bottom:20px
}
.block-item h4{
    font-size: 1.3rem;
    display: inline-block;
    padding: 4px 15px 5px;
    background: var(--luckynumber-itemblockh4-bg);
    color: var(--luckynumber-itemblockh4-color);
    line-height: 20px;
    border-radius: 30px;
}
.btn, .btn-renew,.btn-newnumber{
    display: inline-block;
    text-align: center;
    font-family: 'Kanit';
    font-size: 23px;
    line-height: 28px;
    color: #ffffff;
    border-radius: 10px;
    background: linear-gradient(to bottom, #4096ee 0%,#2a84e1 100%);
    /* background:linear-gradient(to bottom, #ff3c1b 0%,#cc0000 100%); */
    padding: 13px 15px 13px;
    margin-top: 5px;
    /* float: right; */
    min-width: 230px;
    font-weight: 500;
   /* width: 31%;*/
   border:0;
   display:block;
   margin: 20px auto 0;
}
.btn-renew{margin-right:25px;margin-top:30px;}
.btn-renew:hover,.btn-newnumber:hover,.btn:hover{
    color:#ffffff;
    background:linear-gradient(to bottom, #2a84e1 0%,#1f7bd8 100%);
}
.btn-search{
    margin: 20px auto 0;
    display: block;
    width: 250px;
    float:none;
    background:#cc0000;
}

/*header-widget */
.header-widget{
	text-align: center;
	position:relative;    
    margin: 10px 0 10px;
}
 .header-widget-left{
 	text-align: left;
	position:relative; 
    margin: 0 0 10px;	
}
.header-widget:before ,.header-widget-left:before{
	content: "";
	height: 1px;
	background:var(--luckynumber-header-before);
	display: block;
	position: absolute;
	top: 53%;
	width: 100%;
	z-index: 8;
}		
.header-widget:before {
	/* height:5px; */
	/* background:#ebebeb; */
	/* top:52%; */
}		
.header-widget h2, .header-widget-left h2{
	font-size: 2.5rem;			
	background: var(--luckynumber-body-bg);
    color:var(--luckynumber-blackwhite-color);
	z-index: 9;
	position: relative;
	display: inline-block;
	margin: 0 auto;
	padding: 0 10px;
	line-height:50px;
}
.header-widget-left h2{
	padding: 0 10px 0 0;
}
.header-widget h2 a, .header-widget-left h2 a{
    color:var(--mainbrand-title-color);
}
.header-widget-left a.viewall{
    text-align: right;
    margin: 13px 0 0 0;
    padding: 5px 15px 5px;
    float: right;
    font-size: 14px;
    color: #fff;
    background: #222222;
    line-height: 20px;
    border-radius: 30px;
    font-family: 'Kanit';
    z-index: 9;
    position: relative;
}
.header-widget-left h2{
    font-weight: 600;
}
.header-widget-left:before{
    /* content:none; */
}
h3{
    font-size:26px;
    font-weight: 600;
}

/* form */
.cover-gray{
    padding: 45px 30px 15px;
    background: #f4f4f4;
    border-radius: 22px;
    margin-left: 0;
    margin-right: 0;

    background: #fcfff4; 
    background: -moz-radial-gradient(center, ellipse cover,  #fcfff4 0%, #f0f0e1 100%);
    background: -webkit-radial-gradient(center, ellipse cover,  #fcfff4 0%,#f0f0e1 100%);
    background: radial-gradient(ellipse at center,  #fcfff4 0%,#f0f0e1 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#f0f0e1',GradientType=1 );

    background: var(--luckynumber-detail-bg);
    color: var(--luckynumber-detail-color);
}
.contact-form{
    position:relative;
    padding: 50px 50px 50px;
    border-radius: 22px;
    /* border: 1px solid #000; */
    background: #f4f4f4;

    background: #fcfff4;
    background: -moz-radial-gradient(center, ellipse cover,  #fcfff4 0%, #f0f0e1 100%);
    background: -webkit-radial-gradient(center, ellipse cover,  #fcfff4 0%,#f0f0e1 100%);
    background: radial-gradient(ellipse at center,  #fcfff4 0%,#f0f0e1 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#f0f0e1',GradientType=1 );

    background: var(--luckynumber-detail-bg);
    color: var(--luckynumber-detail-color);
}
.contact-form h3{
    margin-bottom: 20px;
    /* padding:  0 30px; */
}
.contact-form form{
    background: var(--luckynumber-itemnumber-bg);
    padding: 50px 50px;
    border-radius: 8px;
}
.contact-form label{
    font-weight:500;    
    font-size: 18px;
    padding: 5px 0;
}
.contact-form input , .contact-form textarea{
    border:var( --luckynumber-input-border);
    border-radius: 8px;
    padding: 8px 15px;
    width:100%;
    background-color: var(--luckynumber-itemnumber-bg);
    color:var(--luckynumber-body-color);
}
.check_location{
    font-size: 14px;
    font-weight: 400;
    color: #F44336;
    position: absolute;
    left: 0;
    bottom: -5px;
}
.check_location:hover{
    font-weight: 500;
    color: #cc0000;
}

.wrap-selectnumber{
    margin:30px 0 0 0;
    padding:0;
}


.block-line-oa{
    padding: 15px 0;
    border-radius: 18px;
    margin: 0;
    background: var(--luckynumber-detail-bg);
    color: #20c765;
    width: 132px;
    text-align: center;
    position: relative;
    width: 100%;
    right: 0;
    margin: 50px 0 0;
    display: inline-flex;


    margin: 50px auto;
    display: block;
    max-width: 350px;
}
.line-oa-name{
    display: inline-block;
    padding: 15px 10px 15px;
    width: 50%;
}
.line-oa-name h6{
    font-size: 20px;
    font-weight: 600;
    padding: 5px 10px 0;
    margin: 0;
    color: #000;
    color: var(--luckynumber-detail-color);
}
.line-oa-name p{
    margin: 5px 0 0;
    font-family: 'Roboto';
    font-weight: 500;
}
.line-oa-name a{
    font-family: 'Roboto';
    font-weight: 500;
    letter-spacing: 0.5px;
    font-size: 14px;
    margin: 0;
    background: #06c755;
    color: #fff;
    border-radius: 30px;
    display: inline-block;
    padding: 3px 5px;
    margin-top: 5px;
}
.line-oa-image img{
    width:100%;
    height:auto;
    border-radius: 7px;
    max-width: 120px;
}
.line-oa-image{
    display:inline-block;
    padding: 0 0 15px ;
    width: 50%;
}


/* wrapper-lastreview */
.big_block  .review{
	margin-bottom:15px;
}
.big_block .review img{
	width:100%;
	height:auto;
    border-radius: 8px;
}
.big_block .review p.name {
    margin: 15px 0;
}
.big_block .review a{
    font-size: 18px;
    line-height:28px;
    font-weight:300;
    color:var(--mainbrand-body-color);
}

.item-number{
    padding: 20px 15px 20px;
    border-radius: 13px;
    border: 1px solid ;
    position:relative;
    margin-bottom:30px;

    background-color: var(--luckynumber-itemnumber-bg);
    border-color: #6e6e6e !important;
    /* box-shadow: 0 0 2px #5e5e5e; */
}
.item-number:hover {
    box-shadow: var(--luckynumber-itemnumber-shadowhover);
}
.item-number .number{
    text-align: center;
}
.item-number .number span{
    width: 27px;
    height: 27px;
    display:inline-block;
    text-align: center;
    font-family: 'Roboto';
    font-weight: bold;
    font-size: 22px;
    line-height: 28px;
    color: #ffffff;
    border-radius: 6px;
    background:#232323;
}
.item-number .number strong{
    display: inline-block;
    text-align: center;
    font-family: 'Roboto';
    font-weight: bold;
    font-size: 26px;
    line-height: 28px;
    color: #ffffff;
    border-radius: 23px;
    background: #232323;
    padding: 8px 12px 7px;
    margin: 10px 0 0;
    min-width: 200px;
    letter-spacing: 2px;
}


.item-select{
    border:0 solid #121212 !important;
    box-shadow: var(--luckynumber-itemnumber-shadow);
}
.item-select .grade h2 {
    background: var(--luckynumber-grade-bg);
    color: var(--luckynumber-whiteblack-color) !important;
}
.item-select .sim-category{
    white-space: unset;
    width: 100%;
    margin: 20px 0 0 0;
    line-height: 30px;
}
.sim-detail{
    margin-top: 8px
}
.sim-detail p{
    font-size: 20px;
    font-weight: 600;    
    margin: 0 0 10px 0;
    line-height: 16px;

    display:none;
}
.sim-detail ul{
    padding: 0 0 0 15px;
}
.sim-detail ul li{
    font-size: 18px;
    line-height: 42px;
    font-weight: 300;
    list-style-type:none ;
}
.sim-detail ul li strong{
    font-weight: 500;
}
.sim-detail ul li span{
    font-family: 'roboto', "Kanit";
    font-weight: 600;
}
.sim-detail ul li em{
    display: inline-block;
    width:18px;
    height:18px;
    vertical-align: inherit;
    margin-right:8px;
    background-size: 100%;
    background-repeat: no-repeat;
    filter:var(--luckynumber-simicon);
}
em.icon-sim{
    background-image: url(//www.siamphone.com/images/luckynumber/icon/icon-sim.png);
}
em.icon-network{
    background-image: url(//www.siamphone.com/images/luckynumber/icon/icon-network.png);
}
em.icon-category{
    background-image: url(//www.siamphone.com/images/luckynumber/icon/icon-cate.png);
}
em.icon-price{
    background-image: url(//www.siamphone.com/images/luckynumber/icon/icon-price.png);
}
.sim-detail ul li em.icon-package{
    background-image: url(//www.siamphone.com/images/luckynumber/icon/icon-package.png);
    vertical-align: middle;
}
.sim-detail ul li .iconprice{
    color: #097b0d;
    font-weight: 600;
    font-size: 20px;
    font-family: 'Roboto', "Kanit";
}
.sim-detail ul li .discount{
    font-size: 12px;
    font-weight: 400;
    color: var(--luckynumber-body-color);
    position: relative;
    padding-left: 8px;
}
.sim-detail ul li .discount:before{
    content: "";
    position: absolute;
    left: 14px;
    top: 50%;
    background: repeating-linear-gradient(45deg,#bc2929,#bc2929 1px);
    transform: rotate(-20deg);
    width: 45px;
    height: 2px;
    opacity: 0.7;
}
.dtac{border-color:#00ADEE;}
.dtac .number strong{
    background: #00acee;
    color:#fff;
}

.ais{border-color:#7EB439;}
.ais .number strong{
    background: #7EB439;
    color:#fff;
}

.true{border-color:#EE3124;}
.true .number strong{
    background: #EE3124;
    color:#fff;
}
.sim-type{
    margin: 0;
    font-size: 14px;
    font-weight: bold;

    display: none;
}
.grade{
    text-align: center;
}
.grade h2{
    font-size: 35px;
    margin: 10px 0 5px 0;
    line-height: 40px;
    font-family: 'Roboto';
    font-weight: 600;

    width: 60px;
    height: 60px;
    display: block;
    margin: 0 auto;
    background: #f2f2f2;
    padding: 10px 5px;
    border-radius: 30px;
    color: #9c9c9c !important;
}
.ais .grade h2{color:#7EB439;}
.dtac .grade h2{color:#00acee;}
.true .grade h2{color:#EE3124;}
.grade p{
    font-size: 15px;
    margin: 0;
}
.price {
    text-align: center;
    display: block;
}
.price a{
    font-weight: 600;
    margin-top: 15px;
    display: block;
    text-align: center;
    color: #000000;
    padding: 2px 1px;
    font-size: 22px;
    border-radius: 0;
    background: url(https://www.siamphone.com/images/luckynumber/icon-price.png) no-repeat;
    background-size: 22px;
    display: inline-block;
    padding-left: 25px;
    margin: 15px auto 0;
    font-family: 'Roboto', "Kanit";
}
.sim-category {
    font-size: 16px;
    text-align: center;
    margin: 15px 0 0;
    text-overflow: ellipsis;
    display: block;
    width: 221px;
    white-space: nowrap;
    overflow: hidden;
    font-weight: 300;
}
/*.grade-a{color:#52A552 !important;}
.grade-b{color:#9CCE29 !important;}
.grade-c{color:#FFA629 !important;}
.grade-d{color:#EF4221 !important;}*/

.btn-loadmore{
    display: inline;
    color: #ffffff;
    background: #222;
    border: 1px solid #222;
    width: 250px;
    margin: 30px auto 0;
    text-align: center;
    padding: 20px 0;
    border-radius: 30px;
    font-weight: 600;
    transition:all 0.3s;
}
.btn-loadmore i{
    margin-right: 8px;
    font-size: 15px;
}

.btn-loadmore:hover{
    border: 1px solid #222222;
    background: #222222;
    color: #ffffff;
}

.category-list{
    margin: 0 auto;
}
.category-list h3{
    font-size:26px;
    font-weight: 600;
    margin: 10px 0 30px 5px;

    font-weight: 600;
    margin: 0px 0 20px 0;
    text-align: center;
    font-size: 2.5rem;
    background: var(--luckynumber-body-bg);
    color: var(--luckynumber-blackwhite-color);
    z-index: 9;
    position: relative;
    /* display: inline-block; */
    /* margin: 0 auto; */
    /* padding: 0 10px; */
    line-height: 50px;
}
.category-list h3 span{
    background:var(--luckynumber-body-bg);
    position: relative;
    z-index: 2;
    padding:0 10px;
    color:var(--luckynumber-blackwhite-color);
}
.category-list h3:before {
    content: "";
    height: 1px;
    background: var(--luckynumber-header-before);
    display: block;
    position: absolute;
    top: 53%;
    width: 100%;
    z-index: 1;
}
/* 
.category-list ul{
    padding: 0;
    margin: 10px 20px 0;
}
.category-list ul li{
    display: block;
    margin: 11px 0 12px;
}
.category-list ul li a{
    color: var(--luckynumber-body-color);
    line-height: 32px;
    font-weight: 300;
    font-size: 16px;
    padding: 5px 10px 5px 35px;
    border-radius: 5px;
    display: block;
    background: var(--luckynumber-cate-bg);
    background-position: 15px 50%;
    background-size: 8px;
}
.category-list ul li a:hover{
    background-color: #d0d0ce;
    color:#000;
    font-weight: 400;
} */
.mini-banner{
    display:block;
    margin:25px auto 30px;
    text-align: center;
}


/* Effect 15: scale down, reveal */
.cl-effect-15 a {
	color: rgba(0,0,0,0.2);
	font-weight: 700;
	text-shadow: none;
}

.cl-effect-15 a::before {
	color: #fff;
	content: attr(data-hover);
	position: absolute;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	-moz-transition: -moz-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
}

.cl-effect-15 a:hover::before,
.cl-effect-15 a:focus::before {
	-webkit-transform: scale(0.9);
	-moz-transform: scale(0.9);
	transform: scale(0.9);
	opacity: 0;
}

.nav{    
    /* width: 50%; */
    /* margin: 0 auto 0; */
}
ul.nav.nav-pills li {
    width: 50%;
    margin: 0;
}
.nav-pills .nav-link {
    text-align: center;
    background: 0 0;
    border: 0;
    font-family: 'Kanit';
    font-weight: 600;
    border-radius: 18px;
    color: #d7b973;
    padding: 30px 0 30px;
    font-size: 24px;
    line-height: 45px;
    border: 1px solid #580000;
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    text-align: center;
    background: rgb(255 255 255 / 8%);
    color: #d7b973;
    font-size: 30px;
    box-shadow: 0 0 10px #550000;
    position: relative;
    font-weight: 600;
    letter-spacing: 1px;
}
.nav-pills .nav-link img{
    margin-right:8px;
    width:28px;
    height:auto;
    /* opacity: 0.8; */
    vertical-align: sub;
}
.nav-pills .nav-link.active img{
    width:32px;
    opacity: 1.0;
}
.rs-container .rs-selected {
    background-color: #cc0000;
    border: 1px solid #cc0000;
}
.rs-tooltip {
    background: #cc0000;
    border: 1px solid #cc0000;
}
.rs-container .rs-pointer::after, .rs-container .rs-pointer::before {
    border-top: 8px solid #cc0000;
}
.rs-container .rs-scale span ins {
    color: #ededed;
}

.horo-topimage{
    text-align: center;
    display: block;
    margin: 50px auto 80px;
}
.horo-topimage img{
    border-radius: 8px;
}



/* search function*/
.search-function{
    position: relative;
    padding: 5% 5%;
    min-height: 90px;
    margin: 0;
    border:0 solid #222222;
    background:#fff;
    border-radius: 28px;
    width: 85%;
    margin: 0 auto 20px;
    max-width:994px;

    background: rgb(255 255 255 / 80%);
    color: #ffffff;
    box-shadow: 0 0 40px #d0d0d0;
}
.search-function h1{
    /* margin-top: -92px; */
    text-indent: 0;
    font-weight: 600;
    font-size: 50px;
    color: #000;
    position: relative;
    z-index: 1;
    margin-bottom: 30px;
}
.search-function h2{
    margin-bottom: 25px;
    font-weight: 600;
    font-size: 36px;
    color: #950c0c;
    color: #c29542;

    text-align: center;
    font-size: 3rem;
    font-weight: 600;

    color: #D5AD6D;
    background: -webkit-linear-gradient(#ac874f, transparent), -webkit-linear-gradient(top, rgba(213,173,109,1) 0%, rgba(213,173,109,1) 26%, rgba(226,186,120,1) 35%, rgba(163,126,67,1) 45%, rgba(145,112,59,1) 61%, rgba(213,173,109,1) 100%);
    background: -o-linear-gradient(transparent, transparent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 
    
    background-image: linear-gradient( to right, #462523 0, #cb9b51 22%, #f6e27a 40%, #f6f2c0 50%, #f6e27a 55%, #cb9b51 78%, #462523 100% );
    color: transparent;
    -webkit-background-clip: text;
    position:relative;
}
.search-function .subhead{
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    margin-bottom: 50px;
    color: #d0a456;
    text-align: center;
}
.search-function hr{
    border-top: 1px dashed #737373;
}
.search-function input[type="tel"], 
.search-function input[type="text"]{
    border: 1px solid #bcbcbc;
    width: 50px;
    height: 50px;
    text-align: center;
    font-family: 'Roboto';
    font-weight: bold;
    font-size: 28px;
    color: #000000;
    border-radius:3px;
    vertical-align: sub;
}
.search-function label{
    font-weight: 500;    
    margin-bottom: 15px;
    color: #121212;
    font-size: 1.25rem;
}
.block-totalNumber input[type="text"]{
    width:100px;
}
.search-function .date-form{
    width:100%;
    border: 1px solid #bcbcbc;
    border-radius: 8px;
}
.search-function .date-form input{
    border-radius: 3px !important;
    height:48px;
}




.wrapper-demo{
    margin: 0;
    font-weight: 400;
    position: relative;
   border-radius:3px;
    border: 1px solid #bcbcbc;
}
.wrapper-dropdown-3 {
	position: relative;
    background: #fff;
    border-left: 0;
    cursor: pointer;
    outline: none;
    color: #333;
    border: 0 solid #ebebeb;
    padding: 6px 15px 4px;
    margin: 0;
    font-size: 17px;
    border-radius:3px;
}
.wrapper-dropdown-3:after {
    content:"";
    width: 0;
    height: 0;
    position: absolute;
    right: 8px;
    top: 50%;
    margin-top: -3px;
    border-width: 6px 6px 0 6px;
    border-style: solid;
    border-color: #000 transparent;
}
.wrapper-dropdown-3 .dropdown {
  /* Size & position */
    position: absolute;
    top: 120%;
    left: 0;
    right: 0;
	z-index:99;
    height: auto;
    max-height: 311px;
	padding:0;
    overflow: auto;
    /* Styles */
    background: white;
    border-radius: inherit;
    border: 1px solid rgba(0,0,0,0.17);
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
    font-weight: normal;
    -webkit-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    -ms-transition: all 0.5s ease-in;
    -o-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
    list-style: none;

    /* Hiding */
    opacity: 0;
    pointer-events: none;
}
.wrapper-dropdown-3 span.showtext{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: auto;
    display: list-item;
    line-height: 40px;
	font-size:20px;
    font-family: 'Kanit';
	font-weight:300;
}
.wrapper-dropdown-3 span.showtext img{
	vertical-align: middle;
    width: 20px;
    margin: 0 5px 0 0;
}
.wrapper-dropdown-3 .dropdown:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    bottom: 100%;
    right: 15px;
    border-width: 0 6px 6px 6px;
    border-style: solid;
    border-color: #fff transparent;    
}

.wrapper-dropdown-3 .dropdown:before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    bottom: 100%;
    right: 13px;
    border-width: 0 8px 8px 8px;
    border-style: solid;
    border-color: rgba(0,0,0,0.1) transparent;    
}
.wrapper-dropdown-3 .dropdown li {display:block;padding:0 0 10px 28px;position:relative;margin: 0;border-bottom:1px solid #eee;}
.wrapper-dropdown-3 .dropdown li:last-child {border-bottom:0 solid #eee;}
.wrapper-dropdown-3 .dropdown li a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: #333;
	font-size: 23px;
    border-bottom: 1px solid #e6e8ea;
    box-shadow: inset 0 1px 0 rgba(255,255,255,1);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.wrapper-dropdown-3 .dropdown li label span{
    display: block;
    font-size: 12px;
    font-family: 'Roboto';
	color:#666;
	margin:0;
}
.wrapper-dropdown-3 .dropdown li i {
    float: right;
    color: inherit;
}
.wrapper-dropdown-3 .dropdown li:first-of-type a {
    border-radius: 0;
}
.wrapper-dropdown-3 .dropdown li:last-of-type a {
    border: none;
    border-radius:0;
}

/* Hover state */
.wrapper-dropdown-3 .dropdown li:hover a {
    background-color: #f1f1f1;
}

/* Active state */
.wrapper-dropdown-3.active .dropdown {
    opacity: 1;
    pointer-events: auto;
	margin:0;
}
.wrapper-dropdown-3.active .dropdown ~ div.tab-content {
	overflow:visible;
}
.wrapper-dropdown-3 .dropdown li label {
    display: block;
    padding: 10px 30px 0 10px;
    transition: all 0.3s ease-out;
    margin: 0;
    font-size: 18px;
    min-height: 30px;
    line-height: 21px;
    font-family: 'Kanit';
    cursor: pointer;
    font-weight: 300;
}
.wrapper-dropdown-3 .dropdown li label.oneline{
	line-height:40px !important;
}
.checkbox input[type="checkbox"]:checked + label.oneline::after{
    top: 8px;
    right: 10px;
}
.wrapper-dropdown-3 .dropdown li:last-of-type label {
    border: none;
}
.wrapper-dropdown-3 .dropdown li input {
    position: absolute;
    display: block;
    right: auto;
    top: 50%;
    margin-top: -5px;
    left:13px;
    border: 1px solid transparent;
    -webkit-appearance: none;
}

/* Hover state */
.wrapper-dropdown-3 .dropdown li:hover {
    background-color: #f0f0f0;
}

/* Checked state */
.checkbox label::before, .radio label::before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 17px;
    height: 17px;
    left:10px;
    margin-top: 4px;
    border: 1px solid #cecece;
    border-radius: 3px;
    background-color: #fff;
    -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
    -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
    transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
}
.radio input[type="radio"]:checked + label::after {
    font-family: 'FontAwesome';
    content: "\f00c";
    font-size: 22px;
    color: #ffffff;
    background: linear-gradient(180deg, #4096ee 0%,#2a84e1 100%);
    right: -5px;
    left: 9px;
    border-radius: 30px;
    top: 12px;
    width: 20px;
    height: 20px;
    text-align: center;
    padding: 0;
    line-height: 21px;
    font-size: 14px;

    color:transparent;
    background:transparent;
}
.checkbox input:checked + li.checkbox, .radio input:checked + li.radio{
    background: #f9f9f9;
    border: 1px solid rgba(0, 0, 0, 0.10);
}
.checkbox label::after, .radio label::after{
    left: 10px;
    right: auto;
    top: 8px;
}
.radio label::after{
    top: 21px;
}
.radio label::before{
    border-radius: 30px;
    
    border:transparent;
    color:transparent;
    background: transparent;
}
.wrapper-dropdown-3 .dropdown li.radio label::after{
	top:13px;
}
.wrapper-dropdown-3 .dropdown li input:checked ~ label {
    /* color: #007bff; */
   /*  text-decoration: line-through; */
}
.wrapper-dropdown-3 .dropdown li input:checked ~ span{
    /* color: #007bff; */
    /* text-decoration: line-through; */
}
.wrapper-dropdown-3 .dropdown li span{
    position: absolute;
    left: 10px;
    top: 35px;
	display:none;
}
.wrapper-dropdown-3 .dropdown li .toggleOn span{
	left:25px;
}
.checkbox label, .radio label{
    font-size: 17px;
    line-height: 21px;
    padding:10px 10px 10px;
    display: block;
    cursor: pointer;
    color: #222222;
    font-weight: 600;
    margin-bottom: 0;
    text-align: center;
    border-radius: 8px;

    background: linear-gradient(to bottom, #ededed 0%,#c7c7c7 100%);
}
.tab-inner{
    background-color:rgba(245, 246, 246, 0.8);
    width: auto;
    float: left;
    margin: 0 15px 15px 0;
	overflow:hidden;
}

/* .tab-content{width:100%;clear:both;padding:15px 0 15px;} */
.tab-inner{
    background-color:rgba(245, 246, 246, 0.8);
    width: auto;
    float: left;
    margin: 0 15px 15px 0;
	overflow:hidden;

    margin: 15px 0 10px 10px;
    clear: both;
    display: block;
    float: none;
    color: #222;
    font-weight: 500;
}
.tab-list{width:100%;padding:0;margin:0;}
.tab-list li{
    display: block;
    padding: 0 10px 0;
    position: relative;
    min-width: 45%;
    display: inline-block;
}
.tab-list li:last-child{margin-right:0 !important; }
.tab-list li input[type="checkbox"] ,.tab-list li input[type="radio"]{
    position: absolute;
    display: block;
    right: auto;
    top: 50%;
    margin-top: -6px;
    left: 6px;
	
	-webkit-appearance: none;
	border:0 solid transparent;
}
.checkbox label::after, .radio label::after {
    display: inline-block;
    position: absolute;
    width: 16px;
    height: 16px;
    left: 8px;
    top: 8px;
    margin-left: 0;
    padding-left: 3px;
    padding-top: 1px;
    font-size: 16px;

    /* display:none; */
}
.tab-list li input:checked ~ label {
    /* color: #007bff; */
    color:#ffffff;
    background:linear-gradient(180deg, #4096ee 0%,#2a84e1 100%);

}
.tab-list input:checked + li.radio{
	background: #f9f9f9;
    border: 1px solid rgba(0, 0, 0, 0.10);
}
.tab-list input:checked + li.radio span{color:#fff;color:#cc0000;}

.slider-container {
    width: 95%;
    max-width: 1200px;
    margin: 12px auto 10px;
}

.payment_method{
    margin:0;
    padding:0;
}
.btn-payment{
 
}
.payment_method input[type=radio]{
    padding:0;
    opacity: 0;
    position: absolute;
}
.tab-list input:checked + li.radio label {
    color: #4096ee;
    border: 1px solid #4096ee;
}
.block_payment{
    margin-top: 30px;
    padding: 28px 25px;
    border: 2px solid #2d87e3;
    border-radius: 12px;
    position: relative;
    margin-left:15px;
}
.block_payment:before{
    content: "";
    width: 0;
    height: 0;
    border-left: 13px solid transparent;
    border-right: 13px solid transparent;
    border-bottom: 15px solid #2d87e3;
    position: absolute;
    top: -15px;
    right: 15%;
}
.block_payment:after{
    content: "";
    width: 0;
    height: 0;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-bottom: 13px solid var(--luckynumber-body-bg);
    position: absolute;
    top: -12px;
    right: 15.4%;
}
.block_payment .book_bank{
    margin: 0 0 30px 0;
    border-radius: 8px;
    color: #222;
    background: #f6f6f6;
    text-align: center;
    padding: 20px 5px 20px;
    position: relative;
    max-width: 450px;
    margin: 0 auto 30px;
}

.block_payment .book_bank p{
    margin:0;
    font-weight: 300;
}
.block_payment .book_bank p strong{
    display: block;
    font-weight: 500;
    font-family: 'Roboto';
    font-size: 26px;
    margin:8px 0  7px;
}
.block_payment .book_bank p img{
    margin: 0 auto 5px;
    display: block;
    width: 120px;
    height: auto;
    border-radius:10px;
}
.block_payment .book_bank h3{
    font-size: 18px;
    padding: 0 10px 5px;
    margin: 0;
}
.block_payment label{
    font-weight: 500;
    font-size: 16px;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
}
.block_payment .input-group-text{
    padding: 8px 10px;
    width: 50px;
}
.block_payment .form-control[type=file] {
    overflow: hidden;
    /* padding:0; */
}
.book_bank a{
    background: #00437a;
    color: #fff;
    border-radius: 10px;
    display: block;
    width: 120px;
    font-weight: 300;
    margin: 12px auto 0;
    padding: 1px 0 2px;
    font-size:14px;
}
.book_bank .qrImg a{
    width: 90px;
    margin: 16px auto 0;
}
.book_bank a:hover{
    background: #cc0000;
}
.numberID{
    overflow: hidden;
    color:transparent;
    height: 1px;
    display: block;
}

@media only screen and (min-width: 992px) {
    .navbar-expand-lg .navbar-collapse{
        flex-grow: unset;
    }
}
@media only screen and (max-width: 991px) {
    body{/*background: green;*/}
    .item-number img{width:100px; height:auto;}
    .grade{margin:20px auto 0;}
    .item-select .sim-category{margin:30px 0 0 0;}
    .category-list{margin: 0 auto 50px;}
    .category-list ul li {margin: 10px 0 5px;width: 48%;display: inline-block;}
}
@media only screen and (max-width: 768px) {
    body{/*background: yellow;*/}
   
    .phone-number .field-filter{display:inline-block;width:100%;text-align: center;}
    .phone-number input, .search-function input[type="tel"], .search-function input[type="text"]{width:30px;height:30px;line-height:1;font-size: 20px;vertical-align: middle;padding: 0;border: 0;}
    .phone-number .field-filter span, .search-function .field-filter span{display:none;}
    .date-form{width:100%;}
    .submit-number{margin: 40px auto 40px;}
    .horo-box-result{padding: 30px 30px;border-radius:8px;margin:2rem 0 2.5rem;}
    .horo-box-result h3{padding-left:10px;}
    .share-box{text-align:center;}
    .btn-renew,.btn-newnumber{width:100%; margin: 5px auto 10px;font-size: 22px;}
    .btn-renew{margin-top:30px;}
    .big_block{padding:10px 15px;}
    .item-number{margin-bottom: 25px}
    .item-number .number{padding-left:5px;padding-right:5px;}
    .header-widget h2, .header-widget-left h2{font-size:2.2rem;}
	#footer{margin:10px auto;}
	#footer_copyright em.copysign{float:none;}
	#footer_copyright p.right_reserved_text{text-align: center;width: 100%;float:none;}
	#footer_copyright p.social_network{margin: 0 auto;float: none;text-align: center;width: 100%;}

    
    

    #adszone-1 img, .horo-topimage img{width:100%;height:auto;}
    .header-widget-left{text-align: center;}
    .header-widget-left h2{padding:0 10px;}
    .category-list{max-width: 100%; margin:0 auto 50px;}
    .category-list ul li{display:block;width:100%;}
    .cover-gray{padding:30px 20px 15px;}
    .contact-form h3{text-align: center;}
    .contact-form{padding:30px 15px 15px;}
    .contact-form form{padding:40px 25px 40px;}
    .contact-form label{padding-right: calc(var(--bs-gutter-x) * .5); padding-left: calc(var(--bs-gutter-x) * .5);}
    .contact-form input, .contact-form textarea{margin-top:0;border: 1px solid #adadad;}
    #btn_pay{min-width: 100px;width: 100%;margin: 0 auto;}
    .block_payment label {
        padding-right: calc(var(--bs-gutter-x) * .5);
        padding-left: calc(var(--bs-gutter-x) * .5);
    }
    .tab-list li{padding:0 2px;}
    .radio label{padding:15px 10px;}
    .block_payment .book_bank {margin: 0 0 20px 0;padding:25px 10px 30px;}
    .block_payment .book_bank p strong{font-size:1.35rem;font-weight:600;margin: 0;-webkit-appearance: none;}
    .block_payment .book_bank h3{padding:7px 0;font-size: 1rem;}
    .block_payment .book_bank p img {margin: 5px auto 5px;width:100%;height:auto;max-width: 150px;}
    .book_bank a{
        position: relative;
        display: block;
        margin: 15px auto 0;
        top: auto;
        right: auto;
        font-size: 16px;
        padding: 3px 0 5px;
        width: 100%;
        max-width:150px;
        font-weight: 600;

        -webkit-appearance: none;
    }
    .book_bank .qrImg a{
        width: 100%;
        max-width:150px;
    }
    .block-line-oa{
        display: flex;
        padding: 0 0 15px;
        margin: 35px auto 20px;
    }
    .line-oa-name h6{
        padding-top:10px;
    }
    .line-oa-image{
        padding: 23px 0 0;
    }
    .horo-topimage{
        margin: 20px auto 30px;
    }

}


@media only screen and (max-width: 768px)  and (orientation: portrait){
    .phone-number .field-filter{display:flex;}
    .phone-number input{min-width: 30px;height: 30px;width: 9.5%;margin: 0 0.4%;}
}


@media only screen and (max-width: 1024px) and (min-width: 768px) and (orientation: landscape){
    body{/*background: blue;*/}
    
}

@media only screen and (max-width: 1024px) and (min-width: 768px) and (orientation: portrait){
    body{/*background: pink;*/}
    #wrap-horoscope {
        background-size: 100%;
        background-position: top;
        background-repeat: repeat;
    }
    .share-box{text-align:left;}

  
    .search-function{width:100%;background: rgb(127 0 1 / 50%);}
    .nav{width:80%;}
    .grade {padding: 20px 5px 0;}
    .item-select .sim-category{
        margin-top:10px 0 0 0;
        line-height: 24px;
    }
    .category-list{margin:0 auto 50px;}
}
@media only screen and (max-width: 991px) and (orientation: landscape){
    .custom{height:auto;}
}