.head-meal{width:100%; float:left; position:relative; background:#fff; padding:25px; border-radius:10px;}
.head-meal .col-slider{width:calc(100% - 500px); position:relative; float:right;}
.head-meal .col-info{width:500px; position:relative; float:left; padding-right:40px;}
.head-meal .col-info h1{font-size:25px; font-weight:bold; line-height:30px;}
.head-meal .col-info p{width:100%; font-size:15px; width:100%; float:left; margin-top:5px; font-weight:400; opacity:.75}
.head-meal .col-info .tags{width:100%; margin:0; padding:15px 0 30px 0; display:flex; list-style:none;}
.head-meal .col-info .tags li{flex:1; position:relative; padding-top:35px; text-align:center;  border-left:1px solid var(--color-border)}
.head-meal .col-info .tags li:first-child{border:none;}
.head-meal .col-info .tags li i{font-size:28px; width:28px; margin-left:-14px; text-align:center; position:absolute; top:0; left:50%; color:var(--color-red)}
.head-meal .col-info .tags li span{font-weight:400; font-size:13px; display:block; width:100%; text-align:center; opacity:.7; padding-bottom:5px;}
.head-meal .col-info .tags li b{font-size:15px; font-weight:600;}
.head-meal .col-info .tags li.tag-time b:after{content:'Phút'; padding-left:5px;}
.head-meal .col-info .tags li .difficulty{padding-top:3px;}
.head-meal .col-info .meal-support{width:100%; float:left; position:relative; border-bottom:1px solid var(--color-border); padding-bottom:30px; margin-bottom:15px;}
.head-meal .col-info .meal-support ul.list-cure{margin:15px 0 0 0; padding:0; width:calc(100% + 20px); float:left; list-style:none;}
.head-meal .col-info .meal-support ul.list-cure li{float:left; position:relative; padding-left:25px; margin-top:10px; margin-right:20px; font-size:14px; font-weight:400;}
.head-meal .col-info .meal-support ul.list-cure li:before{font-family: "Font Awesome 5"; font-weight:500; content: "\f00c"; font-size:10px; border-radius:50%; width:18px; height:18px; line-height:16px; text-align:center; color:var(--color1); border:1px solid var(--color1); display:block; position:absolute; left:0; top:1px;}
.head-meal .col-info .meal-support ul.list-cure li.title{width:100%; font-weight:bold; font-size:16px; padding-bottom:5px; padding-left:0; padding-right:0;}
.head-meal .col-info .meal-support ul.list-cure li.title:before{display:none;}
.head-meal .col-info .type-people{width:100%; float:left; display:flex; position:relative; background:var(--color-bg); line-height:40px; height:40px;  border-radius:20px; padding:0 5px 0 0;}
.head-meal .col-info .type-people:before{content:'Món dành cho người'; position:absolute; position:absolute; left:20px; top:0; font-size:14px; font-weight:500; color:#fff;} 
.head-meal .col-info .type-people span{position:relative; font-size:14px; font-weight:600; line-height:30px; height:30px; border-radius:15px; background:#fff; padding: 0 25px; margin-left:auto; margin-top:5px; text-align:center; width:180px;}
.head-meal .col-info .balance{background:#0fb364}
.head-meal .col-info .loss-balance{background:#f0134d; margin-bottom:30px; }
.head-meal .col-info .loss-balance:after{content:'Món cho người mất quân bình thì người quân bình vẫn dùng được'; position:absolute; top:100%; left:0; font-size:13px; padding-top:0px; font-style:italic;opacity:.85}
.head-meal .col-info .nav-shareMeal{line-height:32px; position:relative; padding-left:40px; display:block; float:left; font-weight:500; margin: 10px 30px 0 0; }
.head-meal .col-info .nav-shareMeal:before{font-family: "Font Awesome 5";  font-weight: 400; content: "\f1e0"; position:absolute; top:0; left:0; font-size:16px; width:32px; height:32px; line-height:30px; border-radius:5px; background:#fff; text-align:center; color:var(--color-blue); border:1px solid var(--color-border)}
.head-meal .col-info .nav-addWishlist{line-height:32px; position:relative; padding-left:40px; display:block; float:left; font-weight:500; margin: 10px 0px 0 0; }
.head-meal .col-info .nav-addWishlist:before{font-family: "Font Awesome 5";  font-weight: 400; content: "\f004"; position:absolute; top:0; left:0; font-size:16px; width:32px; height:32px; line-height:30px; border-radius:5px; background:#fff; text-align:center; color:var(--color-blue); border:1px solid var(--color-border)}

.body-meal{width:100%; float:left; margin-top:0px; display:flex; padding-bottom:40px;}
.body-meal .col-left{width:450px; padding-right:20px;}
.body-meal .col-left .nav-buy-ingredient{ margin-top:20px; width:100%; background:var(--color-blue); text-align:center; color:#fff; border-radius:7px; display:block; line-height:50px; float:left; font-size:16px; font-weight:600; transition:.3s; box-shadow: inset 0 0 rgba(0,0,0,0)}
.body-meal .col-left .nav-buy-ingredient:hover{box-shadow:inset 0 50px rgba(0,0,0,.15)}
.body-meal .col-right{width:calc(100% - 450px); position:relative;}
.body-meal .col-right .group-info{width:100%; float:left; position:relative; margin-top:20px; background:#fff; border-radius:10px; padding: 20px 25px;}
.body-meal .title{width:100%; float:left; position:relative; font-weight:600; font-size:17px;}


.slideshow-wrapper { max-width: 1200px; width:100%; margin:0; position: relative;  }
.slideshow-wrapper #sync1{border-radius:10px; overflow:hidden;}
.slideshow-wrapper #sync1 .item {color: #FFF;border-radius: 8px;overflow: hidden;}
.slideshow-wrapper #sync1 .owl-controls{margin:0; height:0;}
.slideshow-wrapper #sync1 .owl-controls div{width:30px; height:60px; box-shadow:0 0 0 3px rgba(0,0,0,.2); background:#fff!important }
.slideshow-wrapper #sync1 .owl-controls .owl-prev{position:absolute; top:50%; margin-top:-30px; left:0; border-radius: 0 30px 30px 0; }
.slideshow-wrapper #sync1 .owl-controls .owl-prev:before{justify-content:left}
.slideshow-wrapper #sync1 .owl-controls .owl-next{position:absolute; top:50%; margin-top:-30px; right:0; border-radius: 30px 0 0 30px}
.slideshow-wrapper #sync1 .owl-controls .owl-next:before{justify-content:right}
.slideshow-wrapper .slide-ratio {position: relative;width: 100%;height: 0;padding-bottom: 56.25%;}
.slideshow-wrapper .slide-ratio img, .slideshow-wrapper .slide-ratio iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;border: none;object-fit: cover;}
.slideshow-wrapper .video-box { position: relative; background:#fff;}
.slideshow-wrapper .video-overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 10;background: rgba(0, 0, 0, 0);cursor: pointer;display: flex;align-items: center;justify-content: center;transition: opacity 0.3s ease;}
.slideshow-wrapper .video-overlay:hover .play-trigger {transform: scale(1.1);background: #ff0000;}

/* --- 2. THANH THUMBNAIL FLEXBOX (Giữ nguyên kích thước tự do) --- */
.slideshow-wrapper .thumb-container {width: 100%;overflow-x: auto;margin-top: 15px;scroll-behavior: smooth;-webkit-overflow-scrolling: touch;}
.slideshow-wrapper .thumb-container::-webkit-scrollbar {display: none;}
.slideshow-wrapper .thumb-wrapper {display: flex;gap:0;width: calc(100% + 10px); margin-left:-5px;}
.slideshow-wrapper .thumb-item {width:calc(16.6666666666% - 10px); position:relative; cursor: pointer; margin: 0 5px; border-radius: 7px;overflow: hidden;border: 1px solid var(--color-border);transition: all 0.3s ease;}
.slideshow-wrapper .thumb-item.active {opacity: 1;border-color: var(--color-blue);}
.slideshow-wrapper .thumb-item img {width: 100%;height: 100%;object-fit: cover;display: block; position:absolute; top:0; left:0;}
.slideshow-wrapper .thumb-item .video-box i{width:28px; height:28px; line-height:28px; margin: -21px 0 0 -14px; padding-left:2px; display:block; text-align:center;  position:absolute; top:50%; left:50%; font-size:12px; border:1px solid var(--color-red); border-radius:8px; color:var(--color-red)} 
.slideshow-wrapper .thumb-item .video-box i:after{content:'Video';  font-family: "Momo Trust Sans", sans-serif; font-size:12px; font-weight:500; position:absolute; top:100%; left:-15px; width:calc(100% + 30px); text-align:center; margin-top: 3px; line-height:initial;opacity:.6; color:var(--color) }

/* Giá trị dinh dưỡng */
.nutritional-value{width:100%; background:#fff; border-radius:10px; margin-top:20px; float:left ; display:flex; align-items:center; padding-left:25px; }
.nutritional-value h4{margin:0; padding:0; font-size: 15px; font-weight:900; text-transform:uppercase; color:var(--color-blue)}
.nutritional-value ul{margin:0 0 0 auto; padding:20px 25px; list-style:none; display:flex;}
.nutritional-value ul li{white-space:nowrap; margin-left:20px;}
.nutritional-value ul li label{margin:0; font-weight:500}
.nutritional-value ul li b{background:var(--color-bg);  line-height:32px; display:inline-block; border-radius: 16px; padding:0 10px; margin-left:5px; color:#fff;}
.nutritional-value ul li b:after{content:'gram'; font-weight:normal; font-size:13px; padding-left:3px; opacity:85}
.nutritional-value ul li:first-child b:after{content:'kcal'}
.nutritional-value ul li:first-child b{background:#01833d}
.nutritional-value ul li:nth-child(2) b{background:#8cc81f}
.nutritional-value ul li:nth-child(3) b{background:#fec803}
.nutritional-value ul li:nth-child(4) b{background:#fe8c00}
.nutritional-value ul li:nth-child(5) b{background:#ff3c01}

ul.list-number{width:calc(100% + 20px); margin:5px 0 0 -10px; padding:0; list-style:none; float:left;}
ul.list-number li{width:calc(100% - 20px); margin: 0 10px; float:left; position:relative; line-height:26px; font-size:15px; display:table;padding: 10px 0 10px 25px; border-top:1px solid var(--color-border);}
ul.list-number li:first-child{border:none;}
ul.list-number li:before{text-align:left; position:absolute; left:0; width:25px; opacity:.7 }
ul.list-number li b,
ul.list-number li strong{display:table-cell; vertical-align:middle; position:relative; vertical-align:top; min-width:60px; font-weight:400 }
ul.list-number li i,
ul.list-number li em{display:table-cell; vertical-align:middle; position:relative; text-align:right; font-style:normal; vertical-align:top; font-weight:500; }
ul.list-number li:nth-child(1):before{content:'1.';}
ul.list-number li:nth-child(2):before{content:'2.';}
ul.list-number li:nth-child(3):before{content:'3.';}
ul.list-number li:nth-child(4):before{content:'4.';}
ul.list-number li:nth-child(5):before{content:'5.';}
ul.list-number li:nth-child(6):before{content:'6.';}
ul.list-number li:nth-child(7):before{content:'7.';}
ul.list-number li:nth-child(8):before{content:'8.';}
ul.list-number li:nth-child(9):before{content:'9.';}
ul.list-number li:nth-child(10):before{content:'10.';}
ul.list-number li:nth-child(11):before{content:'11.';}
ul.list-number li:nth-child(12):before{content:'12.';}
ul.list-number li:nth-child(13):before{content:'13.';}
ul.list-number li:nth-child(14):before{content:'14.';}
ul.list-number li:nth-child(15):before{content:'15.';}

ul.list-check{width:100%; margin:0px 0 0 0; padding:0; list-style:none; float:left;}
ul.list-check li{width:100%; float:left; position:relative; font-size:15px; padding:0px 0 0px 35px; margin-top:20px;}
ul.list-check li b,
ul.list-check li strong{color:var(--color-blue); text-transform:uppercase; font-weight:normal; font-size:13px;  background:#fff; position:relative; z-index:2; padding-right:10px; font-weight:500;}
ul.list-check li i,
ul.list-check li em{display:block; width:100%; float:left; font-style:normal; padding-top:6px; line-height:22px;}
ul.list-check li:before{font-family: "Font Awesome 5";font-weight: 400;content: "\f00c";font-size: 12px;border-radius: 50%;width: 20px;height: 20px;line-height: 18px;text-align: center;color: var(--color-blue);border: 1px solid var(--color-blue);display: block;position: absolute;left: 0; top: 1px;}
ul.list-check li:after{content:''; width:calc(100% - 40px); height:1px; background:var(--color-border); position:absolute; top:10px; right:0; }

ul.list-info{width:100%; margin:0px 0 0 0; padding:0; list-style:none; float:left;}
ul.list-info li{width:100%; float:left; position:relative; font-size:15px; color:#000; padding:0px 0 0px 35px; margin-top:14px; line-height:22px;}
ul.list-info li:before{font-family: "Font Awesome 5";font-weight: 300;content: "\f129";font-size: 12px;border-radius: 50%;width: 20px;height: 20px;line-height: 18px;text-align: center;color: var(--color-green);border: 1px solid var(--color-green);display: block;position: absolute;left: 0; top: 1px; padding-left:1px;}


/* Nguyên liệu */
.ingredient{width:100%; margin:20px 0 0 0; float:left; background:#fff; padding:20px 25px 10px 25px; border-radius:10px;}

/* Sơ chế */
.preparation{width:100%; margin:10px 0 0 0; float:left;}

/* Chế biến */
.cooking{width:100%; margin:10px 0 0 0; float:left;}


/* Modal chia sẽ món ngon */
.modal-shareMeal .modal-content{ max-width:380px}
.modal-shareMeal .modal-content span{font-size:13px; opacity:.7}
.modal-shareMeal .modal-content .share-product{clear:both; padding: 10px 0 0 0; width:100%; float:left;}
.modal-shareMeal .modal-content .share-product span{float:left; line-height:36px; font-size:15px; padding-right:15px; font-weight:500;}
.modal-shareMeal .modal-content .share-product a{width:36px; height:36px; line-height:36px; text-align:center; font-size:16px; color:#fff; float:left; margin-right:10px; text-decoration:none; border-radius:5px; box-shadow:inset 0 0 rgba(0,0,0,0); transition:.3s; }
.modal-shareMeal .modal-content .share-product a:hover{box-shadow:inset 0 36px rgba(0,0,0,.2) } 
.modal-shareMeal .modal-content .share-product .nav-facebook{background:#3d568c}
.modal-shareMeal .modal-content .share-product .nav-twitter{background:#219ee7}
.modal-shareMeal .modal-content .share-product .nav-pinterest{background:#e41727}
.modal-shareMeal .modal-content .head-copy{width:100%; float:left; margin-top:15px;}
.modal-shareMeal .modal-content .head-copy i{float:right; font-style:normal; font-size:13px; color:var(--color-green)}
.modal-shareMeal .modal-content .nav-copyURL{width:100%; background:var(--color-bg); border-radius:7px; line-height: 42px; height:42px; padding: 0 50px 0 10px; color:rgba(0,0,0,.75); display:block; float:left; margin: 5px 0 20px 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:13px; position:relative;}
.modal-shareMeal .modal-content .nav-copyURL:after{content:'Copy'; text-transform:uppercase; position:absolute; top:0; right:10px; color:var(--color-blue); font-size:11px; font-weight:bold; line-height:43px; }

/* Modal mua nguyên liệu */
#myModal-ingredient-buy .modal-content .modal-body .wrap-nav a:nth-child(2){display:none!important}
#myModal-ingredient-buy .modal-content .modal-body .wrap-nav a:nth-child(3){flex:2;}