/* CSS portail FlexiSite Default v.2 */

/* yellow : #ffe77a | green : #2c5f2d */
/* orange : #e99573 | blue: #166A8C   */



html { scroll-behavior: smooth; }

body {
	background-color:#ffffff;
	font-family: 'Roboto', sans-serif;
	font-size: 1em;
 	margin: 0; /* pour �viter les marges */
	text-align: center; /* pour corriger le bug de centrage IE */
    }
#print-footer { display:none; }

h1 {font-size:1.4em; text-align:center; color:#166A8C;}
h2 {font-size:1.1em; }
h3 {font-size:1em; color:#166A8C; width:100% }

A { text-decoration: none; color:#166A8C; } 
A:link { color:#000}
A:visited {color:#000;} 
A:active {color:#e99573;} 
A:hover {color:#df7802; } 

img { border:0px; padding:0px; margin:0px; line-height:0px; max-width:100% }
iframe { max-width:100% }

.photo { border:1px solid #166A8C; }
.return  { clear:both }
.center { margin:auto; text-align:center; }
.mini { font-size:0.7em }
.big { font-size:1.7em; color:#df7802; }

.zoom:hover { -webkit-transform:scale(1.2); transform:scale(1.2); background-color: #ffffff; }
.zoom:hover.a { background-color: #ffffff; }
.mobile, .mob_only {display:none;}

/* entete  */ 
#header { background-color:#ffffff; width:100%; margin:0px; margin-bottom: 0; }
#logo { width:10%; float:left; }
#claim {font-size:1.2em; float:right;;}

#bloc_titre { text-align:right; margin:0; margin-top:40px; background-color:#e99573; width:60%; font-size:2.3em; font-family: 'Arial', sans-serif; font-weight: bold; padding:0; line-height:0.8em; letter-spacing:3px; padding:0.1em; }
#titre { margin:0; font:italic; color:#166A8C }
#bloc_lg { text-align:center; float:right; margin:1%; height:32px }
#bloc_lg li { display:inline-block; list-style-type:none; }
#bloc_lg ul { padding:0; margin:0; font-size: 0.8em; }
#bloc_lg img { width:32px; margin-right:2px }

#menu { text-align:left; margin:0; margin-top:1px; width:90%; }
#menu ul { padding:1px; margin:1px; }
#menu li { display: inline-block; padding:2px 2px; margin:2px; background-color:#166A8C33; white-space: nowrap; border-radius: 5px; }

/* main */

#content { clear:both; width:100%; text-align:left; margin:0; padding:0; }
#bloc { clear:both; width:100%; text-align:center; vertical-align:top; margin:0; padding:0;}
#bloc_100 { width:98%; display:inline-block; border-top:1px dotted #166A8C; border-bottom: 1px dotted #166A8C;vertical-align:top;text-align:left; margin:0; padding:0;}
#col_3 { display:none; }
#col_2 { float:right; width:255px; padding:5px; margin:0; text-align:center; margin-bottom:5px; border-left:1px #166A8C solid; }
#col_1b { margin:0; padding:0; margin-right:280px; white-space:normal; }
#col_1 { max-width:100%; text-align:left; margin:0; padding:0;margin:auto; }
#col_1 img { border:1px #166A8C solid; border-radius:5px; }
/*#description { clear:both }*/
#description img { max-width:100% }

/*.bloc_290 { background-color:rgba(245, 245, 245,0.7); width:290px; margin:0.3%; padding:0.5%; display:inline-block; border-radius:5px; border:1px dotted #000; vertical-align:top; text-align:left; height:175px; }
.bloc_190 { background-color:rgba(245, 245, 245,0.7); width:190px; margin:0.3%; padding:0.5%; display:inline-block; border-radius:5px; border:1px dotted #000; vertical-align:top; text-align:left; height:110px ; text-align:center; }*/

#bloc_1 {  width: 100%; aspect-ratio: 16 / 5; background-position: center; background-size: cover; animation: bloc_1 50s infinite; margin:0;padding:0; overflow: hidden; } 
#text { width:45%; padding:1%; margin:1%; background-color: #ffffff; float: right; opacity:0.75; }

@keyframes bloc_1 {
	0% { opacity:1; background-image: url(../../images/cover/batdongsan-Saigon-1.jpg); }
	20% { opacity:1; background-image: url(../../images/cover/batdongsan-Saigon-2.jpg); }
	40% { opacity:1; background-image: url(../../images/cover/batdongsan-Saigon-3.jpg); }
	60% { opacity:1; background-image: url(../../images/cover/batdongsan-Saigon-4.jpg); }
	80% { opacity:1; background-image: url(../../images/cover/batdongsan-Saigon-5.jpg); }
	100% { opacity:1; background-image: url(../../images/cover/batdongsan-Saigon-1.jpg); }
}
@-webkit-keyframes bloc_1 {
	0% { opacity:1; background-image: url(../../images/cover/batdongsan-Saigon-1.jpg); }
	20% { opacity:1; background-image: url(../../images/cover/batdongsan-Saigon-2.jpg); }
	40% { opacity:1; background-image: url(../../images/cover/batdongsan-Saigon-3.jpg); }
	60% { opacity:1; background-image: url(../../images/cover/batdongsan-Saigon-4.jpg); }
	80% { opacity:1; background-image: url(../../images/cover/batdongsan-Saigon-5.jpg); }
	100% { opacity:1; background-image: url(../../images/cover/batdongsan-Saigon-1.jpg); }
}

#bloc_A, #bloc_B { background-color: rgba(245, 245, 245, 0.7); width:47%; margin: calc(1% - 2px); padding:0.5%; display:inline-block; border-radius:5px; border:1px dotted #000; vertical-align:top; text-align:left; }

.bloc_col { width:23%; float: left; padding: 1%; }

#search_bar { display:flex; justify-content: space-between; vertical-align: middle; flex-wrap: wrap; align-items: center; margin:1%; }
#search_bar img { border:0px; margin:0 }
#search_bar a { white-space: nowrap; }
#search_bar_right { text-align:center; padding:0; width:220px; }
#search_bar_left { text-align:left; margin:0px; padding:0; flex: 1; }

.promo { background-color:#f44336; color:#ffffff; padding:3px; border:1px solid #df7802; border-radius:50%; }

.bloc_shop { width:66%;  }
.photo_art { width:32%; margin-right:2%; }

.bloc_shop2 { width:100%; float:left; padding:1px; margin:1px; }
.photo_art2 { width:100%; aspect-ratio: 4 / 3; object-fit: cover; }
.photo_art2 img { height: calc(100% - 2px); width: calc(100% - 2px); object-fit: cover; display: block;}

.bloc_shop1 { width:23%; padding:0.5%; margin:0.5%; }
.photo_art1 { width:100%; margin:auto; text-align: center; overflow: hidden; aspect-ratio: 11 / 16; }
.photo_art1 img { height: calc(100% - 2px); width: calc(100% - 2px); object-fit: cover; display: block;}
.bloc_shop1 h2, .bloc_shop1 h3 { margin:0; padding:0; color:#166A8C; }

.bloc_compare { min-height:230px; width:24%; float:left; padding:1px; margin:1px; text-align: center; }

/*.bloc_shop3 { min-height:210px; width:48%; padding:1px; margin:1px; text-align: justify; }
.photo_art3 { width:220px; margin-right:1%; height:100%; }*/

.bloc_shop1, .bloc_shop2, .bloc_shop3 { text-align:justify; overflow:hidden; }

.bloc_button { border:1px solid #df7802; width:auto; background-color:#df780222; padding:3px; text-align:center; margin:auto; border-radius:25px; white-space: nowrap; }
.bloc_button1 { border:1px solid #5d5e5e; width:auto; background-color:#eee; padding: 0 3px; text-align:center; margin:auto; border-radius:25px; white-space: nowrap; }
.bloc_button1:hover  { background-color:lightyellow; }
.bloc_button2 { border:1px solid #5d5e5e; padding:5px;  white-space: nowrap; }

/*.bloc_button4 { margin: auto; margin-top: 10px ; border: 1px solid #5d5e5e; background-color: #d0e3ed; border-radius: 25px; text-align: center; padding: 1%; max-width: 85%; }
.bloc_button4:hover { background-color: #df7802; border:1px solid #07415f; }
*/
.bloc_button4 { width:auto; margin:auto; margin-top:15px; padding-left: 1em; padding-right: 1em; border:1px solid #000 ;border-radius:10px; background-color:#eee; color:#166A8C;white-space: nowrap; }
.bloc_button4 a { color:#166A8C; }
.bloc_button4:hover { background-color:#e99573; border-color: #166A8C; color:#000 }
.bloc_button4:hover a { color:#000 }

.bloc_50_100 { width: 48%; }

.line_art { margin:0; height:0px; border-top: 1px dotted #000; content: '\002665'; }

.rate_art { height:16px; width:80px;  margin:3px; border:1px solid #000; border-radius:5px; float:right }

#line_photo { width:100%; vertical-align:top; display: flex; flex-wrap: wrap;}

#line_map { width:100%; aspect-ratio:16/7; border-radius:7px;  border:1px solid #000; }

/*#line_photo img {vertical-align:middle; width:220px; margin:1%;} #line_photo img:hover:not(.active) { transform: scale(1.1);}*/

#bloc_min { width: 320px; margin:auto; text-align: center; }

.pagination { margin:auto; text-align:center; clear:both; margin-top:10px; width: 100%; }
.pagination a { display: inline-block; padding: 8px 16px; text-decoration:none; transition: background-color .3s; margin:2px; }
.pagination a.active { background-color: #000; color: #ffffff; }
.pagination a:hover:not(.active) { background-color: #ddd;}

#bloc_annonce { background-color:#F78000; border:1px solid #333333;  width:98%; padding:2%; position:fixed; bottom:0; right:0; text-align:center; display:none; font-size: 0.95em; }
#ann2 { background-color: #d3d3d2; width:fit-content; margin:auto; padding:0.5%; }
#b_ok a { float:right; background-color:#5d5e5e; color:#F78000; }
#b_ok a:hover { background-color:#F78000; color:#5d5e5e }

/* --- account administration --- */
/* icon est aussi utilisé dans le front end */
.item { width: 8rem; display: inline-block; }
.icon { width: 24px; vertical-align: middle; }

.photo_admin { width:120px; text-align: center; overflow: hidden; aspect-ratio: 4 / 4; float:left; margin:1px; border: #000 1px solid; border-radius:7px }
.photo_admin img { height: calc(100% - 40px); width: calc(100%); object-fit: cover; margin:auto; vertical-align:top;}

#bloc_account img { width:32px; vertical-align:middle; }
.bloc_account { border: 1px solid #f37a7a; border-radius: 10px; background-color: #FFF0E0; padding:1%; margin: 1%; }
#bloc_orders img { width:50px; }

#product ul, #quot ul, #list ul, #message ul, #team ul { list-style-type: none; display:block; padding: 0;}
#avatar { float:right; width:110px; height:110px; border:1px solid #F78000; border-radius:100%; overflow:hidden; text-align:center; display:table-cell; vertical-align:top; margin-right: 1%; margin-top: -20px ; background-size:cover; }
#avatar img { width:32px; margin-top:80px; }

.bloc_table { max-width:100%; margin:auto; margin-top:10px; overflow:hidden; overflow-x:scroll;}

#tracking { margin:0;}
#tracking li { width:15em;border-radius:10px;margin:0.5%;padding: 0.5%;border:1px solid black;}
#tracking li { zoom:1.4; }
#track_tab { text-align: left }
#track_tab tr { vertical-align:top ; }
.round_green { background-color: green; width: 1em; height:1em; border-radius:50% ; border:1px solid black; float:right;}
.round_red { background-color: red; width: 1em; height:1em; border-radius:50% ; border:1px solid black; float:right;}

/* pied de page */ 
#footer { clear:both; background-color:#ffffff; width:100%; margin:0px; text-align:left; }
#bloc_adr { background-color:#e99573; width:40%; padding:5px; float:right; font-size: 0.85em; }
#bloc_adr ul { list-style-type: none; padding:0; margin:0; }
#bloc_adr img { float:left; margin-right:3px; }
#bloc_blanc { background-color:#ffffff; width:90%; }
#lien_social { text-align: center;}
#lien_social li { display:inline-block; list-style-type:none;}
#bloc_lien { width:56%; float:left; text-align:center; margin:1%; background-color:#e99573;}
#bloc_lien ul { list-style-type: none; padding:1%; margin:0;  }
#lien_bloc1, #lien_bloc2 { width:46%; display:inline-block; text-align:left; vertical-align:top;}
#flexisite { clear: both; margin:auto; margin-top:50px; font-size:0.7em; font-family: 'Arial', sans-serif; text-align:center; }
#flexisite img { vertical-align: middle; }

/* Forms */
form {margin: 0; padding: 0;}
fieldset { border-radius:10px; background-color:#FFF0E0; width:90%; margin-top:12px; margin:auto;border: 1px solid #f37a7a }
legend { font-weight:bold; }

form input[type=submit] { width:auto; margin:auto; margin-top:15px; padding-left: 1em; padding-right: 1em; border-radius:10px; background-color:#eee; color:#166A8C; }
form input[type=submit]:hover { background-color:#e99573; border-color: #166A8C; }
form label { display: inline; width: 15rem; }
form label[type=radio] { background-color:#f00; }
form textarea { width: 90%; border-radius:10px; background-color:#FAFAFA; border:1px solid black;} 
form input { width: 90%; border-radius:10px; background-color:#FAFAFA; display:inline; border:1px solid black; height: 2em; }
form select { border-radius:10px; background-color:#FAFAFA; height: 2em; margin:0.25%; padding:0 }
form select:hover { color:#df7802 ; background-color:lightyellow; border-color:#000;}
form option { color:#166A8C; background-color:lightyellow; border-color:#000; }

/*form#form_mail input[type=text] { width: 60%; border-radius:10px} 
form#form_mail input[type=tel] { width: 60%; border-radius:10px}
form#form_mail input[type=email] { width: 60%; border-radius:10px;}*/
form input[type=date] { width:35%; }
form input[type=radio] { width:auto; border-color:#df7802; vertical-align: middle;  }
form input[type=checkbox] { width:auto; }
form textarea:focus, textarea:hover { color:#000; background-color:lightyellow; border-color:#df7802; } 
form input:hover, input:hover { color:#000; background-color:lightyellow; border-color:#df7802;}

/* TABLEAU */ 
table { width: 100%; border-collapse: collapse;}
/*table img { width: 60px; min-width: 60px; margin:auto; }*/
th, td { border: 1px solid #ddd; padding: 6px; text-align: center; }
th, .td_1 { background-color: #FAFAFA;  text-align: center; vertical-align: top; font-size: 0.7em; font-weight: bold; }
/*td:nth-child(even),
th:nth-child(even) { background-color: #f0f0f0; }*/
 td:nth-child(1),
#real_estate td:nth-child(3),
#real_estate th:nth-child(1),
#real_estate th:nth-child(3) { background-color: #f0f0f0; text-align: left; }
td:hover { background-color: #ddd; }
thead th { position: sticky; top: 0; background-color: #FAFAFA; z-index: 2; }
/*tbody td:first-child { position: sticky; left: 0; background-color: #FAFAFA; z-index: 1; } */
tbody th:first-child { position: sticky; left: 0; background-color: #FAFAFA; z-index: 3; }

/** ------------------------------ **/
/** pour les rollovers bas de page **/
/** ------------------------------ **/
.rollover1 { background:url("../../themes/batdongsan/imgs/round_facebook.svg") 0 0 no-repeat; }
.rollover2 { background:url("../../themes/batdongsan/imgs/footer-gplus.png") 0 0 no-repeat; }
.rollover3 { background:url("../../themes/batdongsan/imgs/footer-twit.png") 0 0 no-repeat; }
.rollover4 { background:url("../../themes/batdongsan/imgs/round_linkedin.svg") 0 0 no-repeat; }
.rollover5 { background:url("../../themes/batdongsan/imgs/round_youtube.svg") 0 0 no-repeat; }
.rollover6 { background:url("../../themes/batdongsan/imgs/footer-pinterest.png") 0 0 no-repeat; }
.rollover7 { background:url("../../themes/batdongsan/imgs/round_instagram.svg") 0 0 no-repeat; }
.rollover8 { background:url("../../themes/batdongsan/imgs/footer-skype.png") 0 0 no-repeat; }
.rollover9 { background:url("../../themes/batdongsan/imgs/footer-yahoo.png") 0 0 no-repeat; }
.rollover10 { background:url("../../themes/batdongsan/imgs/round_zalo.svg") 0 0 no-repeat; }

.rollover1, .rollover2, .rollover3, .rollover4, .rollover5, .rollover6, .rollover7, .rollover8, .rollover9, .rollover10 { display:inline-block; width:32px; height:32px; }

.rollover1:hover, .rollover2:hover, .rollover3:hover, .rollover4:hover, .rollover5:hover, .rollover6:hover, .rollover7:hover, .rollover8:hover, .rollover9:hover, .rollover10:hover { opacity: 0.5; }

.rollover1 span , .rollover2 span ,.rollover3 span , .rollover4 span , .rollover5 span, .rollover6 span, .rollover7 span, .rollover8 span, .rollover9 span, .rollover10 span { display:none }

/** sharing bouton **/
#share-buttons { text-align:left; }
#share-buttons img { width:32px; padding:2px; border:0; display:inline; }

/** comment box **/
#com_art { min-width:300px; max-width:600px;padding:0 }
#com_art fieldset { padding:5px; background-color:#e9957355; }
#com_art input[type=submit] { margin: 0 auto; }
#com_art input[type=text] { max-width:350px; }
#com_art input[type=email] { max-width:350px; }
#com_show { min-width:300px; max-width:800px;margin:10px }
#com_line { margin-left:4px; color:#df7802; font-weight: bold; }
#com_text { border-bottom:1px dotted black; padding:2px; margin:2px; }

/** ------------------------------------------- **/
/** pour les petits écrans quelques adaptations **/
/** ------------------------------------------- **/
@media screen and (max-width:900px) {
	#bloc_titre { width:90%;  }
	.bloc_shop2 { width:31%; padding:2px; margin:0.3%; }
	.bloc_shop1 { width:31%; padding:0px; margin:1%; }
}

@media screen and (max-width: 680px) {
	#bloc_1 {padding:0; margin:0;aspect-ratio: 16 / 7; }
	#text { width:60%; padding:1%; margin:1%; font-size: 1em; }
	#logo { width:120px; }
	#claim { font-size:0.8rem; }
	#bloc_titre { font-size:1.5em; width:95%; }
	#bloc_adr { width:90%; float:right }
	#lien_bloc1, #lien_bloc2 { width: 80%; }
	.hidden {display:none;}
	h1 { font-size:1.3rem; clear:both }
	h2 { font-size:1rem; }
	h3 { font-size:1rem; }
	body { font-size:0.9em; }
	#menu {clear:both; width: 100%; text-align: center; margin: 0px; }	
	.footer { width:100%; vertical-align: top; padding:1% }
	#content, #bloc_100, #bloc_A, #bloc_B, #bloc_AB { width:99%; margin:auto; }
	#col_2 { display:none; }
	#col_1b { margin:0; width:98% }
	.bloc_col {width:48% ; float: left; padding: 1%;}
	/*.bloc_190, .bloc_290 { margin:auto; width:94%; clear:both; margin-bottom: 1%;}
	img { max-width: 100% ; margin:auto }*/
	#bloc_lien, #bloc_adr { width:100%; margin:0; }
	#lien_bloc1, #lien_bloc2 { width:90%; }
	#bloc_blanc { background-color:#ffffff; width:94%; margin:auto; margin:4%; }
	.bloc_shop1 { width:48%; padding:0px; margin:1%; }
	.bloc_shop2 { width:100%;margin:0%;}
	.bloc_shop { width: 100%;}
	.photo_art { width:100%; margin:0%}
}

/** ------------------------------------------- **/
@media screen and (max-width: 440px) {
	#bloc_1 { padding:0; margin:0;aspect-ratio: 16 / 7; }
	#text { width:60%; padding:1%; margin-top:1%; font-size: 0.63em; top:0 }
	.mobile, .mob_only { display:inline; }
	h1 { font-size:1.1rem; clear:both }
	h2 { font-size:1rem; }
	h3 { font-size:1rem; }
	#logo { width:90px; }
	#claim { display:none; }
	#bloc_lg img { width:24px; }	
	#menu { width: 99%; text-align: center;   padding:0px; margin:0;}
	#menu ul { margin-left:-0px; }
	#bloc_titre { font-size:1.4em; width:98%; margin-top: 32px; }
	#titre { letter-spacing:2px; }
	form#form_mail input[type=date] { width: 40%; }
	#search_bar_right { width:110px; text-align:center}

	.bloc_shop2 { width:100%; }
	.bloc_col { width:99% ; float: left; padding: 1%; }
	.photo_art { width:100%; }
	.bloc_shop2 { width:98%;margin:1%; }
	.bloc_shop { width:100% }
	.bloc_50_100 { width: 98%; }
	#bloc_lien, #bloc_adr { width:100%; margin:0; }
	#lien_bloc1, #lien_bloc2 { width:90%;margin:0; }
	#bloc_blanc { background-color:#ffffff; width:94%; margin:auto; margin:4%; }
	.bloc_shop1 { width:48%; padding:0px; margin:1%; }
	/*.photo_art1 { height:210px;}#bloc_lien ul {  margin:0; padding: 0;  }
	#lien_bloc1 ul, #lien_bloc2 ul {margin-top: 13%; margin-left:17% ; }*/
}

@media print {
	#header, #footer,#menu, .menu_mod, #col_2, #com_art,#com_show, #share-buttons { display:none; }
    body, #content, #bloc_100, #bloc, #col_1, #col_1b { width: 99%; }
	#bloc_100 { display: block; clear:both; }
    #flexisite2 { display:block; position: fixed; bottom: 0; right:0; z-index: 1002; font-size: smaller; margin:0; }	
	#print-footer { display:block; position: fixed; bottom: 0; left:0; z-index: 1003; font-size: smaller; margin:0; }
 }